3. Three.js中uniforms是什么？

1. 介绍

在Three.js中，uniforms是一种特殊类型的变量，用于在渲染过程中从应用程序向着色器传递常量值或数据。

它们是在渲染管道中连接应用程序和着色器程序之间的桥梁。

uniforms可以在着色器程序中使用，并且在每次渲染时都具有相同的值。它们通常用于控制材质的外观、光照效果、纹理坐标、变换矩阵等方面。

2. 使用

在Three.js中，你可以通过材质对象的uniforms属性来定义uniform变量，并在渲染过程中将其传递给着色器程序。

// 1. 创建材质对象
const material = new THREE.ShaderMaterial({
  uniforms: {
    color: { value: new THREE.Color(0xff0000) },
    texture: { value: new THREE.TextureLoader().load('texture.jpg') },
    time: { value: 0.0 }
  },
  vertexShader: vertexShaderCode,
  fragmentShader: fragmentShaderCode
});

// 2. 在顶点着色器和片元着色器中使用uniform变量
const vertexShaderCode = `
  uniform float time;
  
  void main() {
    // 使用uniform变量进行顶点位置变换等操作
    // ...
  }
`;

const fragmentShaderCode = `
  uniform vec3 color;
  uniform sampler2D texture;
  
  void main() {
    // 使用uniform变量进行颜色计算、纹理采样等操作
    // ...
  }
`;

// 3. 将材质应用到物体上
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

在上述代码中，我们通过uniforms属性定义了三个uniform变量：color、texture和time。

这些uniform变量可以在顶点着色器和片元着色器中使用。

在应用程序中更新uniform变量的值后，它们会在每次渲染时传递给着色器程序，从而影响物体的外观和渲染效果。

通过使用uniforms，你可以以灵活的方式控制着色器程序的计算和渲染结果，实现各种复杂的视觉效果和动画。