Pixi.js: الجمع بين قماش Pixi.js وقماش ثلاثي

تم إنشاؤها على ٢١ يناير ٢٠١٥  ·  12تعليقات  ·  مصدر: pixijs/pixi.js

اهلا ياجماعة !

بادئ ذي بدء ، شكرًا على Pixi.js ، إنها أداة رائعة ، أحبها! الجزء العداد المثالي من three.js للعالم ثنائي الأبعاد.

أنا أعمل في مشروع حيث أود الحصول على هذا التكوين:

  • واجهة مستخدم ثنائية الأبعاد مكتوبة بتنسيق WebGL كامل مع Pixi.js
  • سيتم تغليف واجهة المستخدم ثنائية الأبعاد هذه في أصل عالم ثلاثي الأبعاد مكتوب بلغة Three.js
  • سيتم بعد ذلك عرض هذا العالم ثلاثي الأبعاد باستخدام كاميرا VR مجسمة في Three.js

كيف تشرع في تغليف لوحة قماشية Pixi.js داخل لوحة قماشية Three.js؟

شكرا على وقتك !

في صحتك

ايمانويل

🤔 Question
مصدر
picture 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>
picture ghost في ٢٣ يناير ٢٠١٥
👍16

ال 12 كومينتر

إذا كان موقع Three.js يدعم لوحة الرسم كملمس ، فيمكنك عرض pixi على لوحة قماشية خارج الشاشة واستخدامها كملمس في مشهد three.js.

englercj picture englercj في ٢١ يناير ٢٠١٥
👍6

على الفور! هذا بالضبط كيف نفعل ذلك!

يوم الأربعاء ، 21 كانون الثاني (يناير) 2015 ، الساعة 4:45 مساءً ، إشعارات تشاد إنجلرgithub.com
كتب:

إذا كان three.js يدعم لوحة الرسم كنسيج ، فيمكنك تحويل pixi إلى
لوحة قماشية خارج الشاشة واستخدمها كملمس في مشهد three.js.

-
قم بالرد على هذا البريد الإلكتروني مباشرةً أو قم بعرضه على GitHub
https://github.com/GoodBoyDigital/pixi.js/issues/1366#issuecomment -70872648
.

مات غروفز

_ الشريك الفني_

هاتف: 07708 114496 :: www.goodboydigital.com
الطابق الأول ، الوحدة 9 ب ، كوينز يارد ، وايت بوست لين ، لندن ، E9 5EN
goodboy ©. كل الحقوق محفوظة.

GoodBoyDigital picture GoodBoyDigital في ٢١ يناير ٢٠١٥

واهو ... شكرا جزيلا يا رفاق! :)

هذا ما أسميه تعليقات سريعة!

ghost picture ghost في ٢١ يناير ٢٠١٥

أنا أفكر فقط في تفاصيل صغيرة.

أحتاج إلى القدرة على رسم لوحة ثنائية الأبعاد لواجهة المستخدم (Pixi.js) والتي سيتم عرضها على قمة عالم ثلاثي الأبعاد (Three.js).
ولكن من المهم أن تتمتع لوحة واجهة المستخدم ثنائية الأبعاد بالخصائص التالية.

  • شفافية مع عامل عتامة من 0-100٪
  • تأثير ضبابي للعالم ثلاثي الأبعاد في الخلفية

إذا كنت أستخدم حيل تقديم لوحة الرسم الخاصة بي وتطبيقها كملمس. أخشى أن طمس الخلفية لن يكون ممكنًا؟

لقد أرفقت صورة لتوضيح ذلك.
transparency

ghost picture ghost في ٢١ يناير ٢٠١٥

هل تمويه الجانب Three.js؟ ما عليك سوى جعل كائن pixi شفافًا ثم دمج النسيج في مشهدك ثلاثي الأبعاد كيفما تشاء.

englercj picture englercj في ٢١ يناير ٢٠١٥

شكرا مرة أخرى لمساعدتكم ! الآن بعد أن قلتها ... إنه بالتأكيد المسار الأكثر منطقية! :)

في صحتك

ه

ghost picture 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 picture ghost في ٢٣ يناير ٢٠١٥
👍16

نحن نقوم بشيء مثل هذا في مشروع. يصبح الأمر صعبًا بعض الشيء نظرًا لأن كلا المحركين (pixi و ThreeJS) يتتبعان حالة GL لتقليل المكالمات الزائدة عن الحاجة. هذا يعني أنهم لا يلعبون بشكل جيد مع بعضهم البعض ، لذلك تحتاج إلى إعادة ضبط أعلامهم قبل بدء العارضين.

مع الإصدارات الجديدة من ThreeJS يمكنك استخدام 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)
    }

يتيح لك ذلك عرض واجهة المستخدم أعلى المشهد ثلاثي الأبعاد دون تبديل المخزن المؤقت للإطار.

يعد تحقيق التمويه أسفل واجهة المستخدم أكثر تعقيدًا بشكل ملحوظ. سوف تحتاج إلى:

  • تحويل المشهد ثلاثي الأبعاد إلى مخزن مؤقت للإطار
  • تمكين اختبار المقص وعرض منطقة (مناطق) التمويه باستخدام تظليل تمويه متعدد التمريرات (ping-ponging FBOs إلخ)
  • ثم عرض واجهة مستخدم ثنائية الأبعاد في الأعلى
mattdesl picture mattdesl في ٢٧ يناير ٢٠١٥
👍3

شكرًا لك على هذه التعليقات الدقيقة والموثقة جدًا يا مات! :)

نظرًا لأنني جديد تمامًا على برمجة WebGL ، فهذا مفيد للغاية.
لقد كنت مترددًا أولاً في استخدام مكتبة Mix 2 ، خاصةً أن موقع Three.js المخترق يمكنه في بعض الأحيان استبدال pixi لما أحتاجه.

لكن الأمثلة الممتازة ، وهي نقطة تركيز المطور على 2D ، أقنعتني حقًا باستخدام pixi لمكالمات gl2d.

نظرًا لأنك قد اخترت أسلوب Mix أيضًا ، أعتقد أنه يؤكد أن Pixi هو بالتأكيد خيار أكثر كفاءة لرسم العناصر ثنائية الأبعاد باستخدام WebGL.

في صحتك

ه

ghost picture ghost في ٢٧ يناير ٢٠١٥

نظرًا لأنك قد اخترت أسلوب Mix أيضًا ، أعتقد أنه يؤكد أن Pixi هو بالتأكيد خيار أكثر كفاءة لرسم العناصر ثنائية الأبعاد باستخدام WebGL.

حسنا ربما. في معظم الحالات ، يكون الأداء الإضافي موضع نقاش (كم مرة تحتاج إلى 3000 زر للرسوم المتحركة في وقت واحد؟) ، ويمكن أن تكون أشياء مثل عرض النص القوي وإدخال النص وأحداث التمرير صعبة للغاية في WebGL.

أسهل طريقة هي استخدام DOM / CSS لواجهة المستخدم. إذا كنت بحاجة ماسة إلى اختيار WebGL (على سبيل المثال لتأثيرات معينة ، واختبار العمق ، وما إلى ذلك) ، فمن المحتمل أن يكون Pixi أسهل من ThreeJS لواجهة مستخدم ثنائية الأبعاد.

mattdesl picture mattdesl في ٢٧ يناير ٢٠١٥

سوف نغلق هذا لأنه يبدو أنه تم الرد عليه.

englercj picture englercj في ٢٧ يناير ٢٠١٥

تم قفل سلسلة الرسائل هذه تلقائيًا نظرًا لعدم وجود أي نشاط حديث بعد إغلاقه. الرجاء فتح قضية جديدة للأخطاء ذات الصلة.

lock[bot] picture lock[bot] في ٢٦ فبراير ٢٠١٩
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

distinctdan picture distinctdan  ·  3تعليقات
madroneropaulo picture madroneropaulo  ·  3تعليقات
Darker picture Darker  ·  3تعليقات
st3v0 picture st3v0  ·  3تعليقات
samueller picture samueller  ·  3تعليقات