WebGLRenderTargetで色味が変わってしまう

概要

Three.jsで WebGLRenderTarget を使ってオフスクリーンレンダリングしたテクスチャをShaderMaterialで表示すると色味が変わってします現象が起きてしましました。

上記の結果をみると色味の違いを確認することができます。

かなり色が沈んでいます...

試したこと

テクスチャのカラースペースがデフォルトでは NoColorSpace でしたので SRGBColorSpace 等に変更してみましたが反映されませんでした...

this.fbo = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
  colorSpace: THREE.SRGBColorSpace,
  // colorSpace: THREE.LinearSRGBColorSpace,
  // colorSpace: THREE.NoColorSpace,
});

// this.fbo.texture.colorSpace = THREE.SRGBColorSpace;

結果

ShaderMaterialのfragmentShaderで色を出力する前にColorSpaceの調整をしないといけないことがわかりました。

ガンマ補正しているコード（Three.js / GammaCorrectionShader.js）を確認すると LinearTosRGB に補正して出力していることがわかります。

オフスクリーンレンダリングしたテクスチャの色を LinearTosRGB で出力すると下記のような結果になりました。

// fragment shader
vec4 color = texture2D(uTexture, vUv);
gl_FragColor = LinearTosRGB(color);

ちなみに LinearToLinear で出力すると色が沈んだ結果が出力されました。

デフォルトではLinearToLinearを出力しているのかもしれません...

参考サイト

• Three.js / docs / WebGLRenderTarget

• Three.js / colorspace_parts_fragment.glsl.js

• Three.js / GammaCorrectionShader.js