ThreeJS Gamma

cloud.tencent.com/developer/a…

• 没gamma更昏暗，更不均匀
• 第一个是人亮度对线性增长的感受 第二个是机器数值化线性增长的亮度
• gamma矫正
• 部分贴图输入是是gamma correction的状态,所有需要pow(2.2),来达到线性
• 输出时,需要pow(1/2.2),来达到srgb

float linearrgb_to_srgb1(const in float c, const in float gamma) {
    float v = 0.0;
    if(c < 0.0031308) {
        if ( c > 0.0)
        v = c * 12.92;
    }
    else {
        v = 1.055 * pow(c, 1.0/ gamma) - 0.055;
    }
    return v;
}

float sRGBToLinear(const in float c, const in float gamma) {
    float v = 0.0;
    if ( c < 0.04045 ) {
        if ( c >= 0.0 )
        v = c * ( 1.0 / 12.92 );
    }
    else {
        v = pow( ( c + 0.055 ) * ( 1.0 / 1.055 ), gamma );
    }
    return v;
}

• Threejs需要在线性颜色空间里渲染材质
• 软件中导出颜色信息的贴图:sRGB颜色空间
• Threejs导入texture时,默认是Three.LinearEncoding;
• Threejs颜色贴图(basecolor,emissive,specularglossiness)需要设置为sRGBEncoding

// 设置加载texture的encoding
const loadTex = (callback) => {
    const textureLoader = new THREE.TextureLoader();
    textureLoader.load( "./assets/texture/tv-processed0.png", function(texture){
        texture.encoding = THREE.sRGBEncoding;
    });
    ...
}

• ThreeJs颜色也需要设置成sRGB的方式

const material = new THREE.MeshPhongMaterial( {
    color: 0xBBBBBB
} );
material.color.convertSRGBToLinear();

• ThreeJS渲染完成后,linner转gamma,需要设置gammaOutput参数

// 定义gammaOutput和gammaFactor
renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;   //电脑显示屏的gammaFactor为2.2