Three.js使用和不使用多种材质(均使用纹理)渲染性能

时间:2013-08-26 20:24:51

标签: three.js webgl

我试图弄清楚我所看到的重要性能是否可以被优化掉,或者这是事情的状态:

我有一个看起来像奥巴马的几何图形,大约是11K三角形,5600左右的面(四边形和三角形)。它在Maya中建模,并根据所使用的渲染方法以两种方法之一导出为OBJ。

在一种导出方法中,我们不从Maya导出材质文件。我们采用模型使用的5种不同纹理贴图,将它们缝合成单个纹理,并在模型中重写UV以引用统一纹理中的新纹理位置。最终的统一纹理是1024x512。

第二种导出方法确实使用来自Maya的导出材质文件,并且我们将所有情况下的5种不同纹理缩小为比其他方法使用的统一纹理中的对应物更小。如果平铺了5种不同的纹理,你会得到一些关于768x512的东西。

渲染相同几何体的两种方法之间的唯一区别是第二种方法有1种半透明材料:眼睛上的角膜(透明层)设置为0.1(几乎不可见)透明度和略带蓝色/灰色调。

在第一种渲染方法中代替半透明角膜,我们只是在角膜上有眼球图像,而这种方法从未见过内眼(虹膜和瞳孔)。他们在那里,因为他们在不透明的角膜后面而被渲染丢弃。

现在这里有一个大难题:渲染方法1轻松达到60 fps,并保持两个这样的几何形状。渲染方法2渲染每秒20到25帧。我还没有尝试使用第二个几何体进行渲染。我对帧速率的显着降低感到有些惊讶。如果我将半透明角膜改为不透明,则帧速率仍然很差(相同速率)。

两种方法都使用THREE.JSONLoader。渲染方法1使用单个MeshLambertMaterial,渲染方法2使用meshFaceMaterial和6种材质的数组。

使用多种材质和多种纹理是否有很大的影响?人们在更复杂的环境中做什么需要比我的微不足道的材料多得多的材料?

0 个答案:

没有答案