uniform变量传值

在给shader材质ShaderMaterial自定义着色器GLSL ES代码的时候，有时候会用uniform关键字声明一个变量，这节课给大家讲解，threejs怎么给uniform声明的变量传值。

1. uniform声明变量

使用着色器GLSL ES语言的关键字uniform声明一个透明度变量opacity，opacity的数据类型设置为浮点数float，透明度变量名字你可以自定义，这里命名为opacity。

// 片元着色器代码
const fragmentShader = `
uniform float opacity;//uniform声明透明度变量opacity
void main() {
    gl_FragColor = vec4(0.0,1.0,1.0,0.3);
}
`

2. 给uniform变量传值

通过ShaderMaterial参数的uniforms属性，可以给顶点或片元着色器中的uniform变量传值。

比如下面片元着色器代码中，有一个uniform变量名称是opacity,ShaderMaterial的uniforms也有一个同名的属性opacity。这样的话，threejs会把uniforms中opacity的值传值片元着色器中同名uniform变量opacity

const fragmentShader = `
uniform float opacity;//uniform声明透明度变量opacity
void main() {
    gl_FragColor = vec4(0.0,1.0,1.0,0.3);
}
`
const material = new THREE.ShaderMaterial({
  uniforms: {
    // 给透明度uniform变量opacity传值
    opacity:{value:0.3}
  },
  vertexShader: vertexShader,// 顶点着色器
  fragmentShader: fragmentShader,// 片元着色器
  side: THREE.DoubleSide,
  transparent: true,//允许透明
});

3. uniform变量赋值给gl_FragColor

把uniform变量透明度opacity赋值给gl_FragColor，查看渲染效果(注意允许透明transparent: true)。

// 片元着色器代码
const fragmentShader = `
uniform float opacity;//uniform声明透明度变量opacity
void main() {
    gl_FragColor = vec4(0.0,1.0,1.0,opacity);
}
`
const material = new THREE.ShaderMaterial({
  uniforms: {
    // 给透明度uniform变量opacity传值
    opacity:{value:0.3}
  },
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,// 片元着色器
  transparent: true,//允许透明
});

你可以uniforms里面opacity的值改为其他值，查看效果变化。

练习：uniform传值颜色数据

通过上面学习，你可以做一个练习题，就是用uniform声明一个颜色变量color，然后，用uniforms给uniform变量颜色color传值。

// 片元着色器代码
const fragmentShader = `
uniform float opacity;//uniform声明变量opacity表示透明度
uniform vec3 color;//声明一个颜色变量color
void main() {
    gl_FragColor = vec4(color,opacity);
}
`
const geometry = new THREE.PlaneGeometry(100, 50);
const material = new THREE.ShaderMaterial({
  uniforms: {
    // 给透明度uniform变量opacity传值
    opacity: { value: 0.3 },
    // 给uniform同名color变量传值
    color:{value:new THREE.Color(0x00ffff)}
  },
  vertexShader: vertexShader,// 顶点着色器
  fragmentShader: fragmentShader,// 片元着色器
  side: THREE.DoubleSide,
  transparent: true,//允许透明
});

注意着色器语言GLSL ES中uniform变量数据类型，与threejs中uniforms属性value值的对应关系。

uniform变量数据类型	uniforms属性数据
float	Number
vec2	THREE.Vector2
vec3	THREE.Vector3
vec3	THREE.Color
vec4	THREE.Vector4

更多uniform与GLSL数据类型对应关系，可以查看threejs文档关于的Uniform (opens new window)介绍

测试：改变uniforms数据

你改变uniforms里面一些属性的值，ShaderMaterial着色器中同名uniform变量会跟着改变，进而影响threejs渲染效果，你可以改变下面属性进行测试。

material.uniforms.opacity.value = 0.2;
material.uniforms.color.value.set(0xff0000);