是否可以在WebGL内容上绘制透明画布？

Question

我习惯于Flash，我可以通过Stage3D（OpenGL）结合旧的2D API。现在

我想用EaselJS这是非常相似的闪存2D API为我的用户界面，但我想它要绘制在3D内容。

现在，AFAIK EaselJS是基于画布的。是否有可能通过WebGL以某种方式将画布组合成？或者它会需要严重的黑客？

Answer 1

WebGL画布只是一个画布，就像任何其他HTML元素。您可以根据需要堆叠任意数量（达到浏览器设置的限制或内存）

这里有5个图层。

1. 底部的div
2. 甲webgl的画布
3. 的中间格
4. 2D画布
5. 顶格

var gl = document.querySelector("#l1").getContext("webgl"); 
 
gl.enable(gl.SCISSOR_TEST); 
 
gl.scissor(100, 50, 100, 90); 
 
gl.clearColor(0, 0.25, 0, 0.25); 
 
gl.clear(gl.COLOR_BUFFER_BIT); 
 

 
var ctx = document.querySelector("#l3").getContext("2d"); 
 
ctx.fillStyle = "rgba(255,0,255,0.25)"; 
 
ctx.font = "55px san-serif"; 
 
ctx.textAlign = "center"; 
 
ctx.fillText("layer 3", 150, 50);

#l0, #l1, #l2, #l3, #l4 { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 300px; 
 
    height: 150px; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    font-weight: bold; 
 
} 
 

 
#l0 { 
 
    color: rgba(255,0,0,0.25); 
 
    font-size: 70px; 
 
} 
 

 
#l2 { 
 
    color: rgba(0,255,0,0.25); 
 
    font-size: 60px; 
 
} 
 

 
#l4 { 
 
    color: rgba(0,0,255,0.25); 
 
    font-size: 50px; 
 
}

<div id="l0">layer 0</div> 
 
<canvas id="l1"></canvas> 
 
<div id="l2">layer 2</div> 
 
<canvas id="l3"></canvas> 
 
<div id="l4">layer 4</div>

Here's an article that draws text into a 2d canvas layered on top of a webgl canvas。