WebGL从零打造，跟我一起玩转GLSL着色器！

2023-11-30 22:12:40

在网页世界里，我们常常使用JavaScript的Canvas来绘制各种各样的图形。不过，你可能不知道，除了JavaScript，Canvas还支持一种更强大的图形绘制方式——WebGL。

WebGL全称Web Graphics Library，是WebGL工作组为HTML5Canvas定义的一个JavaScript API，它允许我们使用OpenGL ES 2.0进行硬件加速的2D和3D渲染。这意味着，我们可以直接在浏览器中创建令人惊叹的图形效果，而无需借助外部插件。

而GLSL着色器就是WebGL的核心，它是一种基于OpenGL Shading Language的编程语言，用于定义图形管线中的顶点着色器和片段着色器。通过编写GLSL着色器，我们可以控制顶点和片段的处理方式，从而实现各种各样的图形效果。

今天，我将带你从零开始学习WebGL和GLSL着色器。我们将逐步深入WebGL的世界，了解它的基本概念和工作原理，并动手编写自己的着色器程序。

从认识`Canvas`开始

在开始学习WebGL之前，我们先来简单回顾一下Canvas。Canvas是一个HTML5元素，它提供了一个基于JavaScript的绘图表面。我们可以使用Canvas的API在浏览器中绘制各种各样的图形，比如线条、矩形、圆形等等。

在以往，我们使用Canvas进行绘图时，主要是通过JavaScript代码直接操作Canvas的像素数据来完成的。这种方式虽然简单易用，但对于复杂图形的绘制来说，效率较低，而且难以实现一些更高级的效果。

而WebGL则提供了一个更强大的图形绘制方式。它利用了现代浏览器的硬件加速功能，可以通过GPU并行处理大量的图形数据，从而大幅提升绘图效率和效果。

进入WebGL的世界

要使用WebGL，我们需要做的第一步就是获取WebGL上下文。这可以通过Canvas元素的getContext()方法来实现。

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

如果浏览器支持WebGL，那么gl将指向一个WebGL上下文对象。接下来，我们就可以使用WebGL API来绘制图形了。

认识GLSL着色器

GLSL着色器是WebGL图形管线中的重要组成部分。它是一种基于OpenGL Shading Language的编程语言，用于定义顶点着色器和片段着色器。

顶点着色器负责处理顶点数据，它可以对每个顶点进行变换、计算光照等操作。而片段着色器则负责处理片段数据，它可以计算每个片段的颜色、透明度等信息。

编写GLSL着色器需要一定的编程基础，但它并不复杂。我们只需要掌握一些基本的语法和概念，就可以编写出功能强大的着色器程序。

编写我们的第一个着色器

现在，让我们编写我们的第一个GLSL着色器。我们将创建一个简单的顶点着色器和片段着色器，它们将把一个三角形渲染成蓝色。

顶点着色器

attribute vec3 a_position;

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

片段着色器

precision mediump float;

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

接下来，我们需要将着色器程序链接到WebGL上下文。

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

如果着色器程序链接成功，我们就可以使用它来绘制图形了。

gl.useProgram(program);

const vertices = new Float32Array([-0.5, -0.5, 0.0, 0.5, -0.5, 0.0, 0.0, 0.5, 0.0]);
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

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