Pixi.js: एक Pixi.js कैनवास और एक तीन.js कैनवास का मेल

को निर्मित 21 जन॰ 2015 · 12टिप्पणियाँ · स्रोत: pixijs/pixi.js

हाय दोस्तों !

सबसे पहले Pixi.js के लिए धन्यवाद, यह एक महान उपकरण है, आई लव इट! 2D दुनिया के लिए तीन.js का सही काउंटर भाग।

मैं एक ऐसी परियोजना पर काम कर रहा हूँ जहाँ मैं यह विन्यास करना चाहता हूँ:

Pixi.js के साथ पूर्ण WebGL में लिखा गया एक 2D UI
यह 2D UI थ्री.जेएस में लिखी गई 3D दुनिया के मूल में होगा
यह 3 डी दुनिया तब तीन.js में वीआर स्टीरियोस्कोपिक कैमरा के साथ प्रस्तुत किया जाएगा

आप थ्री.जेएस कैनवस के अंदर पिक्सी.जेएस कैनवस को कैसे एनकैप्सुलेट करेंगे?

आपके समय के लिए धन्यवाद !

चियर्स

इमैनुएल

🤔 Question

स्रोत

ghost

सबसे उपयोगी टिप्पणी

मैं पोस्ट को संपादित करता हूं क्योंकि ai ने मेरी समस्या को हल कर दिया है, मैं काम करने वाले कोड को सिर्फ उसी स्थिति में पोस्ट करता हूं जब कोई उसी समस्या से टकराता है और उसे छूट की आवश्यकता होती है।

<body>
    <script src="js/pixi.js"></script>
    <script src="js/three.min.js"></script>
    <script>
        width = window.innerWidth;
        height = window.innerHeight;

        //-------------------------------------------------------------------------------------
        // 3D Scene canvas
        //-------------------------------------------------------------------------------------
        var scene_3D = new THREE.Scene();
        scene_3D.fog = new THREE.Fog( "#a1a1a1", 2000, 4000 );

        var camera = new THREE.PerspectiveCamera( 75, width / height, 1, 10000 );
        camera.position.set( 0, 0, 700);
        camera.updateProjectionMatrix();

        var canvas_3D = new THREE.WebGLRenderer( { antialias: true } );
        canvas_3D.setSize( width, height );
        canvas_3D.setClearColor( scene_3D.fog.color, 1 );
        document.body.appendChild( canvas_3D.domElement );

        var geometry = new THREE.BoxGeometry( 500, 500, 500 );
        var material = new THREE.MeshNormalMaterial();
        var cube = new THREE.Mesh( geometry, material );
        cube.position.z = -500;
        cube.rotation.z = -45;
        scene_3D.add( cube );

        //-------------------------------------------------------------------------------------
        // 2D UI canvas
        //-------------------------------------------------------------------------------------
        var scene_UI = new PIXI.Stage( 0x66FF99 );

        var canvas_UI = PIXI.autoDetectRenderer(width, height, {transparent:true});
        canvas_UI.view.style.position = "absolute";
        canvas_UI.view.style.top = "0px";
        canvas_UI.view.style.left = "0px";

        var graphics = new PIXI.Graphics();
        graphics.beginFill( 0xe60630 );
        graphics.moveTo( width/2-200, height/2+100 );
        graphics.lineTo( width/2-200, height/2-100 );
        graphics.lineTo( width/2+200, height/2-100 );
        graphics.lineTo( width/2+200, height/2+100 );
        graphics.endFill();

        scene_UI.addChild( graphics );

        //-------------------------------------------------------------------------------------
        // Map 2D UI canvas on 3D Plane
        //-------------------------------------------------------------------------------------
        var texture_UI = new THREE.Texture( canvas_UI.view );
        texture_UI.needsUpdate = true;

        var material_UI = new THREE.MeshBasicMaterial( {map: texture_UI, side:THREE.DoubleSide } );
        material_UI.transparent = true;

        var mesh_UI = new THREE.Mesh( new THREE.PlaneGeometry(width, height), material_UI );
        mesh_UI.position.set(0,0,0);
        scene_3D.add( mesh_UI );

        //-------------------------------------------------------------------------------------
        // Render Animation
        //-------------------------------------------------------------------------------------
        function animate() {
            requestAnimationFrame( animate );
            canvas_UI.render( scene_UI );

            cube.rotation.y += 0.01;
            canvas_3D.render( scene_3D, camera );
        }
        animate();
    </script>
</body>

ghost 23 जन॰ 2015

👍16

सभी 12 टिप्पणियाँ

यदि तीन .js एक बनावट के रूप में एक कैनवास का समर्थन करता है, तो आप पिक्सी को एक ऑफस्क्रीन कैनवस के रूप में प्रस्तुत कर सकते हैं और अपने तीन.जे के दृश्य में बनावट के रूप में उपयोग कर सकते हैं।

englercj 21 जन॰ 2015

👍6

सटीक! ठीक है कि हम इसे कैसे करते हैं!

बुध पर, 21 जनवरी 2015 को शाम 4:45 बजे, चाड एंगलर नोटिफिकेशन @github.com
लिखा था:

यदि तीन.js बनावट के रूप में एक कैनवास का समर्थन करते हैं तो आप पिक्सी को प्रस्तुत कर सकते हैं
एक ऑफस्क्रीन कैनवास और अपने तीन सीन के दृश्य में बनावट के रूप में उपयोग करें।
-
इस ईमेल का उत्तर सीधे दें या इसे GitHub पर देखें
https://github.com/GoodBoyDigital/pixi.js/issues/1366#issuecomment -70872648
।

मैट ग्रोव्स
_ तकनीकी भागीदार_
टेलीफोन: 07708 114496 :: www.goodboydigital.com
फर्स्ट फ्लोर, यूनिट 9B, क्वींस यार्ड, व्हाइट पोस्ट लेन, लंदन, E9 5EN
गुडबाय ©। सर्वाधिकार सुरक्षित।

GoodBoyDigital 21 जन॰ 2015

वाह ... बहुत बहुत धन्यवाद दोस्तों! :)

इसे ही मैं फास्ट फीडबैक कहता हूं!

ghost 21 जन॰ 2015

मैं सिर्फ एक छोटे से विस्तार के बारे में सोच रहा हूं।

मुझे 2D UI पैनल (Pixi.js) खींचने की क्षमता होनी चाहिए, जो कि Top of a 3D World (Three.js) पर प्रदान की जाएगी।
लेकिन यह महत्वपूर्ण है कि उन 2D UI पैनल में निम्नलिखित गुण हैं।

0-100% से अपारदर्शिता कारक के साथ पारदर्शिता
पृष्ठभूमि में 3 डी दुनिया का धुंधला प्रभाव

अगर मैं अपने कैनवास को रेंडर करने की तरकीबों का उपयोग करता हूं और इसे एक बनावट के रूप में लागू करता हूं। मुझे डर है कि पृष्ठभूमि का धुंधला संभव नहीं होगा?

मैंने इसे दर्शाने के लिए एक चित्र संलग्न किया है।
transparency

ghost 21 जन॰ 2015

थ्री.जेएस की तरफ धब्बा है? बस पिक्सी ऑब्जेक्ट को पारदर्शी बनाएं और फिर अपने 3 डी सीन में बनावट को ब्लेंड करें।

englercj 21 जन॰ 2015

आपकी सहायता के लिए एक बार फिर से धन्यवाद ! अब जब आपने यह कहा है ... यह निश्चित रूप से सबसे तार्किक मार्ग है! :)

चियर्स

इ

ghost 21 जन॰ 2015

<body>
    <script src="js/pixi.js"></script>
    <script src="js/three.min.js"></script>
    <script>
        width = window.innerWidth;
        height = window.innerHeight;

        //-------------------------------------------------------------------------------------
        // 3D Scene canvas
        //-------------------------------------------------------------------------------------
        var scene_3D = new THREE.Scene();
        scene_3D.fog = new THREE.Fog( "#a1a1a1", 2000, 4000 );

        var camera = new THREE.PerspectiveCamera( 75, width / height, 1, 10000 );
        camera.position.set( 0, 0, 700);
        camera.updateProjectionMatrix();

        var canvas_3D = new THREE.WebGLRenderer( { antialias: true } );
        canvas_3D.setSize( width, height );
        canvas_3D.setClearColor( scene_3D.fog.color, 1 );
        document.body.appendChild( canvas_3D.domElement );

        var geometry = new THREE.BoxGeometry( 500, 500, 500 );
        var material = new THREE.MeshNormalMaterial();
        var cube = new THREE.Mesh( geometry, material );
        cube.position.z = -500;
        cube.rotation.z = -45;
        scene_3D.add( cube );

        //-------------------------------------------------------------------------------------
        // 2D UI canvas
        //-------------------------------------------------------------------------------------
        var scene_UI = new PIXI.Stage( 0x66FF99 );

        var canvas_UI = PIXI.autoDetectRenderer(width, height, {transparent:true});
        canvas_UI.view.style.position = "absolute";
        canvas_UI.view.style.top = "0px";
        canvas_UI.view.style.left = "0px";

        var graphics = new PIXI.Graphics();
        graphics.beginFill( 0xe60630 );
        graphics.moveTo( width/2-200, height/2+100 );
        graphics.lineTo( width/2-200, height/2-100 );
        graphics.lineTo( width/2+200, height/2-100 );
        graphics.lineTo( width/2+200, height/2+100 );
        graphics.endFill();

        scene_UI.addChild( graphics );

        //-------------------------------------------------------------------------------------
        // Map 2D UI canvas on 3D Plane
        //-------------------------------------------------------------------------------------
        var texture_UI = new THREE.Texture( canvas_UI.view );
        texture_UI.needsUpdate = true;

        var material_UI = new THREE.MeshBasicMaterial( {map: texture_UI, side:THREE.DoubleSide } );
        material_UI.transparent = true;

        var mesh_UI = new THREE.Mesh( new THREE.PlaneGeometry(width, height), material_UI );
        mesh_UI.position.set(0,0,0);
        scene_3D.add( mesh_UI );

        //-------------------------------------------------------------------------------------
        // Render Animation
        //-------------------------------------------------------------------------------------
        function animate() {
            requestAnimationFrame( animate );
            canvas_UI.render( scene_UI );

            cube.rotation.y += 0.01;
            canvas_3D.render( scene_3D, camera );
        }
        animate();
    </script>
</body>

ghost 23 जन॰ 2015

👍16

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

थ्री जेएस के नए संस्करणों के साथ आप renderer.resetGLState() उपयोग कर सकते हैं।

PIXI में, यह थोड़ा अधिक जटिल है। इस तरह की चीजें WebGLRenderer में एक विधि के रूप में उपयोगी होंगी। इससे पहले इनकी जरूरत होती है

    gl.disable(gl.DEPTH_TEST)
    gl.enable(gl.BLEND)
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
    gl.disable(gl.STENCIL_TEST)
    gl.disable(gl.CULL_FACE)

    gl.frontFace( gl.CCW )    
    gl.cullFace( gl.FRONT )
    gl.colorMask(true, true, true, true)
    gl.activeTexture(gl.TEXTURE0)

    var shaderManager = session.shaderManager

    shaderManager._currentId = undefined
    for (var i=0; i<shaderManager.attribState.length; i++)
        shaderManager.attribState[i] = false
    shaderManager.setShader(shaderManager.currentShader)

    var blend = session.blendModeManager.currentBlendMode
    if (blend in PIXI.blendModesWebGL) {
        session.blendModeManager.currentBlendMode = undefined
        session.blendModeManager.setBlendMode(blend)
    }

यह आपको किसी भी फ्रेम बफर स्विचिंग के बिना 3 डी दृश्य के शीर्ष पर यूआई को प्रस्तुत करने की अनुमति देता है।

अपने UI के नीचे धुंधला हो जाना काफी जटिल है। आपको इसकी आवश्यकता होगी:

एक फ्रेम बफर के लिए 3 डी दृश्य प्रस्तुत करना
कैंची परीक्षण को सक्षम करें और मल्टी पास ब्लर शेडर (पिंग-पॉन्गिंग एफबीओ आदि) के साथ ब्लर क्षेत्र को रेंडर करें।
फिर शीर्ष पर 2D UI प्रदान करें

mattdesl 27 जन॰ 2015

👍3

इस बहुत सटीक और प्रलेखित प्रतिक्रिया मैट के लिए धन्यवाद! :)

जैसा कि मैं WebGL प्रोग्रामिंग के लिए बहुत नया हूँ यह बेहद मददगार है।
मैं पहले मिक्स 2 लाइब्रेरी से झिझक रहा था, खासकर कि एक हैक किया हुआ थ्री। जेएस कुछ पिक्सी की जगह ले सकता है जो मुझे चाहिए।

लेकिन उत्कृष्ट छूट, 2 डी पर देव का बहुत फोकस बिंदु, वास्तव में मुझे gl2d कॉल के लिए पिक्सी का उपयोग करने के लिए आश्वस्त किया।

जैसा कि आपने मिक्स अप्रोच को भी चुना है, मुझे लगता है कि यह पुष्टि करता है कि PixGL निश्चित रूप से WebGL के साथ 2D तत्वों को खींचने के लिए अधिक कुशल विकल्प है।

चियर्स

इ

ghost 27 जन॰ 2015

जैसा कि आपने मिक्स अप्रोच को भी चुना है, मुझे लगता है कि यह पुष्टि करता है कि PixGL निश्चित रूप से WebGL के साथ 2D तत्वों को खींचने के लिए अधिक कुशल विकल्प है।

शायद हो सकता है। ज्यादातर मामलों में अतिरिक्त प्रदर्शन मूट है (आपको एक ही बार में 3000 बटन की आवश्यकता कैसे होती है?), और मजबूत टेक्स्ट रेंडरिंग, टेक्स्ट इनपुट और स्क्रॉल इवेंट जैसी चीजें वेबजीएल में अविश्वसनीय रूप से चुनौतीपूर्ण हो सकती हैं।

सबसे आसान मार्ग UI के लिए DOM / CSS का उपयोग करना है। यदि आपको पूरी तरह से WebGL (यानी कुछ प्रभावों, गहराई से परीक्षण आदि के लिए) का चयन करने की आवश्यकता है, तो पिक्सी शायद 2D यूआई के लिए थ्रीजेएस से अधिक आसान होगी।

mattdesl 27 जन॰ 2015

यह उत्तर देने के बाद से इसे बंद करने जा रहा है।

englercj 27 जन॰ 2015

इस थ्रेड को स्वचालित रूप से बंद कर दिया गया है क्योंकि इसे बंद करने के बाद हाल ही में कोई गतिविधि नहीं हुई है। कृपया संबंधित बग के लिए एक नया मुद्दा खोलें।

lock[bot] 26 फ़र॰ 2019

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Pixi.js: एक Pixi.js कैनवास और एक तीन.js कैनवास का मेल

सबसे उपयोगी टिप्पणी

सभी 12 टिप्पणियाँ

संबंधित मुद्दों