1

Three.js を使用して世界を WebGLRenderTarget にレンダリングしています。私の世界は画面全体に表示されないため、背景が透明になっています。目的は、アルファ チャネル対応の画像効果を提供することです。

  1. 世界を WebGLRenderTarget バッファにレンダリングします

  2. バッファから読み取って実際の画面に書き込むことで、これを後処理しようとします

私の後処理機能はアルファチャンネルに依存しています。ただし、どういうわけか、Three.JS 後処理シェーダーがアルファ チャネルを正しく読み取れないようです。WebGLRenderTarget にどのような値を入力しようとしても、すべて 1.0 です。

問題を説明する簡単な方法。

レンダー ターゲットを作成します。

        var rtParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat};

        for(var i=0; i<this.bufferCount; i++) {
            this.buffers[i] = new THREE.WebGLRenderTarget(this.width, this.height, rtParameters);
        }

バッファ設定のアルファを 0.3 にクリアします::

        function clear(buf) {
            // For debugging purposes we set clear color alpha
            renderer.setClearColor(new THREE.Color(0xff00ff), 0.3);
            renderer.clearTarget(buf, true, true, true);
        }

        // Clean up both buffers for the start
        clear(buffers[0]);

次に、このバッファーを読み取りバッファーとして使用し、後処理フラグメント シェーダー関数で画面にレンダリングします (ThreeJS 後処理の例)。

            "void main() {",

                    // texture is the buffer I rendered before
                    "vec4 sample = texture2D( texture, vUv);",

                    // Everything goes to white (1.0) when trying to visualize the
                    // alpha channel of previously rendered WebGLTarget.
                    // It should get value 0.3 - slight gray
                    "gl_FragColor = vec4(sample.a, sample.a, sample.a, 1.0);",
            "}"

他の色の値は正しく読み取られます。私がvec4(sample.r, sample.g, sample.b, 1.0)それを直接使用すると、期待どおりにコピーされます。

  • WebGLRenderTarget のアルファ チャネルのクリアに問題はありますか?

  • GLSL シェーダーでの 2D 画像後処理のテクスチャとして WebGLRenderTarget を持つアルファ値の読み取りに問題はありますか?

4

1 に答える 1

1

これは、あなたが達成しようとしていると私が信じていることを実装するフィドルです。

http://jsfiddle.net/6vK6W/3/

于 2012-07-01T16:12:03.673 に答える