如何解决将纹理元素添加到 webGL 中已有纹理对象的最佳方法
我目前正在创建一个网络配置工具来创建非常简单的建筑物。我已经设法创建了一个布局编辑器,您可以使用它通过拖放来排列建筑物的 4 面墙,然后在 3D 中查看结果。布局编辑器是一个简单的 2D 画布,而 3D 内容是使用 WebGL 完成的。我从之前创建的 2D 布局和默认高度创建了 3D 网格。
现在我想更进一步,提供一个添加门窗的功能。因此,我还想使用 2D 画布,您可以通过拖放在其上添加和移动它们(每面墙)。然后我想再次在 3D 模型上显示结果。我不需要门窗是网格的实际部分。如果它们只是正确放置在模型上的纹理就足够了。
基本模型已经有了石膏纹理。我现在想将门窗的图像放在“基础”纹理的顶部(参见图像)。实现这一目标的最佳方法是什么 WebGL?我实际上不知道如何开始,因为通常的纹理概念不适用于这种情况。
这是添加窗口后我希望它看起来的样子(当然还有实际的窗口纹理):
提前致谢!
解决方法
没有真正“简单”的方法。只是有各种方法及其权衡。
一个是使用 projected textures。
这种方法的缺点是每个额外的图像都需要一个新的着色器。换句话说,您需要一个用于无投影纹理的着色器,一个用于 1 的不同着色器,以及用于 2 的不同着色器,最终您会用完制服并达到极限。
另一个是使用decals。贴花类似于投影纹理,不同之处在于您通过投影生成一个新模型,该模型仅包含图像将接触的那些三角形。然后将图像应用到该模型。这样做的好处是每个图像都成为要绘制的单独事物,因此不需要额外的着色器。有一个工作贴花示例 here。这是一个 Three.js 示例,但您可以深入研究 the source 以了解它如何适用于您自己的 WebGL 内容。
另一种方法是使用在正确位置绘制的窗口更新立方体本身的纹理。这说起来容易做起来难,因为要将新图像应用于纹理,您需要通过 UV 坐标对其进行投影。这也不需要模型的任何部分重用纹理的任何部分,否则当您应用图像时,不相关的部分会受到影响。 This example 显示从投射光线计算 UV 坐标。同样是three.js,但您可以深入研究the source以找出适用于您自己的WebGL的数学
当然,如果您只想在盒子的侧面显示图像,您可以为图像制作一个平面,然后让用户拖动它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。