깊이 버퍼가 파괴 되었기 때문이라고 생각합니다. # 1017을 참조하세요.

사용 사례의 경우 대신 작동 할 수있는 것은 두 개의 컴포저를 사용하는 것입니다 (따라서 각각 고유 한 깊이 버퍼가있는 두 개의 완전히 분리 된 렌더링 대상).

이 같은:

glowComposer = new THREE.EffectComposer( renderer, renderTargetGlow );

glowComposer.addPass( renderModelGlow ); // RenderPass
glowComposer.addPass( hblur ); // ShaderPass
glowComposer.addPass( vblur ); // ShaderPass

finalComposer = new THREE.EffectComposer( renderer, renderTargetFinal );
finalComposer.addPass( renderModel ); // RenderPass
finalComposer.addPass( finalPass ); // ShaderPass

이제 확산 레이어는 finalComposer 에서 일반 tDiffuse 텍스처 샘플러로 사용할 수 있으며 glowComposer 에서 제공 할 글로우 레이어로 사용할 수 있습니다.

특정 패스 수와 패스가 전면 및 후면 버퍼를 전환하는지 여부에 따라 glowComposer.renderTarget1 또는 glowComposer.renderTarget2 가됩니다. 가장 간단한 방법은 두 가지를 모두 시도하고 어떤 것이 작동하는지 확인하는 것입니다.

finalshader.uniforms[ 'tGlow' ].texture = glowComposer.renderTarget1;

나는 그것을 시도했지만 매우 예기치 않은 결과를 얻었습니다.

이것은 당신이 제안한 코드입니다.
http://demo.bkcore.com/threejs/webgl_tron_glow_swap.html
renderModel의 tDiffuse는 여전히 검은 색입니다.

그리고 이것은 두 개의 렌더 패스 만 바꾼 똑같은 코드입니다 (확산 씬은 글로우 컴포저에 있고 글로우 씬은 최종 컴포저에 있음).
http://demo.bkcore.com/threejs/webgl_tron_glow_swap2.html
물론 디퓨즈가 흐려지고 글로우가 아니기 때문에 내가 찾고있는 이펙트는 아니지만, tGlow와 tDiffuse 샘플러가 모두 작동하는 것을 볼 수 있습니다.

그리고 내가 한 것은 교체하는 것뿐입니다 (130 & 175 행).
new THREE.RenderPass (scene, camera);
와
new THREE.RenderPass (glowscene, glowcamera);

꽤 놀랍습니다.

투명도를 사용하는 경우 렌더링 대상에 RGBA 형식을 사용해야합니다.

글쎄요, 동의 합니다만, 글로우 패스가 검정에 흰색을 렌더링하고 디퓨즈 패스가 잘 ... 검정에 디퓨즈를하기 때문에 투명도를 사용하지 않습니다. 그런 다음 투명성이 필요하지 않도록 추가로 구성합니다.

그래도 RT의 형식을 RGBA로 변경했지만 아무것도 변경하지 않았습니다.

여기서 이상한 문제는 내 glowscene / glowcamera RenderPass가 작동하지 않는 동안 내 장면 / 카메라 RenderPass를 수행하는 동안 내 glowscene / glowcamera RenderPass가 수행하기 전에 내 장면 / 카메라 RenderPass를 수행하는 것입니다.

흠, 다른 재료에 대한 지오메트리 공유 문제인 것 같습니다 (# 1211 참조).

이 시도:

function createScene( geometry, x, y, z, b ) {

    zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );

    // ...

    var geometryClone = THREE.GeometryUtils.clone( geometry );
    var gmat = new THREE.MeshBasicMaterial( { map: gtex } );
    var gmesh = new THREE.Mesh( geometryClone, gmat );

    // ...
}

예 ! 그거였다.

이제 두 개의 샘플러가 올바르게 채워졌습니다. 감사합니다 :)

편집하다

흠 ... 또 다른 이상한 행동, 내 두 샘플러가 좋다.

gl_FragColor = texel;

나는 디퓨즈를 올바르게 얻습니다 (http://demo.bkcore.com/threejs/webgl_tron_glow_swap2.html)

내가 할 때

gl_FragColor = glow;

나는 올바르게 빛을 얻습니다.

하지만 두 가지 모두에 간단한 첨가제 블렌드를하려고하면
gl_FragColor = 텍셀 + 글로우;
나는 빛을 얻습니다 (http://demo.bkcore.com/threejs/webgl_tron_glow_swap.html).

너무 많은 질문을해서 죄송합니다.이 문제를 해결하려고 노력했지만 아무 소용이 없습니다 ..

EDIT2

사실은

gl_FragColor = texel + glow;

렌더링 출력과 관련하여 다음과 같이 보입니다.

gl_FragColor = glow + glow;

텍셀 vec4가 설명 할 수없이 글로우 vec4로 대체되는 것과 같습니다. 미친 것 같네요.

텍스처를 다른 텍스처 단위에 넣어야합니다.

uniforms: {
    tDiffuse: { type: "t", value: 0, texture: null },
    tGlow:    { type: "t", value: 1, texture: null }
},

완전한!
http://demo.bkcore.com/threejs/webgl_tron_glow.html

다시 감사합니다 :)

여름!

Three.js를 사용하여 선택적 글로우 렌더링에 개입하는 사람이있는 경우, 이에 대한 작은 기사를 게시했습니다. http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html

도움이 되었기를 바랍니다.

좋은;)

또는 지오메트리 복제 대신 더 저렴한 다른 옵션은 더 유사한 재질을 사용하는 것입니다 (두 패스의 지오메트리에 동일한 버퍼가 필요함).

이 경우 글로우 패스에 기본 재질을 사용하는 대신 주변 조명 만 사용하여 확산 조명이 0 인 Lambert 재질을 사용해 볼 수 있습니다.

이 같은:

glowScene.add( new THREE.AmbientLight( 0xffffff ) );

// ...

var gmat = new THREE.MeshLambertMaterial( { map: gtex, ambient: 0xffffff, color: 0x000000 } );
var gmesh = new THREE.Mesh( geometry, gmat );

실제로 그것은 완벽하게 작동합니다.

http://demo.bkcore.com/threejs/webgl_tron_glow_seq.html

이 솔루션에 대한 기사를 업데이트하겠습니다. 감사합니다 !

이 코드를 r60으로 이식하고 있으며 이상하게도 효과 작곡가를 연결하는 것과 동일한 문제가 발생합니다. 화면에 렌더링하면 godray 패스가 작동합니다. 그러나 최종 패스는 모델 만 출력합니다. "tadd"텍스처 채널에 대한 oclcomposer 출력은 별도의 Effect Composer를 사용하지 않으면 괜찮은 것 같습니다 !! renderer.PreserveDrawingBuffer = true로 시도했지만 작동하지 않았습니다. autoclear를 false로 설정하려고 시도했지만 그게 아닙니다.

최종 작곡가 이후에 oclcomposer를 렌더링하고 godray가 화면에 출력을 전달하면 godray는 볼 수 있지만 모델은 볼 수 없습니다.

oclcomposer 출력을 최종 패스에서 tadd 채널로 보내는 대신 MeshBasicMaterial로 파이프하고 텍스처 쿼드를 만들고 메인 장면에 추가하면 이제 모델과 Godrays (평면에서)를 볼 수 있습니다. 원하는 효과이지만 텍스처 파이핑이 작동하고 있음을 알려줍니다.

// COMPOSERS
//-------------------
var renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBufer: false };

renderTargetOcl = new THREE.WebGLRenderTarget( SCREEN_WIDTH/2, SCREEN_HEIGHT/2, renderTargetParameters );

hblur = new THREE.ShaderPass( THREE.ShaderExtras[ "horizontalBlur" ] );
vblur = new THREE.ShaderPass( THREE.ShaderExtras[ "verticalBlur" ] );
var bluriness = 2;

hblur.uniforms[ 'h' ].value = bluriness / SCREEN_WIDTH*2;
vblur.uniforms[ 'v' ].value = bluriness / SCREEN_HEIGHT*2;

var renderModel = new THREE.RenderPass( scene, camera );
var renderModelOcl = new THREE.RenderPass( oclscene, oclcamera );

grPass = new THREE.ShaderPass( THREE.Extras.Shaders.Godrays );
grPass.needsSwap = true;
grPass.renderToScreen = false;

oclcomposer = new THREE.EffectComposer( renderer, renderTargetOcl );

oclcomposer.addPass( renderModelOcl );
oclcomposer.addPass( hblur );
oclcomposer.addPass( vblur );
oclcomposer.addPass( grPass );

var finalPass = new THREE.ShaderPass( THREE.Extras.Shaders.Additive );
finalPass.needsSwap = true;
finalPass.renderToScreen = true;
finalPass.uniforms[ 'tAdd' ].texture = oclcomposer.renderTarget1;

renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters );
finalcomposer = new THREE.EffectComposer( renderer, renderTarget );

finalcomposer.addPass( renderModel );
finalcomposer.addPass( finalPass );

//RENDER
//-----------
oclcomposer.render(0.1);
finalcomposer.render( 0.1 );

@bbiswas 최신 버전과 동일한 문제가 있습니다. 뭔가 알아 내 셨나요?

예, 작동했습니다. 코드는 다음과 같습니다.

var renderTargetOcl = new THREE.WebGLRenderTarget( webGL_window_width/4, webGL_window_height/4, renderTargetParameters );

            hblur = new THREE.ShaderPass( THREE.ShaderExtras[ "horizontalBlur" ] );
            vblur = new THREE.ShaderPass( THREE.ShaderExtras[ "verticalBlur" ] );

            var bluriness = 3;

            hblur.uniforms[ 'h' ].value = bluriness / webGL_window_width*2;
            vblur.uniforms[ 'v' ].value = bluriness / webGL_window_height*2;

            var renderModel = new THREE.RenderPass( scene, camera );
            var renderModelOcl = new THREE.RenderPass( g_occlusion_buffer, g_occlusion_camera );

            grPass = new THREE.ShaderPass( THREE.Extras.Shaders.Godrays );
            grPass.needsSwap = true;
            grPass.renderToScreen = false;

            g_volumetric_light_composer = new THREE.EffectComposer( webGLRenderer, renderTargetOcl );

            g_volumetric_light_composer.addPass( renderModelOcl );
            g_volumetric_light_composer.addPass( hblur );
            g_volumetric_light_composer.addPass( vblur );
            g_volumetric_light_composer.addPass( hblur );
            g_volumetric_light_composer.addPass( vblur );
            g_volumetric_light_composer.addPass( grPass );

            var finalPass = new THREE.ShaderPass( THREE.Extras.Shaders.Additive );
            finalPass.needsSwap = true;
            finalPass.renderToScreen = true;
            finalPass.uniforms[ 'tAdd' ].value = g_volumetric_light_composer.renderTarget1;

            finalcomposer.addPass( renderModel );
            finalcomposer.addPass( finalPass );

//in Render Loop



                g_occlusion_camera.position = camera.position;

                g_occlusion_camera.lookAt( new THREE.Vector3(0,0,0) );
                camera.lookAt( new THREE.Vector3(0,0,0)  );

                vlight.position = pointLight1.position;
                vlight.updateMatrixWorld();

                var lPos = THREE.Extras.Utils.projectOnScreen(pointLight1, camera);
                grPass.uniforms["fX"].value = lPos.x;
                grPass.uniforms["fY"].value = lPos.y;

                g_volumetric_light_composer.render(0.1);
                finalcomposer.render( 0.1 );

감사합니다!
finalPass.uniforms[ 'tAdd' ].value 라인이었습니다. 전에 finalPass.uniforms[ 'tAdd' ].texture 받았습니다.

안녕 bbiswas,이 부분에 대해 g_occlusion_buffer를 만든 위치를 추가 할 수 있습니까?

var renderModelOcl = new THREE.RenderPass (g_occlusion_buffer, g_occlusion_camera);

원래 데모 가 더 이상 작동하지 않는 것 같습니다.

FWIW 여기에서 Additive Blend (Three.js v79 사용)를 통해 FX를 선택적으로 적용하고 구성하는 데모를 만들었습니다 : https://www.airtightinteractive.com/demos/selective-fx/