
关于
Three.js 着色器 - GLSL、ShaderMaterial、Uniforms、自定义效果。适用于创建自定义视觉效果、修改顶点、编写片段着色器或扩展内置材质。
name: threejs-shaders description: Three.js着色器 - GLSL、ShaderMaterial、uniforms、自定义效果。用于创建自定义视觉效果、修改顶点、编写片段着色器或扩展内置材质。 risk: unknown source: community
Three.js 着色器
何时使用
- 你需要在Three.js中使用自定义着色器逻辑。
- 任务涉及
ShaderMaterial、uniforms、GLSL、顶点变形或基于片段的效果。 - 你正在扩展超出内置材质能力的材质行为。
快速开始
import * as THREE from "three";
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
color: { value: new THREE.Color(0xff0000) },
},
vertexShader: \`
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
\`,
fragmentShader: \`
uniform vec3 color;
void main() {
gl_FragColor = vec4(color, 1.0);
}
\`,
});
// Update in animation loop
material.uniforms.time.value = clock.getElapsedTime();
ShaderMaterial 与 RawShaderMaterial
ShaderMaterial
Three.js 提供内置的 uniforms 和 attributes。
const material = new THREE.ShaderMaterial({
vertexShader: \`
// Built-in uniforms available:
// uniform mat4 modelMatrix;
// uniform mat4 modelViewMatrix;
// uniform mat4 projectionMatrix;
// uniform mat4 viewMatrix;
// uniform mat3 normalMatrix;
// uniform vec3 cameraPosition;
// Built-in attributes available:
// attribute vec3 position;
// attribute vec3 normal;
// attribute vec2 uv;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
\`,
fragmentShader: \`
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
\`,
});
RawShaderMaterial
完全控制 - 你需要定义所有内容。
const material = new THREE.RawShaderMaterial({
uniforms: {
projectionMatrix: { value: camera.projectionMatrix },
modelViewMatrix: { value: new THREE.Matrix4() },
},
vertexShader: \`
precision highp float;
attribute vec3 position;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
\`,
fragmentShader: \`
precision highp float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
\`,
});
Uniforms
Uniform 类型
const material = new THREE.ShaderMaterial({
uniforms: {
// Numbers
floatValue: { value: 1.5 },
intValue: { value: 1 },
// Vectors
vec2Value: { value: new THREE.Vector2(1, 2) },
vec3Value: { value: new THREE.Vector3(1, 2, 3) },
vec4Value: { value: new THREE.Vector4(1, 2, 3, 4) },
// Colors (converted to vec3)
colorValue: { value: new THREE.Color(0xff0000) },
// Matrices
mat3Value: { value: new THREE.Matrix3() },
mat4Value: { value: new THREE.Matrix4() },
// Textures
textureValue: { value: texture },
cubeTextureValue: { value: cubeTexture },
// Arrays
floatArray: { value: [1.0, 2.0, 3.0] },
vec3Array: {
value: [new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 1, 0)],
},
},
});
GLSL 声明
// In shader
uniform float floatValue;
uniform int intValue;
uniform vec2 vec2Value;
uniform vec3 vec3Value;
uniform vec3 colorValue; // Color becomes vec3
uniform vec4 vec4Value;
uniform mat3 mat3Value;
uniform mat4 mat4Value;
uniform sampler2D textureValue;
uniform samplerCube cubeTextureValue;
uniform float floatArray[3];
uniform vec3 vec3Array[2];
更新 Uniforms
// Direct assignment
material.uniforms.time.value = clock.getElapsedTime();
// Vector/Color updates
material.uniforms.position.value.set(x, y, z);
material.uniforms.color.value.setHSL(hue, 1, 0.5);
// Matrix updates
material.uniforms.matrix.value.copy(mesh.matrixWorld);
Varyings
从顶点着色器向片段着色器传递数据。
const material = new THREE.ShaderMaterial({
vertexShader: \`
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vPosition;
void main() {
vUv = uv;
vNormal = normalize(normalMatrix * normal);
vPosition = (modelViewMatrix * vec4(position, 1.0)).xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
\`,
fragmentShader: \`
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vPosition;
void main() {
// Use interpolated values
gl_FragColor = vec4(vNormal * 0.5 + 0.5, 1.0);
}
\`,
});
常见着色器模式
纹理采样
const material = new THREE.ShaderMaterial({
uniforms: {
map: { value: texture },
},
vertexShader: \`
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
\`,
fragmentShade
兼容工具
Claude CodeCursor
标签
AI与机器学习