Babylon.js：MirrorTexture平面反射的科学与艺术

在3D渲染中，镜面反射是营造真实感的关键技术。Babylon.js的MirrorTexture为我们提供了强大的平面反射能力，但如何正确驾驭这个工具，在视觉效果与性能之间找到平衡点？本文将结合TypeScript类型安全的最佳实践，深入探讨MirrorTexture的完整使用方法。

TypeScript工程准备

在VSCode环境中，确保已通过npm安装Babylon.js核心包：

复制代码

npm install @babylonjs/core @babylonjs/materials

在TypeScript文件中引入所需组件（请勿使用BABYLON.前缀调用）：

TypeScript 复制代码

import { 
    MirrorTexture, 
    Plane, 
    StandardMaterial, 
    Mesh, 
    MeshBuilder, 
    Scene, 
    Vector3, 
    Color3,
    FresnelParameters
} from '@babylonjs/core';

MirrorTexture核心配置详解

MirrorTexture本质上是一个动态渲染目标纹理（RenderTargetTexture），每帧将场景从反射视角渲染到纹理中。

基础实现代码

TypeScript 复制代码

class MirrorEffectController {
    private scene: Scene;
    private mirrorPlane: Mesh;
    private mirrorTexture: MirrorTexture;

    constructor(scene: Scene) {
        this.scene = scene;
        this.createMirror();
    }

    private createMirror(): void {
        // 创建反射平面（推荐细分度较高的几何体）
        this.mirrorPlane = MeshBuilder.CreateGround("mirrorSurface", {
            width: 10,
            height: 10,
            subdivisions: 32
        }, this.scene);

        // 创建镜面反射纹理：参数分别为名称、尺寸、场景、是否生成深度
        this.mirrorTexture = new MirrorTexture(
            "mirrorTexture", 
            1024, 
            this.scene, 
            true
        );

        // 定义反射平面方程：Y=0平面，法向量向下
        this.mirrorTexture.mirrorPlane = Plane.FromPositionAndNormal(
            new Vector3(0, 0, 0),  // 平面基点
            new Vector3(0, -1, 0) // 法线方向（关键：必须指向反射面内部）
        );

        // 指定需要被反射的物体（性能关键！）
        this.mirrorTexture.renderList = this.getReflectableMeshes();
    }

    private getReflectableMeshes(): Mesh[] {
        // 筛选策略：返回需要在反射中出现的网格
        const allMeshes = this.scene.meshes.filter(m => m.isVisible) as Mesh[];
        
        // 排除不适合反射的物体
        return allMeshes.filter(mesh => {
            const boundingInfo = mesh.getBoundingInfo();
            const meshHeight = boundingInfo.maximumWorld.y;
            
            // 只包含地面以上的物体（假设反射平面在Y=0）
            return meshHeight > 0 && mesh.name !== "mirrorSurface";
        });
    }
}

关键点：

mirrorPlane的Normal方向 ：法向量必须远离观察者，即从反射面朝外指向反射空间。若设置错误会导致图像翻转或不显示。
renderList显式指定：这是最重要的性能优化手段。若不设置，MirrorTexture会渲染场景中所有物体，导致每帧增加大量draw call。

如何判断物体是否适合镜面反射

并非所有物体都需要出现在反射中，合理筛选可提升效率30%-50%。

适用性判断矩阵

场景类型	适合反射的物体	应排除的物体	判断依据
建筑场景	墙体、家具、动态角色	天花板、不可见区域、小物件	是否在反射视锥内
水面场景	建筑物、树木、船只	水下物体、粒子系统、UI元素	高度阈值 + 距离衰减
室内场景	墙面、装饰品、动态光源	地板本身、窗户（避免嵌套反射）	避免反射递归

代码实现：智能物体筛选

TypeScript 复制代码

interface ReflectableCriteria {
    minHeight: number;
    maxDistance: number;
    excludeNames: string[];
    maxTriangles: number;
}

class ReflectableObjectFilter {
    static getOptimalRenderList(
        scene: Scene,
        mirrorPlane: Plane,
        criteria: ReflectableCriteria
    ): Mesh[] {
        const reflectable: Mesh[] = [];
        const planePosition = mirrorPlane.normal.scale(-mirrorPlane.d);

        scene.meshes.forEach(mesh => {
            if (!mesh.isVisible || !(mesh instanceof Mesh)) return;

            // 排除镜子本身
            if (criteria.excludeNames.includes(mesh.name)) return;

            // 几何复杂度检查
            const vertexData = mesh.getTotalVertices();
            if (vertexData > criteria.maxTriangles) return;

            // 距离检查：物体到反射平面的距离
            const meshCenter = mesh.getBoundingInfo().boundingBox.centerWorld;
            const distance = Vector3.Distance(meshCenter, planePosition);
            if (distance > criteria.maxDistance) return;

            // 高度检查：物体必须高于反射平面
            const minY = mesh.getBoundingInfo().minimumWorld.y;
            if (minY < criteria.minHeight) return;

            reflectable.push(mesh as Mesh);
        });

        return reflectable;
    }
}

原则总结：

可见性优先：不可见物体绝不加入renderList
距离剔除：距离反射平面超过视椎范围的物体可排除
几何复杂度：高模网格会显著增加GPU负担，考虑用低模代理

纹理大小设定：科学而非艺术

纹理分辨率直接影响视觉质量 与显存带宽消耗，需根据场景特性量化选择。

分辨率选择公式

TypeScript 复制代码

function calculateOptimalTextureSize(
    mirrorSize: number,          // 反射平面在世界空间中的尺寸（米）
    maxViewDistance: number,     // 相机最远距离
    pixelDensity: number = 100   // 每米期望像素数，默认100
): number {
    // 基础尺寸：根据物理尺寸计算
    const baseSize = Math.ceil(mirrorSize * pixelDensity);
    
    // 距离修正：远离相机时分辨率需求下降
    const distanceFactor = Math.log10(Math.max(maxViewDistance, 10)) / 2;
    const adjustedSize = Math.ceil(baseSize / distanceFactor);
    
    // 限制在合理范围内
    const clampedSize = Math.max(
        256,              // 最小尺寸
        Math.min(2048, adjustedSize) // 最大尺寸
    );

    // 返回Power-of-Two值
    return nextPowerOfTwo(clampedSize);
}

function nextPowerOfTwo(value: number): number {
    return Math.pow(2, Math.ceil(Math.log2(value)));
}

不同平台推荐配置表

设备类型	小型镜子（<2米）	中型水面（2-10米）	大型水面（>10米）	性能影响	显存占用
移动端	256×256	512×512	1024×1024	高	~4-16MB
桌面端	512×512	1024×1024	2048×2048	中等	~16-64MB
高端PC	1024×1024	2048×2048	4096×4096	低	~64-256MB

动态分辨率调整策略

TypeScript 复制代码

class AdaptiveMirrorQuality {
    private baseSize: number;
    private currentSize: number;
    private readonly scene: Scene;

    constructor(scene: Scene, baseSize: number = 1024) {
        this.scene = scene;
        this.baseSize = baseSize;
        this.currentSize = baseSize;
    }

    updateTextureSize(mirrorTexture: MirrorTexture): void {
        // 根据帧率动态调整
        const fps = this.scene.getEngine().getFps();
        
        if (fps < 30 && this.currentSize > 256) {
            // 性能不足时降级
            this.currentSize = Math.max(256, this.currentSize / 2);
            this.resizeMirrorTexture(mirrorTexture);
        } else if (fps > 55 && this.currentSize < this.baseSize) {
            // 性能富余时升级
            this.currentSize = Math.min(this.baseSize, this.currentSize * 2);
            this.resizeMirrorTexture(mirrorTexture);
        }
    }

    private resizeMirrorTexture(mirrorTexture: MirrorTexture): void {
        // 注意：Babylon.js目前不支持直接resize MirrorTexture
        // 需要重新创建（谨慎使用，会导致瞬时卡顿）
        console.warn(`建议MirrorTexture尺寸: ${this.currentSize}px`);
    }
}

设定原则：

幂次方约束：必须保持为2的幂次方（256, 512, 1024...）以兼容GPU纹理压缩
视距权衡：远离相机的大面积反射面，可降低分辨率
避免过度分配：1024×1024纹理每帧消耗约16MB显存带宽，2048×1024则高达64MB

反射模糊效果：性能杀手还是优化手段？

模糊效果通过盒式滤波实现，本质是空间换时间的优化策略。

BlurKernel工作原理

TypeScript 复制代码

// 设置模糊强度（值越大越模糊）
mirrorTexture.blurKernel = 64; // 默认0（关闭），推荐值：32-128

// 或使用自适应模糊（基于视口比例）
mirrorTexture.adaptiveBlurKernel = 32; // 自动根据视口调整

性能影响量化分析

blurKernel值	质量	GPU耗时增幅	适用场景
0（关闭）	清晰锐利	基准	高端PC、近距离镜子
16	轻微模糊	+10-15%	金属表面
32	中等模糊	+25-35%	水面、磨砂玻璃
64+	高度模糊	+50-70%	远距离水面、艺术效果

意外发现 ：在移动端，blurKernel=32反而可能提升性能！

原因：模糊后的纹理在后续纹理采样时，GPU缓存命中率更高，纹理带宽压力下降。

实现优化：条件性模糊

TypeScript 复制代码

class PerformanceAwareMirror {
    private mirrorTexture: MirrorTexture;
    private readonly isMobile: boolean;

    constructor(scene: Scene) {
        const engine = scene.getEngine();
        this.isMobile = engine.getRenderWidth() < 1920 || 
                       (navigator as any).userAgent.includes('Mobile');
        
        this.mirrorTexture = this.createOptimizedMirror(scene);
    }

    private createOptimizedMirror(scene: Scene): MirrorTexture {
        const texture = new MirrorTexture("mirror", 1024, scene, true);
        
        // 移动端强制开启模糊以降低纹理带宽
        if (this.isMobile) {
            texture.blurKernel = 32; // 牺牲清晰度换取流畅度
            texture.blurRatio = 0.5; // 降低模糊计算分辨率
        } else {
            // 桌面端根据距离动态调整
            this.enableDistanceBasedBlur(texture, scene);
        }

        return texture;
    }

    private enableDistanceBasedBlur(
        texture: MirrorTexture,
        scene: Scene
    ): void {
        scene.onBeforeRenderObservable.add(() => {
            const camera = scene.activeCamera;
            if (!camera) return;

            const mirrorPos = new Vector3(0, 0, 0);
            const distance = camera.position.subtract(mirrorPos).length();
            
            // 距离越远，模糊越强（LOD思想）
            texture.blurKernel = Math.min(distance / 10, 32);
        });
    }
}

反射强度控制：物理正确性 vs 艺术表达

反射强度决定最终混合比例，需考虑材质金属度 、菲涅尔效应 和环境光。

多层强度控制体系

TypeScript 复制代码

class ReflectionIntensityController {
    configurePhysicalBasedReflection(
        material: StandardMaterial,
        surfaceType: 'water' | 'mirror' | 'metal' | 'glass'
    ): void {
        // 1. 基础反射强度（纹素级别控制）
        material.reflectionTexture.level = this.getBaseLevel(surfaceType);

        // 2. 菲涅尔参数（视角相关强度）
        material.reflectionFresnelParameters = this.getFresnelParams(surfaceType);

        // 3. 材质固有属性
        material.specularColor = this.getSpecularColor(surfaceType);
        material.roughness = 0.1; // 低粗糙度增强反射清晰度
    }

    private getBaseLevel(type: string): number {
        const levels: Record<string, number> = {
            'water': 0.6,   // 水面反射60%强度
            'mirror': 1.0,  // 镜子100%反射
            'metal': 0.8,   // 金属80%反射
            'glass': 0.3    // 玻璃30%反射
        };
        return levels[type] ?? 0.5;
    }

    private getFresnelParams(type: string): FresnelParameters {
        const params = new FresnelParameters();
        
        switch(type) {
            case 'water':
                params.bias = 0.1;      // 基础偏移
                params.power = 2;       // 幂次衰减
                params.leftColor = new Color3(0.8, 0.8, 0.9); // 近处颜色（天空）
                params.rightColor = new Color3(0.1, 0.3, 0.5); // 远处颜色（深水）
                break;
            case 'mirror':
                params.bias = 0.02;     // 几乎无偏移
                params.power = 128;     // 极高幂次，边缘几乎全反射
                params.leftColor = Color3.White();
                params.rightColor = Color3.Black();
                break;
        }
        
        return params;
    }

    private getSpecularColor(type: string): Color3 {
        const colors: Record<string, Color3> = {
            'water': new Color3(0.8, 0.9, 1.0),
            'mirror': new Color3(1.0, 1.0, 1.0),
            'metal': new Color3(0.9, 0.9, 0.9)
        };
        return colors[type] ?? new Color3(0.5, 0.5, 0.5);
    }
}

运行时动态调整

TypeScript 复制代码

class DynamicReflectionController {
    private material: StandardMaterial;
    private baseLevel: number;

    constructor(material: StandardMaterial, baseLevel: number = 0.6) {
        this.material = material;
        this.baseLevel = baseLevel;
        
        // 订阅场景渲染前事件
        this.material.getScene().onBeforeRenderObservable.add(() => {
            this.updateReflectionIntensity();
        });
    }

    private updateReflectionIntensity(): void {
        const scene = this.material.getScene();
        const camera = scene.activeCamera;
        if (!camera) return;

        // 根据时间变化模拟水波（可选）
        const time = performance.now() * 0.001;
        const waveEffect = Math.sin(time) * 0.1 + Math.cos(time * 0.7) * 0.05;
        
        // 根据相机距离调整
        const mirrorPos = this.material.getScene().getMeshByName("mirrorSurface")?.position;
        if (mirrorPos) {
            const distance = camera.position.subtract(mirrorPos).length();
            const distanceFactor = Math.max(0.3, Math.min(1.0, 20 / distance));
            
            // 综合计算最终强度
            this.material.reflectionTexture.level = this.baseLevel * distanceFactor + waveEffect;
        }
    }
}

完整项目示例：PBR物理正确的水面

TypeScript 复制代码

import { 
    PBRMaterial,
    MirrorTexture,
    Plane,
    MeshBuilder,
    Scene,
    Vector3,
    Color3
} from '@babylonjs/core';

class PBRWaterMirror {
    private waterMesh: Mesh;
    private waterMaterial: PBRMaterial;
    private mirrorTexture: MirrorTexture;

    constructor(scene: Scene, size: number = 20) {
        this.createWaterSurface(scene, size);
        this.configureReflection(scene);
    }

    private createWaterSurface(scene: Scene, size: number): void {
        this.waterMesh = MeshBuilder.CreateGround("water", {
            width: size,
            height: size,
            subdivisions: 64
        }, scene);

        // PBR材质提供更真实的物理表现
        this.waterMaterial = new PBRMaterial("waterPBR", scene);
        this.waterMaterial.metallicFactor = 0.0;  // 非金属
        this.waterMaterial.roughness = 0.15;      // 低粗糙度
        
        this.waterMesh.material = this.waterMaterial;
    }

    private configureReflection(scene: Scene): void {
        // 高清镜面纹理
        this.mirrorTexture = new MirrorTexture("waterMirror", 2048, scene, true);
        
        // 水面在Y=0平面
        this.mirrorTexture.mirrorPlane = Plane.FromPositionAndNormal(
            new Vector3(0, 0, 0),
            new Vector3(0, -1, 0)
        );

        // 智能筛选反射物体
        this.mirrorTexture.renderList = this.getFilteredRenderList(scene);

        // 自适应模糊
        if (scene.getEngine().getRenderWidth() > 1920) {
            this.mirrorTexture.blurKernel = 16; // 桌面端轻微模糊
        } else {
            this.mirrorTexture.blurKernel = 32; // 移动端更强模糊
            this.mirrorTexture.adaptiveBlurKernel = 32;
        }

        // 应用纹理
        this.waterMaterial.reflectionTexture = this.mirrorTexture;
        this.waterMaterial.reflectionTexture.level = 0.65; // 物理正确的水面反射强度
    }

    private getFilteredRenderList(scene: Scene): import('@babylonjs/core').Mesh[] {
        return scene.meshes.filter(mesh => {
            const m = mesh as import('@babylonjs/core').Mesh;
            if (!m.isVisible || m === this.waterMesh) return false;
            
            // 只包含高度>0.5米的物体
            const minY = m.getBoundingInfo().minimumWorld.y;
            return minY > 0.5;
        }) as import('@babylonjs/core').Mesh[];
    }

    dispose(): void {
        this.mirrorTexture.dispose();
        this.waterMaterial.dispose();
        this.waterMesh.dispose();
    }
}

性能监控与调试

在开发环境中嵌入性能监控：

TypeScript 复制代码

import { EngineInstrumentation } from '@babylonjs/core';

class MirrorPerformanceProfiler {
    constructor(scene: Scene) {
        const instrumentation = new EngineInstrumentation(scene.getEngine());
        instrumentation.captureGPUFrameTime = true;

        scene.onAfterRenderObservable.add(() => {
            const gpuTime = instrumentation.gpuFrameTimeCounter.current;
            const drawCalls = scene.getEngine().getDrawCalls();
            
            console.log(`GPU帧时间: ${gpuTime.toFixed(2)}ms, Draw Calls: ${drawCalls}`);
            
            // 警告阈值
            if (gpuTime > 16.67) { // 超过60fps预算
                console.warn("GPU性能瓶颈！考虑降低MirrorTexture分辨率或renderList数量");
            }
        });
    }
}