Ok guys, so I have been looking at getting back into web development by starting this blog, but mostly I am interested in creating HTML5 web applications. I have been looking at the open source Three.JS library which can use the HTML5 canvas element for rendering or WebGL. I am amazed at how quickly you can get up and running with full access to the GPU with such a short amount of code. I heavily commented it for anyone wishing to learn from it. It is basically the sample found at the Three.JS Github Page but separated and much more thoroughly commented. ;)
Here is the HTML page that we will use to run our javascript to view our 3D Scene:
<doctype html>
<html lang="en">
<head>
<title>Three.js WebGL Test</title>
<meta charset="utf-8">
<style>
body
{
margin: 0px;
background-color: #000000;
overflow: hidden;
}
</style>
</head>
<body>
<noscript>
<p style="color: #ff0000">
Sorry, you need Javascript in order to view this web app.
Please enable it in your browser settings.
</p>
</noscript>
<script src="Three.js"></script>
<script src="WebGLTest.js"></script>
</body>
</html>
Notice all that is really needed is to include source to the minified Three.js library and after that we're ready to get our own scripting on the go:
/**
* WebGLTest.js
*
* Author: Cory Gross, May 26, 2012
* Description: Used to illustrate setting up a WebGL renderer and camera
* using Three.js to be displayed using HTML5 technologies. Thoroughly
* commented to illustrate the core components of a typical 3D set up.
**/
var camera, scene, renderer; //Core Three.JS components
var geometry, material, mesh; //Other globals
/** Simply call the functions created below */
init();
animate();
/** This function is responsible for creating all of our Three.js objects that
* that will be part of our scene. The core components and all other global
* variables should be initialized here. */
function init()
{
scene = new THREE.Scene(); //Scene object holds set of all 3D objects
/** We need to define a view frustrum for our camera, this is a 3D region
* of space which contains all the points visible to the camera. The field
* of view is the angle measured from the y-axis. Objects closer than the
* near plane or behind the far plane distance will not be rendered. */
var FOV = 75;
var aspectRatio = window.innerWidth / window.innerHeight;
var near = 1;
var far = 1000;
/** Initialize our camera with frustrum view data and set position */
camera = new THREE.PerspectiveCamera(FOV, aspectRatio, near, far);
camera.position.z = 400; // Positive z axis comes out of screen
/** Three.JS provides global namespace functions for creating geometry
* and core objects such as meshes and materials. */
geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
/** Apply the material to the geometry to create a 3D mesh object
* finally add that to our scene at default position at origin */
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
/** Three.JS provides several renderers, WebGL is used here so Chrome is
* recommended but HTML5 Canvas is also supported along with others. */
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
}
/** This function does all animation before calling redrawing the scene */
function animate()
{
/** Three.JS includes requestAnimationFrame shim. This is implemented
by modern browsers to optimize animations */
requestAnimationFrame(animate);
/** Rotate our mesh, slower around x axis, faster around y */
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
/** Redraw the scene based on our camera's projection */
renderer.render(scene, camera);
}
After this all that is left to do is do is put these two files, along with the minified Three.js file, into a directory of your choice. Or upload it to a webserver and view in your favorite WebGL supported web browser. I will be posting more soon.
Here is my project uploaded to a free web host: check it out
