本实例主要讲解内容
这个Three.js示例展示了如何使用RawShaderMaterial创建自定义着色器，实现高级的图形渲染效果。通过编写自定义的顶点着色器和片段着色器，我们可以完全控制渲染过程，实现基于时间和位置的动态颜色变化。
核心技术包括：
- 自定义顶点着色器和片段着色器
- 着色器中uniform和varying变量的使用
- 动态颜色计算
- 原始着色器材质(RawShaderMaterial)的应用
完整代码注释
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - raw shader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="container"></div>
<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - raw shader demo</div>
<!-- 顶点着色器 -->
<script id="vertexShader" type="x-shader/x-vertex">
precision mediump float;
precision mediump int;
uniform mat4 modelViewMatrix; // 模型视图矩阵
uniform mat4 projectionMatrix; // 投影矩阵
attribute vec3 position; // 顶点位置
attribute vec4 color; // 顶点颜色
varying vec3 vPosition; // 传递给片段着色器的顶点位置
varying vec4 vColor; // 传递给片段着色器的顶点颜色
void main() {
vPosition = position;
vColor = color;
// 计算最终的裁剪空间位置
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<!-- 片段着色器 -->
<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;
precision mediump int;
uniform float time; // 时间变量
varying vec3 vPosition; // 从顶点着色器传来的顶点位置
varying vec4 vColor; // 从顶点着色器传来的顶点颜色
void main() {
vec4 color = vec4( vColor );
// 基于位置和时间修改红色通道
color.r += sin( vPosition.x * 10.0 + time ) * 0.5;
gl_FragColor = color; // 设置最终的像素颜色
}
</script>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
let container, stats;
let camera, scene, renderer;
init();
function init() {
container = document.getElementById( 'container' );
// 初始化相机
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
camera.position.z = 2;
// 初始化场景
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x101010 );
// 创建几何体
// 200个三角形，每个三角形3个顶点
const vertexCount = 200 * 3;
const geometry = new THREE.BufferGeometry();
// 存储位置和颜色数据
const positions = [];
const colors = [];
// 生成随机三角形
for ( let i = 0; i < vertexCount; i ++ ) {
// 位置数据(x,y,z)
positions.push( Math.random() - 0.5 );
positions.push( Math.random() - 0.5 );
positions.push( Math.random() - 0.5 );
// 颜色数据(r,g,b,a)
colors.push( Math.random() * 255 );
colors.push( Math.random() * 255 );
colors.push( Math.random() * 255 );
colors.push( Math.random() * 255 );
}
// 创建缓冲区属性
const positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
const colorAttribute = new THREE.Uint8BufferAttribute( colors, 4 );
// 将颜色值归一化到0.0-1.0范围
colorAttribute.normalized = true;
// 设置几何体属性
geometry.setAttribute( 'position', positionAttribute );
geometry.setAttribute( 'color', colorAttribute );
// 创建原始着色器材质
const material = new THREE.RawShaderMaterial( {
uniforms: {
time: { value: 1.0 } // 时间uniform变量
},
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
side: THREE.DoubleSide, // 双面渲染
transparent: true // 启用透明度
} );
// 创建网格对象
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// 初始化渲染器
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
container.appendChild( renderer.domElement );
// 添加性能统计
stats = new Stats();
container.appendChild( stats.dom );
// 窗口大小变化事件监听
window.addEventListener( 'resize', onWindowResize );
}
// 窗口大小变化处理函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
// 动画循环
function animate() {
const time = performance.now();
// 获取场景中的第一个对象
const object = scene.children[ 0 ];
// 旋转对象
object.rotation.y = time * 0.0005;
// 更新着色器中的时间uniform变量
object.material.uniforms.time.value = time * 0.005;
// 渲染场景
renderer.render( scene, camera );
// 更新性能统计
stats.update();
}
</script>
</body>
</html>
自定义着色器技术解析
着色器基础概念
着色器是运行在GPU上的小程序，用于控制图形渲染过程。Three.js中主要有两种着色器：
- 顶点着色器(Vertex Shader)：处理每个顶点的位置、颜色等属性
- 片段着色器(Fragment Shader)：处理每个像素的颜色计算
它们通过varying变量进行通信，通过uniform变量接收外部数据。
顶点着色器详解
precision mediump float;
precision mediump int;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
attribute vec3 position;
attribute vec4 color;
varying vec3 vPosition;
varying vec4 vColor;
void main() {
vPosition = position;
vColor = color;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
关键部分解析：
- precision：设置浮点数和整数的精度
- uniforms：从JavaScript传递到着色器的全局变量
- attributes：每个顶点独有的数据
- varying：从顶点着色器传递到片段着色器的数据
- gl_Position：顶点着色器必须设置的内置变量，表示顶点的最终位置
片段着色器详解
precision mediump float;
precision mediump int;
uniform float time;
varying vec3 vPosition;
varying vec4 vColor;
void main() {
vec4 color = vec4( vColor );
color.r += sin( vPosition.x * 10.0 + time ) * 0.5;
gl_FragColor = color;
}
关键部分解析：
- time uniform：从JavaScript接收的时间变量，用于动画
- vPosition和vColor：从顶点着色器插值而来的数据
- 颜色计算：基于顶点位置和时间计算动态颜色
- gl_FragColor：片段着色器必须设置的内置变量，表示最终像素颜色
RawShaderMaterial与ShaderMaterial的区别
在Three.js中有两种主要的着色器材质：
- ShaderMaterial：提供了内置的uniforms和attributes，如
projectionMatrix、modelViewMatrix等 - RawShaderMaterial：更底层的材质，需要手动定义所有uniforms和attributes
在本示例中，我们使用RawShaderMaterial并手动定义了所需的uniforms：
const material = new THREE.RawShaderMaterial( {
uniforms: {
time: { value: 1.0 }
},
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
side: THREE.DoubleSide,
transparent: true
} );
性能优化与应用场景
使用自定义着色器的优势：
- 高性能：直接在GPU上运行，避免CPU-GPU数据传输瓶颈
- 灵活性：可以实现几乎任何图形效果
- 资源高效：可以精确控制渲染过程
适用场景：
- 复杂的视觉效果和动画
- 基于物理的渲染
- 数据可视化
- 后处理效果
- 粒子系统
通过合理使用自定义着色器，我们可以在Three.js中实现非常高级和复杂的图形效果，同时保持良好的性能表现。