Частично видимые окклюзированные спрайты

Question

Я бы хотел воспроизвести поведение из приложения на скриншотах. Т.е. когда спрайт перекрывается мной sh, он остается частично видимым, даже теперь он находится позади меня sh на переднем плане. Какие-нибудь советы или подсказки, как этого можно достичь за три JS? Спасибо

Answer 1

Интересный вопрос.

Это может быть сделано с помощью одного спрайта, но вам, вероятно, придется использовать shaderMaterial (отключите значение глубины и проверьте вершинный / фрагментный шейдер, если pixelCoordinate находится ниже уровня земли, а затем сделайте его прозрачным).

Если вы не знакомы с этим, другой способ - удвоить спрайты. Хитрость заключается в том, чтобы установить для параметра extensionTest для одного из них значение false. Таким образом, спрайт отображается, даже если он находится под землей. (Когда он находится над землей, он по-прежнему отображается поверх другого спрайта, но он почти прозрачен, поэтому не очень заметен).

Я сделал небольшой пример здесь; https://jsfiddle.net/EthanHermsey/kw7dn8bh/25/

//create 2 sprites
let sprite = new THREE.Sprite(
    new THREE.SpriteMaterial({
    color: 'red'
  })
)
sprite.scale.setScalar( 0.5 );

let sprite2 = new THREE.Sprite(
    new THREE.SpriteMaterial({
    color: 'red',
    opacity: 0.2,
    transparent: true,
    depthTest: false
  })
)
sprite2.scale.setScalar( 0.5 );

//create a container for both sprites, add sprites to it.
spriteContainer = new THREE.Object3D();
spriteContainer.add(sprite)
spriteContainer.add(sprite2)
scene.add(spriteContainer);