Illuminated.js – 2D lights and shadows rendering engine for HTML5 applications

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

by gren • 14 years ago

102 47 14 years ago

blog.greweb.fr

marcusf• 14 years ago

This is very cool -- I love that we're seeing more and more open source work on making web game engines that are not Flash. Stuff like Angry Birds and Cut the Rope were very cool, and it's good to see more frameworks and libraries for taking some of the effort out of it and making it more mass-market.

One thing that excites me especially is that a simple game creation engine in the browser might be a great chance to excite kids about programming with a very low barrier to entry.

Jimmie2• 14 years ago

It's neat but it runs at about 5fps on my fairly new laptop. No-one is putting that in a game and I can't imagine how it'd work in an app.

Still cool as a tech demo though.

galfarragem• 14 years ago

It "eats" almost all my processor..

gren12• 14 years ago

Mmh unfortunately requestAnimationFrame() seems to be very "greedy", it seems its strategy is to consume as much resource as possible (if the render() is not enough fast).

gren12• 14 years ago

Performance has been my focus on this work, I use a lot a cache canvas to not redraws gradient and path things but just copy caches. But i'm stuck on Canvas and requestAnimationFrame performances. Let's hope it will continue to improve, otherwise I could try to use WebGL but it will not be supported by every browsers for today.

Do you use a lot of sampling in the lights? I reach good fps on my macbook pro, especially on Chrome (but also on my home computer under Linux).

I hope we can use it with less sampling and less compute() calls for our games :)

Jimmie2• 14 years ago

Default scene, Chrome 18.0.1025.168, Os X 1.6.8, Year old Macbook Pro

Runs so slow I can barely drag the objects around. It looks great though, I mean the output is fantastic just not performant.

ajuc6• 14 years ago

I feel you. I'm doing 2d game in html5 (I have 2 rendering engines - pure canvas, and webgl). Webgl works great, but works on small percentage of browsers, canvas version runs with ~ 45 FPS in 1280x960 on my 2 core celeron 2Ghz. And the main problem is just fill rate - I have background, and scrolling terrain, so I need to clear whole window every frame, and less than 50 (64x64 pixel) sprites at one time on screen. That's already too much for canvas to redraw at 60 FPS.

lloeki• 14 years ago

Try to lower the number of samples.

maigret• 14 years ago

Nice. Looks like the lights are represented as single points, so even making it bigger still produces the "on/off" effect when moving objects in front of the light.

gren12• 14 years ago

you are right, I ignore the light if its center is inside an object, it was before I implement these samples. I should still fix it, maybe it's just by removing this check but I remember having some strange effects.

pavlov• 14 years ago

Your comments in this thread are informative and polite, I have no idea why someone downvoted all your comments...

hackermom• 14 years ago

This was pretty cool, but I couldn't help being struck by how utterly poorly it performs, especially as soon as you add just a handful of objects and two light sources. Sure, it's written in JS, but JS has come a long way in terms of performance, and so have our computers.

This demonstration instantly makes me think of Blizzard's Diablo II from 2000, which features an identical effect during gameplay, with a seemingly infinite number of shadow-generating obstacles and as many light sources casting shadows as there are players on the screen, and it runs perfectly smooth even on a 500mhz P3.

talmand3• 14 years ago

I think you're comparing an apple tree with a matter replicator that makes apples.

fsckin• 14 years ago

After playing around a bit, my browser history has thousands of entries from this site.

gren12• 14 years ago

Sorry for that, I though having this

    history.replaceState({}, title, "#"+hash);

would have fixed it.

( https://github.com/gre/illuminated.js/blob/master/demo.js#L1... )

Any idea?

talmand3• 14 years ago

I'm curious behind the reasoning in putting that information in the URL in the first place.

erikb• 14 years ago

Now the site seems down. Does anyone have an alternative link?

cao825• 14 years ago

Very cool. One issue I saw was that the shadows actually show on top of other objects.

gren12• 14 years ago

Thanks.

Yeah, I need to fix that, this is link to my wrong sampling implementation.

If you use only 1 sampling you will see it is fixed.

talmand3• 14 years ago

Related to that is that objects overlapping create overlapping shadows. Which makes sense considering how your render engine seems to work.

Might I suggest instead of a solution in real time, how about a static deal that essentially generates a lightmap to overlay on top of the scene? I can think of several uses for that.

silverlight2• 14 years ago

Have you considered MIT (or at least LGPL) instead of GPL licensing? Only other open source games or apps will be able to make use of this as-is. Of course that's certainly your right to do, just wanted to ask.

gren12• 14 years ago

AFAIK, with GPL you are allow to use the library in a proprietary project but if you modify it, you must publish the library modification, not the whole project.

Am I wrong?

silverlight2• 14 years ago

That's not correct (at least not according to my understanding). GPL license "attaches" itself to any project that uses it. So by including any GPL licensed library, you must also release the source code of the thing you are including it in. The LGPL allows you to use the library in a project and only commit back changes to the library but not open source the project you use it in. So if that's your intent (to just make sure that library-level changes are contributed back, but not to only restrict usage of the library to fully open-source projects), I would suggest going with LPGL (or, again, MIT, if you want people to be the most comfortable including your library in their projects). More info here:

http://stackoverflow.com/questions/94346/can-i-legally-incor...

jhugg• 14 years ago

I was really hoping this would put gold-leaf illustrations in the margins of my webpage for me.

darkstalker• 14 years ago

cool, but I think it should've done in webGL

gren12• 14 years ago

you are right! For sure it would be more efficient, and shaders are incredibly powerful. I have considered that, but it wouldn't work everywhere today. So for now I have this implementation I will use for my web games ;)

emddudley• 14 years ago

I found a bug. At a certain distance the shadow disappears for an object.

http://demo.greweb.fr/illuminated.js/#{%22lights%22:[{%22ins...],%22objects%22:[{%22instance%22:%22DiscObject%22,%22center%22:{%22x%22:313.5,%22y%22:190.316650390625},%22radius%22:34},{%22instance%22:%22DiscObject%22,%22center%22:{%22x%22:175.5,%22y%22:146.316650390625},%22radius%22:38},{%22instance%22:%22PolygonObject%22,%22points%22:[{%22x%22:426.5,%22y%22:82.316650390625},{%22x%22:449.5,%22y%22:189.316650390625},{%22x%22:481.5,%22y%22:143.316650390625},{%22x%22:487.5,%22y%22:94.316650390625},{%22x%22:487.5,%22y%22:87.316650390625},{%22x%22:433.5,%22y%22:32.316650390625},{%22x%22:381.5,%22y%22:42.316650390625},{%22x%22:346.5,%22y%22:136.316650390625},{%22x%22:346.5,%22y%22:138.316650390625}]}],%22globals%22:{%22maskcolor%22:%22rgba%280,0,0,0.9%29%22}}

Arelius2• 14 years ago

So, if I have one light, and an object casting a shadow, and then another object inside the first's shadow, the area that is obscured by both objects is darker than one obscured by just a single, this is an inaccurate lighting model, and looks sorta ugly.

Illuminated.js – 2D lights and shadows rendering engine for HTML5 applications

Related Stories