【问题标题】:WebGL and/or Three.js: Remove non rendered facesWebGL 和/或 Three.js:删除未渲染的面
【发布时间】:2015-03-05 15:42:54
【问题描述】:

对于给定位置的给定网格,是否有一种快速简便的方法(使用 vertexShader、fragmentShader 或其他东西)来识别/从网格中移除所有未在相机屏幕上渲染的面/顶点(隐藏在其他面孔的后面,在视野之外等)?

【问题讨论】:

    标签: camera three.js webgl shader vertex


    【解决方案1】:

    如果您的意思是 删除 不渲染它们,这是通过启用 backface culling 来完成的(默认情况下)。

    检测 CPU 的背面

    如果您想从几何本身中删除它们,您需要遍历面并计算面法线和观察/相机方向向量之间的dot product,然后组成新的几何缓冲区,其中仅包含点积为阳性。

    在 CPU 上检测被遮挡的人脸

    检测隐藏/被遮挡的面可以通过迭代面并使用沿观察向量拉伸远裁剪距离的三角形边缘构建三个平面来完成,并使用面本身的翻转法线作为“前平面”。这样,您将获得一个开口棱柱型的形状。然后使用该 volume(它在技术上不是一个体积,因为它没有关闭)来剔除剩余面的顶点,当一个面的所有顶点位于所有平面内时(假设你的平面法线指向内部)有问题的人脸被遮挡,可以移除。

    即使使用像 Bounding Volume Hierarchy 这样的加速结构,这也将不实时兼容

    在 GPU/CPU 上检测被遮挡的人脸

    另一种更简单且可能更快的方法是为每个面分配一个表示 ID 的唯一颜色,将几何图形渲染到帧缓冲区,迭代该像素数据,将颜色位移回各自的 ID 并构建可见列表面朝那个方向。

    更多信息

    虽然它通常不在几何级别上完成,但请阅读 the wikipedia article on occlusion culling 了解更多信息。

    【讨论】:

    • 我更多的是寻找第二个选项。我担心的是隐藏的面孔。在同一个网格上,如果一张脸位于另一张脸的“后面”但朝向相机,我想点积将为正但不应该渲染脸部。对吗?
    • 是的,你是对的,即使面部不可见,点积也会是正数。你想要的叫做occlusion culling。我已经编辑了我的答案,并添加了两种方法来检测被遮挡的面部,以及一个包含有关该主题的更多信息的链接。但是,在不了解您的用例的情况下,很难就一种好的方法提出建议。
    • 我的案例是一个 3D 绘图编辑器。在这个编辑器中,我需要能够在网格上投影图像。 Three.js 中已经有投影的例子,但是它们你
    • 我的案例是一个 3D 绘图编辑器。在这个编辑器中,我希望能够在网格上投影图像。我在 Three.js 中看到过投影示例(贴花),但它们基于 3D 矩形棱镜。并且投影是在立方体中的所有顶点上完成的,即使是那些你无法“看到”的顶点。我正在考虑在进行投影之前“清理”网格,以便只使用重要的面。顺便说一句,如果您知道投影纹理(webgl/Threejs)的示例,其中原始纹理被修改并且可以恢复以供进一步使用。我现在觉得很难。
    • 我不是threejs的人,所以我无法帮助您提供示例。将“绘画”纹理投影回原始纹理应该只是计算透视变换到各个面部 UV 上的问题,类似于完成光照贴图的方式。这应该是另一个问题,尽管您要求去除遮挡剔除/隐藏面,而不是 UV 纹理投影。所以接受我的回答,当需要时提出一个新问题。
    猜你喜欢
    • 1970-01-01
    • 2012-09-10
    • 1970-01-01
    • 1970-01-01
    • 2020-05-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多