使用 WebGL 创建真实感的 3D 场景

WebGL 是一种用于在 Web 浏览器中呈现 3D 图形的 JavaScript API。它是基于 OpenGL ES 2.0 的高性能图形库，并且能够在现代的浏览器上运行。在本教程中，我们将介绍如何使用 WebGL 创建一个真实感的 3D 场景。

准备工作

在开始之前，我们需要确保我们的浏览器支持 WebGL。大多数最新版本的主流浏览器都已经支持 WebGL。可以通过访问caniuse.com来查看您的浏览器是否支持 WebGL。

获取 WebGL 上下文

要使用 WebGL，我们首先需要获取 WebGL 上下文。我们可以通过在 HTML 中创建 <canvas> 元素，并使用 JavaScript 获取其上下文来实现。

HTML

<canvas id="webglCanvas"></canvas>

JavaScript

const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl');

创建顶点和片段着色器

WebGL 使用顶点和片段着色器来处理图形的渲染。顶点着色器用于变换顶点的位置和属性，而片段着色器用于确定像素的颜色等属性。

顶点着色器

const vertexShaderSource = `
attribute vec4 a_position;

void main() {
  gl_Position = a_position;
}
`;

片段着色器

const fragmentShaderSource = `
precision mediump float;

void main() {
  gl_FragColor = vec4(1, 0, 0, 1); // 红色
}
`;

编译和链接着色器

在通过 WebGL 绘制图形之前，我们需要将上述的着色器源代码编译为着色器对象，并将其链接到 WebGL 程序对象中。

// 创建顶点着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// 创建片段着色器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建 WebGL 程序对象，并将着色器链接到该对象
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

创建顶点缓冲区

顶点缓冲区是一块内存区域，用于存储顶点数据。我们可以将要绘制的顶点数据存储在顶点缓冲区中，并告诉 WebGL 如何解析这些数据。

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// 定义一个矩形的顶点数据
const positions = [
  -0.5, 0.5,
  -0.5, -0.5,
  0.5, -0.5,

  -0.5, 0.5,
  0.5, -0.5,
  0.5, 0.5,
];

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

设置顶点属性

我们需要告诉 WebGL 如何解析顶点缓冲区中的数据。这需要使用 gl.vertexAttribPointer 方法配置顶点属性。

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

渲染场景

最后，我们可以使用 WebGL 的绘制命令将顶点数据呈现到屏幕上。

// 清空画布
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

// 绘制矩形
gl.drawArrays(gl.TRIANGLES, 0, 6);

总结

通过使用 WebGL，我们可以创建出令人印象深刻的真实感 3D 场景。在本教程中，我们探讨了 WebGL 的基础知识，包括获取 WebGL 上下文、创建着色器、编译和链接着色器、创建顶点缓冲区、设置顶点属性以及渲染场景。希望本教程对您入门 WebGL 有所帮助！

参考资料：

本文来自极简博客，作者：神秘剑客，转载请注明原文链接：使用 WebGL 创建真实感的 3D 场景