PIXI-Lights PointLight issue

[Torsin]

Hello, when adding a PointLight to the stage the light is cut off on the top right corner. Any ideas what would cause this? Thanks a bunch for the help!

Here is a code snippet of how it's loaded.

this.width = $('body').width();
this.height = $('body').height();

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

this.renderer = new PIXI.Renderer({
	width: this.width,
    height: this.height,
    backgroundColor: '0x000000'
});
      
$(this.renderer.view).appendTo('.canvas-container');
      
this.stage = new Stage();

this.stage.addChild(new Layer(diffuseGroup));
this.stage.addChild(new Layer(lightGroup));

this.stage.addChild(this.layers.tiles); // this is where all the tiles are loaded for the background

const { renderTexture, renderContainer } = this.assets.loadTextures();
this.renderer.render(renderContainer, { renderTexture: renderTexture });

const light = new PointLight(0xffffff, 1);
this.stage.addChild(light);

this.stage.interactive = true;
this.stage.on('pointermove', (event) => {
    light.x = event.data.global.x - this.stage.x;
    light.y = event.data.global.y - this.stage.y;

});
this.stage.on('pointerdown', (event) => {
    var clickLight = new PointLight(0xffffff);

    clickLight.x = event.data.global.x - this.stage.x;
    clickLight.y = event.data.global.y - this.stage.y;
    this.stage.addChild(clickLight);
});

Edited August 4, 2021 by Torsin

[ivan.popelyshev]

Oh, good! Someone is looking at our normal lighting demo for v6!

maybe i didnt test light with actual circle polygon. Please post minimal demo or you'll have to debug this thing yourself: https://github.com/pixijs/pixi-lights/tree/master/src/lights/pointLight 

In general , its a demo. experimental. We need something better to allow people do something like this. Also, look, they dont even use normals to look good!

 ,

[Torsin]

Oh the lighting for FoundryVTT is fabulous. I will work on having a minimal demo for you to poke around shortly. Thanks

[Torsin]

I was going to try the PIXI Playground for the minimal demo, but I can't seem to use @pixi/layers is this possible? The actual CDN I found has the old version.

[ivan.popelyshev]

Layers were moved to @pixi namespace

https://cdn.jsdelivr.net/npm/@pixi/layers@latest/dist/pixi-layers.umd.js
https://cdn.jsdelivr.net/npm/pixi-lights@latest/dist/pixi-lights.umd.js

 

Edited August 4, 2021 by ivan.popelyshev

[Torsin]

Here is a working minimal example with the same issue.

https://www.pixiplayground.com/#/edit/IsqnZSLbS1FBPjQ6aXnR-

[jonforum]

17 hours ago, Torsin said:

Here is a working minimal example with the same issue.

https://www.pixiplayground.com/#/edit/IsqnZSLbS1FBPjQ6aXnR-

look in uLightHeight , value should upper (around 0.3)

more good demo to test !
https://www.pixiplayground.com/#/edit/zqlchzxfiC466d8TB2dHG

so from what i understand and good to know !
update light.radius; light.lightHeight; will not work and communicate with material !
So need to up via uniforms
light.material.uniforms.uLightHeight work
maybe it a miss and can be fixed with a setter !

try 

light.material.uniforms.uLightHeight = 0.3;

Edit: radius for now seem not supported !

only on constructor

 

 

Edited August 5, 2021 by jonforum

[ivan.popelyshev]

OK, so we have demo . @Torsin did you read the source code of lib? do you have any ideas what i did wrong there? My mind is blank at the moment, i need help

[Torsin]

Thanks @jonforum this is very useful!

@ivan.popelyshev I haven't looked through all of the code of the lib yet. Juggling to many things at the same time. lol I will have some time this afternoon to poke around and test some more.

[Torsin]

I've played around with the debug settings @jonforum provided in the test playground, and the light seems to still be off and not spherical. It may just be me and not seeing it properly. I will dig in the lib code and see what I can find.

[Torsin]

Ok after some trial and error, I think I found it. With my limited knowledge and still new to shaders.

const computeDiffuse = `// normalize vectors
vec3 N = normalize(normalColor.xyz * 2.0 - 1.0);
vec3 L = normalize(lightVector);

// pre-multiply light color with intensity
// then perform "N dot L" to determine our diffuse
vec3 diffuse = uColor.rgb * uBrightness * max(dot(N, L), 1.0); // change 0.0 to 1.0
`;

I changed the diffuse 0.0 value to 1.0 and it centered the light. Let me know if this makes sense. 

Also the little issue @jonforum that light.radius and lightHeight don't get updated, only via uniforms for the lightHeight, and radius only on constructor.

Edited August 5, 2021 by Torsin

[ivan.popelyshev]

That means you completely ignore the normals here

Oh, wait, you dont have any normals in your code!

You dont need pixi-lights at all. You can make your own lighting on pixi-layers https://pixijs.io/examples/#/plugin-layers/lighting.js . If you went to pixi-lights only for that PointLight that has attenuation and other things - I'm sorry that's the only lighting lib we have, it requires normals.  You can clone it and change, and also look at https://codesandbox.io/s/advancedlayeringfilterspixi-iycmu , to make your own lighting model.

[Torsin]

Thanks @ivan.popelyshev for your help, I opted to not use normals since I think it will be a lot more overhead to convert every tileset to normals for a 2D tiled map environment and then have double the sprites on the screen. Or maybe this is the way to go? I am indeed looking for attenuation and be able to resize lights and add flickering. I am open to do something custom but it will be a long steep learning curve.

 

 

[ivan.popelyshev]

The best way is to not use normals. Copy the code of pixi-lights to your app, remove normalLayer and other stuff you dont need.

[ivan.popelyshev]

Even more , you dont actually need to draw every light with diffuse input. Its better if you start with my lighting bunnies demo and add custom mesh-shaders (like PointLight) on light layer.

[Torsin]

Thanks again for all your help. Here's a screenshot with and without normals.