three.js: Wie lassen sich transparente Png-Sprites werfen und Schatten empfangen?

Question

Ich bin mir nicht sicher, ob das möglich ist, aber ich dachte, es lohnt sich zu fragen: Gibt es ein Feature, eine Option oder einen Shader, mit dem Sprites Schatten werfen und empfangen können? Auch der Alphakanal dieses Sprites wird nicht als Schatten dargestellt.

Ich habe alle meine Assets als transparente PNGs, und ich verwende Sprites in threw.js, um die Texturen auf Sprites abzubilden. Dies funktioniert gut, abgesehen von dem Problem der Schatten. Im Idealfall wäre es gut, wenn der vom Sprite geworfene Schatten nicht den Alphakanal * der PNG enthält, so daß das Licht den Alphakanal des PNG durchläuft, obwohl ich in den Dokumentationen von dreien wenig darüber nachforsche.

Vielleicht ist dies nicht möglich unter drei oder überhaupt, was verständlich ist, aber danke im fortgeschrittenen.

* Ich denke an einen ähnlichen Stil wie PaRappa the Rapper oder Adventure Xpress.

Answer 1

Dies sind die Shadern ich am Ende mit.

Fragment Shader. Sie können das Pixel.a ändern, welches der Alpha-Wert des Pixels ist. Der Fragment-Shader wird auf diesem Pixel verworfen, wenn der Alpha-Wert unter 0,5 fällt (wodurch er transparent erscheint).

#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-Shader. Das ist nichts besonderes, ich dachte, ich würde das hier lassen, nur wenn dein Vertex-Shader Probleme verursacht, kann ich bestätigen, dass er mit dem obigen Fragment-Shader kompatibel ist.

varying vec2 vUV; 

void main() { 

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

} 

Answer 2

Sprites in three.js werfen keine Schatten.

Ein Work-around ist PlaneBufferGeometry zu verwenden und sie halten die Kamera wie so gegenüber:

scene.add(plane); 

dann in der Schleife machen,

plane.lookAt(camera.position); 

Wenn Sie das Flugzeug nicht zu werfen Wenn die Textur des Flugzeugs transparent ist, müssen Sie ein benutzerdefiniertes Tiefenmaterial erstellen. Ein Beispiel dafür ist in this three.js Beispiel zu sehen.

Ohne ein benutzerdefiniertes Tiefenmaterial zu erstellen, erscheint die Ebene vom Standpunkt des Lichts aus massiv.

three.js r.76