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

问题描述

在 Three.js 中，是否可以像使用常规 HTML5 画布元素那样直接绘制到 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 或特定于 WebGL 的绘图命令与 Three.js 配合?

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屋！