Summary:

Tutorial 1 - Red Triangle

This is the first tutorial page that will explain how to use WebRender. This tutorial will cover creating a WebRender instance and drawing a simple triangle to a canvas element. This tutorial will show the end result and then go step-by-step through what each part of the code is doing. Involved with this includes creating an instance, creating some simple shaders, and loading vertex data into the buffers. Some aspects of this tutorial may be obvious, however including as much detail as possible should help others aviod making mistakes.

Tutorial Files (11.1 KB)

Result

The end result of this tutorial should be this:

This the HTML for this example:


 <html>
	 <head>	
		 <title>WebRender Tutorial </title>

		 <script src="webrender.js"> </script>
		 <script src="example.js"> </script>
	 </head>
	 <body onLoad="main()">	
		 <canvas id="screen" width="600" height="600"> </canvas>
	 </body>
 </html>

This the JavaScript for this example:


function main() {
	var canvas = document.getElementById("screen");
	
	var render = new WebRender(canvas);
	render.initialise(canvas.width, canvas.height);
	render.clearColor(0, 0, 0, 255);

	var shaderID = render.getSBOId();
	render.assignSBOVertexShader(shaderID, "index.js", "vertexShader");
	render.assignSBOPixelShader(shaderID, "index.js", "fragmentShader");
	render.addSBOVertexAttribute(shaderID, "VERTEX", "POSITION", 3);
	render.addSBOVertexAttribute(shaderID, "PIXEL", "POSITION", 4);
	render.loadSBO(shaderID);
	render.bindSBO(shaderID);

	var vbo = render.getVBOId();
	render.loadVBO(vbo, [0, 0.5, 0, -0.5, -0.5, 0, 0.5, -0.5, 0]);
	
	render.clearBuffer(0);
	render.draw(vbo, 0, 3);
	render.getBuffer();
	
	return;
}

//----------------------------------------------------------------
// Shaders
//----------------------------------------------------------------
function vertexShader(render, inputVertex, outputVertex) {
	outputVertex[0] = inputVertex[0];
	outputVertex[1] = inputVertex[1];
	outputVertex[2] = inputVertex[2];
	outputVertex[3] = 1;
}

function fragmentShader(render, x, y, z, w) {
		//	Red			Blue		Green		Alpha
	return (255 << 0) | (0 << 8) | (0 << 16) | (255 <<  24);
}
//----------------------------------------------------------------

Explanation - HTML

First off we need to understand the HTML that is holding the canvas element.


<script src="webrender.js"> </script>
<script src="example.js"> </script>

In this example, the code for drawing is stored in example.js, therefore it is included along with the link for the webrender.js library.


<body onLoad="main()">	
	<canvas id="screen" width="600" height="600"> </canvas>
 </body>

Next we have the body and the canvas element. The body has na onload function to create our WebRender instance and run a draw command. The canvas has an id, which is used by the WebRender instance to draw to it, and the width and height of the canvas. In this tutorial the canvas is refered to as "screen" and will be referenced in the JavaScript file later.

Explanation - JavaScript

The JavaScript is broken into three functions, main(), vertexShader() and fragmentShader(). The most important part is the main() as it contains all code for creating and drawing with WebRender.


function main() {
	var canvas = document.getElementById("screen");
	
	var render = new WebRender(canvas);
	render.initialise(canvas.width, canvas.height);

First we get the canvas element with document.getElementById() using the "screen" id from the HTML page. This element is then passed to the WebRender constructor with new WebRender(canvas). The constuctor normally takes in a few parameters; the canvas we are drawing to, a callback function, the number of threads being used and a filepath to the webrender.js file. However for this example, we only need to pass the canvas as the other elements are not being used.

The only thing to pay attention to at the moment is the canvas parameter. The number of threads, callback function and webrender.js filepath are all connected with multithreading and more advanced functionality. See the Threads page for more information.


	render.clearColor(0, 0, 0, 255);

This is used to set the background colour of image we are drawing. In this case we have set it to black, however an alpha of 0 (instead of 255 as we have it) will make the background of the canvas transparent allowing for layering effects.


	var shaderID = render.getSBOId();
	render.assignSBOVertexShader(shaderID, "index.js", "vertexShader");
	render.assignSBOPixelShader(shaderID, "index.js", "fragmentShader");
	render.addSBOVertexAttribute(shaderID, "vertex", "position", 3);
	render.addSBOVertexAttribute(shaderID, "pixel", "position", 4);
	render.loadSBO(shaderID);
	render.bindSBO(shaderID);

Shaders will be further explained in the next tutorial, however they are required for any drawing with WebRender. For the moment, jsut understand that this piece of code defines what functions are acting as shaders (vertexShader and fragmentShader functions). It defines how our vertex data is formatted with the addSBOVertexAttribute() function, in this case with 3 postional values (x, y, z).


	var vbo = render.getVBOId();
	render.loadVBO(vbo, [0, 0.5, 0, -0.5, -0.5, 0, 0.5, -0.5, 0]);

This code is used for loading the vertex data into a buffer in WebRender. The get getVBOId() function will create a buffer and return the id of it. Then using loadVBO() we can load in the vertex data for our triangle into the buffer that was just created. The data must be just an array, and the format of the data is how it was defined in the shaders in the previous code segment.


	render.clearBuffer(0);
	render.draw(vbo, 0, 3);
	render.getBuffer();
	
	return;
}

Lastly we draw the triangle to the canvas. First we clear the pixel buffers with clearBuffer(0), we request our vertex buffer to be drawn from vertex 0, until 3 vertices have been drawn with the draw(vbo, 0, 3) functiuon. Lastly we print the pixel buffer to the canvas using the getBuffer() fucntion.


function vertexShader(render, inputVertex, outputVertex) {
	outputVertex[0] = inputVertex[0];
	outputVertex[1] = inputVertex[1];
	outputVertex[2] = inputVertex[2];
	outputVertex[3] = 1;
}

This is our vertex shader, and for this example it is very simple. All it does is pass the X, Y and Z vaules we put in the buffer to the X, Y, Z, W values for the rendering pipeline. The next tutorial will cover this more.


function fragmentShader(render, x, y, z, w) {
		//	Red			Blue		Green		Alpha
	return (255 << 0) | (0 << 8) | (0 << 16) | (255 <<  24);
}

This is our fragment shader, also refered to as the pixel shader in some parts of the API. In this case the shader simply returns the colour red (255, 0, 0, 255) for every pixel that is drawn. The next tutorial will cover this more.

Conclusion

You should now understand the basics of creating a WebRender instance, see the following tutorial on shaders and a draw loop in order to further customise your rendering.