Проблема ThreeJS AdditiveBlending, ShaderMaterial, DepthTest - PullRequest
Новая
       44

Проблема ThreeJS AdditiveBlending, ShaderMaterial, DepthTest

0 голосов
/ 19 декабря 2018

Я создаю сцену с различными объектами и вдохновился этим CodePen (https://codepen.io/gnauhca/pen/VzJXGG). В примере DepthTest отключен на ShaderMaterial, но мне нужно, чтобы он был включен, потому что я хотел бы визуализировать объекты передволна частиц. Но когда я включаю DepthTest, я получаю странный эффект, когда кажется, что с AdditiveBlending рендерится только левая сторона материала, а правый взгляд теряет смешивание / прозрачность. Также, когда я наклоняю камеру, эффект становится лучшеили хуже, в зависимости от угла. Смотрите этот jsfiddle, например: https://jsfiddle.net/hnmftqjp/ и gif, демонстрирующий мою проблему: https://imgur.com/2p3yBAM

var shaderMaterial = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: waveVertexShader,
    fragmentShader: waveFragmentShader,

    blending: THREE.AdditiveBlending,
    depthTest: true,
    transparent: true
});

Любая помощь очень ценится!

1 Ответ

0 голосов
/ 20 декабря 2018

Если вы хотите, чтобы depthTest был включен при сохранении прозрачности AdditiveBlending через вашу сетку, вам нужно установить depthWrite: false: 

var shaderMaterial = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: waveVertexShader,
    fragmentShader: waveFragmentShader,
    blending: THREE.AdditiveBlending,
    depthTest: true,
    depthWrite: false,
    transparent: true
});

Подробнее об depthTest и * см. Здесь1009 * атрибуты

В качестве альтернативы, если вы хотите визуализировать другую сетку после первой, чтобы она рисовалась «поверх» всего остального, вы можете установить порядок визуализации второго объекта следующим образом: mesh.renderOrder = 1

См. Здесь документы для Mesh.renderOrder

...