• Content Count

  • Joined

  • Last visited

About Ozakifumbari

  • Rank

Recent Profile Visitors

467 profile views
  1. Ozakifumbari

    Pixi.js simple lightmapping

    @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
  2. Ozakifumbari

    Pixi.js simple lightmapping

    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 ^^
  3. Ozakifumbari

    Pixi.js simple lightmapping

    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
  4. Ozakifumbari

    Pixi.js simple lightmapping

    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.