定了，2018年是微信小游戏的WebGL元年，张师傅带你零基础上车

Posted 2021-04-25 黑客与画家

2017 年的最后一个工作日，微信带来了一个深水炸弹——小游戏。我们看下首批发布的 15 款小游戏，它们用了 cocos、laya、phaser 和 three.js 等 WebGL 引擎。

1 欢乐斗地主 cocos

2 四川麻将 cocos

3 天天德州 cocos

4 欢乐消消消 cocos

5 腾讯中国象棋 cocos

6 爱消除乐园 cocos

7 欢乐坦克大战 cocos

8 保卫萝卜迅玩版 cocos

9 全民大乐斗 laya

10 贵州麻将 laya

11 广东麻将 laya

12 悦动音符 laya

13 大家来找茬腾讯版 phaser

14 星途WeGoing three.js

15 跳一跳 three.js

喊了好几年的 WebGL 大潮这次终于来了！WebGL 游戏是 H5 游戏的一种特例，相比普通 H5 游戏，它更好得利用 GPU 进行画面的渲染。

那么问题来了，WebGL 这班车零基础怎么赶得上？

WebGL 与 OpenGL 之间的关系可比 javascript 与 Java 的关系更接近。

WebGL 1.0 是以 OpenGL ES 2.0 为蓝本设计的，OpenGL ES 2.0 则是以 OpenGL 2.0 为蓝本设计的。所以，别看表面上跑的是 JavaScript，真正运行的时候还是跑在 OpenGL 驱动上的（Windows平台是例外，可以使用 Direct3D 9 / 11 来模拟的 WebGL）。

你要想真正学会 WebGL，必须得懂 OpenGL 和图形学，以及 shader 语言。
当然了，由于 Three.js 这类游戏引擎的存在，即便你不懂 WebGL，也可以快速地进行开发，但是，一旦你遇到意料之外的问题了，还是得回过头来看 WebGL，甚至看 OpenGL 红宝书。

学会 OpenGL 之后，再花一天时间学下 JavaScript 就可以上手开发了。

如果要学习传统的 OpenGL，那么脱不了三本书：

• 红宝书 OpenGL Programming Guide，出到第八版
  

• 蓝宝书 OpenGL SuperBible，出到第七版
  

• 橙宝书 OpenGL Shading Language，出到第三版

但是，这三本我通通不推荐给初学者，各有致命缺点。我推荐以下两本，可混合着看。

最后放出真实的 WebGL 函数调用记录，这是我通过 Chrome Developer Tools / Canvas Profile 得到的。看完后如果你觉得一头雾水那就对了，这就是为什么即便 OpenGL 的下一代 Vulkan 都发布了，而我们却依然还要学习 OpenGL 的原因。

disableVertexAttribArray(1)
disable(BLEND)
enable(SAMPLE_ALPHA_TO_COVERAGE)
depthMask(1)
disable(BLEND)
useProgram(WebGLProgram@1)
activeTexture(TEXTURE0)
bindTexture(TEXTURE_2D, WebGLTexture@1)
uniform1i(WebGLUniformLocation@4, 0)
bindBuffer(ARRAY_BUFFER, WebGLBuffer@2)
enableVertexAttribArray(0)
vertexAttribPointer(0, 3, FLOAT, false, 12, 0)
bindBuffer(ARRAY_BUFFER, WebGLBuffer@3)
enableVertexAttribArray(1)
vertexAttribPointer(1, 2, FLOAT, false, 8, 0)
bindBuffer(ARRAY_BUFFER, WebGLBuffer@1)
enableVertexAttribArray(2)
vertexAttribPointer(2, 3, FLOAT, false, 12, 0)
bindBuffer(ELEMENT_ARRAY_BUFFER, WebGLBuffer@4)
drawElements(TRIANGLES, 780, UNSIGNED_SHORT, 0)

正文就到这里了，祝大家元旦快乐。跳一跳大家玩了几分，这是小张的最好成绩。

但是车上老司机的留言让小张奔溃了。

王哲是 cocos 引擎的创始人，首批微信小游戏中有 8 款是 cocos 的作品。

这里插入一段招聘广告，NVIDIA 上海明年招一名网页前端工程师，要求 WebGL 和 D3 二选一。推荐成功的有 NVIDIA 信仰尺子送。

没看错，黑市价格 999 元的信仰尺子一把。

【黑客与画家】@Vinjn张静 的原创技术专栏，关注人工智能 + 视觉计算。