使用Three.js将UI元素直接绘制到WebGL区域 [英] Drawing UI elements directly to the WebGL area with Three.js

问题描述

在Three.js中，是否可以像使用常规HTML5 canvas元素那样直接绘制到WebGL区域(例如用于抬头显示器或UI元素)?

In Three.js, is it possible to draw directly to the WebGL area (for a heads-up display or UI elements, for example) the way you could with a regular HTML5 canvas element?

如果是这样，您如何获取上下文以及可用的绘图命令?

If so, how can you get the context and what drawing commands are available?

如果没有，是否还有其他方法可以通过与Three.js配合使用的其他Three.js或WebGL特定的绘图命令来实现?

If not, is there another way to accomplish this, through other Three.js or WebGL-specific drawing commands that would cooperate with Three.js?

我的备份计划是使用HTML div作为覆盖，但是我认为应该有一个更好的解决方案.

My backup plan is to use HTML divs as overlays, but I think there should be a better solution.

谢谢！

推荐答案

您不能像使用常规画布一样直接绘制到WebGL画布.但是，还有其他方法，例如

You can't draw directly to the WebGL canvas in the same way you do with with regular canvas. However, there are other methods, e.g.

• 像往常一样绘制到隐藏的2D画布上，然后将其用作四边形的纹理将其传输到WebGL
• 使用纹理映射的四边形(例如，健康箱的框架)绘制图像
• 通过将路径的顶点(和形状)放置到VBO上并使用适当的多边形类型来绘制路径(和形状)
• 使用位图字体(基本为纹理的四边形)或实际几何图形(three.js包含示例和帮助器)来绘制文本

使用这些通常意味着安装正交摄影机.

Using these usually means setting up a an orthographic camera.

但是，所有这一切都需要大量工作，例如用真实的几何图形绘制文本可能会很昂贵.如果可以使用CSS样式的HTML div来制作，则应该使用它们，因为它设置起来非常快.另外，在WebGL画布上进行绘制(可能使用透明性)应该是一个强烈的暗示，即如果浏览器尚未加速所有内容，则将加速GPU的div绘制.

However, all this is quite a bit of work and e.g. drawing text with real geometry can be expensive. If you can make do with HTML divs with CSS styling, you should use them as it's very quick to set up. Also, drawing over the WebGL canvas, perhaps using transparency, should be a strong hint to the browser to GPU accelerate its div drawing if it doesn't already accelerate everything.

还请记住，您可以使用CSS3取得很多成就，例如圆角，alpha透明度，甚至3d透视变换，如问题评论中的Anton链接所示.

Also remember that you can achieve quite much with CSS3, e.g. rounded corners, alpha transparency, even 3d perspective transformations as demonstrated by Anton's link in the question's comment.

这篇关于使用Three.js将UI元素直接绘制到WebGL区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！