6 ms·

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

102 points by gren 14y ago

marcusf 14y 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.
Jimmie 14y 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 14y ago
  It "eats" almost all my processor..
  - gren 14y 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).
    - RoboTeddy 14y ago
      In most browsers, requestAnimationFrame tries for 60fps. That means that if your program blocks on the cpu for more than 1000/60 = 17ms while it's rendering a frame, you'll be at 100% usage
- gren 14y 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 :)
  - Jimmie 14y 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.
    - gren 14y ago
      eah I think the default scene use too much samples, like 51 for the right light. Now my technique of combining shadow samples together is probably not the most efficient, I draw them with source-over and an alpha which is also a wrong hacky current implementation... but maybe using the CanvasData would be less efficient (technically I need to make the average of shadow samples' grayscales) - well we never know, I haven't tried yet ;) I would be happy to have any contribution in the library :)
      - timb 14y ago
        the editor could turn down samples for lights while dragging, and turn samples back up when dragging is finished.
  - deleted 14y ago
    [deleted]
  - ajuc 14y 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 14y ago
  Try to lower the number of samples.
BoxPwn 14y ago
I laugh when I think of people claiming that the browser is the best 'multiple platform' environment. Seems like the worst! I'd rather go native... less fiddling.
maigret 14y 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.
- gren 14y 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 14y ago
    Your comments in this thread are informative and polite, I have no idea why someone downvoted all your comments...
hackermom 14y 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.
- talmand 14y ago
  I think you're comparing an apple tree with a matter replicator that makes apples.
fsckin 14y ago
After playing around a bit, my browser history has thousands of entries from this site.
- gren 14y 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#L162 https://github.com/gre/illuminated.js/blob/master/demo.js#L1... ) Any idea?
  - talmand 14y ago
    I'm curious behind the reasoning in putting that information in the URL in the first place.
    - gren 14y ago
      you can refresh / bookmark / share the page URL at any time and you will retrieve your work. And also I don't have to store anything on my server, bit.ly like services are the new way of storing the information :)
erikb 14y ago
Now the site seems down. Does anyone have an alternative link?
cao825 14y ago
Very cool. One issue I saw was that the shadows actually show on top of other objects.
- gren 14y 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.
  - talmand 14y 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.
silverlight 14y 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.
- gren 14y 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?
  - silverlight 14y 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-incorporate-gpl-lgpl-open-sourced-software-in-a-proprietary-cl http://stackoverflow.com/questions/94346/can-i-legally-incor...
    - gren 14y ago
      Thanks for that, it was always unclear in my mind, now it's clear! ok so I'll move it to LGPL soon then ;) Yep, This is what I want for Illuminated.js. I prefer to have benefits of the library modifications. It's a bit more restrictive coming from MIT (I used to use it for some projects) but it's not as restrictive as a "non-commercial only" license, so IMO it's quite ok, it's a minimum of thanks to the library. Regards
      - Arelius 14y ago
jhugg 14y ago
I was really hoping this would put gold-leaf illustrations in the margins of my webpage for me.
darkstalker 14y ago
cool, but I think it should've done in webGL
- gren 14y 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 14y ago
I found a bug. At a certain distance the shadow disappears for an object. http://demo.greweb.fr/illuminated.js/#{%22lights%22:[{%22instance%22:%22Lamp%22,%22position%22:{%22x%22:377.5,%22y%22:215.316650390625},%22distance%22:170,%22diffuse%22:0.8,%22color%22:%22rgba%28254,191,136,0.8718296881574732%29%22,%22radius%22:3,%22samples%22:9,%22angle%22:0,%22roughness%22:0} 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}}
Arelius 14y 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.

102 points by gren 14y 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.

Jimmie 14y 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 14y ago
It "eats" almost all my processor..
- gren 14y 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).
  - RoboTeddy 14y ago
    In most browsers, requestAnimationFrame tries for 60fps. That means that if your program blocks on the cpu for more than 1000/60 = 17ms while it's rendering a frame, you'll be at 100% usage
gren 14y 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 :)
- Jimmie 14y 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.
  - gren 14y ago
    eah I think the default scene use too much samples, like 51 for the right light. Now my technique of combining shadow samples together is probably not the most efficient, I draw them with source-over and an alpha which is also a wrong hacky current implementation... but maybe using the CanvasData would be less efficient (technically I need to make the average of shadow samples' grayscales) - well we never know, I haven't tried yet ;) I would be happy to have any contribution in the library :)
    - timb 14y ago
      the editor could turn down samples for lights while dragging, and turn samples back up when dragging is finished.
- deleted 14y ago
  [deleted]
- ajuc 14y 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 14y ago
Try to lower the number of samples.

BoxPwn 14y ago

I laugh when I think of people claiming that the browser is the best 'multiple platform' environment. Seems like the worst! I'd rather go native... less fiddling.

maigret 14y 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.

gren 14y 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 14y ago
  Your comments in this thread are informative and polite, I have no idea why someone downvoted all your comments...

hackermom 14y 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.

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

fsckin 14y ago

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

gren 14y 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#L162 https://github.com/gre/illuminated.js/blob/master/demo.js#L1... ) Any idea?
- talmand 14y ago
  I'm curious behind the reasoning in putting that information in the URL in the first place.
  - gren 14y ago
    you can refresh / bookmark / share the page URL at any time and you will retrieve your work. And also I don't have to store anything on my server, bit.ly like services are the new way of storing the information :)

erikb 14y ago

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

cao825 14y ago

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

gren 14y 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.
- talmand 14y 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.

silverlight 14y 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.

gren 14y 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?
- silverlight 14y 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-incorporate-gpl-lgpl-open-sourced-software-in-a-proprietary-cl http://stackoverflow.com/questions/94346/can-i-legally-incor...
  - gren 14y ago
    Thanks for that, it was always unclear in my mind, now it's clear! ok so I'll move it to LGPL soon then ;) Yep, This is what I want for Illuminated.js. I prefer to have benefits of the library modifications. It's a bit more restrictive coming from MIT (I used to use it for some projects) but it's not as restrictive as a "non-commercial only" license, so IMO it's quite ok, it's a minimum of thanks to the library. Regards
    - Arelius 14y ago

jhugg 14y ago

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

darkstalker 14y ago

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

gren 14y 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 14y ago

I found a bug. At a certain distance the shadow disappears for an object. http://demo.greweb.fr/illuminated.js/#{%22lights%22:[{%22instance%22:%22Lamp%22,%22position%22:{%22x%22:377.5,%22y%22:215.316650390625},%22distance%22:170,%22diffuse%22:0.8,%22color%22:%22rgba%28254,191,136,0.8718296881574732%29%22,%22radius%22:3,%22samples%22:9,%22angle%22:0,%22roughness%22:0} 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}}

Arelius 14y 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.