Skip to content

Getting started

Jump to bottom
Cory Beams edited this page Nov 1, 2015 · 4 revisions

Setting up the HTML

First your going to need the Lighting Engine source. The file should be called 'le.min.js' in the dist folder, put it somewhere you can use it. I typically put it in a folder called 'js' within my project folder. It needs to be referenced in the header of your HTML document.

<html>
	<head>
		<script type="text/javascript" src="js/le.min.js"></script>

Next you will need a separate JavaScript file where you can write your application using the Lighting Engine something like 'my-project.js' will be fine. It also needs to be referenced in the HTML document.

		<script type="text/javascript" src="js/my-project.js"></script>
	</head>

You also need a canvas element so we have somewhere to draw to. Along with that we want our code to start on page load so its going to run an init function when the page loads.

	<body onload="init();">
		<canvas id="canvas" width="960" height="560"></canvas>
	</body>
</html>

Now we can begin with the JavaScript.

Program initialisation

In the my-project.js' file we created we need to get everything initialised. First the canvas element must be obtained so that the Lighting Engine knows what its rendering to. Then we need to create a scene. The scene acts as a container for all objects we want to render to the canvas.

var scene, renderer;

function init() {
	// Get html canvas element
	var canvas = document.getElementById("canvas");
	// Initialise the scene
	scene = new LE.Scene();

The scene is currently empty. We need to add Lighting Engine objects to the scene so that there is something to render. We are going to create a red light, a green light and a dark gray square. To do this we utilise the point light, polygon and colour classes as shown below. Creating lights is simple, we simply give them a position and a colour. To create a square we need to give the polygon class vertices as a parameter. The 'LE.Vertices.square(width, height)' function can be used to generate vertices for a square. We now parse in a position, those vertices and a colour and we are done with our polygon.

	// Create lights and a polygon
	var redLight = new LE.PointLight( { x: 355, y: 280, colour: new LE.Colour(255, 0, 0, 255) } );
	var greenLight = new LE.PointLight( { x: 605, y: 280, colour: new LE.Colour(0, 255, 0, 255) } );
	var polygon = new LE.Polygon( { 
		x: 455, 
		y: 255, 
		vertices: LE.Vertices.square(50, 50),
		colour: new LE.Colour(50, 50, 50, 255) 
	} );

Now that we have our objects we add them to the scene. To make sure the polygon casts shadows we use the 'addShadowObject' function. Now we can initialise the renderer, we simply attach the canvas and scene as parameters and we are almost good to go.

	// Add lights and polygon to the scene
	scene.addLight(redLight);
	scene.addLight(greenLight);
	scene.addShadowObject(polygon);
	// Finally initialise the renderer with the canvas and scene
	renderer = new LE.WebGLRenderer( { canvas: canvas, scene: scene } );

To get the Lighting Engine to update and render we need a loop. So an update function is called which starts that loop. This finishes the applications init function.

	// Start the loop
	update();
}

The loop

The Lighting Engine needs to render every frame so we create a separate render function in the program. This is called in the update function because it needs to be in the loop. To finish off our update function and to make sure it loops we call 'requestAnimationFrame(update)' which is just a recursive call to our update function. The reason we have both an update and a render function is so that our logic code can be separated from our render code. Doing so in this example is a bit redundant but is good practice.

function update() {
	render();
	requestAnimationFrame(update);
}

The canvas should be cleared every frame so we call the renderers 'clear' function. We also want our scenes objects to be rendered every frame so we call the 'render' function.

function render() {
	renderer.clear();
	renderer.render();
}

This is everything that is required to get started. From here it is easy to modify the code to try and do different cool things with it! The full source from this tutorial can be downloaded here.

Clone this wiki locally