保姆级教程：用Three.js和WebGL亲手实现一个‘重投影’Demo（附完整代码）

从零实现Three.js重投影效果实战WebGL时间性抗锯齿技术在实时渲染领域重投影(Reprojection)技术正成为提升视觉质量的关键手段。想象一下当你在浏览器中构建一个3D产品展示页面用户旋转查看时边缘锯齿明显影响体验——这正是TAA(Temporal Anti-Aliasing)技术要解决的问题。本文将带你用Three.js实现重投影核心逻辑理解如何利用历史帧数据提升当前帧渲染质量。1. 环境准备与基础场景搭建首先创建包含静态和动态物体的演示场景。我们需要npm install three three-mesh-bvh基础场景配置代码import * as THREE from three; // 初始化场景 const scene new THREE.Scene(); scene.background new THREE.Color(0x111111); // 添加坐标轴辅助调试用 scene.add(new THREE.AxesHelper(5)); // 创建静态物体 - 地面 const groundGeometry new THREE.PlaneGeometry(20, 20); const groundMaterial new THREE.MeshStandardMaterial({ color: 0x444444, roughness: 0.8 }); const ground new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x -Math.PI / 2; scene.add(ground); // 创建动态物体 - 旋转立方体 const cubeGeometry new THREE.BoxGeometry(2, 2, 2); const cubeMaterial new THREE.MeshStandardMaterial({ color: 0x00ff00, metalness: 0.5 }); const cube new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.y 1; scene.add(cube);提示使用MeshStandardMaterial以便后续添加光照效果。ground的旋转设置使其成为水平面。2. 投影矩阵与摄像机系统理解摄像机变换是重投影的核心。Three.js中摄像机包含两个关键矩阵// 透视摄像机配置 const camera new THREE.PerspectiveCamera( 75, // FOV window.innerWidth / window.innerHeight, // 宽高比 0.1, // 近裁剪面 1000 // 远裁剪面 ); // 关键矩阵说明 // - camera.projectionMatrix: 将视图空间坐标转换到裁剪空间 // - camera.matrixWorldInverse: 世界坐标到视图坐标的变换投影矩阵工作流程世界空间 → (modelViewMatrix) → 视图空间视图空间 → (projectionMatrix) → 裁剪空间裁剪空间 → (透视除法) → 标准化设备坐标存储历史帧矩阵数据let history { projectionMatrix: new THREE.Matrix4(), matrixWorldInverse: new THREE.Matrix4(), time: 0 }; function updateHistory() { history.projectionMatrix.copy(camera.projectionMatrix); history.matrixWorldInverse.copy(camera.matrixWorldInverse); history.time performance.now(); }3. 实现重投影核心算法反向重投影的关键计算步骤function reproject(currentPixel, currentCamera, historyData, object) { // 步骤1获取当前像素对应的世界坐标 const worldPos getWorldPositionFromPixel(currentPixel, currentCamera); // 步骤2转换到历史帧的视图空间 const historicalViewPos worldPos.applyMatrix4(historyData.matrixWorldInverse); // 步骤3应用历史投影矩阵 const historicalClipPos historicalViewPos.applyMatrix4(historyData.projectionMatrix); // 步骤4转换为NDC坐标 [-1,1]范围 const ndc new THREE.Vector3( historicalClipPos.x / historicalClipPos.w, historicalClipPos.y / historicalClipPos.w, historicalClipPos.z / historicalClipPos.w ); // 步骤5转换为历史帧像素坐标 return new THREE.Vector2( ((ndc.x 1) / 2) * canvas.width, ((1 - ndc.y) / 2) * canvas.height ); }动态物体处理需要额外步骤// 获取物体变换矩阵的逆矩阵 const inverseModelMatrix new THREE.Matrix4() .copy(object.matrixWorld) .invert(); // 在重投影前应用逆变换 const historicalObjectPos worldPos.applyMatrix4(inverseModelMatrix);4. 性能优化与实战技巧WebGL环境下实现高效重投影需要注意渲染目标配置优化// 创建用于存储历史帧的渲染目标 const historyRenderTarget new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat, type: THREE.FloatType } );着色器优化技巧在片段着色器中实现重投影采样uniform sampler2D currentFrame; uniform sampler2D historyFrame; uniform mat4 prevProjectionMatrix; uniform mat4 prevModelViewMatrix; vec2 reproject(vec2 uv) { // 获取当前世界位置需要深度信息 vec4 worldPos getWorldPositionFromDepth(uv); // 转换到上一帧视图空间 vec4 prevViewPos prevModelViewMatrix * worldPos; // 应用上一帧投影矩阵 vec4 prevClipPos prevProjectionMatrix * prevViewPos; // 转换为NDC并计算UV坐标 vec2 prevNDC prevClipPos.xy / prevClipPos.w; return prevNDC * 0.5 0.5; } void main() { vec2 historyUV reproject(vUv); vec4 historyColor texture2D(historyFrame, historyUV); vec4 currentColor texture2D(currentFrame, vUv); // 简单混合算法 gl_FragColor mix(currentColor, historyColor, 0.5); }常见问题排查表问题现象可能原因解决方案重影效果物体移动速度过快增加运动矢量计算边缘闪烁深度测试不准确使用更精确的深度缓冲性能低下全屏重投影计算分块处理或降低采样率5. 进阶应用实现简易TAA效果结合重投影实现时间性抗锯齿的基本流程初始化阶段创建双缓冲渲染目标设置运动矢量通道渲染循环function render() { // 更新历史数据 updateHistory(); // 第一遍渲染当前帧到临时缓冲区 renderer.setRenderTarget(tempRenderTarget); renderer.render(scene, camera); // 第二遍应用TAA合成 taaMaterial.uniforms.currentFrame.value tempRenderTarget.texture; taaMaterial.uniforms.historyFrame.value historyRenderTarget.texture; renderer.setRenderTarget(historyRenderTarget); renderer.render(taaScene, taaCamera); // 最终输出到屏幕 renderer.setRenderTarget(null); renderer.render(taaScene, taaCamera); }运动矢量计算实现// 在顶点着色器中添加 uniform mat4 prevModelViewProjectionMatrix; attribute vec3 position; attribute vec3 previousPosition; varying vec2 vMotionVector; void main() { vec4 currentPos modelViewProjectionMatrix * vec4(position, 1.0); vec4 prevPos prevModelViewProjectionMatrix * vec4(previousPosition, 1.0); vec2 currentNDC currentPos.xy / currentPos.w; vec2 prevNDC prevPos.xy / prevPos.w; vMotionVector currentNDC - prevNDC; }在Three.js项目中我发现最有效的优化策略是合理控制历史帧的混合权重。经过多次测试动态调整混合比例基于物体运动速度能显著减少重影现象。