WebGL 世界的基石：着色器、坐标系统和纹理

前端

2023-12-20 21:30:03

WebGL 的魔力：释放创造力，打造令人惊叹的 3D 体验

准备踏上一段迷人的旅程，探索 WebGL 的非凡世界，在那里你可以释放你的创造力，打造令人惊叹的 3D 体验。在本文中，我们将深入探究 WebGL 的高级概念，包括着色器、坐标系统和纹理映射，帮助你提升 3D 开发技能。

着色器：WebGL 的“画笔”

想象一下 WebGL 着色器就像艺术家手中的画笔，负责将你的 3D 对象变为生动鲜明的艺术作品。这些小型程序在 GPU 上运行，负责将顶点数据（构成对象几何形状的点）转换为屏幕上的像素。WebGL 中有两种主要类型的着色器：

顶点着色器： 处理每个顶点，变换其位置、计算光照并应用其他效果。
片段着色器： 处理每个像素，确定其最终颜色。

坐标系统：构建 3D 世界的“地图”

在 WebGL 中，坐标系相当于一张虚拟地图，定义了 3D 对象在屏幕上的位置和方向。WebGL 中有两种主要的坐标系：

正交投影： 将 3D 对象投影到一个平面上，呈现出 2D 效果，就像俯瞰地图一样。
透视投影： 模拟人类视觉，产生深度错觉，让对象看起来具有 3D 效果。

纹理映射：给对象穿上“衣服”

纹理映射是一种给 3D 对象添加逼真细节的技术。它通过将图像（称为纹理）映射到对象表面来实现。纹理可以是木材、金属、布料或任何其他材质。使用纹理映射，你可以创建令人惊艳的视觉效果，让你的对象栩栩如生。

代码示例：旋转的 3D 立方体

让我们通过一个简单的示例，将这些概念付诸实践。我们将创建一个旋转的 3D 立方体，并使用纹理映射为其增添魅力：

// 顶点着色器
attribute vec3 position;
uniform mat4 modelViewProjectionMatrix;

void main() {
  gl_Position = modelViewProjectionMatrix * vec4(position, 1.0);
}

// 片段着色器
uniform sampler2D texture;
varying vec3 v_texCoord;

void main() {
  gl_FragColor = texture2D(texture, v_texCoord);
}

// 设置坐标系（透视投影）
gl.perspective(45.0, canvas.width / canvas.height, 0.1, 100.0);

// 加载纹理
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_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

// 使用纹理
gl.uniform1i(gl.getUniformLocation(program, 'texture'), 0);