मुझे लगता है कि यह इसलिए है क्योंकि गहराई बफर नष्ट हो जाती है, # 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

अब फैलाना परत नियमित रूप में उपलब्ध होगा tDiffuse में बनावट नमूना finalComposer और परत आप से आपूर्ति करेगा चमक glowComposer ।

यह या तो glowComposer.renderTarget1 या glowComposer.renderTarget2 पास की विशेष संख्या के आधार पर होगा और क्या पास स्विच आगे और पीछे बफ़र्स, सरलतम दोनों की कोशिश करना है और देखना है कि कौन सा काम करता है।

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

मैंने वह कोशिश की, लेकिन बहुत अप्रत्याशित परिणाम मिला।

यह आपके द्वारा प्रस्तावित कोड है:
http://demo.bkcore.com/threejs/webgl_tron_glow_swap.html
रेंडरमॉडल से टिफ़्यूज़ अभी भी काला है।

और यह ठीक उसी कोड है, जिसमें दो रेंडर पास स्वैप किए गए हैं (फैलाना दृश्य चमक संगीतकार में है, और अंतिम संगीतकार में चमक दृश्य):
http://demo.bkcore.com/threejs/webgl_tron_glow_swap2.html
यह निश्चित रूप से नहीं है कि मैं फैल के धुंधले होने के बाद से देख रहा हूँ और चमक नहीं है, लेकिन जैसा कि आप देख सकते हैं दोनों tGlow और tDiffuse samplers काम कर रहे हैं ...

और मेरे द्वारा किया गया सभी स्वैप (पंक्ति 130 और 175):
नया THREE.RenderPass (दृश्य, कैमरा);
साथ में
नया THREE.RenderPass (glowscene, glowcamera);

यह काफी चौंकाने वाली है।

यदि आप पारदर्शिता का उपयोग करते हैं, तो आपको लक्ष्यों को प्रस्तुत करने के लिए RGBA प्रारूप का उपयोग करने की आवश्यकता है।

खैर, मैं सहमत हूं, लेकिन मैं किसी भी पारदर्शिता का उपयोग नहीं कर रहा हूं क्योंकि मेरी चमक पास काले रंग पर सफेद होती है और मेरी फैल अच्छी तरह से गुजरती है ... काले रंग में फैलती है। मैं इसके बाद उन्हें जोड़ देता हूं ताकि पारदर्शिता की जरूरत न पड़े।

फिर भी, यह सुनिश्चित करने के लिए, मैंने आरटी के प्रारूप को आरजीबीए में बदल दिया, लेकिन इससे कुछ भी नहीं बदला।

यहाँ विचित्र मुद्दा यह है, कि मेरे दृश्य / कैमरा RenderPass को मेरे Glowscene / Glowcamera 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 की तरह है, इसे अस्पष्ट vex4 द्वारा बदल दिया जाता है। पागल लगता है।

आपको विभिन्न बनावट इकाइयों में बनावट डालने की आवश्यकता है:

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

उत्तम!
http://demo.bkcore.com/threejs/webgl_tron_glow.html

फिर से धन्यवाद :)

गर्मी!

यदि किसी को थ्री। जेएस के साथ चयनात्मक चमक प्रदान करने में हस्तक्षेप किया जाता है, तो मैंने इसके बारे में एक छोटा लेख प्रकाशित किया है: http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html

आशा है कि इससे सहायता मिलेगी।

अच्छा लगा;)

वैकल्पिक रूप से, ज्यामिति क्लोनिंग के बजाय, एक और सस्ता विकल्प अधिक समान सामग्रियों का उपयोग करना होगा (ताकि दोनों पासों में ज्यामिति समान बफ़र्स की आवश्यकता हो)।

इस मामले में, ग्लो पास के लिए बेसिक मटीरियल का उपयोग करने के बजाय, आप लैंबर्ट मटेरियल को ज़ीरो डिफ्यूज़ लाइटिंग के साथ आज़मा सकते हैं, बस एम्बिएंट लाइट के साथ।

कुछ इस तरह:

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 में विभाजित कर रहा हूं और अजीब तरह से एक ही मुद्दे पर प्रभाव संगीतकार का पीछा करते हुए आ रहा हूं। अगर मैं इसे स्क्रीन पर प्रस्तुत करता हूं तो मेरे पास गोड्रे पास काम कर रहा है। लेकिन अंतिम पास केवल मॉडल को आउटपुट करता है। "टैड" टेक्सटाइल चैनल को ऑक्लोकोम्पसर आउटपुट ठीक लगता है जब मैं एक अलग इफ़ेक्ट कम्पोज़र का उपयोग नहीं करता हूँ !! मैंने रेंडरर के साथ प्रयास किया है। PreserveDrawingBuffer = true, लेकिन यह भी काम नहीं किया। मैंने झूठा करने के लिए स्वत: स्थापना की कोशिश की है, लेकिन यह नहीं था।

अगर मैं अंतिम कंपोजर के बाद ऑकलकंपोजर रेंडर करता हूं और गोड्रे को स्क्रीन पर आउटपुट देता हूं, तो मैं गॉडरेज देख सकता हूं लेकिन कोई मॉडल नहीं।

अंतिम पास में टैडल चैनल को ऑकलकंपोजर आउटपुट को निर्देशित करने के बजाय, अगर मैं इसे एक मेशबेसिकमीटर पर पाइप करता हूं और एक टेक्सचर्ड क्वाड बनाता हूं और इसे मुख्य दृश्य में जोड़ता हूं, अब मैं मॉडल और गॉडेज़ (विमान पर) देख सकता हूं, नहीं मुझे जो प्रभाव चाहिए, लेकिन यह मुझे बताता है कि बनावट पाइपिंग काम कर रही है।

// 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 पहले था।

अरे bbwwas, क्या आप जोड़ सकते हैं जहाँ आपने इस भाग के लिए g_occlusion_buffer बनाया है:

var renderModelOcl = नया THREE.RenderPass (g_occlusion_buffer, g_occlusion_camera);

लगता है कि मूल डेमो अब काम नहीं कर रहा है:

एफडब्ल्यूआईडब्ल्यू I ने चुनिंदा रूप से एफएक्स लगाने और एडिटिव ब्लेंड के माध्यम से रचना (थ्री.जेएस v79 का उपयोग करके) का एक छीन-डाउन डेमो बनाया: https://www.airtightinteractive.com/demos/selective-fx/