Three.js 生成的立方体，如何给每个面进行均匀的透明度让其通透？

不知在每个 Material 最后加上 “ depthTest:false ” 是否会好一些呢？

我的理解是在默认情况下 depth test 会打开，如果一个面被另一个面遮住了，那那个被遮住的面就不会被渲染了；如果取消 depthTest 应该能够解除不透明的问题。

但是仅仅取消 depthTest 也无法得到正确的结果，正确的结果是应该将每个面按遮挡顺序排序，先渲染离摄像机远的再渲染离摄像机近的，也就是说，面的渲染顺序会因为摄像机的顺序不同而不同。需要一个面一个面地渲染而不能将整个立方体一起送给渲染管线（不然就会按照模型中的顺序来渲染了） …

fim8

2016-12-31 12:08:03 +08:00

@quadpixels 我试试，先感谢

edimetia3d

2016-12-31 14:08:46 +08:00

@quadpixels 想法基本是对的.
depth testing 和 blend 是两个层面的问题.
先进行 depth testing ,它是基于三维模型进行的,这一步就会丢弃被遮挡的 fragment.
blend 则是基于颜色缓冲进行的,是把当前渲染的帧和上一次渲染的帧进行混合.

传统解法是:
保持开启深度测试.
先绘制所有不需要透明度的**物体**
再从远到近绘制每一个需要透明度的"曲面".

fim8

2016-12-31 17:11:17 +08:00

@edimetia3d 我来测试一个，待会发一个例子。