threejs 着色器写一个爱心❤

在 Three.js 中使用着色器，主要是通过 `ShaderMaterial` 或 `RawShaderMaterial` 来实现自定义的材质效果。着色器是用 GLSL（OpenGL Shading Language）语言编写的，它允许开发者直接与 GPU 交互，以实现高性能的图形渲染和复杂的视觉效果。 ### 顶点着色器与片段着色器 Three.js 中的着色器分为两类： - **顶点着色器（Vertex Shader）**：负责处理每个顶点的位置、颜色、法线等信息，通常用于变形、动画等效果。 - **片段着色器（Fragment Shader）**：负责计算每个像素的颜色值，常用于实现光照、纹理、后处理等效果。 ### 创建自定义着色器材质 以下是一个使用 `ShaderMaterial` 的基本示例： ```javascript // 定义顶点着色器代码 const vertexShader = ` void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; // 定义片段着色器代码 const fragmentShader = ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色 } `; // 创建 ShaderMaterial const material = new THREE.ShaderMaterial({ vertexShader: vertexShader, fragmentShader: fragmentShader }); // 创建一个简单几何体并应用该材质 const geometry = new THREE.SphereGeometry(1, 32, 32); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); ``` ### 内置变量与 Uniforms Three.js 提供了一些常用的内置变量和 uniform 值，供着色器使用，例如： - `modelViewMatrix`、`projectionMatrix`：用于顶点位置变换。 - `cameraPosition`：相机在世界空间中的位置。 - `uniform float time;`：可以传递当前时间，用于动画效果。 ```javascript // 在 ShaderMaterial 中定义 uniforms const uniforms = { uTime: { value: 0.0 }, uColor: { value: new THREE.Color(0xff0000) } }; const material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: ` uniform float uTime; void main() { vec3 pos = position; pos.y += sin(uTime + position.x) * 0.1; gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); } `, fragmentShader: ` uniform vec3 uColor; void main() { gl_FragColor = vec4(uColor, 1.0); } ` }); ``` 在动画循环中更新 `uTime`： ```javascript function animate(time) { requestAnimationFrame(animate); material.uniforms.uTime.value = time * 0.001; renderer.render(scene, camera); } ``` ### 使用 ShaderMaterial 的注意事项 - `ShaderMaterial` 需要开发者自行管理光照、阴影等效果，不会自动继承场景中的光照信息。 - 如果需要使用光照，必须手动在着色器中引入光源参数并进行光照计算。 - `RawShaderMaterial` 与 `ShaderMaterial` 类似，但不依赖 Three.js 的内置属性和 uniform，适合完全自定义的场景。 ### 着色器调试与优化 - 可以使用浏览器的 WebGL Inspector 或 Three.js 自带的 `WebGLRenderer.debug.checkShaderErrors` 来调试着色器错误。 - 尽量减少计算复杂度，避免在片段着色器中进行过多运算，以提高性能。 - 使用 `#ifdef GL_ES precision mediump float; #endif` 指定精度，提升兼容性。 ### 着色器学习资源 - [The Book of Shaders](https://thebookofshaders.com/) 提供了从基础到进阶的 GLSL 学习内容。 - [Shadertoy](https://www.shadertoy.com/) 是一个在线编写和分享 GLSL 着色器的平台，适合学习和实验。