「絲綢」專案 (上)

許多人在過去幾個月來努力進行「絲綢 (Silk)」專案,期能跨瀏覽器來提升作業的順暢度,就如同絲綢一樣滑順。「絲綢」專案其實和「Butter for Android」專案極為相似,且已有部分登上了 Firefox OS。「絲綢」主要可達到以下三項:

  1. 使用硬體垂直同步訊號 (VSync) 來同步繪圖的時間點 (Align Painting)
  2. 根據硬體 VSync 來對裝置的觸控輸入事件進行重新取樣
  3. 透過硬體 VSync 同步圖像合成的時機 (Align composite)

 

什麼是 VSync?為何 VSync 為何如此重要?

只要硬體顯示器在螢幕上顯示新的幀像時,就會發生垂直同步 (Vertical synchronization,VSync)。一般須透過特定硬體才能設定此頻率。但美國的主流顯示器都是 1 秒 60 次的頻率,或換算為每次 16.6 ms (millisecond,毫秒),也就是我們常聽到的每秒 60 幅幀像 (畫面更新率 60 FPS),由硬體顯示器每次更新\重新整理一幅幀像。而實際上,不論軟體能產生幾幅幀像,硬體顯示器都固定每秒顯示最多 60 幅幀像。

目前 Firefox 即設定為每秒 60 幀,也就是當我們使用軟體計時器 (Software Timer) 來產生 VSync 時,會每 16.6 ms 進行一次圖像繪製工作。但軟體使用軟體計時器時,往往 a). 會受 CPU 排程影響,不如硬體 VSync 一樣精準,且 b). 可能在不適當的時間觸發圖像合成,導致畫面不平順。

相較於硬體 VSync 計時器,為什麼用軟體計時器會容易得到不平順的畫面呢?首先,大多數的動畫都是參照計時器所產生的時間戳記,去更新動畫的位置。以 requestAnimationFrame的例子來說,我們會在每次的畫面需要更新時,收到一個時間戳記 (Timestamp)。我們就使用這個時間戳記來決定動畫要播放的位置。當我們使用軟體計時器時,因為受 CPU 排程的影響,我們收到的時間戳記間隔並不是非常一致,這就會讓我們覺得動畫播放的不平順。下圖顯示使用軟體\硬體 VSync 計時器對動畫的影響:

timer

看到沒有?相較於軟體計時器,硬體的 VSync 能提供非常穩定的時間戳記,因而得到更平順的動畫,解決了上述「使用軟體計時器易受 CPU 排程影響」的缺點。

接著又要如何解決「可能在相對於 VSync 不適當的時間進行繪製」的問題呢?不論我們在什麼時間點進行繪製,螢幕都是用自己獨立的 VSync 頻率去更新畫面。如果我們的繪圖流程能在下一個 VSync 訊號之前順利產生一幅幀像,則螢幕就會顯示新繪製的內容。但如果沒辦法在下一個 VSync 之前順利產生圖像,那麼螢幕就只能繼續顯示舊的內容,如此一來就帶給人畫面不流暢的感覺。因為我們不能保證軟體計時器的觸發時機,所以在使用軟體計時器時,就可能會在極接近下個 VSync 時才開始繪製目前所應顯示的畫面,這個畫面往往無法在下個VSync 前完成,只能等到下下個 VSync 才能在螢幕上顯示。看看下圖:

 

frames

我們在時間 0 開始產生幀像。這裡先假設所有幀像都需要耗時 10 ms。因為我們必須在下一個硬體 VSync 發生之前完成一幅幀像,所以最多只能花費 16.6 ms (即所謂的 Frame budget) 處理繪製,等於是下個 VSync 之前的 6 ms 會完成 Frame 1 (time t=16 ms)。此理想狀態下,螢幕有足夠時間更新繪製的內容。

我們接著來看使用軟體計時器的 Frame 2。因為軟體計時器受到 CPU 的排程影響較大,所以可能會在下一個 VSync 之前的 9 ms 才開始產生幀像 (time t=32)。因為幀像產生時間為 10 ms,所以會在下一個 VSync 之後的 1 ms 才產生幀像完畢。也就是說 VSync 2 (t=32) 不會顯示任何新幀像,所以螢幕只能繼續顯示上一幅幀像。另外又因為卡到螢幕硬體 VSync 更新時間,所以新幀像要等到 VSync 3 (t=48) 才會顯示出來。因為我們沒有在每個 VSync 前顯示新的畫面,會讓我們覺得畫面不平順,而且這種情況會讓畫面多延遲一個 VSync 才顯示出來,對遊戲也相當不利。

使用 VSync 來當計時器能得到非常平穩的時間間隔,並獲得最多繪製時間來產生新的幀像,進而解決此兩個問題。在知道 VSync 的作用之後,就可以繼續說明絲綢專案並了解其將如何達到更順暢的 Firefox 使用經驗。

 

看到這裡,你是否對時有所聞的「FPS」有深一層的認識了呢?而對遊戲的玩家與開發者來說,畫面更新率更是重要的遊戲效能指標之一。可別錯過《「絲綢」專案 (下)》,進一步了解繪圖流程!

 

 

原文連結:Project Silk

 

 

您可能也會喜歡

目前找不到相關文章

共 3 則讀者回應

  1. 參照: 「絲綢」專案 (下) | 部落格 | Mozilla Taiwan

  2. 參照: Firefox OS 動畫原力的黑暗面 | 部落格 | Mozilla Taiwan

  3. 參照: Trainspotting:Firefox 39 | 部落格 | Mozilla Taiwan

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *