Introduction
This chapter demonstrates about the WebGL Overview. There are number of attempts at developing a web based 3D rendering format in the past 10 to 20 years most of these have disappeared into obscured now but which is not happens with the WebGL. Following are the concepts covered in this chapter.
- History of WebGL
- History of Three.js
- Functionalities of Three.js
Description
WebGL is known as the Web Graphics Library which is originally developed by the Vladimir while he was working at mozilla. Vladmir was playing around with 3D versions of Canvas and demonstrated a prototype as early as 2006. Fast forward to 2009 users saw the creation of the khronos Working group, which still managing the WebGL specification today.
WebGL got the contribution from the many big industries names such as Apple, Google, Mozilla, Operah, and many less well-known companies and individuals.
Description
Three.js originally developed by Ricardo and more commonly known as alias mrdoob in the year of 2002. Ricardo was very interested in the demo scene where programmers and graphical artists would create exciting demos to challenge themselves and show off their skills. Ricardo would work with the programmers to produce demo for a scripting system or editor and ricordo realised that which approach have some limitations and became interested in developing the skills needed himself.
The first release of chrome demonstrated how quickly JavaScript application could run and ricardo also done more experiments with HTML 5 and related web graphical technologies such as SVG and Canvas. Ricardo also liked the technologies like Operating system independent. At the time of Three.js version released which is called as Three.AS which contains support for Dome, SVG and Canvas based renders. Ricardo sums up his motivation for developing Three.js, as needing a 3D library that suited his needs and realising and which could be useful to others as well.
Description
In order to demonstrates the Three.js which provides some high level functionalities those are listed below.
The code below demonstrates the some pure WebGL code which creates a red rectangle in order to work with WebGL user need to use the canvas elements which provides a drawing surface and JavaScript to call various WebGL API's. Pure WebGL is a time consuming to work, and there is a lot of code to perform some simple tasks.
[c]
<canvas id='ce'></canvas>
<script>
var canvasElement = document.getElementById('ce');
var ctx = canvasElemnt.getContex('webgl');
ctx.clearColor(1,0,0,1);
ctx.clear(ctx.Color_BUFFER_BIT);
</script>
[/c]
- Graphical Primitives User can have the ability to manipulate or also create his own shapes entirely from scratch.
- Loaders for many popular modelling formats. User can load models from the most popular 3D modelling formats.
- Useful math & helper functions There is a number of useful math and geometry functions.
- Limited Effects Which has limited effects such as fog and particles.
- Ability to work with Shaders. User also have the ability to work with something called shader. Shader is a graphical processing unit which can manipulate the position and color of elements on the screen.
- Basic collision detection Three.js's primary focus is rendering content on the screen and also contains some basic collision detection functionality which might use in games.
- Large set of examples to refer to User can refer the large set of examples.
- Big community Three.js has a growing community.
Key Points
- In WebGL User can create own shapes and he can manipulate.
- Ricardo more commonly known as alias mrdoob.
- Ricardo done more experiments on HTML5, SVG and Canvas.