Jump to content

PIXI-Lights PointLight issue


Recommended Posts

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();


this.renderer = new PIXI.Renderer({
	width: this.width,
    height: this.height,
    backgroundColor: '0x000000'
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.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;


Edited by Torsin
Link to comment
Share on other sites

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!


Link to comment
Share on other sites

17 hours ago, Torsin said:

Here is a working minimal example with the same issue. :)


look in uLightHeight , value should upper (around 0.3)

more good demo to test !

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 !


light.material.uniforms.uLightHeight = 0.3;

Edit: radius for now seem not supported !

only on constructor


Edited by jonforum
Link to comment
Share on other sites

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 by Torsin
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. :)



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...