1. Getting Started<\/h2>\n
In the early days of HTML, 3d in the browser was sort of a myth. Displaying 3d in the browser was difficult or outrightly impossible. Today 3d in the browser is possible with WebGL. WebGL is the standard 3D graphics API for the web. WebGL works with the device hardware to render 3d graphics. WebGL works on modern desktops browsers as well as a growing number of hand held devices.\u00a0WebGL is an API based on opengl, and it accessed through JavaScript. WebGL works with HTML5 canvas (in browsers that support it) to render 3d graphics (without the use of plugins)<\/p>\n
1.1 HTML5 Canvas<\/h3>\n
HTML5 canvas combined with JavaScript is used to do a lot of things, from drawing, setting transparency levels on images to even animations and game development. An HTML canvas is a rectangular area on the web page. By default, a canvas has no border and it also has no content.<\/p>\n
<canvas>\r\n\r\n<\/canvas>\r\n<\/pre>\nYou can create an HTML5 canvas by using the tag above. You can also set the width and height of the canvas within its tag or you can do it with JavaScript. Lets look at the example below:<\/p>\n
<canvas width=500 height=500 >\r\n\r\n<\/canvas>\r\n<\/pre>\nTo set the width and height through JavaScript we have to set an ID on our tag.<\/p>\n
<canvas\u00a0id=board >\r\n\r\n<\/canvas>\r\n<\/pre>\nIt is also possible to create HTML5 canvas element on the fly with JavaScript
document.createElement()\u00a0<\/code>.<\/p>\nindex.html<\/em><\/span><\/p>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title>HTML5 canvas test<\/title>\r\n\t\r\n\t<\/head>\r\n\t<body onload=init()>\r\n<script>\r\n\/\/function called when page load is finished\r\nfunction init(){\r\nvar canvas=document.getElementById(\"board\");\/\/ get the canvas element\r\ncanvas.width=document.body.clientWidth;\/\/set the width of the canvas to the body of the page\r\ncanvas.height=document.body.clientHeight;\/\/set the height of the canvas to the body of the page\r\n\r\n\r\n}\r\n\r\n<\/script>\r\n\t\r\n\t<canvas id=board>\r\n\t\r\n\t<\/canvas>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n\r\n<\/pre>\n1.2 Rendering 3D<\/h3>\n
To render 3d With WebGL, we first need to create or get access to a canvas. Let’s see how to do that in the code fragment below:<\/p>\n
\r\n<canvas id=\"boarf\" width=\"640\" height=\"480\">\r\n <\/canvas>\r\n\r\n<\/pre>\nBelow is the JavaScript code that registers an event listener.<\/p>\n
window.addEventListener(\"load\",init);\/\/ register an eventlistener for web page onload\r\n<\/pre>\nIn the code fragment above we successfully created our canvas. The init function is called after the page is loaded it simply initializes WebGL. Lets see another code fragment below<\/p>\n
gl = null; \/\/set variable to null\r\n\/\/ Try initialize the WebGL context. If it fails, try the to experimental. \r\ngl =canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); \r\n\r\n<\/pre>\nLet’s look at a full example below:<\/p>\n
index2.html<\/em><\/span><\/p>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title>HTML5 canvas test<\/title>\r\n\t\r\n\t<\/head>\r\n\t<body onload=init()>\r\n<script>\r\n\/\/function called when page load is finished\r\nfunction init(){\r\nvar canvas=document.getElementById(\"board\");\/\/ get the canvas element\r\ncanvas.width=document.body.clientWidth;\/\/set the width of the canvas to the body of the page\r\ncanvas.height=document.body.clientHeight;\/\/set the height of the canvas to the body of the page\r\n\r\n \/\/ Initialize the GL context\r\n gl = getWebGL(canvas); \/\/ Only continue if WebGL is available and working \r\nif (!gl) { \r\nreturn; \r\n} \/\/ Set clear color to black, fully opaque\r\n gl.clearColor(0.0, 0.0, 0.0, 1.0); \/\/ Enable depth testing\r\n gl.enable(gl.DEPTH_TEST); \/\/ Near things obscure far things\r\n gl.depthFunc(gl.LEQUAL); \/\/ Clear the color as well as the depth buffer.\r\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); \r\n}\r\nfunction getWebGL(canvas) {\r\n gl = null; \/\/set variable to null\r\n\/\/ Try initialize the WebGL context. If it fails, try the to experimental. \r\ngl =canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); \r\n\/\/ if we couldnt get a GL context, alert the user about the error\r\n if (!gl) { \r\nalert(\"We could not initialize WebGL. You might need to update your browser or upgrade your device hardware\"); \r\n} \r\nreturn gl;\r\n }\r\n<\/script>\r\n\t\r\n\t<canvas id=board>\r\n\t\r\n\t<\/canvas>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n\r\n<\/pre>\n
![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/01\/pic.png\")
<\/a>