第九章 Three.js 高级材质与着色器 (二)

9.4 自定义着色器

Three.js允许我们使用自定义着色器来创建独特的视觉效果。自定义着色器使用GLSL（OpenGL Shading Language）编写，通过ShaderMaterial来应用。

示例代码：

// 顶点着色器
const vertexShader = `
varying vec2 vUv;
void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
// 片段着色器
const fragmentShader = `
uniform sampler2D uTexture;
varying vec2 vUv;
void main() {
    gl_FragColor = texture2D(uTexture, vUv);
}
`;
// 加载纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');
// 创建自定义着色器材质
const shaderMaterial = new THREE.ShaderMaterial({
    uniforms: {
        uTexture: { type: 't', value: texture }
    },
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
});
// 创建一个立方体并应用自定义着色器材质
const geometry = new THREE.BoxGeometry();
const cube = new THREE.Mesh(geometry, shaderMaterial);
scene.add(cube);
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

9.5 使用Shaders实现特效

通过自定义着色器，我们可以实现各种特效，如波浪、火焰等。以下是一个简单的波浪效果示例。

示例代码：

// 顶点着色器
const vertexShader = `
uniform float time;
varying vec2 vUv;
void main() {
    vUv = uv;
    vec3 pos = position;
    pos.z += sin(pos.x * 10.0 + time) * 0.1;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
`;
// 片段着色器
const fragmentShader = `
varying vec2 vUv;
void main() {
    gl_FragColor = vec4(vUv, 0.5 + 0.5 * sin(vUv.x * 10.0), 1.0);
}
`;
// 创建自定义着色器材质
const shaderMaterial = new THREE.ShaderMaterial({
    uniforms: {
        time: { type: 'f', value: 0 }
    },
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
});
// 创建一个平面几何体并应用自定义着色器材质
const geometry = new THREE.PlaneGeometry(2, 2, 32, 32);
const plane = new THREE.Mesh(geometry, shaderMaterial);
scene.add(plane);
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    shaderMaterial.uniforms.time.value += 0.05; // 更新时间
    renderer.render(scene, camera);
}
animate();

9.6 后处理效果

Three.js中可以使用后处理效果（Post-Processing）来实现屏幕后处理，如模糊、色调分离等。这通常使用EffectComposer和各种Pass来实现。

示例代码：

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import { DotScreenShader } from 'three/examples/jsm/shaders/DotScreenShader.js';
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建场景、相机和物体
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 创建EffectComposer
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
// 创建并添加后处理Pass
const effect1 = new ShaderPass(DotScreenShader);
effect1.uniforms['scale'].value = 4;
composer.addPass(effect1);
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    composer.render(); // 使用composer而不是renderer来渲染场景
}
animate();

通过这一章的学习，读者应该能够创建和使用高级材质，自定义着色器，并实现各种复杂的视觉效果。这些技巧将帮助你在Three.js项目中实现更为复杂和精美的渲染效果。