是否可以在 WebGL 内容上绘制透明 canvas?
Is it possible to draw a transparent canvas over WebGL content?
我习惯了 Flash,我可以在其中结合旧的 2D API 而不是 Stage3D (OpenGL)。
现在我想为我的 UI 使用与 Flash 2D API 非常相似的 EaselJS,但我希望它是绘制 超过 3D 内容。
现在,AFAIK EaselJS 是基于Canvas的。是否可以通过某种方式 将 Canvas 与 WebGL 相结合?还是需要认真的黑客攻击?
WebGL canvas 只是一个 canvas,与任何其他 HTML 元素一样。您可以堆叠任意数量(不超过浏览器设置限制或内存)
这里有 5 层。
- 一个底div
- 一个 webgl canvas
- 中间一个div
- A 2d canvas
- 顶div
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.
我习惯了 Flash,我可以在其中结合旧的 2D API 而不是 Stage3D (OpenGL)。
现在我想为我的 UI 使用与 Flash 2D API 非常相似的 EaselJS,但我希望它是绘制 超过 3D 内容。
现在,AFAIK EaselJS 是基于Canvas的。是否可以通过某种方式 将 Canvas 与 WebGL 相结合?还是需要认真的黑客攻击?
WebGL canvas 只是一个 canvas,与任何其他 HTML 元素一样。您可以堆叠任意数量(不超过浏览器设置限制或内存)
这里有 5 层。
- 一个底div
- 一个 webgl canvas
- 中间一个div
- A 2d canvas
- 顶div
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.