在線實驗動畫庫的時序精度測量研究

張銳，朱銳，許晨晨，梁振

安徽醫科大學 生物醫學工程學院，安徽 合肥 230032

引言

互聯網改變了很多實驗的設計和數據采集的方式，通過互聯網，科研人員可以以更低的實驗成本進行實驗，被試的招募范圍也會更廣泛，并且可以輕松采集到大量的實驗數據，為大數據時代做好鋪墊[1]。如今，很多在線實驗工具和實驗平臺便是以此為目的設計的，例如Amazon’s Mechanical Turk和Qualtrics兩個平臺便是以眾包的形式供科研人員完成在線實驗[2-4]。實驗人員可以通過平臺上簡單的實驗模板，自定義接口來設計實驗。同時通過平臺招募被試來完成實驗并收集數據。

目前，這些在線實驗平臺均以模板輔助設計，自定義實驗的功能較弱，無法滿足在線實驗日益增長的復雜性需求。因此，Two.js、JsPsych、QRTEngine等用來測量反應時的在線實驗工具包陸續被開發出來[2,5]。其中Two.js廣泛應用于多種場合：SVG、Canvas、WebGL，其還包含內置動畫循環，可搭配其他動畫庫。但是隨著在線實驗的高速發展，暴露出在線實驗的許多問題[1]，其中時序精度最受關注。時序精度低會導致刺激卡頓，測量誤差大，這對于注意、反應時等實驗是無法接受的。很多在線實驗無法重復出本地實驗的結果是因為時序精度低導致的[6]。Plant等[7-8]指出如今很多實驗是無法重復的，其主要原因是實驗的時序精度不夠高。同時很多實驗人員所使用的腳本等內部時序測量軟件受CPU占用率等各種環境因素的影響，使其測量的結果并不準確，如Qualtrics的響應時間引擎（QRTEngine）是一個在線實驗發生器和傳輸系統，但并沒有使用外部計時方法來檢查時序精度[2,7]，這是極其不嚴謹的，在其他科學領域，這也同樣是不可接受的。同時隨著服務器負載的增加，實驗的時序精度也會降低，這就導致了在不同時間進行實驗可能會由于在線人數的不同導致實驗誤差的出現[9-15]。高正國[13]于在線實驗平臺的時序精度測量中發現，Request Animation Frame（Raf）的技術方案可以獲得亞毫秒的時序精度,基本上滿足高精度在線實驗的時序要求。Lukács等[16]針對Raf進行的評估發現，Raf的循環調用結合改變圖像的visibility或者opacity，比在Canvas元素上繪制的精度更高。Bridges等[17]于2020年比較了一系列軟件包在不同的操作系統中的時序精度，得出在視覺刺激方面macOS的精度最差、Ubuntu精度略高于Windows的結論。

心理學、社會科學等領域的網絡研究中，需要借助不同的網絡動畫庫，通過Web瀏覽器來實現各種實驗所需要的刺激。Raf的技術方案雖然可以達到亞毫秒的時序精度，但是動畫庫封裝了各種方法更加便利地實現各種實驗的需求，本文旨在測量常見的動畫庫Two.js的時序精度，分析所得的數據結果，判斷其時序精度能否滿足各種實驗的需求，以期為實驗人員提供選擇動畫庫提供參考與數據支撐。

1 材料與方法

1.1 實驗刺激

利用Two.js 提供的原生繪圖方法，繪制黑、白色塊以及正弦光柵，利用其內部提供的方法級定時器設計閃爍刺激及光柵刺激實驗。

（1）閃爍刺激。閃爍視覺刺激通過頁面由黑至白再到黑反復等間隔替換來實現， 通過在瀏覽器上繪制了大小為400×400像素的黑白方塊，并在兩個預設時間內分別以33.33 ms和266.67 ms循環運行。為豐富實驗數據的多樣性，用于實現閃爍的方式分為兩組：add組和fill組。add組是計時開始時繪制一個白色矩形界面，使用延時功能后，刪除原先的界面，并重新繪制一個黑色的矩形界面，以此實現閃爍的視覺刺激。fill組則在計時開始時繪制一個白色矩形界面，使用延時功能后，改變原先界面的顏色為黑色，交替反復運行，實現閃爍刺激。對照實驗同樣分為兩組，分別為比較使用Raf函數與Two.js計時程序所取得的實驗數據，以及同樣的計時方式在不同動畫引擎下取得的實驗結果。

（2）光柵刺激。實驗在瀏覽器上繪制了512×1024像素的光柵，顯示器刷新頻率為60 Hz，并根據每幀上移4格的順序重復繪制實現光柵的矩陣，循環運行。為保證實驗的精確性，共設立了2種對照實驗：① 在相同的動畫引擎下使用不同的延時方法，分別使用Raf函數調用計算機自身的計時器以及使用Two.js動畫庫內封裝的計時功能；②在不同的動畫引擎下使用相同的延時方法。

1.2 實驗運行環境

PHL 328P6V的顯示器；計算機系統是Microsoft Windows 10；操作系統為64位；處理器是Intel I. Core I i7-8700；顯示適配器位NVDIA Quadro P2000；在線實驗運行的瀏覽器平臺為Chrome（64位，版本號為87.0.4280），瀏覽器的相關優先級設置為“實時”；顯示器刷新頻率為60 Hz。

1.3 數組采集系統

使用光敏三極管（PT908）收集閃爍和光柵的光信號，再使用比較器將采集的模擬信號轉換為數字信號傳輸到邏輯分析儀（Saleae logic Pro8，美國）。光電轉換電壓為黑屏為5 V、白屏為0 V，比較器參考電壓為2.13 V。邏輯分析儀對應的版本號為1.2.18，采樣速度為125 kS/s，光柵實驗的采樣時間為1500 s，2 幀閃爍實驗的采樣時間為350 s，16 幀閃爍實驗的采樣時間為2700 s。

2 結果

2.1 光柵實驗

如圖1a所示，Raf的周期分布于266.6～268.6 ms，主要分布于266.6 ms，Two.js的周期主要分布于266.6～282.6 ms，主要分布于266.6 ms，可以看到，Canvas引擎下Two.js和Raf的周期分布基本保持一致；如圖1b所示， Raf函數的光柵周期集中分布266.6 ms，而Two.js采集的數據范圍在266.6～282.6 ms，集中分布于266.6 ms，少量分布于268.6 ms和282.6 ms；如圖1c所示，Raf函數的光柵周期集中分布在264.6～268.6 ms，而Two.js組周期范圍分布于264.6～268.6 ms，Raf函數和Two.js組的周期分布都主要分布于266.6 ms，極少量分布于264.6～268.6 ms。對比各組實驗結果可以發現，無論是在哪一種動畫引擎下，Two.js動畫庫實現的光柵刺激點的周期的分布水平與Raf下的周期分布基本吻合，都集中分布于266.6 ms，極少量分布于其他周期，光柵實驗下都可以達到毫秒級的時序精度。

圖1 Two.js和調用Raf函數在不同動畫引擎下的光柵周期分布

根據表 1 所提供的方差等數字特征進行分析，可以發現，即使在不同的動畫引擎下，使用 Two.js 動畫庫封裝的計時功能函數與通過Raf 調用計算機自身的延時器得到的時序精度基本相同，方差數據所呈現的變化幅度也在可接受的范圍內，不存在明顯的精度偏差。因此，在針對光柵的實驗中，Two.js動畫庫的時序精度可以達到傳統實驗室研究的精度要求，且在使用SVG、WebGL動畫引擎時，甚至可以做到與調用Raf函數實現動態刺激的時序精度基本吻合。

表1 Two.js和調用Raf函數在不同動畫引擎下的光柵周期數據特征分析

2.2 閃爍實驗

閃爍實驗在實驗環境的顯示配置下進行，顯示器的刷新頻率為60 Hz。閃爍的頻率分別為2幀（33.33 ms）與16幀（266.67 ms），2幀的實驗結果如下：

（1）add組的實驗數據如圖2所示。圖2a顯示，在Canvas引擎下，Raf函數組的閃爍刺激點周期分布于66.7 ms；使用Two.js動畫庫封裝的計時程序時，閃爍刺激點的周期范圍在63.5～66.7 ms，集中分布于66.7 ms，極少量分布于63.5 ms。圖2b顯示，在SVG引擎下，Raf函數組和Two.js組閃爍刺激點的周期范圍均分布在66.7 ms。圖2c顯示，在 WebGL動畫引擎下，同樣Raf函數組和Two.js組的閃爍刺激點周期范圍都在66.7 ms。

對比圖2 的時序數據，可以發現在3種動畫引擎下，調用Raf函數實現延時功能時，閃爍刺激點的周期分布在66.7 ms 周圍，且只有極小的波動。使用 Two.js時，所產生的時序數據結果與Raf 組基本吻合，結合中位數、方差等數字特征來對實驗結果進行進一步分析，結果如表2所示。對比具體數據可以發現，在高要求時序精度的實驗中，使用add的方式實現閃爍時，Raf函數組和Two.js組的時序精度都可以達到 0.1 ms。

表2 Two.js和調用Raf函數在不同動畫引擎下的2幀add組閃爍周期數據特征分析

圖2 Two.js和調用Raf函數在不同動畫引擎下的2幀add組閃爍周期分布

（2）改變閃爍的實現方式，fill組的2幀周期閃爍實驗的結果如圖3所示。Canvas動畫引擎下，兩種延時方式下的閃爍刺激點的周期分布如圖3a所示，Raf組和Two.js的周期范圍均在66.7 ms附近。SVG動畫引擎如圖3b所示，Raf函數組刺激點極少量分布在66.3 ms附近，集中分布在66.7 ms；Two.js組刺激點的周期范圍分布在66.7 ms附近。而由WebGL引擎下的實驗測量結果可知（圖3c），Raf 組刺激點周期分布在63.1～66.7 ms，極少量分布在63.1～66.3 ms，主要分布于66.7 ms；Two.js組周期跨度為63.5～66.7 ms，集中分布在66.7 ms。結合周期分布圖分析可知，在使用fill的方式實現閃爍刺激時，Two.js組的刺激點周期分布范圍較Raf組更加穩定，且周期集中位于66.7 ms周圍，甚至比Raf組更加精確。

圖3 Two.js和調用Raf函數在不同動畫引擎下的2幀fill組閃爍周期分布

由表3的其數字特征可知，無論在哪種動畫引擎下，Two.js動畫庫的時序精度與調用 Raf函數時的時序精度基本持平， 甚至在SVG和WebGL動畫引擎下，Two.js的時序精度能夠高于Raf應用于Web瀏覽器時的時序精度，周期波動要小于Raf組，并且不會產生丟幀現象。

表3 Two.js和調用Raf函數在不同動畫引擎下的2幀fill閃爍周期數據特征分析

完成2幀閃爍視覺刺激的時序數據測量之后，本實驗還設置了16幀的閃爍實驗，測量方法與2幀類似，分為add組與fill：

（1）16幀add組實驗結果如圖4所示。Canvas動畫引擎下如圖4a所示，Raf組閃爍刺激點周期分布在518.3～551.3 ms，集中分布在533.3 ms，極少量分布在518.3和551.3 ms；而Two.js 組周期分布于533.3 ms附近。觀察圖4b中SVG 動畫引擎下的時序精度數據，可知Raf組周期分布于533.3 ms附近，Two.js組周期分布基本同Raf組相同。圖4c中WebGL動態引擎下，兩組的周期都分布于533.3 ms附近。

圖4 Two.js和調用Raf函數在不同動畫引擎下的16幀add組閃爍周期分布

由圖4可知，在3種動畫引擎下，Two.js組的周期跨度與集中分布極為穩定，刺激點周期的集中分布始終與Raf組的相關數據吻合，甚至在Canvas引擎下，比Raf組的數據更為穩定，說明在16幀的閃爍刺激下，Two.js動畫庫的時序精度能夠達到實驗要求。結合表4時序數據的數字特征分析，該結論更為明顯。

表4 Two.js和調用Raf函數在不同動畫引擎下的16幀add閃爍周期數據特征分析

（2）改變閃爍刺激的實現方式，16幀下fill組的時序數據如圖5所示。Canvas動畫引擎下，Raf函數組和Two.js組刺激點周期都分布于533.3 ms；SVG動畫引擎下如圖5b所示，兩種延時程序的時序精度周期范圍相同，且刺激點周期的集中分布也相吻合，Two.js動畫庫的時序精度能夠與Raf函數持平；使用WebGL動畫引擎時兩種延時方式周期分布如圖5c所示，Raf函數組和Two.js組也都分布于533.3 ms。3種引擎下，Two.js的周期分布基本與Raf函數組的周期分布相同，可見時序精度與穩定性能夠達到實驗要求。

圖5 Two.js和調用Raf函數在不同動畫引擎下的16幀fill組閃爍周期分布

結合表5的數據分析可知，在3種動畫引擎下，使用fill方式實現16幀的閃爍刺激可以在時序精度、波動程度上與Raf函數組差距不大，整體上并無較大的誤差出現，可見Two.js動畫庫總體來說，可以滿足實驗時序精度的要求。

表5 Two.js和調用Raf函數在不同動畫引擎下的16幀fill閃爍周期數據特征分析

3 討論

基于網絡的在線研究已經逐漸成為臨床心理學、社會科學、行為科學等領域的一種廣為流行的方法，替代了傳統的實驗室研究。然而，在線研究的精確性在學術圈仍然廣受爭議，諸多學者質疑在線研究的時序精度能否滿足各類實驗的要求。在此背景下，本實驗旨在使用Two.js動畫庫封裝的函數，通過Web瀏覽器實現視覺動態刺激，借助硬件設備測量產生的數據結果，將其傳輸至計算機進行處理，畫出相應的頻數分布圖，并進行相應的數據分析，評估Two.js動畫庫是否具有毫秒級的時序精度，為實驗人員選擇在線研究實驗材料的實現方式提供實驗基礎與數據支撐。

為豐富數據結果，并使實驗結果更具有說服力，實驗設計了分別在Canvas、WebGL、SVG 3種動畫引擎下實現光柵刺激與閃爍刺激，并在閃爍實驗中，采用填充與替換兩種不同的方式實現刺激，分別測量數據結果，并以調用Raf函數為動畫計時作為對照組，測量并比對實驗結果。

由所測實驗數據結果可知，在光柵刺激實驗中，3種動畫引擎下，Two.js動畫庫與調用Raf函數時所呈現的時序精度相一致，且沒有較大波動出現。而在2幀的閃爍實驗下，使用替換的實現方式時，Two.js動畫庫和Raf函數呈現的時序精度大致相同；改變實現方式后，Two.js動畫庫的時序精度變得更精確，甚至在 SVG動畫引擎下，能夠比Raf函數的時序精度更高。在16幀閃爍刺激實驗中，Two.js動畫庫的時序精度與Raf函數基本一致，即便存在差異，也能維持在毫秒級。

4 結論

本研究使用外部測量方法測量并分析了Canvas、SVG、WebGL這3種動畫引擎下的Two.js的時序精度，對比已經證實可以達到毫秒級時序精度的Raf函數，分別設計了光柵刺激和閃爍刺激的實驗，得出了Two.js的時序精度可以達到毫秒級的結論，Two.js動畫庫的時序精度能夠滿足個別實驗對于時序精度的高要求。因此行為科學等領域的網絡在線研究選擇Two.js動畫庫來實現視覺刺激時，實驗完全可以重復進行，獲得的實驗結果具有一定的說服力。后續將繼續測量分析更多的動畫庫的時序精度，如zrender.js，驗證其是否可以達到傳統實驗室的時序精度。在網絡技術不斷發展的今天，類似的完整封裝的動畫庫也將越來越多，功能也會越來越豐富，某些領域內，網絡研究替代傳統的實驗室研究將會成為一種必然的趨勢。