Pixi.js: Pixi.js 캔버스와 three.js 캔버스 결합

에 만든 2015년 01월 21일 · 12코멘트 · 출처: pixijs/pixi.js

안녕 여러분!

우선 Pixi.js에 감사드립니다. 훌륭한 도구입니다. 사랑합니다! 2D 세계를위한 three.js의 완벽한 대응 부분입니다.

이 구성을 갖고 싶은 프로젝트에서 작업 중입니다.

Pixi.js를 사용하여 전체 WebGL로 작성된 2D UI
이 2D UI는 Three.js로 작성된 3D 세계의 원점에서 캡슐화됩니다.
이 3D 세계는 Three.js에서 VR 입체 카메라로 렌더링됩니다.

Three.js 캔버스 안에 Pixi.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 에 2015년 01월 23일

👍16

모든 12 댓글

three.js가 캔버스를 텍스처로 지원하는 경우 pixi를 오프 스크린 캔버스로 렌더링하여 three.js 장면에서 텍스처로 사용할 수 있습니다.

englercj 에 2015년 01월 21일

👍6

에 딱 맞다! 그것이 바로 우리가하는 방법입니다!

2015 년 1 월 21 일 수요일 오후 4:45, Chad Engler [email protected]
썼다 :

three.js가 캔버스를 텍스처로 지원하는 경우 pixi를 렌더링하여
오프 스크린 캔버스를 사용하여 three.js 장면에서 텍스처로 사용합니다.
—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/GoodBoyDigital/pixi.js/issues/1366#issuecomment -70872648
.

Mat Groves
_ 기술 파트너 _
전화 : 07708 114496 :: www.goodboydigital.com
1 층, Unit 9B, Queens Yard, White Post Lane, London, E9 5EN
goodboy ©. 판권 소유.

GoodBoyDigital 에 2015년 01월 21일

Wahou ... 고마워요 여러분! :)

이것이 제가 Fast Feedback이라고 부르는 것입니다!

ghost 에 2015년 01월 21일

나는 단지 작은 세부 사항에 대해 생각하고 있습니다.

3D 세계 (Three.js) 위에 렌더링 될 2D UI 패널 (Pixi.js)을 그릴 수있는 기능이 필요합니다.
그러나 이러한 2D UI 패널에는 다음과 같은 속성이 있어야합니다.

불투명도 계수가 0-100 % 인 투명도
배경에서 3D 세계의 흐림 효과

캔버스를 렌더링하는 트릭을 사용하여 텍스처로 적용하면. 배경의 흐림이 불가능 할까 두렵습니다.

이것을 설명하기 위해 이미지를 첨부했습니다.
transparency

ghost 에 2015년 01월 21일

Three.js 측에서 블러가 발생합니까? pixi 개체를 투명하게 만든 다음 원하는대로 텍스처를 3D 장면에 혼합하면됩니다.

englercj 에 2015년 01월 21일

도와 주셔서 다시 한 번 감사드립니다! 이제 당신이 그것을 말 했으니 ... 그것은 확실히 가장 논리적 인 경로입니다! :)

건배

이자형

ghost 에 2015년 01월 21일

나는 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 에 2015년 01월 23일

👍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)
    }

이를 통해 프레임 버퍼 전환없이 3D 장면 위에 UI를 렌더링 할 수 있습니다.

UI 아래에서 흐림 효과를 얻는 것은 훨씬 더 복잡합니다. 다음을 수행해야합니다.

3D 장면을 프레임 버퍼로 렌더링
가위 테스트를 활성화하고 멀티 패스 블러 셰이더 (핑퐁 FBO 등)로 블러 영역을 렌더링합니다.
그런 다음 상단에 2D UI를 렌더링합니다.

mattdesl 에 2015년 01월 27일

👍3

매우 정확하고 문서화 된 피드백에 감사드립니다 Matt! :)

WebGL 프로그래밍을 처음 접했기 때문에 이것은 매우 유용합니다.
나는 먼저 Mix 2 라이브러리를 망설 였는데, 특히 해킹 된 Three.js가 내가 필요로하는 것을 위해 pixi를 일부 확장하여 대체 할 수 있다는 점에 주저했습니다.

그러나 2D 개발자의 초점 인 훌륭한 예는 gl2d 호출에 pixi를 사용하도록 저를 설득했습니다.

Mix 접근 방식을 선택한 것으로 보이므로 Pixi가 WebGL로 2D 요소를 그리는 데 확실히 더 효율적인 선택임을 확인했습니다.

건배

이자형

ghost 에 2015년 01월 27일

Mix 접근 방식을 선택한 것으로 보이므로 Pixi가 WebGL로 2D 요소를 그리는 데 확실히 더 효율적인 선택임을 확인했습니다.

글쎄, 아마도. 대부분의 경우 추가 성능은 문제이며 (한 번에 3000 개의 버튼 애니메이션이 필요한가요?) 강력한 텍스트 렌더링, 텍스트 입력 및 스크롤 이벤트와 같은 것은 WebGL에서 매우 어려울 수 있습니다.

가장 쉬운 방법은 UI에 DOM / CSS를 사용하는 것입니다. WebGL을 선택해야하는 경우 (예 : 특정 효과, 깊이 테스트 등) Pixi는 아마도 2D UI 용 ThreeJS보다 쉬울 것입니다.

mattdesl 에 2015년 01월 27일

대답 한 것 같아서 닫으려고합니다.

englercj 에 2015년 01월 27일

이 스레드는 닫힌 후 최근 활동이 없었기 때문에 자동으로 잠겼습니다. 관련 버그에 대한 새 문제를여십시오.

lock[bot] 에 2019년 02월 26일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Pixi.js: Pixi.js 캔버스와 three.js 캔버스 결합

가장 유용한 댓글

모든 12 댓글

Mat Groves_ 기술 파트너 _전화 : 07708 114496 :: www.goodboydigital.com 1 층, Unit 9B, Queens Yard, White Post Lane, London, E9 5EN goodboy ©. 판권 소유.

관련 문제

Mat Groves
_ 기술 파트너 _
전화 : 07708 114496 :: www.goodboydigital.com
1 층, Unit 9B, Queens Yard, White Post Lane, London, E9 5EN
goodboy ©. 판권 소유.