html - WebGL模型简化

标签 html 3d webgl game-engine game-physics

我目前正在计划一个 Web GL 游戏并开始为它制作模型,我需要知道是否有人知道我的模型是 1X 比例,我的相机从对象缩放/平移并且我的模型变成0.1倍比例,WGL引擎对 View 中的模型进行了怎样的简化?

I.E 如果我以三角形为例,这里是 1X 比例 triangle with many triangles inside at full scale

这里是原始大小的 10% 的三角形,同时保持所有复杂性(抱歉,它太微弱了)
Triangle at 10% scale with many triangles inside

虽然三角形看起来一样,但复杂性并不是完全必要的,为了性能可以简化为 4 个三角形。

我知道 WebGL 是一个状态机,也许什么也不会发生;无论规模或状态如何,模型的复杂性都保持不变,但我该如何解决这个问题以获得最佳性能?

由于在 1X 比例下, View 中可能只有一个或很少的模型,但当缩放到 0.1X 比例时,可能会有数百个。这意味着,如果模型的复杂性太高,那么性能会受到巨大影响,游戏会变得无响应/无用。

非常感谢所有建议。

最佳答案

WebGL 不会为您简化。你必须自己做。

通常,您会根据距离显示不同的手工模型来计算与相机的距离。远处显示低细节模型,近处显示高细节模型。有很多方法可以做到这一点,您选择哪种方式取决于您。例如

  1. 近距离使用不同的高聚模型,远距离使用不同的低聚模型

    这是最简单、最常用的方法。这种方法的问题是,当引擎从使用低多边形模型切换到高多边形模型时,您经常会看到爆裂声。另一个答案中链接的 three.js 示例使用了这种技术。它创建了一个 LOD 对象,它的工作是决定在 N 个模型中的哪个模型之间切换。由您提供模型。

  2. 在远处使用低多边形,在其上方淡入高多边形。一旦高模完全遮盖了低模,就停止绘制低模。

    侠盗猎车手使用了这种技术

  3. 从高多边形创建低多边形,并使用任意数量的技术在它们之间变形。

    例如。

     1----2----3----4            1--------------4
     |    |    |    |            |              |
     |    |    |    |            |              |       
     4----5----6----7            |              |
     |    |    |    |   <----->  |              |
     |    |    |    |            |              |
     8----9----10---11           |              |
     |    |    |    |            |              |
     |    |    |    |            |              |
     12---13---14---15           12-------------15
    

    Jak and Daxter 和 Crash Team Racing(旧游戏)使用上述结构。 远处仅使用点 1、4、12、15。关闭所有 16 个点都被使用。 点 2、3、4、5、6、8、9、10、11、13、14 可以放在任何地方。 在远距离和近距离之间,所有点都变形了,所以 16 点 网格变为 4 点网格。如果您玩 Jak and Daxter #1 或 Ratchet and Clank #1 您可以在演奏时看到这种变形。通过那些的第二个版本 艺术家擅长隐藏变形的游戏。

  4. 近距离绘制高模,将高模渲染到纹理中并在其中绘制广告牌 距离。缓慢更新广告牌(每 N 帧而不是每一帧)。 这是一种用于动画对象的技术。它被用于 Crash Team Racing 对于其他赛车手,当他们很远时。

我敢肯定还有很多其他人。有一些算法可以实时分割以自动从高多边形生成低多边形或以其他形式(b 样条、元球、分割曲面)描述您的模型,然后生成一定数量的多边形。它们是否足够快并产生足够好的结果取决于您。 大多数 AAA 游戏,据我所知,不使用它们

关于html - WebGL模型简化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16397934/

相关文章:

javascript - 如何创建用户不可编辑的 HTML 表单默认短语?

javascript - 速度自动选择一个值

javascript - 在 WebGL 中的 map 上绘制单个多边形 - 建筑物、国家边界等(循环通过索引缓冲区)

node.js - Electron 中有问题的webGL支持

c++ - 如何识别分隔符以及如何将其与路径一起使用 Open Inventor

javascript - 快速 3D 矩阵重新切片

javascript - setInterval 函数 - 查询

html - DIV 在 IE7 中被下推 - 不明白为什么

C++:从qt中设置的点绘制3d表面

c - 使用单一光源渲染 3D 立方体的最简单方法是什么?