当前位置：首页 > article >正文

WebGL学习2

article 2025/3/20 9:55:07

WebGL（Web Graphics Library）是一种基于 OpenGL ES 2.0 的 JavaScript API，用于在网页上实现高性能的 3D 图形渲染。

1. 初始化 WebGL 上下文

在使用 WebGL 之前，需要获取<canvas>元素并创建 WebGL 上下文。

// 获取canvas
const canvas = document.querySelector('canvas');
// 获取webgl上下文对象，注意选择webgl的1.0版本，2.0版本有一些语法不一样
const gl = canvas.getContext('webgl');

document.querySelector('canvas')：通过选择器获取 HTML 文档中的<canvas>元素。
canvas.getContext('webgl')：获取<canvas>元素的 WebGL 上下文。如果浏览器不支持 WebGL，该方法将返回null。

2. 着色器编程

WebGL 使用着色器（Shader）来处理图形渲染的各个阶段。着色器是运行在 GPU 上的小程序，主要分为顶点着色器（Vertex Shader）和片元着色器（Fragment Shader）。

import fragShader from '../shader/2.webgl绘制点/fragShader.glsl';
import vertexShader from '../shader/2.webgl绘制点/vertexShader.glsl';
import { initShader } from '../lib';

// fragShader和vertexShader引入之后是字符串，需要被编译为可执行的程序
const program = initShader(gl, vertexShader, fragShader);

顶点着色器（Vertex Shader）：负责处理每个顶点的位置、颜色等属性。
片元着色器（Fragment Shader）：负责处理每个像素的颜色。
initShader函数：用于初始化着色器，创建并配置程序对象。

export function initShader(gl, vshader_source, fshader_source) {
  // 创建着色器
  const vertexShader = createShaderFromString(
    gl,
    gl.VERTEX_SHADER,
    vshader_source
  );
  const fragmentShader = createShaderFromString(
    gl,
    gl.FRAGMENT_SHADER,
    fshader_source
  );

  // 创建一个程序对象 操作手，专门负责javaScript和shader着色器的通讯
  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);

  // 将javascrpt和程序对象关联
  gl.linkProgram(program);

  // 使用程序对象
  gl.useProgram(program);

  // 返回程序对象
  return program;
}

gl.createShader(type)：创建一个指定类型的着色器对象（gl.VERTEX_SHADER或gl.FRAGMENT_SHADER）。
gl.shaderSource(shader, source)：将着色器源代码赋值给着色器对象。
gl.compileShader(shader)：编译着色器对象。
gl.createProgram()：创建一个程序对象，用于管理着色器。
gl.attachShader(program, shader)：将着色器对象附加到程序对象上。
gl.linkProgram(program)：链接程序对象，将顶点着色器和片元着色器关联起来。
gl.useProgram(program)：使用指定的程序对象进行渲染。

3. 缓冲区对象

缓冲区对象（Buffer Object）用于在 CPU 和 GPU 之间传递数据，如顶点坐标、颜色等。

// 1.创建顶点数据对象
const vertices = new Float32Array([
  0, 0.5,
  -0.5, -0.5,
  0.5, -0.5,
]);

// 2.创建缓冲区对象
const buffer = gl.createBuffer();

// 3.绑定缓冲区对象的用途
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

// 4.向缓冲区中写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 5.设置attribute变量对缓冲区的访问规则
const a_Position = gl.getAttribLocation(program, 'a_Position');
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

// 6.启动数据读取
gl.enableVertexAttribArray(a_Position);

gl.createBuffer()：创建一个缓冲区对象。
gl.bindBuffer(target, buffer)：将缓冲区对象绑定到指定的目标（gl.ARRAY_BUFFER用于存储顶点数据）。
gl.bufferData(target, data, usage)：向缓冲区对象中写入数据。usage参数指定数据的使用方式，gl.STATIC_DRAW表示数据不会频繁更改。
gl.getAttribLocation(program, name)：获取顶点着色器中attribute变量的位置。
gl.vertexAttribPointer(index, size, type, normalized, stride, offset)：设置attribute变量对缓冲区的访问规则。
- index：attribute变量的位置。
- size：每个顶点的分量个数。
- type：数据的类型，如gl.FLOAT。
- normalized：是否需要归一化。
- stride：连续顶点属性之间的间隔。
- offset：顶点属性在数组中的偏移量。
gl.enableVertexAttribArray(index)：启用指定位置的attribute变量。

4. 绘制图形

使用gl.drawArrays或gl.drawElements方法绘制图形。

// 最后调用drawArrays绘制，这里可以将count取3，一次绘制三个点
gl.drawArrays(gl.POINTS, 0, 3);

gl.drawArrays(mode, first, count)：从指定位置开始，绘制指定数量的顶点。
- mode：绘制模式，如gl.POINTS（点）、gl.LINES（线）、gl.TRIANGLES（三角形）等。
- first：从第几个顶点开始绘制。
- count：要绘制的顶点数量。

5. 深度检测

深度检测用于判断物体的正确遮挡关系。

// 深度检测，用来判断物体的正确遮挡关系
gl.enable(gl.DEPTH_TEST);

gl.enable(capability)：启用指定的功能，gl.DEPTH_TEST表示启用深度检测。

6. 相机和投影矩阵

在 3D 场景中，需要使用相机和投影矩阵来定义视角和投影方式。

import { mat4 } from 'gl-matrix';
import PerspectiveCamera from '../lib/PerspectiveCamera';

// viewMatrix的参数
const vModelView = {
  viewX: 0,
  viewY: 0,
  viewZ: 1,
  lookAtX: 0,
  lookAtY: 0,
  lookAtZ: 0,
};

const vModelProj = {
  fov: 45,
  aspect: 1,
  near: 0.1,
  far: 4,
};
const camera = new PerspectiveCamera(gl, program, {
  fov: vModelProj.fov,
  aspect: vModelProj.aspect,
  near: vModelProj.near,
  far: vModelProj.far,
  lookAt: [vModelView.lookAtX, vModelView.lookAtY, vModelView.lookAtZ],
  position: [vModelView.viewX, vModelView.viewY, vModelView.viewZ],
  up: [0, 1, 0],
});

// 创建视图矩阵
const createViewMatrix = () => {
  const viewMatrix = mat4.create();
  // 创建视图矩阵，三个参数，相机位置，注视的坐标，上方向
  mat4.lookAt(
    viewMatrix,
    [vModelView.viewX, vModelView.viewY, vModelView.viewZ],
    [vModelView.lookAtX, vModelView.lookAtY, vModelView.lookAtZ],
    [0, 1, 0]
  );
  gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix);
};

// 创建投影矩阵
const createProjMatrix = () => {
  const projMatrix = mat4.create();
  // 创建正交投影矩阵
  mat4.perspectiveNO(projMatrix, ...Object.values(vModelProj));
  gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix);
};

PerspectiveCamera：自定义的透视相机类，用于管理相机的属性和矩阵。
mat4.create()：创建一个 4x4 的矩阵。
mat4.lookAt(out, eye, center, up)：创建视图矩阵，指定相机的位置、注视点和上方向。
mat4.perspectiveNO(out, fovy, aspect, near, far)：创建透视投影矩阵。
gl.uniformMatrix4fv(location, transpose, value)：将矩阵数据传递给着色器中的uniform变量。

7. 光照效果

在 WebGL 中，可以实现不同类型的光照效果，如环境光、漫反射光和镜面高光。

import AmbientLight from '../lib/Light/AmbientLight';
import DiffuseLight from '../lib/Light/DiffuseLight';
import SpecularLight from '../lib/Light/SpecularLight';

const vModel = {
  color: 0xffffff,
  intensity: 1
};
const vModelDiffuse = {
  color: 0xffffff,
  intensity: 1
};
const light = new AmbientLight(gl, program, vModel);
const diffuseLight = new DiffuseLight(gl, program, vModelDiffuse);
const specularLight = new SpecularLight(gl, program);

AmbientLight：环境光类，用于模拟全局光照效果。
DiffuseLight：漫反射光类，用于模拟物体表面的漫反射光照效果。
SpecularLight：镜面高光类，用于模拟物体表面的镜面反射光照效果。

8. GUI 交互

使用dat.gui库可以创建简单的图形用户界面，方便调试和交互。

import * as dat from 'dat.gui';

const gui = new dat.GUI();
const vModel = {
  scale: 1,
  angle: 0,
  tx: 0,
  ty: 0
};

gui.add(vModel, 'scale', 0.1, 2).step(0.1).name('缩放').onChange(render);
gui.add(vModel, 'angle', 0, 360).step(1).name('旋转').onChange(render);
gui.add(vModel, 'tx', -1, 1).step(0.1).name('x轴平移').onChange(render);
gui.add(vModel, 'ty', -1, 1).step(0.1).name('y轴平移').onChange(render);