Geek Culture
Published in

Geek Culture

Tricks for Efficient Shadow Effect in Pure JavaScript

How to handle the overlapping of source lights in a 2.5D browser game

Lost In Maze (browser game)

General performance


Daylight mode

Daylight mode

Torch mode

Torch mode
Making the raw shadow for a bonfire
Raw shadow of a bonfire

Bonfire mode

Bonfire mode (with burning torch)

Overlapping shadows

Raw scene
Naive shadow overlapping

The shadow layer

Overlapping shadows — the first solution

Red, Green, Blue and Alpha

Reversing the shadows

Reversing Alpha of pixels
Bonfire shadow before and after Alpha reversing

Composing the reversed shadows and finishing

Shadow layer before being Alpha reversed
Shadow layer after being Alpha reversed
First solution

Overlapping shadows — the second solution

Overlapping translucent pixels (of shadows)

The resulting alpha value of two shadow pixels that overlap shall be the smaller alpha value of both.

Solving the big bottleneck

Some random notes

The second solution — in details


Creating the shadow layer
Creating the torch shadow data
Creating the bonfire shadow data


Drawing the lighting
Resetting the shadow layer
Pasting a bonfire shadow on the shadow layer
Blurring the shadow layer

The second solution — the side effect and the fix

The trick is displacing each bonfire shadow BEFORE reducing it.
And, of course, this few tens of reduced bonfire shadows are worth to memorize.

The fix in brief details




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store