Iavra Lighting System(s)

[Iavra]

As someone may know, i've been working on a lighting system for a while now. I'll use this thread to give you some updates as i go along.


Currently i'm working on 2 different systems:


- Pixel (fragment) based lighting, as can be seen here: http://www.html5gamedevs.com/topic/24493-converting-a-filter-to-pixi-v4


- Vertex based lighting, by using a system similar to this one: SIGHT & LIGHT - How to create 2D visibility/shadow effects for your game


The first system is currently on hold, as i've stumbled upon a few problems and i'm discussing possible solutions with one of the PIXI devs. Also, the PIXI version bundled with MV contains a few bugs, that are fixed in the dev version, which is what i'm using right now (so, the plugin couldn't be made public, anyway).


I start working on the second system today, which relies much less on the GPU and should be working on Canvas, as well as WebGL (unlike the first one, which uses WebGL filters). This might change, depending on if i need to use alpha masking or not.


There isn't much to see right now, except for what i've posted in the other thread, but i'm sure i can provide some updates later this week.

 

[Ossra]

Cool, cool! We really need a good lighting system. Are you going to be doing anything with character/event shadows? I have been working on a plugin which generates shadows for specified characters and/or events, but I have run into issues where the shadow (essentially a character sprite which rotates in relation to the 'light source'; example) will clip through tiles that are below the z-position of the sprite. I am still learning and slogging through javascript as well as PIXI, so I am not certain how I would go about correcting the issue ... or if there is a way. If you are going to do a shadow plugin too, or if the lighting system includes shadow creation, then I'll just give up.

 

[Iavra]

That would currently impossible for both systems, since there's no z axis involved. This means, shadows have no length, but block the whole light. You could do something like this with normal mapping (http://www.mattgreer.org/articles/dynamic-lighting-and-shadows/), but that's completely different.

 

[taarna23]

Oh gosh. That second page is neato. I look forward to seeing what you do with this! =O

 

[Iavra]

It's actually pretty easy. The hardest part would be creating a list of all vertices. My current plan looks like this:


- Get a list of all coordinates, that should block light (i'm using regionId = 1, but that's just for testing).


- For each block, grab the 4 sides (vertices) and store them.


- When checking a light, create a box around it (4 additional vertices) and find all vertices inside or partly inside the box.


- Cast a ray to each endpoint and find the point, where it intersects the closest vertex (an example is on the page).


- Connect the intersections and create a PIXI.Graphics object from it.


- Use it to mask the light.


For static occluders, i can precreate the vertex array on map creation. For moving/dynamic ones, there would be an additional array, created at runtime.


There is quite some room for optimizations:


- Eliminate duplicate vertices and connect nearby ones (for example, a 2x2 area on the map has only 4 vertices, not 16). This is something i will definitely do.


- Order the vertex array in a way that optimizes iteration. Not sure, how i would go on about that, though.


- Only update the mask, when either the light or a dynamic vertex changes/moves. This could save a huge amount of performance, but might be tricky.


The plugin could quite easily be extended with non-rectangular occluders by passing in additional vertices, but for simple lighting, this should suffice.

 

[Kyuukon]

I agree! The second effect looks very cool and not so consuming in terms of processing power. You have my support on this plugin development Please, keep it up man!

 

[Iavra]

Actually, i think the first system could use less performance, since it runs mainly on the GPU and involves 2-3 filter passes, instead of having to iterate over a bunch of vertices. On the downside, it's less precise, since it's basically raycasting, where the number of rays casted it equal to the width of the light texture (so, a 256x256 light casts 256 rays), interpolated due to the rectangular-polar conversion involved.


Not to mention, it's also way more complex ^^

 

[nio kasgami]

I like the seconds system who permit "light touch" XD

 

[Iavra]

As a small update, this is how my demo project looks right now:

Spoiler

There are 16 vertices on this screen, 4 for each of the 3 blocks (no optimization so far) and 4 for the map as a whole. The "light" is represented by the mouse cursor.


The resulting polygon looks kinda weird, though. Seems like i somewhere messed up the order of the points or misunderstood, how PIXI.Polygon works ^^ (Just to clarify, the screen doesn't show the polygon, i just drew a line from the "light" to each intersection).


/edit: Looking good so far, although there are glitches at certain angles:

Spoiler

//edit: Those angles caused either T1 or T2 being 0/0 = NaN, so i just had to sort them out.

 

[taarna23]

You'll get it! Well, I sure hope you do, because I will use the heck out of something like this. I want lighting (or the lack thereof!) to be important in some rooms in my dungeons.


Just remember - dividing by zero is the territory of villains. Nobody likes a NaN.

 

[Iavra]

I'm basically there. Now, the final question: What do i need to do to correctly blend the light? ^^ BlendModes, especially WebGL ones, seem to be very limited in PIXI, so i might end up needing a filter/shader for this.

Spoiler

/edit: blendMode = 4 (overlay), seems to do the trick, although the black part of the light needs to be transparent for this. Sadly, it doesn't seem to be directly supported in WebGL, although pixi-pictures comes with an OverlayShader.


Hah, it works when i'm extending PIXI.extras.PictureSprite, instead of PIXI.Sprite. That one is rendered with a different renderer, which can utilize Overlay and HardLight blending. Since canvas natively supports Overlay, this will work in both modes.

Spoiler

The black part is part of the image i'm using, so in reality you would use a transparent background for lights. The shadows are looking a bit jagged, which i might improve by rendering multiple visibility polygons, creating soft shadows. I tried using the FXAAFilter coming with PIXI, but the whole light ended up black, so, eh...