Three.js でオフスクリーンレンダリングしたRenderTargetにポストエフェクトを適用するときに composer.readBuffer に結果が書き込まれずにハマった

オフスクリーンでシーンの表示内容をスクリーンショットする機能を作っていた

おおよそ以下のようなコードを書いていたけど、renderToScreen を false にしないといけなかった

        // バッファーの解像度はWebGLのサイズに合わせる
        const rt = new WebGLRenderTarget(originalWidth, originalHeight, {
          colorSpace: SRGBColorSpace,
        });

        const composer = new EffectComposer(renderer, rt);

        // オフスクリーンはfalseに折るのを忘れないこと
        composer.renderToScreen = false;

        composer.addPass(new RenderPass(scene, captureCamera));
        composer.addPass(new ShaderPass(GammaCorrectionShader));
        composer.render();

なお、react-three-fiber のCanvasは自動的にガンマ補正してくれていて、linear をTrueにするとガンマ補正をOFFにしてくれます

docs.pmnd.rs

以下の記事でも言及されているけど、自分でRenderTarget作る都合上この辺は自分でやらないといけないですね www.donmccurdy.com