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;
...

<全文結束>