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

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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.