2D Lighting system (canvas2D)

Hey there!

I am currently developing a 2D lighting system in javascript for canvas2D.

The goal is to create an identical thing for webgl as soon as it properly works.

I've gotten as far as to have a light working perfectly, except when adding more than 1 light gives a problem.

The system works by drawing a sprite (yes I copied the Sprite plugin, it was the fastest way) and clipping away where shadow should be.

but when using more than 1 light, the cliping path subtracts when overlapping

Works Fine:

<img src="http://s17.postimg.org/cyqxmq1rj/works_fine.png" border="0" />

Subtracting paths:

<img src="http://s13.postimg.org/4zx3hs15j/problem.png" border="0" />

Do you have a code snippet to show? Hard to offer suggestions without it. Except that you need to restrict clipping to the current light sprite obviously.

You cannot implement a lighting system by clipping for this exact reason. You need to render each light separately with additive blending.

Do you have a code snippet to show? Hard to offer suggestions without it. Except that you need to restrict clipping to the current light sprite obviously.

This is exactly what I want to do.

Right now I draw a path in with the canvas context element, then simply clip();

//for each object type

for (i = 0, leni = this.type.obstacleTypes.length; i < leni; i++)

{

    //for each instance

    instances = this.type.obstacleTypes.instances;

    for (j = 0, lenj = instances.length; j < lenj; j++)

    {

     rinst = instances[j];

     //if overlapping

     if (runtime.testOverlap(this, rinst)){

//have to draw the path around the object first (set it to the viewsize, because if they overlap, it basicly cuts every light according to 1)

            ctx.beginPath();

            ctx.lineTo(0, 0);

            ctx.lineTo(0, myy + runtime.height + this.height);

            ctx.lineTo(myx + runtime.width + this.width, myy + runtime.height + this.height);

            ctx.lineTo(myx + runtime.width + this.width, 0);

            ctx.lineTo(0,0);

//Draw a path that needs to be cut out of the image

//this part has a lot of conditional lineTo(); which is omitted

            ctx.moveTo(endpoint.x, endpoint.y);

            ctx.lineTo(imgp1X, imgp1Y);

            ctx.lineTo(imgp0X, imgp0Y);

            ctx.lineTo(endpoint.x, endpoint.y);

            ctx.closePath();

            ctx.clip();

// after this it draws the image

                                        }

                    }

              ?}              

You cannot implement a lighting system by clipping for this exact reason. You need to render each light separately with additive blending.

How would I go about doing this? is there a way to manipulate the cur_image, or even in webgl?

I would like to be able to specify a region that will not be rendered.

I am currently developing a 2D lighting system in javascript for canvas2D.

The goal is to create an identical thing for webgl as soon as it properly works.

have you checked the paster plugin thread?

No I haven't, I'll do that right now.

EDIT: I don't see how this helps, but I should be able to replicate my code in webgl which may allow me to do this per image instead of canvas wide.

You could use the ctx.save() before clipping and ctx.restore() after clipping to reset the clipping region. I may be a problem when making the webgl version as webgl doesn't appear to have an equivalent to clip().

Another way to go about it is drawing to a canvas and using a blend to combine the images in various ways.

Look here:http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp

The idea can easily be used with webgl as well.

Thanks for the reply!

although using restore seems to cut performance to an unworkable level, even when using only 2 sprites, the blending options might be just what i need.

2D lighting in webgl would be awesome! I'll follow your progress closely :)

2D lighting in webgl would be awesome! I'll follow your progress closely :)

Thank you, I will keep this thread updated. I also have a rather elaborate prototype due in the next 2 weeks, so I won't be updating this soon.

The current system works IF you use separate layers for the lights (because of the source-out drawing). The performance of canvas2D rendering this way instead of clip() makes for less performance, though I tested about 6 lights and it worked fine. There is some drop in frame-rate.

Node-webkit export does have major performance issues with this method.

My best option is to implement a WebGL version, since this would increase performance and will probably have more efficient image manipulation tools available.

If interested I will post the Canvas2D version with a tutorial on how to use it, for testing purposes.

That's great! I'd love to try the the Canvas version to see what it could look like.

I'm currently trying to make a 2D stealth game and 2D lighting is essential. I tried using the plugin Canvas but the framerate was too low so I just gave up. If you check my blog (see signature), you will see what the game is going to look like.

I have been waiting for a webgl solution for months so I really hope you'll succeed :)

I'd be really interested in a WebGL implementation too.

My support to the claim too!

Currently I'm learning C# and using Unity / Blender, to be able to use 3D light effects over sprites, but would be awesome to have it on C2.

webgl implementation will be a dream *-*

great job ^^

you have my full approvation e support ^^