是否可以在 WebGL 内容上绘制透明画布? [英] Is it possible to draw a transparent canvas over WebGL content?

问题描述

我习惯了 Flash，我可以在 Stage3D (OpenGL) 上结合旧的 2D API.

I am used to Flash where I can combine the old 2D API over Stage3D (OpenGL).

现在我想在我的 UI 中使用与 Flash 2D API 非常相似的 EaselJS，但我希望将它over 3D 绘制内容.

Now I would like to use EaselJS which is very similar to the Flash 2D API for my UI, but I would like it to be drawn over 3D content.

现在，AFAIK EaselJS 是基于 Canvas 的.是否有可能以某种方式通过 WebGL 结合 Canvas?还是需要严重的黑客攻击?

Now, AFAIK EaselJS is Canvas-based. Is it be possible to combine Canvas over WebGL in some way? Or would it require serious hacks?

推荐答案

WebGL 画布只是一个与任何其他 HTML 元素一样的画布.您可以堆叠任意数量(取决于浏览器设置的限制或内存)

A WebGL canvas is just a canvas which is like any other HTML element. You can stack as many as you like (up to browser set limits or memory)

这里有 5 层.

1. 底部 div
2. 一个 webgl 画布
3. 中间 div
4. 2d 画布
5. 顶部 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>

这是一篇将文本绘制到 webgl 之上的二维画布的文章画布.

这篇关于是否可以在 WebGL 内容上绘制透明画布?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！