How can I make transparent png sprites in three.js cast and receive shadows?

Question

How can I make transparent png sprites in three.js cast and receive shadows?

Is there a way to enable sprites in three.js to cast and receive shadows without rendering the alpha channel as a shadow?

I have all my assets saved as transparent PNGs, and while mapping textures onto sprites is working well, I'm struggling with the issue of shadows. Ideally, I'd like the shadow cast by the sprite to ignore the PNG's alpha channel so that light can pass through it, but I haven't found much information on how to achieve this in the three.js documentation.

Thinking along the lines of PaRappa the Rapper or Adventure Xpress style, any suggestions would be greatly appreciated!

javascript three.js shader raytracing shadow-mapping

Answer 1

Answer №1

Unfortunately, sprites in three.js do not have the ability to cast shadows.

However, there is a workaround available by using PlaneBufferGeometry and ensuring it always faces the camera:

scene.add( plane );

Then, within the render loop:

plane.lookAt( camera.position );

If you wish for the plane not to cast a shadow where its texture is transparent, you will need to create a custom depth material. You can find an example of this in this specific three.js example.

Without implementing a custom depth material, the plane will appear as solid when viewed from the perspective of the light source.

Version: three.js r.76

Answer 2

Unfortunately, sprites in three.js do not have the ability to cast shadows.

However, there is a workaround available by using PlaneBufferGeometry and ensuring it always faces the camera:

scene.add( plane );

Then, within the render loop:

plane.lookAt( camera.position );

If you wish for the plane not to cast a shadow where its texture is transparent, you will need to create a custom depth material. You can find an example of this in this specific three.js example.

Without implementing a custom depth material, the plane will appear as solid when viewed from the perspective of the light source.

Version: three.js r.76

Answer 3

Answer №2

Here are the shaders that I ultimately decided to use.

Fragment shader. Adjust the alpha value of the pixel by modifying pixel.a in this fragment shader. If the alpha value drops below 0.5, the fragment shader discards the pixel, making it appear 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 shader. This vertex shader is pretty standard. I thought I'd include it here just in case your current vertex shader is causing any issues. Rest assured, this one works seamlessly with the above fragment shader.

varying vec2 vUV;

void main() {

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

}

Answer 4

Here are the shaders that I ultimately decided to use.

Fragment shader. Adjust the alpha value of the pixel by modifying pixel.a in this fragment shader. If the alpha value drops below 0.5, the fragment shader discards the pixel, making it appear 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 shader. This vertex shader is pretty standard. I thought I'd include it here just in case your current vertex shader is causing any issues. Rest assured, this one works seamlessly with the above fragment shader.

varying vec2 vUV;

void main() {

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

}

How can I make transparent png sprites in three.js cast and receive shadows?

Answer №1

Answer №2

Similar questions

Utilizing React Router with Material-Table for Efficient Column Value Filtering

Maximizing JavaScript DOM efficiency

Passing data from input to Angular's $scope (filter)

How can I cut an array by value in Vue?

Convert an array to a string using a JavaScript function

What is the best way to transfer data in a JavaScript onclick event and then retrieve it in the click handler function?

Exploring the power of TypeScript for authenticating sessions with NextJS

positioning a text input in the center instead of at the top of the page

Tips for identifying a particular kind of user within a group of users

What is causing Puppeteer to incorrectly capture this page when attempting to take a screenshot?

Is the presence of a potential leak suggested by this arrangement in the heap snapshot retainer hierarchy

Utilizing JSON data for efficient React component rendering

Display the list items when the page first loads

JavaScript object that is simultaneously multidimensional and associative

enhancing the style of my Express project with CSS and EJS

JavaScript: Efficient method for converting currency values within an array

What is the proper way to select this checkbox using Capybara in Ruby?

arrange list in Angular.js

during implementation of ng-repeat directive with JSON dataset

Issue with Three.js GLTF loader peculiar behavior while attempting to incorporate three-dimensional text