Casting shadows onto transparent ground plane

Help & Support
1

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

2

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:

https://playcanvas.com/project/985028/overview/projective-skybox

1 Like
3

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

4

that worked perfectly
thanks so much for the help

1 Like
5

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

6

@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.

7

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;
    materialResource.update();
};

https://playcanvas.com/editor/scene/1927977

image
image946×852 58 KB

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

8

It helped. Thank you.

1 Like
9

I hit an error when trying to pull this into my own repo. Any idea what could be causing it?

Failed to compile fragment shader:

ERROR: 0:1502: 'light0_shadowIntensity' : undeclared identifier
ERROR: 0:1502: 'shadow0' : undeclared identifier

1497: litArgs_clearcoat_gloss,
1498: litArgs_sheen_gloss,
1499: litArgs_iridescence_intensity
1500: );
1501:
1502: litArgs_opacity = mix(light0_shadowIntensity, 0.0, shadow0);
1503: gl_FragColor.rgb = vec3(0.0);
1504:
1505:
1506: gl_FragColor.rgb *= litArgs_opacity;
1507: gl_FragColor.a = litArgs_opacity;
while rendering Pass:RenderPassForward | Camera | World(TRANSP) | Node: Shadow Plane | Material: ground | Shadow Plane

[object Object]
10

I’d guess that the code you use assumes clustered lighting is disabled, and you have it enabled.

11

There is no code in the repo that touches the clustered lighting option. I tried to disable it and test again with no luck :confused:

12

Have you tried disabling it in the Editor settings?

13

Alternatively, maybe you don’t have a directional light in the scene?

14

I tried to disable clustered lighting in the editor > rendering and I have three directional lights in the scene

15

Try just a single directional light (disable others) and make sure castShadows is enabled on it.

1 Like
16

Okay that did it!

we have a three light setup:
main
fill
back

the fill light wasnt casting shadows and was causing the break

Thank you so much!

17

It uses light 0, which ever that ends up being ., and that one needs shadows on.
Ideally don’t have shadow on for all of them, as the cost adds up on mobile.