Pixi.js simple lightmapping

[Ozakifumbari]

Hello all,

Since a week now I try to implement a simple lightmap system by myself for my game following this tutorial for libgdx. I've learned tiny bits of OpenGL API when I was coding "for fun" in C++ and I think I can implement this code with the raw WegGL api.

However, I would like to do it with Pixi.js. The "ambient light" filter is really simple. But, for the lightmap I need to bind 2 framebuffers  : the texture one and the lightmap one. How do I achieve this with Pixi?

I've dig into the code of pixi.js, pixi-lights and pixi-extras-filters to try to figure how I can do. For the moment, I render my lightmap on a RenderTexture of the same size of my tilemap. I've found that textures are bound in FilterManager.prototype.applyFilter but I don't see any way in Pixi.js API to bind a second texture. Am I missing something or looking at the wrong place? What is the good way to go if I want to bind another texture for some filters? Extend the filter manager used by Pixi.js?

Here is a very messy codepen where I make my tests. There is maybe a very simple solution to this problem but I'm beginner to GLSL/WebGL and I may not understand how to use the exposed API.

[ivan.popelyshev]

Offtopic: You said "tilemap", and I recommend to use my library: https://github.com/pixijs/pixi-tilemap .

As for multi-texturing in filters, I think you have to hack FilterManager, there is no exposed API for that

[Ozakifumbari]

Found the SpriteMaskFilter which also use a 2nd texture! I will try to move forward with this example

Another solution I'm exploring is using the lightmap rendered to a render texture as a mask of the stage. But I have troubles to achieve the effect I want for the moment.

 

@ivan.popelyshev I will take a look at your lib, looks like interesting! For the moment I use my own implementation, which was designed for canvas only. It supports RPG Maker autotile-like feature but is undocumented and pretty hacky  I render to canvas using this library than I use my canvas as textures for Pixi

[ivan.popelyshev]

Yeah, I also have custom libraries not related to that thing, which have my own autotiles canvas-only (github.com/ivanpopelyshev/bombermine-shuffle) and Tiled

I wrote that thing to be compatible with ANY implementation of tilemaps, it doesnt matter if you have your own autotile perversions  So far I tested it on rpgmaker and some esoteric things

[Ozakifumbari]

Ok now I have my 2 textures (diffuse + lightmap) in my Shader but I can't get it work ^^'

Here is the code of the Shader :

precision mediump float;
varying vec4 vColor;
varying vec2 vTextureCoord;
uniform sampler2D u_texture; //diffuse map
uniform sampler2D u_lightmap;   //light map
uniform vec2 resolution; //resolution of screen
uniform vec4 ambientColor; //ambient RGB, alpha channel is intensity 
void main() {
    vec4 diffuseColor = texture2D(u_texture, vTextureCoord);
    vec2 lighCoord = (gl_FragCoord.xy / resolution.xy);
    vec4 light = texture2D(u_lightmap, lighCoord);
    vec3 ambient = ambientColor.rgb * ambientColor.a;
    vec3 intensity = ambient + light.rgb;
    vec3 finalColor = diffuseColor.rgb * intensity;
    gl_FragColor = vColor * vec4(finalColor, diffuseColor.a);
}

Now here is the 3 results I get with diffuse texture only, lightmap texture and the two combined with the Shader :

Diffuse :

Lightmap :

The result applying the Shader :

However I should get something like this (here I just used my lightmap texture as a mask on the tiledmap texture) :

 

Any advice on the shader code? I'm trying to figure out what is wrong but I don't know how to debug shaders ^^

[Exca]

If you set the output to gl_FragColor = light; does the lightmap display correctly?

[ivan.popelyshev]

There are two textures in the input:

1) filter input, its your diffuse sprite.

2) your lightmap. 

I dont know whats wrong here, but I'll be able to look at it in 4-5 hours.

[chg]

I'll play... my guess is: did you forget to set the your uniform  resolution to something reasonable, perhaps?

[Ozakifumbari]

@chg yes you're right! I was not setting correctly the resolution uniform!

Now everything is working fine, here is the final codepen (images are base64-inlined because I had troubles with imgur).

Thanks for the advices all! Hope this will help other noobs like me trying to setup a simple ligthmap with Pixi  

[ivan.popelyshev]

You are not a noob

[mickeyren]

anyone has made this work with Phaser? 

The pixi version here uses 3.x but Phaser only uses 2.x version of Pixi.

Having an extreme difficult time trying to get the code here work with Phaser.

[mickeyren]

I've built this codepen if anyone wants to try to make this work: