是否可以在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。