第35节：全局光照与路径追踪探索

第35节：全局光照与路径追踪探索

概述

全局光照是现代3D渲染的核心技术，通过模拟光线在场景中的多次反弹，实现真实的光照效果和物理正确的材质表现。本节将深入探索实时全局光照方案、路径追踪原理、以及如何在Three.js中实现次世代渲染效果。

全局光照系统架构：

核心原理深度解析

光线传输方程

全局光照的数学基础是渲染方程：

Lₒ(x, ωₒ) = Lₑ(x, ωₒ) + ∫ᴴ⁰ fᵣ(x, ωᵢ, ωₒ) Lᵢ(x, ωᵢ) cosθᵢ dωᵢ

其中：

• Lₒ: 出射辐射度
• Lₑ: 自发光辐射度
• fᵣ: 双向反射分布函数（BRDF）
• Lᵢ: 入射辐射度
• cosθᵢ: 入射角余弦

全局光照技术对比

技术方案	原理	优点	缺点	适用场景
光照贴图	预计算静态光照	性能极高、质量好	无法动态更新、内存占用大	静态场景
光照探针	空间采样点	支持动态物体、实时更新	采样稀疏、插值问题	室内场景
DDGI	动态漫反射全局光照	高质量动态GI、实时更新	计算复杂、VRAM占用	高端游戏
路径追踪	物理精确模拟	照片级真实感、物理正确	计算密集、实时困难	离线渲染
Lumen	距离场+表面缓存	高质量实时GI、动态场景	硬件要求高、实现复杂	次世代游戏

完整代码实现

高级全局光照系统

<template><div class="gi-rendering-container"><!-- 主渲染画布 --><canvas ref="renderCanvas" class="render-canvas"></canvas><!-- 渲染控制面板 --><div class="rendering-controls"><div class="control-section"><h3>🌞 光照设置</h3><div class="lighting-presets"><button v-for="preset in lightingPresets" :key="preset.id"@click="loadLightingPreset(preset)"class="preset-button":class="{ active: currentLighting?.id === preset.id }">{{ preset.name }}</button></div><div class="control-group"><label>环境光强度: {{ ambientIntensity }}</label><input type="range" v-model="ambientIntensity" min="0" max="2" step="0.1"></div><div class="control-group"><label>直接光强度: {{ directIntensity }}</label><input type="range" v-model="directIntensity" min="0" max="3" step="0.1"></div><div class="control-group"><label>间接光强度: {{ indirectIntensity }}</label><input type="range" v-model="indirectIntensity" min="0" max="2" step="0.1"></div></div><div class="control-section"><h3>🔮 GI 系统配置</h3><div class="gi-method-controls"><div class="control-group"><label>全局光照方法</label><select v-model="giMethod" class="method-select"><option value="lightmap">光照贴图</option><option value="probes">光照探针</option><option value="ddgi">DDGI</option><option value="pathtracing">路径追踪</option></select></div><div class="control-group"><label>光线反弹次数: {{ bounceCount }}</label><input type="range" v-model="bounceCount" min="1" max="8" step="1"></div><div class="control-group"><label>采样数量: {{ sampleCount }}</label><input type="range" v-model="sampleCount" min="1" max="256" step="1"></div></div><div class="gi-quality-controls"><div class="control-group"><label>辐照度图分辨率: {{ irradianceResolution }}</label><input type="range" v-model="irradianceResolution" min="16" max="128" step="16"></div><div class="control-group"><label>距离场分辨率: {{ distanceFieldResolution }}</label><input type="range" v-model="distanceFieldResolution" min="64" max="512" step="64"></div></div></div><div class="control-section"><h3>🎨 材质与反射</h3><div class="material-controls"><div class="control-group"><label>金属度: {{ materialMetallic }}</label><input type="range" v-model="materialMetallic" min="0" max="1" step="0.05"></div><div class="control-group"><label>粗糙度: {{ materialRoughness }}</label><input type="range" v-model="materialRoughness" min="0" max="1" step="0.05"></div><div class="control-group"><label>镜面反射: {{ materialSpecular }}</label><input type="range" v-model="materialSpecular" min="0" max="1" step="0.05"></div></div><div class="reflection-controls"><div class="control-group"><label>屏幕空间反射</label><input type="checkbox" v-model="ssrEnabled"></div><div class="control-group"><label>平面反射</label><input type="checkbox" v-model="planarReflectionsEnabled"></div><div class="control-group"><label>反射探针</label><input type="checkbox" v-model="reflectionProbesEnabled"></div></div></div><div class="control-section"><h3>🌫️ 后期处理</h3><div class="post-processing-controls"><div class="control-group"><label>环境光遮蔽: {{ aoIntensity }}</label><input type="range" v-model="aoIntensity" min="0" max="2" step="0.1"></div><div class="control-group"><label>Bloom强度: {{ bloomIntensity }}</label><input type="range" v-model="bloomIntensity" min="0" max="2" step="0.1"></div><div class="control-group"><label>色调映射: {{ toneMappingExposure }}</label><input type="range" v-model="toneMappingExposure" min="0" max="2" step="0.1"></div></div><div class="effect-controls"><div class="control-group"><label>启用HDR</label><input type="checkbox" v-model="hdrEnabled"></div><div class="control-group"><label>启用色彩分级</label><input type="checkbox" v-model="colorGradingEnabled"></div><div class="control-group"><label>启用胶片颗粒</label><input type="checkbox" v-model="filmGrainEnabled"></div></div></div><div class="control-section"><h3>📊 性能监控</h3><div class="performance-stats"><div class="stat-item"><span>渲染时间:</span><span>{{ renderTime.toFixed(2) }}ms</span></div><div class="stat-item"><span>GI计算时间:</span><span>{{ giComputeTime.toFixed(2) }}ms</span></div><div class="stat-item"><span>光线追踪:</span><span>{{ rayCount }} 光线/帧</span></div><div class="stat-item"><span>帧率:</span><span>{{ currentFPS }} FPS</span></div></div><div class="memory-stats"><div class="stat-item"><span>纹理内存:</span><span>{{ formatMemory(textureMemory) }}</span></div><div class="stat-item"><span>缓冲区内存:</span><span>{{ formatMemory(bufferMemory) }}</span></div><div class="stat-item"><span>探针数据:</span><span>{{ formatMemory(probeMemory) }}</span></div></div></div></div><!-- 场景信息显示 --><div class="scene-info-overlay"><div class="info-panel"><h4>场景信息</h4><div class="info-content"><div>GI方法: {{ giMethod.toUpperCase() }}</div><div>光线反弹: {{ bounceCount }} 次</div><div>采样数量: {{ sampleCount }}</div><div>辐照度分辨率: {{ irradianceResolution }}²</div></div></div></div><!-- 调试视图切换 --><div class="debug-views"><button v-for="view in debugViews" :key="view.id"@click="setDebugView(view)"class="debug-button":class="{ active: currentDebugView?.id === view.id }">{{ view.name }}</button></div><!-- 加载界面 --><div v-if="isLoading" class="loading-overlay"><div class="loading-content"><div class="light-probe-preview"><div class="probe-sphere"></div><div class="light-rays"><div class="ray"></div><div class="ray"></div><div class="ray"></div><div class="ray"></div><div class="ray"></div><div class="ray"></div></div></div><h3>初始化全局光照系统...</h3><div class="loading-progress"><div class="progress-bar"><div class="progress-fill" :style="loadingProgressStyle"></div></div><span>{{ loadingMessage }}</span></div><div class="loading-details"><span>预计算光照: {{ computedProbes }}/{{ totalProbes }} 探针</span><span>内存使用: {{ formatMemory(loadingMemory) }}</span></div></div></div><!-- 实时统计 --><div class="realtime-stats"><div class="stats-panel"><div class="stat-row"><span>三角形:</span><span>{{ formatNumber(triangleCount) }}</span></div><div class="stat-row"><span>绘制调用:</span><span>{{ drawCalls }}</span></div><div class="stat-row"><span>纹理:</span><span>{{ textureCount }}</span></div><div class="stat-row"><span>光源:</span><span>{{ lightCount }}</span></div></div></div></div>
</template><script>
import { onMounted, onUnmounted, ref, reactive, computed } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
import { SSAOPass } from 'three/addons/postprocessing/SSAOPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';// 光照探针系统
class LightProbeSystem {constructor(scene, resolution = 32) {this.scene = scene;this.resolution = resolution;this.probes = [];this.irradianceMap = null;this.distanceField = null;this.setupProbeGrid();this.generateDistanceField();}// 设置探针网格setupProbeGrid() {const gridSize = 8;const spacing = 4;for (let x = 0; x < gridSize; x++) {for (let y = 0; y < gridSize; y++) {for (let z = 0; z < gridSize; z++) {const position = new THREE.Vector3((x - gridSize / 2) * spacing,(y - gridSize / 2) * spacing,(z - gridSize / 2) * spacing);this.probes.push({position: position,irradiance: new THREE.Vector3(),visibility: 1.0,updated: false});}}}}// 生成距离场generateDistanceField() {const size = 64;const data = new Float32Array(size * size * size);// 简化实现 - 实际应该从场景几何体生成for (let x = 0; x < size; x++) {for (let y = 0; y < size; y++) {for (let z = 0; z < size; z++) {const idx = x * size * size + y * size + z;const worldPos = this.voxelToWorld(x, y, z, size);data[idx] = this.calculateDistance(worldPos);}}}this.distanceField = {data: data,size: size,bounds: new THREE.Box3(new THREE.Vector3(-16, -16, -16),new THREE.Vector3(16, 16, 16))};}// 体素到世界坐标转换voxelToWorld(x, y, z, size) {return new THREE.Vector3((x / size) * 32 - 16,(y / size) * 32 - 16,(z / size) * 32 - 16);}// 计算距离calculateDistance(position) {// 简化实现 - 计算到最近表面的距离let minDistance = Infinity;// 检查场景中的网格this.scene.traverse((object) => {if (object.isMesh) {const geometry = object.geometry;const matrixWorld = object.matrixWorld;// 将位置转换到对象局部空间const localPosition = position.clone();localPosition.applyMatrix4(new THREE.Matrix4().copy(matrixWorld).invert());// 简化距离计算const distance = geometry.boundingSphere ?localPosition.distanceTo(geometry.boundingSphere.center) - geometry.boundingSphere.radius :localPosition.length();minDistance = Math.min(minDistance, Math.abs(distance));}});return minDistance;}// 更新光照探针updateProbes(renderer, scene, camera) {const updateStartTime = performance.now();let updatedProbes = 0;for (const probe of this.probes) {if (!probe.updated) {this.updateSingleProbe(probe, scene);probe.updated = true;updatedProbes++;// 限制每帧更新的探针数量if (updatedProbes >= 4) break;}}this.updateTime = performance.now() - updateStartTime;return updatedProbes;}// 更新单个探针updateSingleProbe(probe, scene) {// 简化实现 - 实际应该使用球谐函数或立方体贴图const irradiance = new THREE.Vector3();let sampleCount = 0;// 采样周围光照for (let i = 0; i < 64; i++) {const direction = this.randomHemisphereDirection();const raycastResult = this.traceRay(probe.position, direction, scene);if (raycastResult.hit) {const lightContribution = this.calculateLightContribution(raycastResult.point, raycastResult.normal, scene);irradiance.add(lightContribution);sampleCount++;}}if (sampleCount > 0) {probe.irradiance.copy(irradiance.multiplyScalar(1 / sampleCount));}}// 随机半球方向randomHemisphereDirection() {const theta = Math.random() * Math.PI * 2;const phi = Math.acos(1 - 2 * Math.random());return new THREE.Vector3(Math.sin(phi) * Math.cos(theta),Math.sin(phi) * Math.sin(theta),Math.cos(phi));}// 光线追踪traceRay(origin, direction, scene, maxDistance = 20) {const raycaster = new THREE.Raycaster(origin, direction, 0.1, maxDistance);const intersects = raycaster.intersectObjects(scene.children, true);if (intersects.length > 0) {const intersect = intersects[0];return {hit: true,point: intersect.point,normal: intersect.face.normal,distance: intersect.distance,object: intersect.object};}return { hit: false };}// 计算光照贡献calculateLightContribution(point, normal, scene) {const lightContribution = new THREE.Vector3();scene.traverse((object) => {if (object.isLight) {const light = object;let contribution = new THREE.Vector3();if (light.isDirectionalLight) {contribution = this.calculateDirectionalLightContribution(light, point, normal);} else if (light.isPointLight) {contribution = this.calculatePointLightContribution(light, point, normal);} else if (light.isSpotLight) {contribution = this.calculateSpotLightContribution(light, point, normal);}lightContribution.add(contribution);}});return lightContribution;}// 计算平行光贡献calculateDirectionalLightContribution(light, point, normal) {const lightDir = new THREE.Vector3().copy(light.position).normalize().negate();const NdotL = Math.max(normal.dot(lightDir), 0);const color = new THREE.Color(light.color).multiplyScalar(light.intensity * NdotL);return new THREE.Vector3(color.r, color.g, color.b);}// 计算点光源贡献calculatePointLightContribution(light, point, normal) {const toLight = new THREE.Vector3().subVectors(light.position, point);const distance = toLight.length();const direction = toLight.normalize();const NdotL = Math.max(normal.dot(direction), 0);const attenuation = 1.0 / (distance * distance);const color = new THREE.Color(light.color).multiplyScalar(light.intensity * NdotL * attenuation);return new THREE.Vector3(color.r, color.g, color.b);}// 计算聚光灯贡献calculateSpotLightContribution(light, point, normal) {const toLight = new THREE.Vector3().subVectors(light.position, point);const distance = toLight.length();const direction = toLight.normalize();// 检查是否在锥形范围内const angle = Math.acos(direction.dot(light.target.position.clone().sub(light.position).normalize()));if (angle > light.angle) {return new THREE.Vector3(0, 0, 0);}const NdotL = Math.max(normal.dot(direction), 0);const attenuation = 1.0 / (distance * distance);const spotFactor = Math.pow(Math.cos(angle), light.penumbra);const color = new THREE.Color(light.color).multiplyScalar(light.intensity * NdotL * attenuation * spotFactor);return new THREE.Vector3(color.r, color.g, color.b);}// 获取插值辐照度getInterpolatedIrradiance(position) {let totalWeight = 0;const result = new THREE.Vector3();for (const probe of this.probes) {const distance = position.distanceTo(probe.position);const weight = 1.0 / (distance * distance + 0.0001);result.add(probe.irradiance.clone().multiplyScalar(weight));totalWeight += weight;}if (totalWeight > 0) {result.multiplyScalar(1 / totalWeight);}return result;}
}// DDGI 系统（动态漫反射全局光照）
class DDGISystem {constructor(scene, options = {}) {this.scene = scene;this.options = {probeCount: 8,rayCount: 128,irradianceResolution: 32,distanceResolution: 16,...options};this.probes = [];this.irradianceTexture = null;this.distanceTexture = null;this.setupProbes();}// 设置探针setupProbes() {const probeCount = this.options.probeCount;const bounds = this.computeSceneBounds();for (let x = 0; x < probeCount; x++) {for (let y = 0; y < probeCount; y++) {for (let z = 0; z < probeCount; z++) {const position = new THREE.Vector3(bounds.min.x + (bounds.max.x - bounds.min.x) * (x / (probeCount - 1)),bounds.min.y + (bounds.max.y - bounds.min.y) * (y / (probeCount - 1)),bounds.min.z + (bounds.max.z - bounds.min.z) * (z / (probeCount - 1)));this.probes.push({position: position,irradiance: new Array(6).fill().map(() => new THREE.Vector3()),distance: new Array(6).fill().map(() => 10.0),updated: false});}}}}// 计算场景边界computeSceneBounds() {const bounds = new THREE.Box3();this.scene.traverse((object) => {if (object.isMesh) {object.updateMatrixWorld(true);const geometry = object.geometry;if (geometry.boundingBox) {const worldBounds = geometry.boundingBox.clone();worldBounds.applyMatrix4(object.matrixWorld);bounds.union(worldBounds);}}});// 如果场景为空，使用默认边界if (bounds.isEmpty()) {bounds.setFromCenterAndSize(new THREE.Vector3(), new THREE.Vector3(20, 20, 20));}return bounds;}// 更新DDGI探针update(renderer, scene, camera) {const updateStart = performance.now();let raysCast = 0;for (const probe of this.probes) {if (!probe.updated) {raysCast += this.updateProbe(probe, scene);probe.updated = true;break; // 每帧只更新一个探针}}this.updateTime = performance.now() - updateStart;return raysCast;}// 更新单个探针updateProbe(probe, scene) {let raysCast = 0;const directions = this.generateHemisphereDirections(this.options.rayCount);for (let face = 0; face < 6; face++) {const faceIrradiance = new THREE.Vector3();const faceDistances = [];let validSamples = 0;for (const direction of directions) {const rotatedDirection = this.rotateDirectionForFace(direction, face);const rayResult = this.traceRay(probe.position, rotatedDirection, scene);if (rayResult.hit) {const light = this.calculateIncomingLight(rayResult, scene);faceIrradiance.add(light);faceDistances.push(rayResult.distance);validSamples++;} else {faceDistances.push(100.0); // 最大距离}raysCast++;}if (validSamples > 0) {probe.irradiance[face] = faceIrradiance.multiplyScalar(1 / validSamples);probe.distance[face] = this.median(faceDistances);}}return raysCast;}// 生成半球方向generateHemisphereDirections(count) {const directions = [];const goldenRatio = (1 + Math.sqrt(5)) / 2;for (let i = 0; i < count; i++) {const theta = 2 * Math.PI * i / goldenRatio;const phi = Math.acos(1 - 2 * (i + 0.5) / count);directions.push(new THREE.Vector3(Math.sin(phi) * Math.cos(theta),Math.sin(phi) * Math.sin(theta),Math.cos(phi)));}return directions;}// 为立方体面旋转方向rotateDirectionForFace(direction, face) {const rotations = [new THREE.Vector3(direction.z, direction.y, -direction.x),  // +Xnew THREE.Vector3(-direction.z, direction.y, direction.x),  // -Xnew THREE.Vector3(direction.x, direction.z, -direction.y),  // +Ynew THREE.Vector3(direction.x, -direction.z, direction.y),  // -Ynew THREE.Vector3(direction.x, direction.y, direction.z),   // +Znew THREE.Vector3(-direction.x, direction.y, -direction.z)  // -Z];return rotations[face].normalize();}// 计算入射光calculateIncomingLight(rayResult, scene) {const light = new THREE.Vector3();// 直接光照scene.traverse((object) => {if (object.isLight) {const lightContribution = this.calculateDirectLightContribution(object, rayResult);light.add(lightContribution);}});// 间接光照（简化实现）const indirect = this.calculateIndirectLightContribution(rayResult);light.add(indirect);return light;}// 计算直接光照贡献calculateDirectLightContribution(light, rayResult) {// 简化实现const contribution = new THREE.Vector3();if (light.isDirectionalLight) {const lightDir = new THREE.Vector3().copy(light.position).normalize().negate();const NdotL = Math.max(rayResult.normal.dot(lightDir), 0);contribution.set(light.color.r * light.intensity * NdotL,light.color.g * light.intensity * NdotL,light.color.b * light.intensity * NdotL);}return contribution;}// 计算间接光照贡献calculateIndirectLightContribution(rayResult) {// 简化实现 - 实际应该采样周围的DDGI探针return new THREE.Vector3(0.1, 0.1, 0.1);}// 计算中位数median(numbers) {const sorted = numbers.slice().sort((a, b) => a - b);const middle = Math.floor(sorted.length / 2);if (sorted.length % 2 === 0) {return (sorted[middle - 1] + sorted[middle]) / 2;}return sorted[middle];}// 光线追踪（复用LightProbeSystem的实现）traceRay(origin, direction, scene, maxDistance = 50) {const raycaster = new THREE.Raycaster(origin, direction, 0.1, maxDistance);const intersects = raycaster.intersectObjects(scene.children, true);if (intersects.length > 0) {const intersect = intersects[0];return {hit: true,point: intersect.point,normal: intersect.face.normal,distance: intersect.distance,object: intersect.object};}return { hit: false };}// 获取插值光照getInterpolatedLight(position, normal) {// 简化实现 - 实际应该使用三线性插值let totalWeight = 0;const irradiance = new THREE.Vector3();for (const probe of this.probes) {const distance = position.distanceTo(probe.position);const weight = 1.0 / (distance * distance + 0.1);// 使用最近的面的辐照度const faceIrradiance = probe.irradiance[0]; // 简化irradiance.add(faceIrradiance.clone().multiplyScalar(weight));totalWeight += weight;}if (totalWeight > 0) {irradiance.multiplyScalar(1 / totalWeight);}// 应用法线影响return irradiance.multiplyScalar(Math.max(normal.dot(new THREE.Vector3(0, 1, 0)), 0.1));}
}// 路径追踪渲染器
class PathTracingRenderer {constructor(scene, camera, options = {}) {this.scene = scene;this.camera = camera;this.options = {samplesPerPixel: 4,maxBounces: 3,resolutionScale: 0.5,...options};this.sampleCount = 0;this.accumulationBuffer = null;this.setupRenderTarget();}// 设置渲染目标setupRenderTarget() {const width = Math.floor(window.innerWidth * this.options.resolutionScale);const height = Math.floor(window.innerHeight * this.options.resolutionScale);this.accumulationBuffer = new Float32Array(width * height * 3);this.renderTarget = new THREE.WebGLRenderTarget(width, height, {minFilter: THREE.LinearFilter,magFilter: THREE.LinearFilter,format: THREE.RGBAFormat,type: THREE.FloatType});}// 渲染路径追踪帧render(renderer, scene, camera) {const startTime = performance.now();if (this.sampleCount === 0) {this.accumulationBuffer.fill(0);}const width = this.renderTarget.width;const height = this.renderTarget.height;// 简化实现 - 实际应该使用compute shaderfor (let y = 0; y < height; y++) {for (let x = 0; x < width; x++) {const pixelColor = this.tracePixel(x, y, width, height);const idx = (y * width + x) * 3;// 累积颜色this.accumulationBuffer[idx] += pixelColor.r;this.accumulationBuffer[idx + 1] += pixelColor.g;this.accumulationBuffer[idx + 2] += pixelColor.b;}}this.sampleCount++;this.updateRenderTarget();this.renderTime = performance.now() - startTime;return this.renderTime;}// 追踪像素tracePixel(x, y, width, height) {const color = new THREE.Vector3();for (let i = 0; i < this.options.samplesPerPixel; i++) {const ray = this.generateRay(x, y, width, height);const rayColor = this.traceRay(ray, 0);color.add(rayColor);}return color.multiplyScalar(1 / this.options.samplesPerPixel);}// 生成光线generateRay(x, y, width, height) {const ndcX = (x + Math.random()) / width * 2 - 1;const ndcY = 1 - (y + Math.random()) / height * 2;const origin = new THREE.Vector3();const direction = new THREE.Vector3(ndcX, ndcY, -1).unproject(this.camera).sub(origin).normalize();return { origin, direction };}// 追踪光线traceRay(ray, depth) {if (depth >= this.options.maxBounces) {return new THREE.Vector3(0, 0, 0); // 黑色}const intersect = this.intersectScene(ray);if (!intersect.hit) {// 返回环境色return new THREE.Vector3(0.2, 0.3, 0.5);}const material = this.getMaterial(intersect.object);const emission = this.getEmission(material);// 俄罗斯轮盘赌终止if (depth > 2 && Math.random() < 0.1) {return emission;}// 采样BRDFconst scattered = this.sampleBRDF(ray.direction, intersect.normal, material);const attenuation = this.getAttenuation(ray.direction, scattered.direction, intersect.normal, material);const scatteredColor = this.traceRay({origin: intersect.point,direction: scattered.direction}, depth + 1);return emission.add(scatteredColor.multiply(attenuation).multiplyScalar(scattered.pdf));}// 场景求交intersectScene(ray) {const raycaster = new THREE.Raycaster(ray.origin, ray.direction, 0.001, 1000);const intersects = raycaster.intersectObjects(this.scene.children, true);if (intersects.length > 0) {const intersect = intersects[0];return {hit: true,point: intersect.point,normal: intersect.face.normal,distance: intersect.distance,object: intersect.object};}return { hit: false };}// 获取材质getMaterial(object) {// 简化实现return {color: new THREE.Color(0.8, 0.8, 0.8),emission: new THREE.Color(0, 0, 0),roughness: 0.5,metallic: 0.0};}// 获取自发光getEmission(material) {return new THREE.Vector3(material.emission.r, material.emission.g, material.emission.b);}// 采样BRDFsampleBRDF(incident, normal, material) {// 简化实现 - 余弦加权采样const theta = Math.random() * Math.PI * 2;const phi = Math.acos(Math.sqrt(Math.random()));const localDir = new THREE.Vector3(Math.sin(phi) * Math.cos(theta),Math.sin(phi) * Math.sin(theta),Math.cos(phi));// 转换到世界空间const tangent = new THREE.Vector3(1, 0, 0);const bitangent = new THREE.Vector3(0, 1, 0);if (Math.abs(normal.x) > 0.9) {tangent.set(0, 0, 1);}bitangent.crossVectors(normal, tangent).normalize();tangent.crossVectors(bitangent, normal);const worldDir = new THREE.Vector3().copy(localDir).applyMatrix3(new THREE.Matrix3().set(tangent.x, bitangent.x, normal.x,tangent.y, bitangent.y, normal.y,tangent.z, bitangent.z, normal.z)).normalize();return {direction: worldDir,pdf: Math.max(localDir.z, 0.001) / Math.PI // 余弦PDF};}// 获取衰减getAttenuation(incident, outgoing, normal, material) {const NdotL = Math.max(outgoing.dot(normal), 0);const NdotV = Math.max(-incident.dot(normal), 0);// 简化Lambert BRDFconst diffuse = new THREE.Vector3(material.color.r * NdotL / Math.PI,material.color.g * NdotL / Math.PI,material.color.b * NdotL / Math.PI);return diffuse;}// 更新渲染目标updateRenderTarget() {const width = this.renderTarget.width;const height = this.renderTarget.height;const imageData = new Float32Array(width * height * 4);for (let i = 0; i < width * height; i++) {const r = this.accumulationBuffer[i * 3] / this.sampleCount;const g = this.accumulationBuffer[i * 3 + 1] / this.sampleCount;const b = this.accumulationBuffer[i * 3 + 2] / this.sampleCount;// 简单的色调映射const mappedR = r / (1 + r);const mappedG = g / (1 + g);const mappedB = b / (1 + b);imageData[i * 4] = mappedR;imageData[i * 4 + 1] = mappedG;imageData[i * 4 + 2] = mappedB;imageData[i * 4 + 3] = 1.0;}// 实际实现应该使用纹理上传console.log('路径追踪采样:', this.sampleCount);}// 重置累积reset() {this.sampleCount = 0;if (this.accumulationBuffer) {this.accumulationBuffer.fill(0);}}
}export default {name: 'GlobalIlluminationSystem',setup() {const renderCanvas = ref(null);const ambientIntensity = ref(0.3);const directIntensity = ref(1.0);const indirectIntensity = ref(0.5);const giMethod = ref('probes');const bounceCount = ref(2);const sampleCount = ref(16);const irradianceResolution = ref(32);const distanceFieldResolution = ref(64);const materialMetallic = ref(0.0);const materialRoughness = ref(0.5);const materialSpecular = ref(0.5);const ssrEnabled = ref(false);const planarReflectionsEnabled = ref(false);const reflectionProbesEnabled = ref(true);const aoIntensity = ref(1.0);const bloomIntensity = ref(0.5);const toneMappingExposure = ref(1.0);const hdrEnabled = ref(true);const colorGradingEnabled = ref(true);const filmGrainEnabled = ref(false);const renderTime = ref(0);const giComputeTime = ref(0);const rayCount = ref(0);const currentFPS = ref(0);const textureMemory = ref(0);const bufferMemory = ref(0);const probeMemory = ref(0);const triangleCount = ref(0);const drawCalls = ref(0);const textureCount = ref(0);const lightCount = ref(0);const isLoading = ref(true);const loadingMessage = ref('初始化渲染系统...');const computedProbes = ref(0);const totalProbes = ref(512);const loadingMemory = ref(0);const lightingPresets = [{ id: 'sunny', name: '晴天' },{ id: 'overcast', name: '阴天' },{ id: 'sunset', name: '日落' },{ id: 'night', name: '夜晚' },{ id: 'studio', name: '摄影棚' }];const debugViews = [{ id: 'final', name: '最终渲染' },{ id: 'albedo', name: '漫反射' },{ id: 'normal', name: '法线' },{ id: 'roughness', name: '粗糙度' },{ id: 'irradiance', name: '辐照度' },{ id: 'depth', name: '深度' }];let currentLighting = ref(lightingPresets[0]);let currentDebugView = ref(debugViews[0]);let scene, camera, renderer, controls, composer;let lightProbeSystem, ddgiSystem, pathTracer;let clock, stats;let frameCount = 0;let lastFpsUpdate = 0;// 初始化场景const initScene = async () => {// 创建场景scene = new THREE.Scene();scene.background = new THREE.Color(0x444444);// 创建相机camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);camera.position.set(10, 8, 10);// 创建渲染器renderer = new THREE.WebGLRenderer({canvas: renderCanvas.value,antialias: true,powerPreference: "high-performance"});renderer.setSize(window.innerWidth, window.innerHeight);renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));renderer.shadowMap.enabled = true;renderer.shadowMap.type = THREE.PCFSoftShadowMap;renderer.toneMapping = THREE.ACESFilmicToneMapping;renderer.toneMappingExposure = toneMappingExposure.value;// 添加控制器controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true;// 设置后期处理setupPostProcessing();// 创建测试场景loadingMessage.value = '创建测试场景...';await createTestScene();// 初始化GI系统loadingMessage.value = '初始化全局光照系统...';await setupGISystems();isLoading.value = false;// 启动渲染循环clock = new THREE.Clock();animate();};// 设置后期处理const setupPostProcessing = () => {composer = new EffectComposer(renderer);const renderPass = new RenderPass(scene, camera);composer.addPass(renderPass);// SSAO通道const ssaoPass = new SSAOPass(scene, camera, window.innerWidth, window.innerHeight);ssaoPass.kernelRadius = 8;ssaoPass.minDistance = 0.005;ssaoPass.maxDistance = 0.1;composer.addPass(ssaoPass);// Bloom通道const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight),1.5,0.4,0.85);composer.addPass(bloomPass);};// 创建测试场景const createTestScene = async () => {// 添加环境光const ambientLight = new THREE.AmbientLight(0x404040, ambientIntensity.value);scene.add(ambientLight);// 添加方向光const directionalLight = new THREE.DirectionalLight(0xffffff, directIntensity.value);directionalLight.position.set(10, 10, 5);directionalLight.castShadow = true;directionalLight.shadow.mapSize.width = 2048;directionalLight.shadow.mapSize.height = 2048;scene.add(directionalLight);// 创建Cornell Box风格场景createCornellBox();// 添加测试物体createTestObjects();// 更新统计updateSceneStats();};// 创建Cornell Boxconst createCornellBox = () => {const roomSize = 10;const wallThickness = 0.1;// 地板const floorGeometry = new THREE.PlaneGeometry(roomSize, roomSize);const floorMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff,roughness: 0.8});const floor = new THREE.Mesh(floorGeometry, floorMaterial);floor.rotation.x = -Math.PI / 2;floor.position.y = -roomSize / 2;floor.receiveShadow = true;scene.add(floor);// 天花板const ceiling = new THREE.Mesh(floorGeometry, floorMaterial);ceiling.rotation.x = Math.PI / 2;ceiling.position.y = roomSize / 2;ceiling.receiveShadow = true;scene.add(ceiling);// 墙壁const wallMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff,roughness: 0.7});// 左墙（红色）const leftWallMaterial = wallMaterial.clone();leftWallMaterial.color.set(0xff4444);const leftWall = new THREE.Mesh(new THREE.PlaneGeometry(roomSize, roomSize),leftWallMaterial);leftWall.position.set(-roomSize / 2, 0, 0);leftWall.rotation.y = Math.PI / 2;leftWall.receiveShadow = true;scene.add(leftWall);// 右墙（绿色）const rightWallMaterial = wallMaterial.clone();rightWallMaterial.color.set(0x44ff44);const rightWall = new THREE.Mesh(new THREE.PlaneGeometry(roomSize, roomSize),rightWallMaterial);rightWall.position.set(roomSize / 2, 0, 0);rightWall.rotation.y = -Math.PI / 2;rightWall.receiveShadow = true;scene.add(rightWall);// 后墙const backWall = new THREE.Mesh(new THREE.PlaneGeometry(roomSize, roomSize),wallMaterial);backWall.position.set(0, 0, -roomSize / 2);backWall.receiveShadow = true;scene.add(backWall);};// 创建测试物体const createTestObjects = () => {// 金属球const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);const metalMaterial = new THREE.MeshStandardMaterial({color: 0x888888,metalness: 1.0,roughness: 0.1});const metalSphere = new THREE.Mesh(sphereGeometry, metalMaterial);metalSphere.position.set(-2, -3, 0);metalSphere.castShadow = true;scene.add(metalSphere);// 漫反射球const diffuseMaterial = new THREE.MeshStandardMaterial({color: 0x4488ff,metalness: 0.0,roughness: 0.8});const diffuseSphere = new THREE.Mesh(sphereGeometry, diffuseMaterial);diffuseSphere.position.set(2, -3, 0);diffuseSphere.castShadow = true;scene.add(diffuseSphere);// 玻璃球const glassMaterial = new THREE.MeshStandardMaterial({color: 0xffffff,metalness: 0.0,roughness: 0.0,transparent: true,opacity: 0.8});const glassSphere = new THREE.Mesh(sphereGeometry, glassMaterial);glassSphere.position.set(0, -3, 2);glassSphere.castShadow = true;scene.add(glassSphere);};// 初始化GI系统const setupGISystems = async () => {// 光照探针系统lightProbeSystem = new LightProbeSystem(scene, irradianceResolution.value);// DDGI系统ddgiSystem = new DDGISystem(scene, {probeCount: 8,rayCount: sampleCount.value,irradianceResolution: irradianceResolution.value,distanceResolution: distanceFieldResolution.value});// 路径追踪器pathTracer = new PathTracingRenderer(scene, camera, {samplesPerPixel: sampleCount.value,maxBounces: bounceCount.value,resolutionScale: 0.25});// 模拟加载过程await simulateProbeCalculation();};// 模拟探针计算const simulateProbeCalculation = async () => {const totalSteps = 16;for (let i = 0; i < totalSteps; i++) {loadingMessage.value = `计算光照探针... ${i + 1}/${totalSteps}`;computedProbes.value = Math.floor((i + 1) / totalSteps * totalProbes.value);loadingMemory.value = computedProbes.value * 1024 * 1024;await new Promise(resolve => setTimeout(resolve, 200));}};// 更新场景统计const updateSceneStats = () => {let triangles = 0;let textures = 0;let lights = 0;scene.traverse((object) => {if (object.isMesh) {const geometry = object.geometry;if (geometry.index) {triangles += geometry.index.count / 3;} else {triangles += geometry.attributes.position.count / 3;}} else if (object.isLight) {lights++;}});triangleCount.value = triangles;lightCount.value = lights;textureCount.value = renderer.info.memory.textures;// 模拟绘制调用drawCalls.value = Math.floor(triangles / 1000) + 10;};// 加载光照预设const loadLightingPreset = (preset) => {currentLighting.value = preset;switch (preset.id) {case 'sunny':ambientIntensity.value = 0.3;directIntensity.value = 1.5;indirectIntensity.value = 0.3;break;case 'overcast':ambientIntensity.value = 0.7;directIntensity.value = 0.3;indirectIntensity.value = 0.5;break;case 'sunset':ambientIntensity.value = 0.4;directIntensity.value = 0.8;indirectIntensity.value = 0.6;break;case 'night':ambientIntensity.value = 0.1;directIntensity.value = 0.2;indirectIntensity.value = 0.1;break;case 'studio':ambientIntensity.value = 0.5;directIntensity.value = 1.0;indirectIntensity.value = 0.8;break;}};// 设置调试视图const setDebugView = (view) => {currentDebugView.value = view;// 实际实现应该切换着色器或渲染通道};// 动画循环const animate = () => {requestAnimationFrame(animate);const deltaTime = clock.getDelta();// 更新控制器controls.update();// 更新光照强度updateLighting();// 更新GI系统updateGISystems(deltaTime);// 渲染场景renderScene();// 更新性能统计updatePerformanceStats(deltaTime);};// 更新光照const updateLighting = () => {scene.traverse((object) => {if (object.isAmbientLight) {object.intensity = ambientIntensity.value;} else if (object.isDirectionalLight) {object.intensity = directIntensity.value;}});renderer.toneMappingExposure = toneMappingExposure.value;};// 更新GI系统const updateGISystems = (deltaTime) => {const giStartTime = performance.now();let raysThisFrame = 0;switch (giMethod.value) {case 'probes':raysThisFrame = lightProbeSystem.updateProbes(renderer, scene, camera);break;case 'ddgi':raysThisFrame = ddgiSystem.update(renderer, scene, camera);break;case 'pathtracing':pathTracer.render(renderer, scene, camera);raysThisFrame = pathTracer.options.samplesPerPixel * pathTracer.renderTarget.width * pathTracer.renderTarget.height;break;}rayCount.value = raysThisFrame;giComputeTime.value = performance.now() - giStartTime;};// 渲染场景const renderScene = () => {const renderStartTime = performance.now();if (giMethod.value === 'pathtracing') {// 使用路径追踪器渲染pathTracer.render(renderer, scene, camera);} else {// 使用标准渲染器composer.render();}renderTime.value = performance.now() - renderStartTime;};// 更新性能统计const updatePerformanceStats = (deltaTime) => {frameCount++;lastFpsUpdate += deltaTime;if (lastFpsUpdate >= 1.0) {currentFPS.value = Math.round(frameCount / lastFpsUpdate);// 更新内存统计const info = renderer.info.memory;textureMemory.value = info.textures * 1024 * 1024;bufferMemory.value = info.geometries * 1024 * 1024;probeMemory.value = lightProbeSystem.probes.length * 1024;frameCount = 0;lastFpsUpdate = 0;}};// 格式化数字const formatNumber = (num) => {if (num >= 1000000) {return (num / 1000000).toFixed(1) + 'M';} else if (num >= 1000) {return (num / 1000).toFixed(1) + 'K';}return num.toString();};// 格式化内存大小const formatMemory = (bytes) => {if (bytes >= 1024 * 1024) {return (bytes / (1024 * 1024)).toFixed(1) + ' MB';} else if (bytes >= 1024) {return (bytes / 1024).toFixed(1) + ' KB';}return bytes + ' B';};// 计算属性const loadingProgressStyle = computed(() => ({width: '100%'}));onMounted(() => {initScene();window.addEventListener('resize', handleResize);});onUnmounted(() => {if (renderer) {renderer.dispose();}window.removeEventListener('resize', handleResize);});const handleResize = () => {if (!camera || !renderer) return;camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);composer.setSize(window.innerWidth, window.innerHeight);};return {renderCanvas,ambientIntensity,directIntensity,indirectIntensity,giMethod,bounceCount,sampleCount,irradianceResolution,distanceFieldResolution,materialMetallic,materialRoughness,materialSpecular,ssrEnabled,planarReflectionsEnabled,reflectionProbesEnabled,aoIntensity,bloomIntensity,toneMappingExposure,hdrEnabled,colorGradingEnabled,filmGrainEnabled,renderTime,giComputeTime,rayCount,currentFPS,textureMemory,bufferMemory,probeMemory,triangleCount,drawCalls,textureCount,lightCount,isLoading,loadingMessage,computedProbes,totalProbes,loadingMemory,lightingPresets,debugViews,currentLighting,currentDebugView,loadingProgressStyle,loadLightingPreset,setDebugView,formatNumber,formatMemory};}
};
</script><style scoped>
.gi-rendering-container {width: 100%;height: 100vh;position: relative;background: #000;overflow: hidden;
}.render-canvas {width: 100%;height: 100%;display: block;
}.rendering-controls {position: absolute;top: 20px;right: 20px;width: 380px;background: rgba(0, 0, 0, 0.9);padding: 20px;border-radius: 12px;color: white;backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);max-height: 80vh;overflow-y: auto;
}.control-section {margin-bottom: 25px;padding-bottom: 15px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}.control-section:last-child {margin-bottom: 0;border-bottom: none;
}.control-section h3 {color: #00ff88;margin-bottom: 15px;font-size: 16px;display: flex;align-items: center;gap: 8px;
}.lighting-presets {display: grid;grid-template-columns: repeat(3, 1fr);gap: 8px;margin-bottom: 15px;
}.preset-button {padding: 8px;border: 1px solid #444;border-radius: 4px;background: rgba(255, 255, 255, 0.05);color: white;cursor: pointer;font-size: 11px;transition: all 0.3s ease;
}.preset-button:hover {border-color: #00ff88;
}.preset-button.active {border-color: #00ff88;background: rgba(0, 255, 136, 0.2);
}.control-group {margin-bottom: 15px;
}.control-group label {display: flex;justify-content: space-between;align-items: center;margin-bottom: 8px;color: #ccc;font-size: 14px;
}.control-group input[type="range"] {width: 100%;height: 6px;background: #444;border-radius: 3px;outline: none;opacity: 0.7;transition: opacity 0.2s;
}.control-group input[type="range"]:hover {opacity: 1;
}.control-group input[type="range"]::-webkit-slider-thumb {appearance: none;width: 16px;height: 16px;border-radius: 50%;background: #00ff88;cursor: pointer;
}.control-group input[type="checkbox"] {width: 18px;height: 18px;accent-color: #00ff88;
}.method-select {width: 100%;padding: 8px;border: 1px solid #444;border-radius: 4px;background: rgba(255, 255, 255, 0.1);color: white;font-size: 14px;
}.gi-method-controls,
.gi-quality-controls {display: grid;grid-template-columns: 1fr 1fr;gap: 15px;margin-bottom: 15px;
}.material-controls,
.post-processing-controls {display: grid;grid-template-columns: 1fr 1fr;gap: 15px;margin-bottom: 15px;
}.reflection-controls,
.effect-controls {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;
}.performance-stats,
.memory-stats {display: flex;flex-direction: column;gap: 8px;margin-bottom: 15px;
}.stat-item {display: flex;justify-content: space-between;align-items: center;padding: 6px 0;font-size: 12px;
}.stat-item span:first-child {color: #ccc;
}.stat-item span:last-child {color: #00ff88;font-weight: bold;
}.scene-info-overlay {position: absolute;top: 20px;left: 20px;background: rgba(0, 0, 0, 0.8);padding: 15px;border-radius: 8px;color: white;backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);
}.info-panel h4 {color: #00ff88;margin-bottom: 10px;font-size: 14px;
}.info-content {display: flex;flex-direction: column;gap: 5px;font-size: 12px;
}.info-content div {display: flex;justify-content: space-between;gap: 10px;
}.debug-views {position: absolute;bottom: 20px;left: 20px;display: flex;gap: 8px;flex-wrap: wrap;
}.debug-button {padding: 8px 12px;border: 1px solid #444;border-radius: 4px;background: rgba(255, 255, 255, 0.1);color: white;cursor: pointer;font-size: 11px;transition: all 0.3s ease;
}.debug-button:hover {border-color: #00aaff;
}.debug-button.active {border-color: #00aaff;background: rgba(0, 170, 255, 0.2);
}.realtime-stats {position: absolute;bottom: 20px;right: 20px;background: rgba(0, 0, 0, 0.8);padding: 10px;border-radius: 6px;backdrop-filter: blur(10px);
}.stats-panel {display: flex;flex-direction: column;gap: 4px;
}.stat-row {display: flex;justify-content: space-between;align-items: center;font-size: 11px;color: #ccc;
}.stat-row span:last-child {color: #00ff88;font-weight: bold;margin-left: 10px;
}.loading-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);display: flex;justify-content: center;align-items: center;z-index: 1000;
}.loading-content {text-align: center;color: white;
}.light-probe-preview {position: relative;width: 120px;height: 120px;margin: 0 auto 30px;
}.probe-sphere {width: 80px;height: 80px;background: radial-gradient(circle, #00ff88, #00aaff);border-radius: 50%;margin: 0 auto;position: relative;z-index: 2;animation: probePulse 2s infinite ease-in-out;
}.light-rays {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}.ray {position: absolute;width: 2px;height: 40px;background: linear-gradient(to top, rgba(255, 255, 255, 0.8), transparent);top: 50%;left: 50%;transform-origin: 0 0;animation: rayRotate 3s infinite linear;
}.ray:nth-child(1) { transform: rotate(0deg); animation-delay: 0s; }
.ray:nth-child(2) { transform: rotate(60deg); animation-delay: 0.5s; }
.ray:nth-child(3) { transform: rotate(120deg); animation-delay: 1s; }
.ray:nth-child(4) { transform: rotate(180deg); animation-delay: 1.5s; }
.ray:nth-child(5) { transform: rotate(240deg); animation-delay: 2s; }
.ray:nth-child(6) { transform: rotate(300deg); animation-delay: 2.5s; }.loading-content h3 {margin-bottom: 20px;color: white;font-size: 20px;
}.loading-progress {width: 300px;margin: 0 auto 15px;
}.progress-bar {width: 100%;height: 6px;background: rgba(255, 255, 255, 0.2);border-radius: 3px;overflow: hidden;margin-bottom: 10px;
}.progress-fill {height: 100%;background: linear-gradient(90deg, #00ff88, #00aaff);border-radius: 3px;transition: width 0.3s ease;
}.loading-details {display: flex;justify-content: space-between;font-size: 12px;color: #ccc;
}@keyframes probePulse {0%, 100% {transform: scale(1);box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);}50% {transform: scale(1.1);box-shadow: 0 0 40px rgba(0, 255, 136, 0.8);}
}@keyframes rayRotate {0% {transform: rotate(0deg) translateY(-20px);opacity: 0;}50% {opacity: 1;}100% {transform: rotate(360deg) translateY(-20px);opacity: 0;}
}/* 响应式设计 */
@media (max-width: 768px) {.rendering-controls {width: 320px;right: 10px;top: 10px;padding: 15px;}.gi-method-controls,.gi-quality-controls,.material-controls,.post-processing-controls {grid-template-columns: 1fr;}.lighting-presets {grid-template-columns: repeat(2, 1fr);}.scene-info-overlay {left: 10px;top: 10px;}.debug-views {left: 10px;bottom: 10px;}.realtime-stats {right: 10px;bottom: 10px;}
}
</style>

高级全局光照特性

实时路径追踪优化

// 渐进式路径追踪器
class ProgressivePathTracer {constructor(scene, camera, options = {}) {this.scene = scene;this.camera = camera;this.options = {samplesPerFrame: 1,maxBounces: 4,resolutionScale: 0.5,denoiseEnabled: true,...options};this.sampleCount = 0;this.frameCount = 0;this.accumulationBuffer = null;this.denoiser = new AIDenoiser();this.setupRenderTargets();}// 设置渲染目标setupRenderTargets() {const { width, height } = this.getRenderSize();// 累积缓冲区this.accumulationBuffer = new Float32Array(width * height * 4);// G-Bufferthis.gBuffer = new THREE.WebGLMultipleRenderTargets(width, height, 4);this.gBuffer.texture.forEach(texture => {texture.minFilter = THREE.NearestFilter;texture.magFilter = THREE.NearestFilter;});// 输出目标this.outputTarget = new THREE.WebGLRenderTarget(width, height, {minFilter: THREE.LinearFilter,magFilter: THREE.LinearFilter});}// 获取渲染尺寸getRenderSize() {return {width: Math.floor(window.innerWidth * this.options.resolutionScale),height: Math.floor(window.innerHeight * this.options.resolutionScale)};}// 渐进式渲染render(renderer, scene, camera) {this.frameCount++;// 渲染G-Bufferthis.renderGBuffer(renderer, scene, camera);// 路径追踪for (let i = 0; i < this.options.samplesPerFrame; i++) {this.renderPathTracingSample();this.sampleCount++;}// 后处理if (this.options.denoiseEnabled && this.sampleCount >= 4) {this.denoise();}// 合成最终图像this.compositeFinalImage();return this.outputTarget;}// 渲染G-BufferrenderGBuffer(renderer, scene, camera) {const originalRenderTarget = renderer.getRenderTarget();// 设置G-Buffer渲染renderer.setRenderTarget(this.gBuffer);renderer.clear();// 使用特殊着色器渲染几何信息scene.traverse((object) => {if (object.isMesh) {this.renderMeshToGBuffer(object, renderer, scene, camera);}});renderer.setRenderTarget(originalRenderTarget);}// 渲染网格到G-BufferrenderMeshToGBuffer(mesh, renderer, scene, camera) {// 使用特殊材质渲染位置、法线、材质属性等const gBufferMaterial = new THREE.ShaderMaterial({uniforms: {modelMatrix: { value: mesh.matrixWorld },viewMatrix: { value: camera.matrixWorldInverse },projectionMatrix: { value: camera.projectionMatrix }},vertexShader: `varying vec3 vPosition;varying vec3 vNormal;varying vec2 vUV;varying vec3 vColor;void main() {vPosition = (modelMatrix * vec4(position, 1.0)).xyz;vNormal = normalize(normalMatrix * normal);vUV = uv;vColor = color;gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);}`,fragmentShader: `varying vec3 vPosition;varying vec3 vNormal;varying vec2 vUV;varying vec3 vColor;void main() {// 位置 (RGB)gl_FragData[0] = vec4(vPosition, 1.0);// 法线 (RGB)gl_FragData[1] = vec4(normalize(vNormal) * 0.5 + 0.5, 1.0);// 漫反射颜色 (RGB)gl_FragData[2] = vec4(vColor, 1.0);// 材质属性 (R:粗糙度, G:金属度, B:镜面反射)gl_FragData[3] = vec4(0.5, 0.0, 0.5, 1.0);}`});// 保存原始材质const originalMaterial = mesh.material;mesh.material = gBufferMaterial;// 渲染renderer.render(mesh, camera);// 恢复原始材质mesh.material = originalMaterial;}// 渲染路径追踪样本renderPathTracingSample() {const { width, height } = this.getRenderSize();for (let y = 0; y < height; y++) {for (let x = 0; x < width; x++) {const color = this.tracePixel(x, y, width, height);this.accumulatePixel(x, y, color);}}}// 追踪像素tracePixel(x, y, width, height) {const ray = this.generateRay(x, y, width, height);return this.traceRay(ray, 0);}// 累积像素accumulatePixel(x, y, color) {const idx = (y * width + x) * 4;// 累积颜色this.accumulationBuffer[idx] += color.r;this.accumulationBuffer[idx + 1] += color.g;this.accumulationBuffer[idx + 2] += color.b;this.accumulationBuffer[idx + 3] += 1.0; // Alpha通道存储样本数}// 降噪denoise() {if (this.denoiser && this.sampleCount >= 4) {const { width, height } = this.getRenderSize();// 准备降噪输入const colorInput = this.getCurrentColorBuffer();const albedoInput = this.gBuffer.texture[2]; // 漫反射颜色const normalInput = this.gBuffer.texture[1]; // 法线// 应用AI降噪const denoised = this.denoiser.denoise(colorInput, albedoInput, normalInput, width, height);// 更新累积缓冲区this.updateAccumulationBuffer(denoised);}}// 合成最终图像compositeFinalImage() {const { width, height } = this.getRenderSize();const imageData = new Float32Array(width * height * 4);for (let i = 0; i < width * height; i++) {const sampleCount = this.accumulationBuffer[i * 4 + 3];if (sampleCount > 0) {// 计算平均颜色const invSampleCount = 1.0 / sampleCount;imageData[i * 4] = this.accumulationBuffer[i * 4] * invSampleCount;imageData[i * 4 + 1] = this.accumulationBuffer[i * 4 + 1] * invSampleCount;imageData[i * 4 + 2] = this.accumulationBuffer[i * 4 + 2] * invSampleCount;imageData[i * 4 + 3] = 1.0;}}// 应用色调映射this.applyToneMapping(imageData, width, height);// 上传到输出目标this.uploadToTexture(this.outputTarget, imageData);}// 应用色调映射applyToneMapping(imageData, width, height) {for (let i = 0; i < width * height; i++) {const r = imageData[i * 4];const g = imageData[i * 4 + 1];const b = imageData[i * 4 + 2];// ACES色调映射const aces = this.acesToneMapping(new THREE.Vector3(r, g, b));imageData[i * 4] = aces.x;imageData[i * 4 + 1] = aces.y;imageData[i * 4 + 2] = aces.z;}}// ACES色调映射acesToneMapping(color) {const a = 2.51;const b = 0.03;const c = 2.43;const d = 0.59;const e = 0.14;const clamped = color.clone().multiplyScalar(0.6) // 曝光调整.clampScalar(0, 100); // 防止过亮return clamped.multiply(clamped.clone().multiplyScalar(a).addScalar(b)).divide(clamped.clone().multiplyScalar(c).addScalar(d).multiply(clamped).addScalar(e)).clampScalar(0, 1);}// 重置累积reset() {this.sampleCount = 0;this.frameCount = 0;if (this.accumulationBuffer) {this.accumulationBuffer.fill(0);}}// 工具方法generateRay(x, y, width, height) {// 实现与之前相同}traceRay(ray, depth) {// 实现与之前相同}getCurrentColorBuffer() {// 返回当前颜色缓冲区}updateAccumulationBuffer(denoisedData) {// 更新累积缓冲区}uploadToTexture(target, data) {// 上传数据到纹理}
}// AI降噪器（简化实现）
class AIDenoiser {constructor() {this.initialized = false;}async init() {// 加载AI模型// 实际实现应该使用TensorFlow.js或ONNX Runtimethis.initialized = true;}denoise(color, albedo, normal, width, height) {if (!this.initialized) {return color; // 回退到原始图像}// 简化实现 - 实际应该使用神经网络const denoised = new Float32Array(width * height * 4);for (let i = 0; i < width * height; i++) {// 简单的基于法线和颜色的滤波const colorVal = this.bilateralFilter(i, color, normal, width, height);denoised[i * 4] = colorVal.r;denoised[i * 4 + 1] = colorVal.g;denoised[i * 4 + 2] = colorVal.b;denoised[i * 4 + 3] = 1.0;}return denoised;}bilateralFilter(index, color, normal, width, height) {// 简化双边滤波实现const x = index % width;const y = Math.floor(index / width);const kernelSize = 3;let totalWeight = 0;const result = new THREE.Vector3();for (let dy = -kernelSize; dy <= kernelSize; dy++) {for (let dx = -kernelSize; dx <= kernelSize; dx++) {const sampleX = Math.max(0, Math.min(width - 1, x + dx));const sampleY = Math.max(0, Math.min(height - 1, y + dy));const sampleIndex = sampleY * width + sampleX;// 空间权重const spatialDist = Math.sqrt(dx * dx + dy * dy);const spatialWeight = Math.exp(-spatialDist * spatialDist / 4.5);// 颜色权重const centerColor = new THREE.Vector3(color[sampleIndex * 4],color[sampleIndex * 4 + 1],color[sampleIndex * 4 + 2]);const sampleColor = new THREE.Vector3(color[sampleIndex * 4],color[sampleIndex * 4 + 1],color[sampleIndex * 4 + 2]);const colorDist = centerColor.distanceTo(sampleColor);const colorWeight = Math.exp(-colorDist * colorDist / 0.1);// 法线权重const centerNormal = new THREE.Vector3(normal[sampleIndex * 4] * 2 - 1,normal[sampleIndex * 4 + 1] * 2 - 1,normal[sampleIndex * 4 + 2] * 2 - 1);const sampleNormal = new THREE.Vector3(normal[sampleIndex * 4] * 2 - 1,normal[sampleIndex * 4 + 1] * 2 - 1,normal[sampleIndex * 4 + 2] * 2 - 1);const normalDot = Math.max(0, centerNormal.dot(sampleNormal));const normalWeight = normalDot * normalDot;const weight = spatialWeight * colorWeight * normalWeight;totalWeight += weight;result.add(sampleColor.clone().multiplyScalar(weight));}}if (totalWeight > 0) {result.multiplyScalar(1 / totalWeight);}return result;}
}

注意事项与最佳实践

1. 性能优化策略

   • 使用适当的分辨率缩放和采样数量
   • 实现渐进式渲染和帧累积
   • 使用AI降噪减少所需样本数
   • 优化光线求交和材质计算

2. 内存管理要点

   • 合理设置G-Buffer和累积缓冲区大小
   • 及时释放不再使用的纹理和缓冲区
   • 使用压缩格式存储中间结果
   • 监控VRAM使用并动态调整质量

3. 视觉质量优化

   • 实现物理正确的材质和光照模型
   • 使用高质量的色调映射算子
   • 添加适当的后期处理效果
   • 平衡实时性能和视觉质量

下一节预告

第36节：AI集成与3D场景中的智能NPC
将深入探索人工智能在3D场景中的应用，包括：路径规划算法、行为树系统、机器学习驱动的NPC行为、群体模拟，创造智能的虚拟角色和生态系统。