Moving SpotLight with it's projectionTexture?

Questions
1

Hi.

I’m trying to make some scanning light effect, which a group of light line moves across the Y axis and lights up the center object. My code is like this:

        const scanLight1 = new SpotLight('scanner1', new Vector3(0, 1, 20), new Vector3(0, 0, -1), toRad(15), 0, scene);
        scanLight1.projectionTexture = new Texture('./static/lightmask.png', scene);
// and I made about 6 spotlights like this

     const scannerGroup = new Mesh('scannerGroup');
        scanLight1.parent = scannerGroup;


        let scannerDirection: 1 | -1 = 1;

     scene.onBeforeRenderObservable.add((scene, state) => {
            scannerGroup.position.y += 0.05 * scannerDirection;
            for (const child of scannerGroup.getChildren()) {
                child as SpotLight;
            }
            if (scannerGroup.position.y > 5) {
                scannerDirection = -1;
            } else if (scannerGroup.position.y < 0) {
                scannerDirection = 1;
            }
        });
        engine.runRenderLoop(() => {
            scene.render();
        });

The texture is a 1024*1024 black image with a single green line at it’s center.

Then I can see the lights are moving as intended, but the texture remains at it’s initial position(green line at y:1).

Is there any way to make the texture move with the light?

2

It will be easier to help if you are able to setup a repro in the Playground.

Also, did you see this post from @PatrickRyan ?

2 Likes
3

Hi:

I made a PG here: Projection Texture not Moving with light | Babylon.js Playground (babylonjs.com).

I want the texture (the 3x3 colorful square) move with the spotlight, could it be possible?

p.s. NME is a little difficult for me but I’ll try, thanks to PatrickRyan

4

Hi, try this

3 Likes
5

It works!

So I need to assign a new Vector3 instead of changing the position.

6

Yes, but I have no idea why :sweat_smile:

7

That’s because we “dirtify” the texture projection parameters only when the position property is updated: we can’t really detect a change of a sub-property (like x, y or z) of position.

2 Likes
8

yes I can understand that (this is not vue). is there a way to manually trigger an update?

9

You can try to set spotlight._projectionTextureViewLightDirty to true, but you will have to cast spotlight to any if you use Typescript because the property is private.

1 Like