用 canvas (three.js) 覆盖 canvas (WebGL)

Question

我有两个 canvas。第一个应该是背景，它的内容是通过原始 WebGL (3D) 呈现的。第二个 canvas 应该覆盖第一个并且主要是透明的。它的内容通过 three.js（3D 内容）呈现。不幸的是，第二个 canvas 没有绘制在第一个之上，而是紧挨着它。

如何使用透明 three.js 场景背景在第一个 canvas 上方绘制第二个 canvas？

更新：

我综合了gaitat的思路。但是它仍然无法正常工作（请参阅 Fullscreen screenshot. Twice rendered grey box due to Oculus Rift support.）。 Canvas 2 仍然不在第一个之上，它的背景也不透明。提醒一下：灰色方块是通过原始 WebGL 在名为 webglcanvas 的 canvas 上绘制的。该框通过 three.js 在 leapcanvas.

上呈现

代码 1（canvases 和 div [Xtend/Java] 的初始化）：

Browser::getDocument().getElementById("view").appendChild(webglDiv)


    val Element webGLCanvasDiv = Browser::getDocument().createDivElement()
    webGLCanvasDiv.style.setCssText("position: absolute")
    webGLCanvasDiv.style.setCssText("z-index: 8")
    webGLCanvasDiv.setId("webGLCanvasDiv")      
    Browser::getDocument().getElementById("webglDiv").appendChild(webGLCanvasDiv)       


    val webGLCanvas = Browser::getDocument().createCanvasElement()
    webGLCanvas.setWidth(viewportWidth)
    webGLCanvas.setHeight(viewportHeight)
    webGLCanvas.style.setCssText("border-bottom: solid 1px #DDDDDD")
    webGLCanvas.setId("webglcanvas")        
    Browser::getDocument().getElementById("webGLCanvasDiv").appendChild(webGLCanvas)        


    val Element webGLLeapDiv = Browser::getDocument().createDivElement()
    webGLLeapDiv.style.setCssText("position: absolute")
    webGLLeapDiv.style.setCssText("z-index: 10")     
    webGLLeapDiv.setId("webGLLeapDiv")      
    Browser::getDocument().getElementById("webglDiv").appendChild(webGLLeapDiv)


    val leapCanvas = Browser::getDocument().createCanvasElement()
    // canvas size is handled via renderer in Javascript        
    leapCanvas.setId("leapcanvas")      
    Browser::getDocument().getElementById("webGLLeapDiv").appendChild(leapCanvas)

代码 2（渲染 three.js 场景 [Javascript]）

var foreground = $doc.getElementById("leapcanvas");     

    var camera, scene, renderer;
    var geometry, material, mesh;

    init();
    animate();

    function init() {

        camera = new $wnd.THREE.PerspectiveCamera(75, 500 / 500, 1, 10000);
        camera.position.z = 500;

        scene = new $wnd.THREE.Scene();

        geometry = new $wnd.THREE.BoxGeometry(200, 200, 200);
        material = new $wnd.THREE.MeshNormalMaterial();         

        mesh = new $wnd.THREE.Mesh(geometry, material);
        scene.add(mesh);

        renderer = new $wnd.THREE.WebGLRenderer({
            canvas : foreground,
            alpha : true
        });


        renderer.setSize(viewportWidth / 2, viewportHeight);
        renderer.setClearColor(0x000000, 0); 

    }

    function animate() {

        requestAnimationFrame(animate);

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render(scene, camera);

    }

Answer 1

假设您的 .html

<div id="container">
    <div id="webglContainer"></div>
    <div id="threeContainer"></div>
</div>

在你的.css你需要

/* make the canvases, children of the this container */
#container {
    position: relative;
}

#webglContainer {
    position: absolute;
    pointer-events: none;   /* this element will not catch any events */
    z-index: 8;    /* position this canvas at bottom of the other one */
}

#threeContainer {
    position: absolute;
    z-index: 10;      /* position this canvas on top of the other one */
}

用 canvas (three.js) 覆盖 canvas (WebGL)

Overlay canvas (WebGL) with canvas (three.js)

css

canvas

webgl

three.js