美文网首页Three.js
Three.js 透明物体不能正常显示/渲染顺序的控制问题

Three.js 透明物体不能正常显示/渲染顺序的控制问题

作者: ANoman_M | 来源:发表于2017-05-04 10:54 被阅读246次

本篇文章主要讨论Three.js中的渲染机制,以及在部分场景中透明的物体渲染不正确,渲染顺序错误等问题。国内好像很少有人有讨论这方面的问题,stackoverflow以及github倒是很多。在本文的最后将会贴出参考文章的地址。此外,如果本文观点有任何错误,欢迎各位指出,一起学习进步,谢谢!

Three.js的渲染机制

three的渲染器是基于webGL的。它的渲染机制是根据物体离照相机的距离来控制和进行渲染的。对于透明的物体,则是按照从最远到最近的顺序进行渲染。也就是说,它根据物体的空间位置进行排序,然后根据这个顺序来渲染物体。

如何控制渲染顺序?

1.设置
renderer.sortObjects = false;
这样,物体的渲染顺序将会由他们添加到场景中的顺序所决定。适合大部分场景。
2.设置
renderer.sortObjects = true;
并且给特定的物体设置object.renderOrder 指定它的渲染顺序。
默认renderOrder = 0;
3.设置
material1.depthWrite = false
material2.depthWrite = false


对于透明物体

如果发现场景中的透明物体显示有问题,例如旋转摄像机的时候会出现闪烁等问题。可以尝试以下几种方法
1.设置
material.transparent = false
注意:不透明物体将会优先渲染。所以这也可以作为控制渲染顺序的一个方法。
2.设置
material.alphaTest = 0.1
自己尝试改变不同的alpha测试值,以适合你自己的场景。
3.尝试改变sortObject和depthWrite的值等等。


创建两个场景

可以控制某个物体"始终显示在最前面",同样可以控制渲染顺序。因为应用场景不多,不做介绍。不过具体可参考
这一篇文章


参考文章:
[1] https://stackoverflow.com/questions/15514274/three-js-how-to-control-rendering-order
[2] https://stackoverflow.com/questions/15994944/transparent-objects-in-threejs/15995475#
[3] https://stackoverflow.com/questions/12666570/how-to-change-the-zorder-of-object-with-threejs
[4] https://stackoverflow.com/questions/12666570/how-to-change-the-zorder-of-object-with-threejs/12666937#12666937
[5] https://stackoverflow.com/questions/28543574/three-js-transparent-objects-rendering-in-wrong-order-depending-on-camera-angle

相关文章

  • Three.js 透明物体不能正常显示/渲染顺序的控制问题

    本篇文章主要讨论Three.js中的渲染机制,以及在部分场景中透明的物体渲染不正确,渲染顺序错误等问题。国内好像很...

  • 关于unity ZWrite ZTest -透明(2)

    上一篇关于不透明物体,这一篇我们来探究半透明物体。 如果要想得到一个正常的渲染效果:先渲染不透明物体,顺序(相对于...

  • Single Depth peeling 顺序无关渲染(OIT)

    什么是顺序无关渲染 在3D渲染中,物体的渲染是按一定的顺序渲染的,这也就可能导致半透明的物体先于不透明的物体渲染,...

  • 《Shader 入门精要》之透明效果

    为什么透明效果的渲染顺序很重要 书上已经解释的很清楚了,这边说一下,为什么对于循环重叠的半透明物体需要在意渲染顺序...

  • 透明物体的深度写入问题

    通常来说,透明物体是不需要写深度的,例如: 透明物体与非透明物体间的渲染不会有问题因为所有透明物体会在所有非透明物...

  • iOS 离屏渲染原因

    正常渲染流程 在GPU的渲染流程中,根据由远及近的顺序显示图像到屏幕上,依次将结果存储到帧缓冲区 视频控制器从帧缓...

  • 渲染概念透明物体的渲染

    渲染队列:渲染分了好几层,是规划好的,我们这里有一个透明物体,比如UI经常使用透明效果,比如粒子效果,透明物体最重...

  • Three.js实现光照阴影

    Three.js实现光照阴影 在Three.js中,物体可以形成阴影投影效果,但是由于渲染阴影需要消耗计算机大量资...

  • Material 材质

    材质决定了物体是否透明颜色等 three.js 中涉及的主要几种材质 MeshBasicMaterialcolor...

  • Unity Shader 入门到改行6——透明效果

    1. 透明物体处理的问题 对于透明物体的处理,是游戏引擎的一个重要能力,通常通过模型的透明通道 alpha来控制物...

网友评论

  • 7794da1efca3:设置了renderer.sortObjects = true;还是不行,89版本,请教下大佬
    ANoman_M:你使用object.renderOrder 指定各个物体的渲染顺序了吗

本文标题:Three.js 透明物体不能正常显示/渲染顺序的控制问题

本文链接:https://www.haomeiwen.com/subject/phurtxtx.html