从0开发3D引擎（四）：搭建测试环境

时间 2020-01-24

标签开发 3d 引擎搭建测试环境繁體版

原文原文链接

目录javascript

你们好，本文介绍了3D引擎的测试方法，搭建了本地的测试环境。html

上一篇博文

从0开发3D引擎（三）：搭建开发环境前端

下一篇博文

从0开发3D引擎（五）：函数式编程及其在引擎中的应用java

了解自动化测试

对于引擎开发这种复杂、长期的项目，为了减小bug，提高长期的开发效率，自动化测试必不可少。在咱们的Wonder.js引擎中，包括了本节介绍的3种自动化测试，测试覆盖率达到了95%。git

本系列为了节省篇幅，不进行自动化测试。所以本节只进行简单的介绍，不给出实际的案例，读者能够到Wonder.js->test/目录下查看自动化测试实例。github

单元测试

咱们须要写测试用例对单个函数进行单元测试。web

搭建环境
使用jest做为测试框架，sinon进行stub。
若是读者想了解stub的概念，能够参考我对Stub和Mock的理解chrome

由于不能直接使用js库，须要写对应的FFI（相似于typescript的d.ts文件）才能在Reason中被调用，因此咱们可使用bs-jest和Wonder的Wonder-bs-sinon做为FFItypescript

集成测试

相对于单元测试，集成测试的测试目标变为某个特性，该特性跨越多个函数或多个模块。编程

搭建环境
与单元测试的环境同样。

目录结构
能够在test/unit/目录下写单元测试用例，而在test/integration/目录下写集成测试用例。

端对端测试

也称为e2e测试，包括了“渲染测试”和“性能测试”。它们都须要安装puppeteer，经过chrome内核渲染3D场景来进行测试。

渲染测试

渲染测试是针对特定的场景（如只有一个模型的场景，或者只有一个光源的场景）进行测试，从而保证渲染的正确性。

测试步骤为：
一、预先渲染一张正确图片
二、使用引擎渲染一张当前图片
三、逐个像素地比较二者，若是95%以上的像素都相同，则测试经过；不然测试失败

性能测试

性能测试是针对极端场景（如5000个box）进行测试，从而保证花费的时间和占用的内存大小符合要求。

测试步骤为：
一、预先准备基准数据
使用引擎运行场景屡次，取平均值，记录到json文件中
二、使用引擎运行场景屡次（少于“准备基准数据”的运行次数），取平均值，获得当前数据
三、比较二者的花费的时间和占用的内存大小，若是在偏差范围内，则测试经过；不然测试失败

注意事项：
只有在本地测试时，保持基准数据不变。若是在云端（如在push到Github仓库时使用CI工具-travis进行测试）或者其它环境（如换一台电脑进行测试）进行性能测试，须要在每次测试时更新基准数据（由于不一样的环境，性能不同，因此对应的基准数据也不同）。

经过打印日志来调试

有如下的缘由使得能够在单元测试和集成测试中经过打印日志来进行调试：

由于在自动化测试中打开watch，代码修改后可以当即刷新，因此可以即时看到打印的结果，测试很方便
由于在函数式编程中，函数为纯函数（Reason也容许非纯），没有状态，因此咱们能够经过打印函数的输入和输出，来验证该函数是否正确

了解运行测试

本系列经过在Chrome浏览器中进行运行测试来验证程序的正确性。

经过如下的方式进行运行测试：

断点调试

由于浏览器运行的是Reason编译后的js代码，因此咱们能够在浏览器的控制台->Sources中经过断点来调试js代码

具体能够参考：
使用断点暂停代码

经过Spector.js测试WebGL

Spector.js调试预览：

Spector.js能查看一帧中WebGL的调用状况、shader代码和WebGL的状态，它支持WebGL 1.0或WebGL 2.0，也支持WebGL 1.0的VAO等扩展。

另外，Spector.js支持多个canvas，能查看指定的canvas对应的WebGL信息。这对于调试编辑器（如咱们的Wonder-Editor在线编辑器）颇有用。由于编辑器有多个canvas（如一个canvas进行主场景绘制，另外一个canvas以材质球的方式显示单个material资产的效果），而咱们但愿分别调试从每一个canvas中取得上下文的WebGL。

Spector.js能够在Chrome的扩展中安装，详情请见官方Github

经过log调试Shader

本系列经过在fragment shader中，将变量做为输出的颜色，来调试Shader的变量值。

更多能够参考：

调试OpenGL -> 调试着色器输出

OpenGL shader如何调试？

OpenGL ES 2.0 Shader 调试新思路(一): 改变提问方式

移动端测试

咱们经过下面两种方法进行测试：

模拟测试

咱们能够在Chrome浏览器上，点击控制台->Toggle Device Toolbar，打开用于模拟移动设备视口的界面。

本系列主要用该方法测试引擎对于移动端touch事件的支持。

详细的介绍参考：
使用 Chrome DevTools 中的 Device Mode 模拟移动设备

真机测试

具体步骤以下：
一、在测试html页面中引入vConsole库
从而能够经过打印日志的方式，在手机上查看错误和日志信息
vConsole介绍参考：
前端开发 - 在手机上调试利器vConsole
二、把测试页面push到测试环境的服务器上（如使用Github Pages搭建的服务器）
三、把测试页面的访问地址转换为二维码
如使用草料二维码在线转换
四、用测试手机的微信扫该二维码，运行测试页面，验证渲染结果，查看错误和日志信息

了解性能测试

由于本系列开发的引擎重视性能，因此会经过手动的性能测试，来指导引擎优化。

性能测试的指标包括时间开销和内存开销，下面分别分析：

测试时间开销

使用Chrome DevTools的Javascript Profiler

经过在测试页面记录profile，查看每一个函数的时间开销，从而定位到热点函数进行优化。

使用Chrome DevTools的Performance

经过时间线Timeline，能够查看CPU端各个线程和GPU的执行顺序和热点函数的时间开销。

本系列主要用该方法测试在多线程中，每一个线程的执行顺序和性能开销

使用Chrome DevTools的NetWork

查看各个资源的加载时间和顺序。

本系列用该方法测试在“使用函数式反应式编程的流来异步加载 js、二进制文件等资源”时，各个资源的加载顺序是否正确。

使用Performance.now

使用该方法打印某段逻辑的时间开销，多用于自动化测试->端对端测试—>性能测试。

本系列在使用profile定位到热点函数后，会使用该方法肯定具体代码的时间开销。经过比较优化前和优化后的时间开销，来评估优化的效果。

示例代码为：

var n1 = performance.now();

执行某些逻辑


var n2 = performance.now();

//打印逻辑的时间开销（ms为单位）
console.log(n2 - n1);

使用Console.profile

相对于Chrome DevTools的Javascript Profiler，该方法能够测试某一段逻辑的profile，而不是整个页面的profile，粒度更小，更加可控。

（图来自Chrome 控制台console的用法（学了以后对于调试js但是大大有用的哦））

测试内存开销

使用Chrome DevTools的Memory

本系列对这个工具的应用：
使用Allocation sampling，定位内存占用的热点函数；
使用Allocation instrumentation on timeline来比较每一帧内存开销的增加状况，从而肯定是否有内存泄漏。若是有内存泄漏，则经过Heap snapshot，记录多个内存快照并进行比较，定位到具体是哪些地方增长了内存。

相关资料可参考：
解决内存问题

搭建本地测试环境

运行测试和性能测试不只须要使用Chrome浏览器的控制台功能，还须要：
一、安装Spector.js
Spector.js能够在Chrome的扩展中安装二、进行移动端测试时，须要在测试页面中引入vConsole库，并使用Github Pages搭建测试服务器