Babylon.js中Texture纹理的invertY属性的坑

在Babylon.js中处理纹理时，invertY是一个看似简单却常常让开发者困惑的属性。本文将深入探讨它的意义、设计哲学以及正确的使用方式。

一、什么是invertY？为什么需要它？

1.1 坐标系差异的根源

invertY存在的根本原因是图像存储坐标系 与GPU纹理采样坐标系的差异：

图像格式（PNG/JPG） ：像素数据从上到下存储，原点(0,0)在左上角
WebGL纹理坐标 ：采样时从下到上，原点(0,0)在左下角

如果不进行Y轴翻转，加载的纹理会呈现上下颠倒的状态。

1.2 invertY的工作原理

当invertY = true时，Babylon.js会在将纹理数据上传到GPU之前，自动翻转图像的Y轴，确保渲染结果正确。这发生在底层WebGL的pixelStorei调用中：

TypeScript 复制代码

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

二、关键特性：只读属性

2.1 设计决策

TypeScript 复制代码

// ❌ 错误：无法直接修改
texture.invertY = false; // TypeError: Cannot assign to read only property

// ✅ 正确：创建时指定
const texture = new Texture(url, scene, false, false);

为什么设计为只读？

根据Babylon.js团队的设计哲学：

性能考量 ：修改invertY需要重新上传纹理数据到GPU，这是一个昂贵的操作
不可变性：纹理创建后其数据布局应保持稳定，避免运行时意外行为
架构清晰：强制开发者在创建时明确意图，而非运行时动态修改

2.2 默认值陷阱

重要：invertY的默认值是true！

TypeScript 复制代码

// 以下两种写法等价
const tex1 = new Texture("tex.png", scene);
const tex2 = new Texture("tex.png", scene, false, true); // 显式设置invertY=true

这意味着大多数场景下纹理会自动正确显示，但法线贴图 是个例外（通常需要invertY = false）。

三、如何正确修改invertY？

由于属性只读，修改invertY的唯一方式是重建纹理对象。以下是一个完整的参考实现：

TypeScript 复制代码

// 可观察对象，用于通知纹理翻转状态变更
public readonly onSetCurMatEmissiveTextureInvertYObservable = new Observable<boolean>();

/**
 * 设置当前材质自发光纹理的invertY属性
 * @param invertY - 目标翻转状态
 */
private _setCurMatEmissiveTextureInvertY(invertY: boolean): void {
    const tex = this._curMat.emissiveTexture as Texture;
    if (!tex) return; // 无纹理则返回
    
    if (tex.invertY === invertY) return; // 状态相同无需修改
    
    // 创建新纹理，复制原纹理的所有属性
    const newTex = new Texture(tex.url, this.scene, tex.noMipmap, invertY);
    
    // 复制纹理的UV变换参数（缩放、偏移、旋转等）
    TextureTool.setTexST(newTex, TextureTool.getTexST(tex));
    
    // 替换材质中的纹理引用
    this._curMat.emissiveTexture = newTex;
    
    // 释放旧纹理资源
    tex.dispose();
    
    // 通知观察者状态变更
    this.onSetCurMatEmissiveTextureInvertYObservable.notifyObservers(invertY);
}

3.1 关键步骤解析

状态检查：避免不必要的重建
属性复制：保留原纹理的UV缩放、偏移等设置
原子替换：先创建新纹理，再替换引用，最后释放旧资源
事件通知：通过Observable实现响应式编程

3.2 辅助工具函数

TypeScript 复制代码

import { Vector4, type Texture } from "@babylonjs/core";

export class TextureTool { 

	public static getTexST(tex:Texture):Vector4{
		return new Vector4(tex.uOffset, tex.vOffset, tex.uScale, tex.vScale);
	}

	public static setTexST(tex:Texture, st:Vector4):void{ 
		tex.uOffset = st.x;
		tex.vOffset = st.y;
		tex.uScale = st.z;
		tex.vScale = st.w;
	}
}

四、实际应用场景

4.1 法线贴图处理

法线贴图通常需要invertY = false：

TypeScript 复制代码

// 法线贴图绿色通道需要特殊处理
const normalTexture = new Texture("normal.png", scene, false, false);
mat.bumpTexture = normalTexture;

4.2 动态切换纹理翻转

在编辑器或配置面板中动态切换：

TypeScript 复制代码

// UI事件处理器
onInvertYToggle(checked: boolean) {
    this._setCurMatEmissiveTextureInvertY(checked);
}

// 订阅变更
materialEditor.onSetCurMatEmissiveTextureInvertYObservable.add((invertY) => {
    console.log(`纹理翻转状态变更为: ${invertY}`);
    // 更新UI、重渲染等
});

4.3 GLB模型后处理

加载GLB模型后修正纹理：

TypeScript 复制代码

SceneLoader.ImportMesh("", "model.glb", scene, (meshes) => {
    meshes.forEach(mesh => {
        if (mesh.material && mesh.material.albedoTexture) {
            // GLB加载的纹理invertY可能为false
            const oldTex = mesh.material.albedoTexture;
            const newTex = new Texture(oldTex.url, scene, oldTex.noMipmap, true);
            // 复制其他属性...
            mesh.material.albedoTexture = newTex;
            oldTex.dispose();
        }
    });
});

五、最佳实践与注意事项

5.1 性能优化

避免频繁重建：在动画或每帧逻辑中不要重复创建纹理
资源管理 ：务必调用dispose()释放旧纹理，防止内存泄漏
批量处理 ：需要修改多个纹理时，使用Promise.all并行加载

5.2 常见陷阱

场景	错误做法	正确做法
修改invertY	`tex.invertY = false`	重建纹理对象
复制纹理	直接赋值引用	重建并复制属性
法线贴图	使用默认invertY	显式设为false
资源释放	不调用dispose()	重建后立即释放旧纹理

5.3 与vScale的关系

注意invertY与vScale = -1的区别：

TypeScript 复制代码

// 两种翻转方式
tex.invertY = true;  // 翻转图像数据（只读，需重建）
tex.vScale = -1;     // 翻转UV坐标（可读写，运行时修改）

前者改变纹理本身，后者改变采样方式。对于glTF模型，通常使用vScale修正。

六、总结

特性	说明
作用	解决图像坐标系与GPU坐标系差异
默认值	`true`（会自动翻转Y轴）
可变性	只读，创建后不可修改
修改方式	必须重建`Texture`实例
性能影响	重建纹理有GPU上传开销
最佳实践	创建时明确指定，避免运行时修改

理解invertY的设计哲学，能帮助我们写出更健壮、性能更好的Babylon.js应用。记住：纹理不可变，重建需谨慎。