向量点积在 WebGL 中的应用：创造引人入胜的视觉效果

前端

2024-02-25 14:53:00

向量点积：WebGL 中令人惊叹的图形背后的大脑

简介

在计算机图形学中，向量点积扮演着至关重要的角色，它为我们打开了一扇通往令人惊叹的视觉效果的大门。特别是，在 WebGL（Web Graphics Library）中，向量点积被广泛应用于各种场景，让我们深入了解它的魔力。

向量点积简介

向量点积是计算两个向量之间夹角余弦值的基本运算。它测量着两个向量的"对齐程度"，数值范围从 -1 到 1。当两个向量完全对齐时，点积为 1；当它们完全垂直时，点积为 -1；介于两者之间的值表示部分对齐。

WebGL 中向量点积的应用

1. 着色器光晕

在 WebGL 中，着色器光晕是一种通过在对象周围创建发光效果来增强逼真度的技术。这种效果经常用于模拟来自光源的散射光，营造出更加身临其境的体验。向量点积用于计算光源和表面法线之间的夹角，从而确定光晕的强度。

2. 阴影

向量点积还可以计算光源和表面法线之间的夹角，从而确定表面上的阴影区域。通过使用 WebGL 中的片段着色器，我们可以根据光源位置和表面法线动态计算阴影，从而创造出逼真的照明效果。

3. 反射

向量点积也可以用于计算反射向量，指示光线从表面反射的方向。这对于创建逼真的反射效果至关重要，例如镜子或水中的反射。在 WebGL 中，我们可以通过将入射光向量与表面法线的点积乘以法线本身，来计算反射向量。

代码示例

以下是一个使用 WebGL 实现简单光晕效果的代码示例：

// 定义着色器代码
const vertexShaderSource = `
  attribute vec3 position;
  void main() {
    gl_Position = vec4(position, 1.0);
  }
`;

const fragmentShaderSource = `
  uniform vec3 lightPosition;
  uniform float lightRadius;

  void main() {
    // 计算光源和表面法线之间的夹角余弦值
    float cosine = dot(normalize(lightPosition - position), normalize(normal));
    
    // 根据夹角余弦值计算光晕强度
    float intensity = smoothstep(lightRadius, 0.0, cosine);

    // 设置像素颜色
    gl_FragColor = vec4(intensity, intensity, intensity, 1.0);
  }
`;

// 设置 WebGL 上下文
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("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);

// 创建程序对象
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

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

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

// 绑定缓冲区对象到顶点着色器中的位置属性
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// 设置顶点数据
const positions = [
  -1, -1, 0,
  1, -1, 0,
  -1, 1, 0,
  1, 1, 0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// 启用顶点着色器中的位置属性
const positionAttributeLocation = gl.getAttribLocation(program, "position");
gl.enableVertexAttribArray(positionAttributeLocation);

// 绑定缓冲区对象到位置属性
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// 设置顶点属性指针
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 设置光源位置
const lightPosition = [0, 0, 1];

// 设置光源半径
const lightRadius = 0.5;

// 设置着色器中的光源位置和半径的 uniform 变量
const lightPositionUniformLocation = gl.getUniformLocation(program, "lightPosition");
gl.uniform3fv(lightPositionUniformLocation, lightPosition);

const lightRadiusUniformLocation = gl.getUniformLocation(program, "lightRadius");
gl.uniform1f(lightRadiusUniformLocation, lightRadius);

// 设置绘图状态
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);

// 清除颜色缓冲区和深度缓冲区
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// 绘制三角形
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);