Illuminated.js

A 2D lights and shadows rendering engine

for your HTML5 web applications and games.

http://blog.greweb.fr/2012/05/illuminated-js-2d-lights-and-shadows-rendering-engine-for-html5-applications/

What more can I say... please? :D

This is really awesome. Bumping for interest.

The guy used Canvas to implement it. Now that C2 will support shaders from WebGL things like that will be easier to implement and much faster in runtime than if using Canvas. The demo is slow as hell btw. Unsuitable for games. But it serves as an implementation reference. Really nice implementation.

With shaders we'll get this and much more. Shaders effects possibilities are infinite.

I really want this, but I think Ashley said that this won't be one of the effects released with r100 though :)

I may be missing something, but it looks like you can do most of this with layer effects...

Yes, I think You are missing something, first of all there are no layer effects in C2... ;)

It's a cool demo, but it hasn't got a WebGL renderer, so it's not exactly drop-in - all the rendering code will have to be rewritten for it to work in WebGL mode. Might be possible by a cleverly coded plugin though.

Hello there, let's do a little necro-topic-phily !

I just saw this post, doing some research on illuminated.js and its implementations around the web, and after starting to implement some basic functions of it (finding all the lightblocker segments, corners, some low level intersection functions, ...).

At first, I tried to implement it just by using the lib, but it seemed to block in lots of area, so I started rewriting it a little more.

I had some questions on how people think it would be best :

• for choosing the lightblockers, I went with a small behavior, a little like "solid", that you just add on the objects that should block the light. I then tried to reproduce the way that Pathfinder selects its blockers (custom or solids) but it isn't entirely working for custom yet. Do you see any other ways of selecting the good light blockers ? Should there be any other type of light blockers ?
• for displaying the light effect in the end (I haven't got into this point yet), I thought about asking for a base frame (just like the sprite), and cut it according to how the light polygon will be drawn. The alpha radius will then be prepared directly in the sprite, and a multiply should then be added to the "lightCaster" sprite. I'm still having hard time finding a good way to apply the frame correctly...

As this library is now up for some times, and surely somebody tried this before me, I would like to know if anybody had any advice or thoughts on how it would be best. Of course, if and when this is good, I'm planning on releasing it on the forums.

I think that would be the best way, so any object can be a light emitter or a blocker. ;]

I really think this is a major fault with C2. A lack of decent lighting/ shadow options.

Not sure if this is because its difficult to achieve or what.

I've been talking with the dev, and it doesn't really seem he has the time to expand on the demo any more than it is. AT this point it's just a set of javascripts that draw gradients depending on collisions. It it pretty intensive computing wise, as it is checking the angles of collisions a lot. This is really something that should be pushed into the GPU.

That said, I think it was a nice demo but he has throw it out into the wild in the hopes someone will pick it up and increase perf and port it. The real honest answer is, we need a WebGL programmer willing to do it.

My game really needs better lighting, I'm left with 2 options.

1) hire a matte painter to do pixel art lighting on all my backgrounds. This means I can't really change my backgrounds in the future, but it would also be very detailed.

2) USe WebGL lighting to bounce off solids. This would be great to give me flexibility, but I would lose a little detail. I'm ok with this tradeoff.

I'm willing to chip in some $$$ to hire someone to do this. Think of it as a bounty.

Ashley: I don't know if you have time to help, but I could use assistance in gathering documentation to give to a developer to look over. At this point I don't know what I'm talking about enough to give someone a gig. I just need a list of things they would need to do to make it work.

I would assume it would be a behavior or effect. That you attach to a sprite. It would be called "Light Source" or something. It's only job is to draw shadows and light on the layout, and stop when it hits a surface set to solid. Does that sound right?

To me it looks like this: scirra.com/forum/casting-shadows-in-c2_topic67369.html

BR