WebGL模型简化

时间:2013-05-06 11:36:21

标签: html5 3d webgl game-engine game-physics

我正在筹划一个Web GL游戏并开始为它制作模型,我需要知道是否有人知道我的模型是否是1X比例,我的相机从对象缩放/平移我的模型变为0.1X规模,WGL引擎对模型进行了哪种简化?

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

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

虽然三角形看起来相同,但复杂性并非完全必要,可以简化为4个三角形以提高性能。

我知道WebGL是一台状态机,也许没有任何反应;无论规模或状态如何,模型的复杂性都保持不变,但我如何解决这个问题以获得最佳性能呢?

由于在1X比例下,视野中可能只有一个或很少的模型,但当缩放到0.1X比例时,可能会有数百个模型。意思是,如果模型的复杂性太高,那么性能就会受到巨大打击,游戏变得没有反应/无用。

非常感谢所有建议。

2 个答案:

答案 0 :(得分:2)

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和Daxter以及Crash Team Racing(旧游戏)使用上面的结构。  很远,只使用了1,4,12,15个点。关闭所有16点使用。  点2,3,4,5,6,8,9,10,11,13,14可以放置在任何地方。  在远距离和近距离之间,所有点都变形为16点  网格成为4点网格。如果你玩Jak和Daxter#1或者Ratchet和Clank#1  当你玩的时候,你可以看到这种变形。通过那些的第二个版本  艺术家们擅长隐藏变形的游戏。

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

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

答案 1 :(得分:0)

搜索“镶嵌细分”。 有了它,您可以在网格中添加或减去三角形。

细分与LOD对象(细节层次)密切相关。

比例因子只是网格的所有顶点与之相乘的系数,并且您可以使用比例沿着轴拉伸网格。

看看这个Three.js的例子: http://threejs.org/examples/webgl_lod.html(WASD /鼠标移动)