根据微信官方文档说明：小程序的RenderingContext支持2d和webgl。2d部分支持HTML The 2D rendering context的大部分属性，方法。webgl部分支持 WebGL 1.0的所有属性、方法、常量。
准备
初步想了下，由于现在小程序的架构限制，有些值得注意的地方。
- 移植
移植的时候需要进行一些API的适配。官方提供了工具。
- 资源
由于大小限制，资源需要做网络加载。这需要访问本地文件系统的能力和访问网络的能力。分别对应于FileSystemManager和DownloadTask相关API。在这基础之上需要有个资源管理功能。但是对于游戏来说，音乐，UI，模型等等资源，体积实在不小，一打开，十几MB流量可能就没了。
- 调试
开发者工具提供了预览功能。扫码打开小游戏开发辅助，右上角菜单，可以打开调试模式，性能监控监控面板。vConsole，可以显示日志，系统信息等。性能监控面板可以显示一些基本信息。总体来说调试还算方便。Chrome对WebGL支持的太好了，很多东西只有在手机上才会暴露问题，所以多预览还是很必要的。
- 网络
可以使用WebSocket。用户登陆需要调用微信提供的接口。
- 性能
给予three.js写了个测试。将一个性能测试移植到小程序上（没有调整相机，应该是少于5000个suzanne），大概稳定在60fps左右（一加3T手机）。这里是源代码。
微信图片_20171230222454.jpg
- 优化
有两个想法：
- 使用asm.js这类的工具。脱离小程序开发工具。和Unity一样，给小程序导出项目，再打包。这样不管是编译成js代码，还是WebAssembly，都能得到很大的性能提升。而且如果哪天小程序支持WebAssembly了，痛苦也会小很多。
- 编写一套专门的引擎。这样方便调试，全部掌握再手中。但是问题是成本太大，而且
开发
想试水，就要写点东西。写东西就要用到框架，基础库一类。大概找了找，非常多。主要来自：WebGL-frameworks-libraries和html5gameengine.com，总结下其中了解的几个。
对于开发游戏来说，这个是一个库。缺少一些框架级别的东西，例如相关的可视化工具。如果牛逼，可以自己封一套。
导出为WebGL项目。可以不进行js压缩来移植。需要修改UnityLoader.js的代码。可取之处在于：使用了asm.js（WebAssembly实验性支持）；相关内容非常成熟；相关工具非常全面（骨骼，开发插件等）。
写这个记录的时候（1.7.14beta）使用TypeScript和JavaScript便宜默认的小游戏项目代码后，使用微信开发者工具无法直接运行（bin/game.js竟然有个require("./项目手动发布为单个JS(参考工具webpack).js");这种代码。不过很好改，只能说没准备好那两种语言。ActionScript版，编译本默认小程序项目代码后可用微信开发者工具直接运行。
默认的例子是一套UI例子，没有3D场景，等有时间进一步测试。
初步来看，毕竟是专注H5游戏，应该不差
当然，还有Egret，其他一些开发框架环境，这里就不多说了
其他
three.js
在检测webgl版本的时候，会发生错误。因为内部使用的代码会引发错误。
var version = parseFloat( /^WebGL\ ([0-9])/.exec( gl.getParameter( gl.VERSION ) )[ 1 ] )
我在测试的时候，gl.getParameter( gl.VERSION )返回的是OpenGL的版本，而不是WebGL的版本，导致了运行时错误。
将version直接赋值为1即可，因为官方指明标准是WebGL 1.0。
网友评论