Casting shadows onto transparent ground plane

I’m looking for a way to cast shadows over a transparent ground plane as items move through the air. Having trouble finding relevant information and have no idea where to start

any help is appreciated

Hi @Brandon_Hart and welcome,

Check this AR example, specifically the Shadow Plane entity. It uses a custom shader to handle exactly that, casting shadows on a transparent plane:

1 Like

Thanks a bunch! I will take a peak into this and get back to you asap

that worked perfectly
thanks so much for the help

1 Like

That project appears to be broken now with the latest engine updates.

@Leonidas, Hi, is there a new version of this shader? Because I have the same concern as the topic starter, but it seems the shader you recommended doesn’t work anymore.

Hey, yes shader chunks go through changes from time to time and the code requires maintenance, here is the updated method on the ar-ground.js file:

ArGround.prototype.initialize = function () {
    // Attach a shader to a material that makes it appear transparent while still receiving shadows.
    const materialResource = this.material.resource;
    materialResource.chunks.APIVersion = pc.CHUNKAPI_1_62;
    materialResource.chunks.endPS = `
            litArgs_opacity = mix(light0_shadowIntensity, 0.0, shadow0);
            gl_FragColor.rgb = vec3(0.0);

    materialResource.blendType = pc.BLEND_PREMULTIPLIED;

The code is coming from the WebXR AR Starter Kit which includes the same effect and you can select when creating a new project.

It helped. Thank you.

1 Like