three.js: comment laisser les sprites png transparents lancer et recevoir des ombres?

Question

Je ne sais pas si c'est possible, mais je pensais que cela valait la peine de demander: y a-t-il une fonctionnalité, une option ou un shader qui permet aux sprites de projeter et de recevoir des ombres? Le fait d'inclure également le canal alpha de l'image-objet n'est pas rendu en tant qu'ombre.

J'ai tous mes actifs en tant que fichiers PNG transparents, et j'utilise des sprites dans three.js pour mapper les textures sur les sprites. Cela fonctionne très bien en dehors du problème des ombres. Idéalement, ce serait génial que l'ombre projetée du sprite n'inclue pas le canal alpha du PNG *, de sorte que la lumière passe à travers le canal alpha du png, bien que je trouve peu de recherches à ce sujet dans les documentations de threejs.

Peut-être que ce n'est pas possible sous troisjs, ou pas du tout, ce qui est compréhensible, mais merci à l'avance.

* Je pense à un style similaire à PaRappa the Rapper ou Adventure Xpress.

Answer 1

Ce sont les shaders que je fini par utiliser.

Fragment shader. Vous pouvez changer le pixel.a qui est la valeur alpha du pixel. Le fragment shader est rejeté sur ce pixel si la valeur alpha tombe en dessous de 0,5 (laissant ainsi apparaître transparent).

#include <packing> 

uniform sampler2D texture; 
varying vec2 vUV; 

void main() { 

    vec4 pixel = texture2D(texture, vUV); 
    if (pixel.a < 0.5) discard; 
    gl_FragData[ 0 ] = packDepthToRGBA(gl_FragCoord.z); 

} 

Vertex shaders. Ce n'est rien de spécial, je pensais que je laisserais ça ici juste au cas où ton vertex shader poserait des problèmes, celui-ci je peux le confirmer pour être compatible avec le fragment shader ci-dessus.

varying vec2 vUV; 

void main() { 

    vUV = uv; 
    vec4 mvPosition = modelViewMatrix * vec4(position, 1); 
    gl_Position = projectionMatrix * mvPosition; 

} 

Answer 2

Les sprites dans trois.js ne projettent pas d'ombres.

Une autre solution consiste à utiliser PlaneBufferGeometry et le garder face à la caméra comme ceci:

scene.add(plane); 

puis dans la boucle de rendu,

plane.lookAt(camera.position); 

Si vous voulez que l'avion ne pas jeter un ombre partout où la texture de l'avion est transparente, vous devez créer un matériau de profondeur personnalisé. Un exemple de cela peut être vu dans this trois.js exemple.

Sans créer de matériau de profondeur personnalisé, le plan apparaîtra solide du point de vue de la lumière.

Three.js R.76