JavaScript graphics

If Ajax is JavaScript's 2nd life, then maybe graphics is JavaScript's 3rd life.

Javascript is entering a new future as a graphics language.
3D graphics rendering on client side in Javascript.

Client side rendering of course scales very well. Server CPU is overloaded. Client has idle CPU and dedicated GPU.

Example of JavaScript graphics

The rotating sphere in my header is JavaScript graphics. There is no movie. No animated GIF.
There is just a flat JPEG on disk and some JavaScript code that (at run-time, on the client side) makes a sphere, paints it with the JPEG, rotates it, and responds to mouse.

canvas

<canvas> in HTML 5
Can do quite a lot of 2D graphics using getContext("2d"); in JavaScript.
2D rendering documentation

WebGL

WebGL JavaScript API for 3D graphics on <canvas>
WebGL is a very low-level API. Even though it is JavaScript, programming in it is complex, verbose and probably only for graphics specialists.
WebGL rendering documentation
OpenGL color converter
GLSL shader language

JavaScript libraries

If you are not a graphics specialist, you will probably want to use a high-level Javascript library that wraps WebGL in higher-level objects and methods.

Three.js

Three.js library to make WebGL easy.
threejs.org
- Docs

Github

github.com/threejs
github.com/mrdoob/three.js (build is actually here)
- Wiki

Get three.js

github.com/mrdoob/three.js
- releases (notes latest release)
- master (latest release)
- dev (latest dev code)
All previous releases are still on github. It is best to include a copy of a specific release on your site, rather than link to the latest, so that your code will always work.
release 127
- three.js
- three.min.js
threejs.org has latest release - though it does not note version
- three.js
- three.min.js

Books

discoverthreejs.com by Lewy Blue
- Entire Three.js book online. Free.
- With website and code editor.
Game Development with Three.js by Isaac Sukin (2013)
- packtpub.com
- source code

Chris Strom books

3D Game Programming for Kids by Chris Strom
Coding with Three.js
Don't be put off by the "For Kids". There is real code here.
2nd edn, 2018.
- See site and source code.
1st edn, 2013.
Can code online in 3DE editor.
- Has some built-in textures like hardwood.png
- forum
- Old editor: ICE editor.

Test of Three.js

For all these demos, "View Source" to see the entire thing!

Test of 3D graphics in Javascript
- Written entirely in Javascript using Three.js.
- View Source to see!
- This was very easy. This was my first day using Three.js.
- Uses three.js file.
- Might save three.js locally.
- Can read "textures" from image files on disk.
- Javascript (client side) reads image file from disk (on server). i.e. Through Ajax.
three.js demo
Minimal demo of JavaScript graphics

Debugging

Javascript debugging
Look at objects in the console:
- window
- window.scene.children
Not ideal: Debug offline
- For offline debugging, we have a problem. We need to read local files (e.g. textures) off disk. But JavaScript cannot access local files. (Rightly so!)
- Can run Chrome as follows:
  "C:\Program Files..\chrome.exe" --allow-file-access-from-files "C:\Users\..\file.html"
- Chrome Command Line Switches
Better: Debug online
- Better to debug online on your own site. Then the file reads are Ajax calls to the server, which is fine.

Resources (colors, textures, skyboxes, music, key codes)

Colors

Colors

Textures

Textures
Free textures
Resources on Ancient Brain

Cube maps (Skyboxes)

Cube mapping
- Skyboxes
Cube maps (Creative Commons)
Resources on Ancient Brain

Music

How to turn music and sound effects on/off from code:
See example in maze.html.
Free music Google search
Resources on Ancient Brain

Mouse and keyboard control

mouse.camera.js
- Based on Voxels
- Mouse drag moves the camera. Scroll to zoom.
How to do keyboard control:
- See example in PowerPoint left-right control.
- See key codes.

More advanced demo

Simple 2D maze with moving enemy - random maze, mouse controls camera, music