0 基础学习 WebGL 该看的 3 本书

Posted 2021-04-25 黑客与画家

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，那么脱不了三本书：

• 红宝书 ，出到第八版
  

• 蓝宝书 ，出到第七版
  

• 橙宝书 ，出到第三版

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

最后放出真实的 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)