Some notes before starting:<\/p>\n
- \n
- This and the following articles will not show you how to build a complete checkers game, but instead will show you\u00a0only the basics because the focus will be on the actual 3D rendering.<\/li>\n
- The 3D assets needed will be provided to you and there is no info on how to create them other than some basic guidelines specific to our goal.<\/li>\n<\/ul>\n
What you’ll learn in this part<\/h2>\n
This article will cover the basic setup of the game, like directory structure and needed files. In the end you’ll have a wireframe cube and you’ll be able to orbit around it. You can scroll down at the end of the article if you want to see it in all its glory.<\/p>\n
Now let’s clarify some things.<\/p>\n
What is WebGL?<\/h2>\n
Let’s see what Wikipedia has to say:<\/p>\n
WebGL<\/strong> (Web Graphics Library) is a JavaScript API<\/strong> for rendering interactive 3D graphics<\/strong> and 2D graphics<\/strong> within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated<\/strong> usage of physics and image processing and effects as part of the web page canvas.<\/p><\/blockquote>\n
That pretty much says it all. To find out more you can read the full description here<\/a>.<\/p>\n
To test if your browser and graphics card supports WebGL go to get.webgl.org<\/a>. It should tell you that “Your browser supports WebGL”<\/em> and you should see a spinning cube.<\/p>\n
The only browsers that currently support WebGL out of the box are Mozilla Firefox and Google Chrome. Safari and Opera have implemented support for WebGL also, but it’s disabled by default.<\/p>\n
What is Three.js?<\/h2>\n
Three.js<\/a> is a JavaScript 3D library<\/strong> that takes away the complexity of WebGL low-level API. Here’s an official description:<\/p>\n
The aim of the project is to create a lightweight 3D library<\/strong> with a very low level of complexity \u2014 in other words, for dummies. The library provides <canvas>, <svg>, CSS3D and WebGL renderers<\/strong>.<\/p><\/blockquote>\n
We will be using this library to build our 3D board game.<\/p>\n
Before we begin<\/h2>\n
You should be familiar with the following concepts in JavaScript:<\/p>\n
Object-Oriented JavaScript<\/a><\/p>\n
Self-Invoking Anonymous Function<\/a><\/p>\n
Private Members in JavaScript<\/a><\/p>\n
Strict Mode<\/a><\/p>\n
You may also want to read about ECMAScript 5<\/strong> new features:<\/p>\n
ECMAScript 5 Objects and Properties<\/a><\/p>\n
ECMAScript 5 Strict Mode, JSON, and More<\/a><\/p>\n
About testing<\/h3>\n
Because the 3D assets will be loaded via AJAX, opening the index.html file in the browser will only work in Firefox.<\/p>\n
In Google Chrome you’ll see the following error message in Developer tools console: “Cross origin requests are only supported for HTTP”. <\/em>To fix that you either use a local web server to access the project or you open Google Chrome with the
--disable-web-security<\/code> argument (Disable same origin policy<\/a>).<\/p>\nThe beginining<\/h2>\n
Create a directory for our game and make it to reassemble the following structure:<\/p>\n
![\"WebGL](\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2013\/04\/webgl_3d_checkers_directory_structure.jpg\")
<\/a><\/p>\n3d_assets\/:<\/strong> the directory where the 3D content files will resides.<\/p>\n
css\/style.css<\/strong>: some basic CSS styles.<\/p>\n
\r\n\r\nhtml, body {\r\n height: 100%;\r\n}\r\n\r\nbody {\r\n margin: 0;\r\n overflow: hidden;\r\n}\r\n\r\n#boardContainer {\r\n width: 100%;\r\n height: 100%;\r\n background: #e6e0cf;\r\n}\r\n\r\n<\/pre>\njs\/three\/:<\/strong> the three.js library home.<\/p>\n
js\/main.js:<\/strong> the checkers game will start from here.<\/p>\n
js\/Game.js:<\/strong> it will handle game logic and it will create a BoardController.<\/p>\n
js\/BoardController.js:<\/strong> it will handle all the actual drawing and mouse interaction.<\/p>\n
index.html:<\/strong><\/p>\n
\r\n\r\n<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <link rel="stylesheet" type="text\/css" href="css\/style.css" \/>\r\n <\/head>\r\n <body>\r\n <div id="boardContainer"><\/div>\r\n\r\n <script src="js\/three\/three.js"><\/script>\r\n <script src="js\/three\/OrbitControls.js"><\/script>\r\n <script src="js\/Game.js"><\/script>\r\n <script src="js\/BoardController.js"><\/script>\r\n <script src="js\/main.js"><\/script>\r\n <\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
Download three.js<\/a> library and copy into js\/three\/<\/strong> the following files: build\/three.js<\/strong> and\u00a0examples\/js\/controls\/OrbitControls.js<\/strong>.<\/p>\n
Starting the game<\/h2>\n
Our game will be started from main.js<\/strong>:<\/p>\n
\r\n\r\n(function () {\r\n 'use strict';\r\n\r\n var game = new CHECKERS.Game({\r\n \/\/ The DOM element in which the drawing will happen.\r\n containerEl: document.getElementById('boardContainer'),\r\n\r\n \/\/ The base URL from where the BoardController will load its data.\r\n assetsUrl: '3d_assets\/'\r\n });\r\n\r\n})();\r\n\r\n<\/pre>\nThe Game<\/em> object will be placed in the CHECKERS<\/em> namespace and it will automatically start a new game on instantiation. The properties passed to the configuration object will be passed to BoardController<\/em>‘s instantiation also.<\/p>\n
Let’s have a look at Game.js<\/strong>:<\/p>\n
\r\n\r\nvar CHECKERS = {};\r\n\r\nCHECKERS.Game = function (options) {\r\n 'use strict';\r\n\r\n options = options || {};\r\n\r\n var boardController = null;\r\n\r\n function init() {\r\n boardController = new CHECKERS.BoardController({\r\n containerEl: options.containerEl,\r\n assetsUrl: options.assetsUrl\r\n });\r\n\r\n boardController.drawBoard();\r\n }\r\n\r\n init();\r\n};\r\n\r\n<\/pre>\nOn line 8 we define a private property that will holds the BoardController<\/em> instance. On line 10 the init<\/em> function is defined and on line 19 the same function is called.<\/p>\n
Note:<\/strong> The init<\/em> function should be kept always at the bottom.<\/p>\n
The job of the init<\/em> function is to create an instance of BoardController<\/em> and to request the board drawing at line 16.<\/p>\n
Let’s move on to BoardController.js<\/strong>:<\/p>\n
\r\n\r\nCHECKERS.BoardController = function (options) {\r\n 'use strict';\r\n\r\n options = options || {};\r\n\r\n var containerEl = options.containerEl || null;\r\n\r\n var assetsUrl = options.assetsUrl || '';\r\n\r\n this.drawBoard = function () {\r\n console.log('drawBoard');\r\n };\r\n};\r\n\r\n<\/pre>\nLoad\/reload the index.html<\/em> file in the browser and you should see the word ‘drawBoard’ printed in the browser’s console.<\/p>\n
Creating the 3D virtual space<\/h2>\n
The rest of the article will add code to BoardController.js file.<\/em><\/p>\n
Before drawing some actual 3D elements we need to create the WebGL renderer, a scene that will hold the 3D objects, a camera and a camera controller that will allow the mouse to control the camera position.<\/p>\n
First let’s declare the needed variables:<\/p>\n
\r\n\r\nassetsUrl: options.assetsUrl || '';\r\n\r\nvar renderer;\r\nvar scene;\r\nvar camera;\r\nvar cameraController;\r\n\r\n<\/pre>\n
We will initialize the variables in a function named initEngine<\/strong> called from drawBoard<\/em>:<\/p>\n
\r\n\r\nthis.drawBoard = function () {\r\n initEngine();\r\n};\r\n\r\nfunction initEngine() {\r\n var viewWidth = containerEl.offsetWidth;\r\n var viewHeight = containerEl.offsetHeight;\r\n\r\n \/\/ instantiate the WebGL Renderer\r\n renderer = new THREE.WebGLRenderer({\r\n antialias: true\r\n });\r\n renderer.setSize(viewWidth, viewHeight);\r\n\r\n \/\/ create the scene\r\n scene = new THREE.Scene();\r\n\r\n \/\/ create camera\r\n camera = new THREE.PerspectiveCamera(35, viewWidth \/ viewHeight, 1, 1000);\r\n camera.position.set(0, 120, 150);\r\n cameraController = new THREE.OrbitControls(camera, containerEl);\r\n \/\/\r\n scene.add(camera);\r\n\r\n containerEl.appendChild(renderer.domElement);\r\n}\r\n\r\n<\/pre>\nThe code should be pretty self-explanatory. To see what all those arguments passed to the PerspectiveCamera<\/em> creation on line 19 means, have a look at the documentation<\/a>.<\/p>\n
All objects added to the scene will be positioned in the center, so on line 20 we move the camera up and towards us. On line 21 the camera controller is created by passing to the constructor the camera and the element that will listen for mouse events.<\/p>\n
Drawing 3D objects<\/h2>\n
With the virtual world created now we are ready to add some 3D objects in it. That will be accomplished in a initObjects<\/strong> function added below the initEngine<\/em>:<\/p>\n
\r\n\r\nfunction initObjects(callback) {\r\n var cube = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50));\r\n scene.add(cube);\r\n\r\n callback();\r\n}\r\n\r\n<\/pre>\nThe first thing to notice is that the function will accept a callback that is called at the end. For now only a cube is created and added to the scene on\u00a0 line 2 and 3, but later on the checkers board and the pieces will be loaded via AJAX and we’ll want to know when everything have been loaded.<\/p>\n
The initObjects<\/em> function should be be called from drawBoard<\/em> after initEngine<\/em> like this:<\/p>\n
\r\n\r\ninitObjects(function () {\r\n onAnimationFrame();\r\n});\r\n\r\n<\/pre>\nAfter the objects have been loaded we need to tell the WebGL renderer to render the scene on each animation frame.<\/p>\n
The render loop.<\/strong><\/p>\n
After the initObjects<\/em> function add the following:<\/p>\n
\r\n\r\nfunction onAnimationFrame() {\r\n requestAnimationFrame(onAnimationFrame);\r\n\r\n cameraController.update();\r\n\r\n renderer.render(scene, camera);\r\n}\r\n\r\n<\/pre>\nOn line 2 an animation frame is requested (info about requestAnimationFrame<\/a>).<\/p>\n
The camera controller needs to be updated on each frame, so we do that on line 4.<\/p>\n
On line 6 the scene is getting rendered.<\/p>\n
Now if you test in the browser you should see a wireframe cube:<\/p>\n
![\"webgl_3d_checkers_testing_cube\"](\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2013\/04\/webgl_3d_checkers_testing_cube.jpg\")
<\/a><\/p>\nYour cube may look different since the colors of the lines are changing randomly with each refresh.<\/p>\n
You can orbit around with left mouse button down and drag. To zoom use the mouse scroll and to pan drag with the right mouse button.<\/p>\n
End of part 1<\/h2>\n
That’s all folks! In the next article we will load the checkers board and the pieces; we’ll also add some lights in scene.<\/p>\n
You can download the current phase of the project from here<\/a>.<\/p>\n
<\/strong>If you have questions, suggestions or improvements don\u2019t hesitate to add a comment and let me know about them.<\/p>\n