Прозрачный объект скрывает другие прозрачные объекты (alphaTest не работает и depthWrite = false вызывает некоторые проблемы)

Question

У меня в настоящее время проблема с прозрачностью. Как вы можете видеть на рисунках, отображаются непрозрачные объекты за прозрачным объектом. Но backside другого прозрачного объекта не отображается, я устанавливаю material.side = THREE.DoubleSide.

Это видно, когда я устанавливаю material.depthWrite = false, но тогда появляется видимый сбой, вы можете видеть на втором снимке.

Я использую THREE.MeshPhongMaterial и самую новую версию Three.js. Ниже приведены значения для материала, который вы можете увидеть на картинке

material.color.setHex(0x9ed7f5); 
material.emissive.setHex(0x062f61); 
material.transparent = true; 
material.opacity = 0.5; 
material.needsUpdate = true; 
material.reflectivity = 0.8; 
material.envMap = textureCube; 
material.side = THREE.DoubleSide; 
material.roughness = 0.2; 
material.metalness = 1; 
depthWrite = true; 

depthwrite = false; 

Вот как это должно выглядеть, работает, только если объект сзади не является прозрачным

Кажется, что с другой стороны я может видеть прозрачный объект позади.

Для полной путаницы в этой проблеме я должен опубликовать еще одну фотографию. Здесь вы можете видеть изображение (1) только с другой стороны (сцена повернута на 180 °), так как вы можете видеть, что это представление отличается от того, что в задней части отсутствует объект (также прозрачный), который показан в другом представлении , Все эти объекты имеют тот же самый материал!

EnvMap textureCube создается следующим образом

textureCube = new THREE.CubeTextureLoader().load(urls); 
textureCube.format = THREE.RGBFormat; 
var shader = THREE.ShaderLib["cube"]; 
shader.uniforms["tCube"].value = textureCube; 
var shaderMaterial = new THREE.ShaderMaterial({ 
    fragmentShader: shader.fragmentShader 
    , vertexShader: shader.vertexShader 
    , uniforms: shader.uniforms 
    , depthWrite: false 
    , side: THREE.BackSide 
}); 
var skyBox = new THREE.Mesh(new THREE.BoxGeometry(1500, 1500, 1500), shaderMaterial); 
scene.add(skyBox); 

Answer 1

I не может понять вашу проблему с ваших фотографий, но можете ли вы сказать мне, если это то же самое ING?

Перейдите по адресу threejs.org/docs/#Reference/Materials/MeshStandardMaterial, в живом примере установите значение окружающей среды на белый, включите прозрачность в материале и установите непрозрачность около 0,7.

Вы видите, как прозрачная часть тора на переднем плане закрывает другие части, когда они идут за ним? Это может занять некоторое время, но если вы посмотрите, как он вращается, вы должны понять, что я имею в виду.

К сожалению, это ограничение WebGL, а не что-то, что может быть исправлено с помощью функции three.js.

Answer 2

При создании прозрачного объекта, попытайтесь установить premultipliedAlpha в true, и это может решить эту проблему:

var material = new THREE.MeshPhongMaterial({color: 'color', transparent: true,opacity:0.5,premultipliedAlpha: true});