ThreeJS 给 Shader传参

参考:
https://www.cnblogs.com/softimagewht/p/4750847.html

ThreeJS 给 Shader传参

一、Shader三种变量类型（uniform, attribute 和varying）

1、uniform

• 顶点着色器和片元着色器都可以使用
• 一般用来传递：变换矩阵，材质，光照参数和颜色等信息
• 用法: 外部(js)给着色器传数据

// 着色器代码
uniform vec4 u_FragColor;
void main(){
  gl_FragColor=u_FragColor;
}
// js代码
var u_FragColor=gl.getUniformLocation(gl.program,'u_FragColor');
gl.uniform4f(u_FragColor,0.0,1.0,1.0,1.0);

2、attribute

• 只能在顶点着色器中使用
• 一般用来传递顶点的数据,如:顶点坐标，法线，纹理坐标，顶点颜色
• 用法: 外部(js)给着色器传数据
• 类型: float，vec2，vec3，vec4，mat2，mat3，mat4

// 着色器代码
attribute vec4 a_Position;
void main() {
  gl_position = a_Position;
  gl_Pointsize = 10.0;
};

// js代码
var a_position = gl.getAttribLocation(gl.program,'a_Position');
gl.vertexAttrib3f(a_position,0.0,0.0,0.0);

3、varying

• 一般vertex shader修改varying变量的值，然后fragment shader使用该varying变量的值
• varying变量在vertex和fragment shader二者之间的声明必须是一致的
• 用法: 顶点着色器给片元着色器传递数据

二、ThreeJS 给 Shader传递数据

1、uniform

// js 代码
let uniforms = {
  color: {
    type: "c",
    value: new THREE.Color(0xff0000)
  }
}
let material = new THREE.ShaderMaterial({
  uniforms,
  vertexShader: vertexShader,
  fragmentShader: fragmentShader
});

// 着色器代码
export let fragmentShader = `
uniform vec3 color;
void main() {
 // 给此片元的颜色值
 gl_FragColor = vec4(color,1.0);
}
`
export let vertexShader = `
  void main() {
      gl_Position = myProjectionMatrix * myModelViewMatrix *vec4(position,1);
  }
`

2、attribute

通过 attribute给shader传递参数

// js代码
let vertices = [...]
var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ));

// 顶点着色器
attribute vec3 position;
...

<全文结束>