Home

Lumen-2D is a renderer combining light transport simulation & the canvas API with a set of easy to extend scripts, giving as much artistic freedom as possible to the developer using it

How to use

1. You need to enable this chrome flag to be able to use this project

   --enable-experimental-web-platform-features

   This is currently required because the project uses es6 modules inside webworkers

2. Download the repo

3. Inside the script ./libs/createScene.js you can code the scene you want to render

4. Then simply open index.html with a local server

---

Lumen-2D (currently) is not a library but a set of scripts used to create cool pictures, after you download the repo you can start to render something by changing the file ./libs/createScene.js

You can find various examples of different types of scenes each using a different feature of the renderer by having a look inside the ./libs/scenes/ folder, if you copy the content of any of those files and paste it inside createScene.js you'll be able to see the corresponding scene rendered

Commented example of createScene.js

import  { Edge }  from  "./geometry/Edge.js";
import  { Circle }  from  "./geometry/Circle.js";
import  { LambertMaterial }  from  "./material/lambert.js";
import  { LambertEmitterMaterial }  from  "./material/lambertEmitter.js";

/* this function will be called before rendering starts, every primitive 
   added to the scene object will be rendered */
function  createScene(scene,  workerData,  motionBlurT,  ctx,  frameNumber)  {
    createWorldBounds(scene);
    
    /* you can find an in-depth explanation of each primitive and material
       inside the other pages of this wiki */
    let circle = new Circle(0,0,3);
    let material = new LambertMaterial({ opacity: 0.6, color: [1, 0.05, 0] });
    scene.add(circle, material);

    let lightSource = new Edge(10,  -5,  10,  5);
    let lightMaterial = new LambertEmitterMaterial({ color: [500, 500, 500] });
    scene.add(lightSource, lightMaterial);
}

/* this function creates a "box" containing your scene 
   (assuming Globals.WORLD_SIZE is set to 20) the box
   is comprised of four edges, they act as "walls" and makes 
   it possible for light rays to bounce around on them when 
   a light ray is fired from a light source */
function  createWorldBounds(scene)  {
    let edgeMaterial =  new  LambertMaterial({ opacity:  1  });
    let tbound =  11;
    let lbound =  19.5;
    let rbound =  19.5;
    let bbound =  11;

    let ledge =  new  Edge(-lbound,  -bbound,  -lbound, tbound,  0,  1,  0);
    let redge =  new  Edge( rbound,  -bbound, rbound, tbound,  0,  -1,  0);
    let tedge =  new  Edge(-lbound, tbound, rbound, tbound,  0,  0,  -1);
    let bedge =  new  Edge(-lbound,  -bbound, rbound,  -bbound,  0,  0,  1);

    scene.add(ledge, edgeMaterial);
    scene.add(redge, edgeMaterial);
    scene.add(tedge, edgeMaterial);
    scene.add(bedge, edgeMaterial);
}

export  { createScene };

The Globals object

An additional file you'll often use is ./libs/globals.js which is a single javascript object with all the settings of the renderer, you can find a dedicated page in the wiki explaining the meaning and usage of all the settings inside the Globals object, which are shared among web workers

Gotchas

Here's few things to keep in mind while using this project

1. Be careful with Math.random() inside createScene( ) ! Since createScene is launched from possibly many webWorkers each one will pick his own set of random values and your scene WILL be different in each webworker! Instead, use Utils.rand() which was created to give consistent random values between web workers instances
2. If out of nowhere Chrome wont let you debug a webworker make sure that you're not making any mistake while importing modules - it seems that Chrome silently fails to report those type of errors and it wont let you debug the source if it happens (and will drive you nuts for hours)