Home

Give a realistic impression both look-wise (graphics) and feel-wise (physics) for playing pool.
Ability to play classic 8-ball pool in the same browser instance by taking turns
Ability to play a modified version of 8-ball pool with a possibility to sabotage the other player

Demo:

[Try here] (http://jaks6.github.io/WebGL-Billiards/), hosting your own requires a web server

The balls use a THREE.MeshPhongMaterial. The balls are textured and have a very simple environment map which gives the impression of reflecting the green table floor.
Two THREE.SpotLights are placed above the table, these make the balls and the table cast shadows.
The balls collide and bounce from walls
For physics simulation, we are using Cannon.js to complement three.js
A wireframe mode exists, which depicts the collision bodies. This is can currently not be toggled during runtime, it must be set in main.js (debug = true) prior to loading. See the picture below for an impression of this mode.
A set of collision bodies exist for the table, allowing for reasonable behavior for getting the balls in the holes and bouncing off the walls. See here for details

The camera can be controlled using the mouse.
The OrbitControl module is used for this
The camera controls update the white balls "forward vector" which is used to determine where to apply a force impulse (as defined in Cannon.js) to the ball.
The user can choose the strength of their shot and aim their shot as described above.
A guiding line helps the player aim. The length of drawing the line is determined by looking at where a THREE.js Ray intersects with a the game area or balls.
CANNON.js also provides the ability to automatically put physics objects to sleep. In our case, if the balls velocity has stayed below a certain threshold for a long enough time, we put them to sleep. Sleeping bodies' collisions are not calculated for other sleeping bodies, saving computations. Secondly, we only allow the user to make a shot if the white ball is sleeping.

Initially constructed in Google Sketchup, then exported to Blender and then to three.js json format
Some edges are not round enough
The default scale doesn't match our convention of 1 unit = 1 cm, need change either the convention or the model
The table won't stay like that - it will eventually get legs to stand on
Instead of programmed walls, we should be using convex shapes, if that doesn't work then preprogrammed walls it is :(
Observed problem: Pool tables are loosely specified (even in World Pool-Billiard Association rules - a technical drawing of the perfect table would have been nice). People don't seem to care as long as it "feels" and "behaves" right. Since most of the rules are defined by Americans or the British, the units everywhere are in inches, for which Sketchup was convenient because both imperial/metric units can be used.

A loading bar is displayed for loading texture and model assets before actually showing the HTML5 canvas.