Ozakifumbari

Pixi.js simple lightmapping

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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 :P I render to canvas using this library than I use my canvas as textures for Pixi

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :

download.png.d5a0a8b45b72f388a65ac5c5edc

Lightmap :

56a0e361d5656_download(1).png.661880d167

The result applying the Shader :

56a0e36234fde_download(2).png.b8ed974982

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

56a0e3628f4a5_download(3).png.80766fa926

 

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.