使用three.js渲染透明对象的两侧时出现的工件 [英] artifacts when rendering both sides of a transparent object with three.js

问题描述

我尝试使用three.js 渲染透明对象的两侧.位于透明对象内的其他对象也应该显示出来.可悲的是，我得到了我不太了解的工件.这是一个测试页面:

将小提琴更新为three.js r.105

I try to render both sides of a transparent object with three.js. Other objects located within the transparent object should show too. Sadly I get artifacts I don't know too handle. Here is a test page: https://dl.dropbox.com/u/3778149/webgl_translucency/test.html

Here is an image of the said artifact. They seem to stem from the underlying sphere geometry.

Interestingly the artifacts are not visible for blending mode THREE.SubtractiveBlending = 2.

Any help appreciated!

Alex

解决方案

Self-transparency is particularly difficult in WebGL and three.js. You just have to really understand the issues, and then adapt your code to achieve the effect you want.

You can achieve the look of a double-sided, transparent sphere in three.js, with a trick: You need to render two transparent spheres -- one with material.side = THREE.BackSide, and one with material.side = THREE.FrontSide.

Using such methods is generally required if you want self-transparency without artifacts -- especially if you allow the camera or object to move.

Here is a fiddle: http://jsfiddle.net/x5bm0qLf/

EDIT: Updated fiddle to three.js r.105

这篇关于使用three.js渲染透明对象的两侧时出现的工件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！