WebGL - 着色器扫盲

**WebGL 着色器扫盲**

WebGL（Web Graphics Library）是一种用于在网页中绘制图形的API。它允许开发者使用JavaScript编写着色器程序来渲染图像。在本文中，我们将深入探讨WebGL中的着色器，包括其基本概念、工作原理和实践应用。

**什么是着色器？**

着色器是一种特殊的程序，它负责为每个像素计算颜色值。它接收输入数据（如顶点位置、法线方向等），然后输出最终的颜色值。在WebGL中，着色器可以分为两类：**顶点着色器**和**片元着色器**。

* **顶点着色器**：负责计算每个顶点的位置、法线方向等信息。它接收输入数据（如顶点坐标、法线方向等），然后输出最终的顶点属性。
* **片元着色器**：负责为每个像素计算颜色值。它接收输入数据（如顶点位置、法线方向等），然后输出最终的颜色值。

**着色器的工作原理**

着色器的工作原理如下：

1. **顶点着色器**：首先，顶点着色器会接收输入数据（如顶点坐标、法线方向等）。然后，它会计算每个顶点的位置、法线方向等信息。最后，它会输出最终的顶点属性。
2. **片元着色器**：接着，片元着色器会接收输入数据（如顶点位置、法线方向等）。然后，它会为每个像素计算颜色值。最后，它会输出最终的颜色值。

**实践应用**

下面是一个简单的例子，展示了如何使用WebGL中的着色器来绘制一个三角形：

javascript//顶点着色器var vertexShader = `
 attribute vec2 position;
 void main() {
 gl_Position = vec4(position,0.0,1.0);
 }
`;

//片元着色器var fragmentShader = `
 void main() {
 gl_FragColor = vec4(1.0,0.0,0.0,1.0); //红色 }
`;

//创建WebGL上下文var canvas = document.getElementById('canvas');
var gl = canvas.getContext('webgl');

//编译顶点着色器和片元着色器var vertexShaderId = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShaderId, vertexShader);
gl.compileShader(vertexShaderId);

var fragmentShaderId = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShaderId, fragmentShader);
gl.compileShader(fragmentShaderId);

//创建着色器程序var program = gl.createProgram();
gl.attachShader(program, vertexShaderId);
gl.attachShader(program, fragmentShaderId);
gl.linkProgram(program);

//绘制三角形var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
var positions = new Float32Array([
 -0.5, -0.5,
0.5, -0.5,
0.0,0.5]);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES,0,3);