WebGL学习笔记

不管是什么形式，本质上都是3D可视化技术。所以学习WebGL，就是学习3D技术。掌握了核心思想和经验，不管是云游戏、pc端3D、web 3d，都可以快速实现。

WebGL的上限是什么？

WebGL的工作原理

这个文章介绍得很简洁明了：

https://www.cnblogs.com/wanbo/p/6754066.html

PS：这个人的文章都值得一看

函数调用栈

WebGL函数调用记录，通过Chrome Developer Tools / Canvas Profile 得到的。

–知乎用户。

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)

【精】gl绘制过程：为什么OpenGL会被淘汰

作者：四季留歌
链接：https://www.zhihu.com/question/315103318/answer/2210623439
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

这是创建两大着色器并执行编译、连接的代码：

const vertexShaderCode = `
attribute vec4 a_position;
void main() {
    gl_Position = a_position;
}
`

const fragmentShaderCode = `
precision mediump float;
void main() {
  gl_FragColor = vec4(1, 0, 0.5, 1);
}
`

// 创建shader对象
const vertexShader = gl.createShader(gl.VERTEX_SHADER)
// 载入shader代码
gl.shaderSource(vertexShader, vertexShaderCode)
// 编译shader代码
gl.compileShader(vertexShader)

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(fragmentShader, fragmentShaderCode)
gl.compileShader(fragmentShader)

// 创建Program
const program = gl.createProgram()
// 附加shader
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
// 连接
gl.linkProgram(program)

// 还需要显式指定你需要用哪个 program
gl.useProgram(program)
// 继续操作顶点数据并触发绘制
// ...

CPU 负载问题有人说这无所谓，可以封装成 JavaScript 函数，隐藏这些过程细节，只需传递参数即可。是，这是一个不错的封装，很多 js 库都做过，并且都很实用。

但是，这仍然有难以逾越的鸿沟 —— 那就是 OpenGL 本身的问题。

每一次调用gl.xxx时，都会完成 CPU 到 GPU 的信号传递，改变 GPU 的状态，是立即生效的。熟悉计算机基础的朋友应该知道，计算机内部的时间和硬件之间的距离有多么重要，世人花了几十年时间无不为信号传递付出了努力，上述任意一条 gl 函数改变 GPU 状态的过程，大致要走完 CPU ~ 总线 ~ GPU 这么长一段距离。

我们都知道，办事肯定是一次性备齐材料的好，不要来来回回跑那么多遍，而 OpenGL 就是这样子的。有人说为什么要这样而不是改成一次发送的样子？历史原因，OpenGL 盛行那会儿 GPU 的工作没那么复杂，也就不需要那么超前的设计。

随着显卡能力的提升，OpenGL的全局状态机设计离线，已经无法调用和优化先进现代显卡的能力。

综上所述，WebGL 是存在 CPU 负载隐患的，是由于 OpenGL 这个状态机制决定的。

现代三大图形API 可不是这样，它们更倾向于先把东西准备好，最后提交给 GPU 的就是一个完整的设计图纸和缓冲数据，GPU 只需要拿着就可以专注办事。

WebGL适用场景是什么？

休闲游戏、WebVR、商业营销活动、图像处理(比如一些在线设计软件，像稿定设计这种)

对于我当前的工作来说，WebGL的应用应该是侧重于特效和性能这两部分，其他的都可以往后放放。

讲真，目前的WebGL应该应用价值并不大，不过我可以借此作为进入计算机图形学的一个契机，并且为5年、10年后的3D做准备。

所以明确我学习WebGL的目的和侧重点：计算机图形学&3D炫酷效果，重点搞Shader，轻语言(今后可能并不是用JS，很可能是C++)

不应该涉足的领域：3D交互工具、物联网之类的制作平台等。

我要弄明白的几个问题：

1、未来的元宇宙核心技术，可不可能在Web上体现？

技术选型

List of WebGL frameworks

对于一般 WebGL 开发，推荐使用 Babylon.js。

如果要支持微信小程序，最好用国内的 LayaAir 和 Cocos，但需要注意它们只是源码开放，并不是无条件免费使用，需要仔细阅读使用协议。

如果只想写原生 WebGL 特效，建议用 regl。

如想支持大量光源和后期特效，又不需要支持 iOS，用 Claygl。

如果熟悉 Unity，直接用它导出 WebGL 也是可行的。