在线实验动画库的时序精度测量研究

张锐，朱锐，许晨晨，梁振

安徽医科大学 生物医学工程学院，安徽 合肥 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，验证其是否可以达到传统实验室的时序精度。在网络技术不断发展的今天，类似的完整封装的动画库也将越来越多，功能也会越来越丰富，某些领域内，网络研究替代传统的实验室研究将会成为一种必然的趋势。