WebGL作为HTML5里面一项重要的技术，能够让Web开发者开发精彩的3D游戏和应用，已经在Web Client端得到了广泛的应用，例如著名的Google Maps， 基于WebGL的游戏引擎Unity。由于WebGL程序一般带有复杂的渲染逻辑，那么烦恼也随之而来，即如何对这些WebGL程序包括浏览器本身的实现进行Debug和性能调优成为Web和浏览器开发者的一项重要工作。
我们在浏览器开发工作中发现对WebGL程序进行调试的工具很少，已知的只有针对Chrome的插件WebGL Inspector，能够进行简单的功能性的调试，比如调试每一步的渲染是否正确。然而对于一个遇到性能瓶颈的WebGL程序，想要弄清楚是程序本身的问题还是浏览器本身的实现不够优秀，WebGL Inspector几乎帮不上忙。为了帮助我们解决此类问题，尤其当相关的WebGL应用很多的时候，我们另辟蹊径，开发了一种名叫WebGL2Native的工具。WebGL2Native能够把WebGL的程序转换为基于OpenGL ES 2.0的本地应用程序。有了这个本地应用程序，我们可以：1. 利用现在的成熟的OpenGL性能调试工具如Intel的GPA，Qualcomm的Adreno GPU Profiler等来进行调试。2. 由于转换出来的代码排除掉了浏览器本身的实现，只包含WebGL程序的代码，我们可以通过对比本地应用和浏览器的WebGL应用，快速地确定造成问题的原因是来自WebGL代码本身还是浏览器的内部实现。如果果真是WebGL代码有问题，那么我们可以对本地应用利用成熟的图形工具套件进一步分析找到造成问题的根本原因。
下面是WebGL2Native的框架示意图。 WebGL程序运行在Host上，所有的Http/Https请求发送给Proxy服务器，Proxy服务器拿到请求的资源后通过修改Response注入JavaScript代码并发送给Host上面的WebGL程序。注入的JavaScript代码将负责收集WebGL运行的所有命令和参数并最终发送给Proxy服务器，由Proxy服务器进行转换成基于OpenGL ES 2.0的本地代码，最后打包成本地应用。在Android平台上，那就是一个应用程序安装包。
通过WebGL2Native这个工具，我们曲线实现了对WebGL程序的问题分析，比如性能调试，并在我们的工作中解决了一些实际问题：比如发现了Chrome浏览器对WebGL应用抗锯齿效果的实现在不同平台不尽相同，我们顺势针对某些特定平台利用平台特性进行了特异的优化，极大的提高了其抗锯齿效果在特定平台上的性能。
作者简介：
杨进
英特尔亚太研发有限公司Web技术和优化中心软件工程师，
专注于浏览器渲染方面的性能分析和优化。