How to Render a fullscreen quad using WebGL

使用WebGL渲染一个全屏四边形是一个常见的需求，特别是在处理全屏后处理效果时，如全屏着色、图像处理和其他视觉效果。下面是使用WebGL来渲染全屏四边形的步骤：

1. 创建画布和WebGL上下文

首先，需要在HTML中创建一个画布元素，并在JavaScript中获取这个画布的WebGL上下文。

html
<canvas id="glcanvas" width="640" height="480"></canvas>

javascript
var canvas = document.getElementById('glcanvas');
var gl = canvas.getContext('webgl');
if (!gl) {
  console.error('Unable to initialize WebGL. Your browser may not support it.');
  return;
}

2. 定义顶点数据

全屏四边形可通过两个三角形组成，我们可以定义顶点数据以填满整个屏幕。使用标准化设备坐标（NDC，范围从-1到1）描述顶点可以更容易地覆盖整个屏幕。

javascript
var vertices = new Float32Array([
  -1.0, -1.0,  // 第一个三角形的顶点
   1.0, -1.0,
  -1.0,  1.0,

  -1.0,  1.0,  // 第二个三角形的顶点
   1.0, -1.0,
   1.0,  1.0
]);

3. 创建顶点缓冲区

接下来，将顶点数据传输到GPU的顶点缓冲区中。

javascript
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

4. 编写着色器程序

定义顶点着色器和片元着色器。这里的顶点着色器只需将顶点坐标传递到片元着色器，片元着色器可以简单地设置一个颜色。

javascript
var vertexShaderSource = `
attribute vec2 position;
void main() {
    gl_Position = vec4(position, 0.0, 1.0);
}`;
var fragmentShaderSource = `
precision mediump float;
void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}`;

5. 编译着色器和创建着色器程序

javascript
function createShader(gl, type, source) {
  var shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }
  return shader;
}

var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
}

6. 连接顶点属性

javascript
var positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

7. 渲染

最后，使用创建的着色器程序和顶点数据渲染全屏四边形。

javascript
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(shaderProgram);
gl.drawArrays(gl.TRIANGLES, 0, 6);

通过上述步骤，您可以在WebGL中渲染一个全屏四边形，并可进一步扩展以实现各种图形效果。