WebGL初学者指南：从零开始编写简单滤镜

WebGL：从入门到编写简单滤镜

引言

WebGL，一种用于在网络浏览器中创建交互式3D图形的API，让我们能够在网页上呈现身临其境的体验。本文将带领您从零开始，深入了解WebGL的基础知识，并逐步指导您编写一个简单的滤镜效果。

WebGL概览

WebGL使用着色器程序，它是一对包含顶点着色器和片段着色器的脚本。顶点着色器处理顶点数据，确定其在屏幕上的位置，而片段着色器处理每个像素，指定其颜色和效果。

设置WebGL画布

<canvas id="glcanvas"></canvas>

创建一个<canvas>元素，然后使用以下JavaScript代码获取WebGL上下文：

const canvas = document.getElementById("glcanvas");
const gl = canvas.getContext("webgl");

编写着色器程序

顶点着色器

attribute vec2 a_position;

void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);
}

片段着色器

precision mediump float;
uniform sampler2D u_image;

void main() {
  gl_FragColor = texture2D(u_image, vec2(gl_FragCoord.x / gl_FragCoord.w, 1.0 - gl_FragCoord.y / gl_FragCoord.h));
}

创建和绑定纹理

const image = new Image();
image.onload = function() {
  // 创建纹理对象
  const texture = gl.createTexture();
  
  // 绑定纹理
  gl.bindTexture(gl.TEXTURE_2D, texture);
  
  // 加载图像到纹理
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  
  // 设置纹理参数
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
};
image.src = "image.png";

渲染图像

// 创建顶点缓冲区
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// 定义顶点数据（矩形）
const positions = [
  -1.0,  1.0,
  1.0,  1.0,
  -1.0, -1.0,
  1.0, -1.0
];

// 将顶点数据写入缓冲区
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// 关联着色器属性和顶点缓冲区
const a_position = gl.getAttribLocation(program, "a_position");
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_position);

// 渲染图像
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

应用滤镜效果

添加一个片段着色器的uniform变量来控制滤镜效果：

uniform float u_filterStrength;

并在片段着色器中应用滤镜效果：

gl_FragColor = vec4(gl_FragColor.rgb * u_filterStrength, gl_FragColor.a);

然后在JavaScript中设置滤镜强度：

const filterStrength = 0.5;
gl.uniform1f(u_filterStrength, filterStrength);

结论

通过按照本文中的步骤操作，您已经了解了WebGL的基础知识，并编写了一个简单的滤镜效果。利用WebGL，您可以在网络上创建令人惊叹的3D图形体验。继续探索和实验，提升您的WebGL技能。