WebGL 是什么？它与 OpenGL 有什么关系？

WebGL 是基于 OpenGL ES 的浏览器端 3D 图形 API，关系链为 OpenGL → OpenGL ES → WebGL。WebGL 继承了 OpenGL ES 的可编程渲染管线，通过 GLSL 编写顶点着色器和片段着色器控制 GPU 渲染，但运行在浏览器沙箱中，用 JavaScript 调用，且去除了 OpenGL 的固定管线。核心渲染流程：顶点数据经顶点着色器变换 → 图元装配 → 光栅化 → 片段着色器着色 → 帧缓冲输出。WebGL 1.0 基于 OpenGL ES 2.0，WebGL 2.0 基于 OpenGL ES 3.0。

追问

• WebGL 和 Canvas 2D 的本质区别是什么？Canvas 2D 能调用 GPU 吗？
• 顶点缓冲对象（VBO）的作用是什么？为什么不用 CPU 每帧传顶点数据？
• WebGL 的统一变量（uniform）和属性变量（attribute）分别在什么阶段使用？
• WebGL 2.0 相比 1.0 新增了哪些关键能力？VAO 和 3D 纹理对开发有什么影响？
• 浏览器如何保证 WebGL 的安全性？哪些 OpenGL ES 特性被有意移除了？

写段代码

javascript
// WebGL 初始化：创建着色器程序并绘制三角形
const gl = canvas.getContext('webgl');
const vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, 'attribute vec2 a_pos; void main(){ gl_Position=vec4(a_pos,0,1); }');
gl.compileShader(vs);
const fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, 'precision mediump float; void main(){ gl_FragColor=vec4(1,0,0,1); }');
gl.compileShader(fs);
const prog = gl.createProgram();
gl.attachShader(prog, vs); gl.attachShader(prog, fs);
gl.linkProgram(prog); gl.useProgram(prog);
const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0,0.5, -0.5,-0.5, 0.5,-0.5]), gl.STATIC_DRAW);
const loc = gl.getAttribLocation(prog, 'a_pos');
gl.enableVertexAttribArray(loc);
gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 3);