WebGL 与 Three.js 的关系及 GLSL 着色器基础
WebGL 与 Three.js 的关系是什么？顶点着色器和片元着色器的作用分别是什么？如何编写一个简单的自定义着色器实现颜色渐变效果？
回答
我是大山
WebGL 是底层图形 API(基于 OpenGL ES 2.0+)，直接操作 GPU；Three.js 是对 WebGL 的高级封装。着色器(GLSL): 顶点着色器处理顶点位置(gl_Position)；片元着色器计算像素颜色(gl_FragColor)。简单渐变: 顶点中 varying vec2 vUv; void main(){vUv=uv; gl_Position=projectionMatrixmodelViewMatrixvec4(position,1.0)}；片元中 varying vec2 vUv; void main(){gl_FragColor=vec4(vUv.x, vUv.y, 0.0, 1.0)}。Three.js 中用 ShaderMaterial 使用自定义着色器。