How To Make Games in THREE.js

and having fun in the process :)

Plan

Creating an basic 3d object and animate it
Build a Map with existing extensions
How to add sounds in your games
how to link your webgl with usual web content

Plan (bis)

Some Tricks from minigames
What we could do soon in the future
how to handle mobile

Introduction

THREE.js For Games

What is THREE.js

Display 3D graphics in Web Browser
Effort led by mrdoob
Large community
100kbyte after gzip
homepage

General Presentations

Focus on displaying 3d
scene graph
import assets from many file formats
post processing
Many renderers

So Many Things Can't list them all

Many Renderers

WebGL renderer - webgl direct rendering
WebGL deferred renderer - WebGL deffered rendering - Lot's more light
css3 renderer - use css 3d transformation

More Funky Renderers

canvas renderer - to render in canvas2d
software renderer pure js drawing -
- pre GPU era - actual zbuffer
ascii renderer - for live ascii art
Even a raytracer - yeah you heard me
- to be landed soon

so only display ?

But game is more than that.

THREE.js for Games

use extensions and other libraries
handle physics and collision
handle sounds
handle inputs
handle effects
etc...

Packaged as THREEx Extensions

What is THREEx ?

Ultra light extension system for three.js
threex on github - 40 modules and counting

Three.js seems ok... but

How to make a game with it

First we need a HERO

In all game you need a hero

A personna to embody you

A virtual self for the player to interact with

So lets do just that, lets create a hero

New Part

"A Hero is Born!"

or How to Build Simple 3D Objects

Lets Mold Our Hero

We gonna go for something simple
Very blocky
Very lego like
We go for minecraft character

(hint: trick because i dunno how to use a modeler :) )

So Let's Start with a cube

How to create a cube ?

Here is the code

var geometry = new THREE.CubeGeometry(1,1,1)
var material = new THREE.MeshNormalMaterial()
var mesh     = new THREE.Mesh(geometry, material)
scene.add(mesh)

First the Geometry

Geometry is the shape of the object
create a cube with dimension 1,1,1

var geometry = new THREE.CubeGeometry(1,1,1)

var material = new THREE.MeshNormalMaterial()
var mesh     = new THREE.Mesh(geometry, material)
scene.add(mesh)

Other Predefined Geometry

demo

Then Materials

"How the object reflect lights"

Basic
Lambert
Phong
Custom Shader

Well it is just a cube...

We Needs A Hero!

Duplication same principle
Cubes for everything

Hot or NOT

demo

"All persons fictitious"

disclaimer

"All characters appearing in this work are fictitious. Any resemblance to real persons, living or dead, is purely coincidental."

Almost :)

I love the recursive jokes.

Cool we got a player

He needs more life

He needs to move

Player Animations

demo

He is Alive!

He is Gollem. My Frankenstein.

What have I done!

Oh damn! Turing was right!

Now he is aware.

His name is Mike.

He needs a purpose, a goal, a quest

He is looking for love, fame and justice

because that is what every video game hero is doing :)

Now that we got the player

we need a map to move in

a world where we can evolve

a world where Mike can become a man

a new man

a better man!

New Part

"Mike Needs a World"

or How to use THREEx Games Extensions

Demo Time!

link

Used Extensions

threex.grassground - for the ground
threex.montainsarena - to put montains around us
threex.daynight - to fill the sky and see time passing

List of all Extensions

What is THREEx ?

light extension system ala vanilla.js
as little dependancy as possible
not a framework,
more a bunch of convention
DRY modules to help you write three.js stuff

THREEx Workflow

support modern web workflow
Support bower for install
Support require.js for include
Even support yeoman for boilerplates

DO NOT REQUIRE IT

this is the trick :)

Packages - install manual

find the repository and copy the files
no handling for dependancy

Packages - install with bower

homepage bower
effort led by twitter

Packages - install with bower

To install

bower install threex.planets

To search for more

bower search threex

Packages - include manual

include all .js with a <script>
may need to init some variables
- e.g. .baseUrl for asset location
js minification is on yoou

Packages - include with require.js

just require the package.require.js file
it does a bunch of things for you
- includes all .js
- setup asset location
- handle js minification

Now we got principles, lets see some extensions

Used Extensions

threex.grassground - for the ground
threex.montainsarena - to put montains around us
threex.daynight - to fill the sky and see time passing

Grass Ground

threex.grassground - repo demo

threex.grassground

Install it

bower install threex.grassground

Include it

 <script src='threex.grassground.js'></script>

Use it

var groundMesh  = new THREEx.GrassGround()
scene.add(groundMesh)

Perlin Terrain ?

threex.terrain - repo demo

Montain Arena

threex.montainsarena - repo demo

threex.montainsarena

include it

 <script src='threex.montainsarena.js'></script>

Use it

var mesh    = new THREEx.MontainsArena()
scene.add(mesh)

Day And Night

threex.daynight - repo demo

threex.daynight

include it

 <script src='threex.daynight.js'></script>

Use it

var sunLight    = new THREEx.DayNight.SunLight()
scene.add( sunLight.object3d )

Update it

sunLight.update(sunAngle)

Physics

Physics and Three.js

not in three.js itself
realtime 3d physics is HARD
It is a project in itself

Principles

keep them separate
but interact well with it

New Part

"Mike Goes Party"

or how to add sounds in your games

Demo Time

demo

Web Audio API

New Sound API - Aimed for game
Based on OpenAL - So Rather complex

Features

sound localisation
Dopler
convolver
Great Accuracy - no latency
very little cpu consumption

Maybe a little helper could helps

webaudiox.gamesounds

make Web Audio Api easy to use for gamedevs
provide the typical cases
no need to understand the whole Web Audio API

How to get it

webaudiox on github
or via bower install webaudiox

Basic Usage

Initialize sound context

var gameSounds  = new WebAudiox.GameSounds()

Load the Sound

gameSounds.createSound().load('mysound.ogg', function(sound){
    // here the sound is loaded
})

Play it

sound.play();

Sound Localisation - Good For 3D

Set the listener as player object3d

gameSounds.listenerFollow(object3d)

Play Sound at a given position in space

gamesound.play({
  follow  : explosionMesh
})

New Part

"Mike Goes Home And Play Video Games"

or how to link your webgl with usual web content

here is a virtual game console

demo

you can play games inside a game

if you go close to the TV, the camera becomes centered on the tv and you can enjoy your play

but still the actual games is going on around us

see with the day night cycle

Demo Time!

demo

Nice! How the tv set is done ?

Display actual web content

able to seamlessly display web content in webgl

Contains mouse events on 3d events

player able to interact with 3d elements

The whole shebang

How the mouse interacts with 3d object ?

threex.text.js

repo - demo

threex.text.js

Install it

bower install threex.text

Use it

var mesh    = new THREEx.Text('THREEx')
scene.add(mesh)

threex.domevents.js

repo - demo

threex.domevents.js

Install it

bower install threex.domevents

Init it

var domEvents   = new THREEx.DomEvents(camera)

Bind click event on a mesh

domEvents.addEventListener(mesh, 'click', function(){
    console.log('you clicked on the mesh')
}, false)

How to seamlessly include web page ?

threex.htmlmixer.js

repo / demo / post / videobrowser

threex.htmlmixer.js

Initialize it

var mixerContext    = new THREEx.HtmlMixer.Context(renderer, scene, camera)
onRenderFcts.push(function(delta, now){
    mixerContext.update(delta, now)
})

Use it on a domElement - typically an iframe

var mixerPlane  = new THREEx.HtmlMixer.Plane(mixerContext, domElement)
scene.add(mixerPlane.object3d)

What about Those Mini Games ?

MiniGame - PongGL

link

MiniGame - PongGL

Racket + ground with Catmull–Clark subdivision surface demo
Minecraft looking at the ball
Particles for smoke on impact
WebAudiox for sound - webaudiox

MiniGame - Marble Table

link

MiniGame - Marble Table

granular sound with Web Audio API - webaudiox
Add skymap - threex.skymap
Handle keyboard input - threex.keyboardstate

MiniGame - Stellar7

link

MiniGame - Stellar7

color adjust post processing - threex.coloradjust
bad tv effect post processing - threex.badtvpproc
solid wireframe - threex.solidwireframe
Planets - threex.planets
NyanCat - threex.nyancat
virtualjoystick for mobile - virtualjoystick.js

After playing video games,

Mike gets tired and he starts to daydream

"What would be the best video game for me?"

"I am young and full of energy"

"I like games and i lack girls"

He wants to create a girl for himself

A Game where people could find their match parterns

Here is what is in mike head

New Part

"Mike Thinks about Diana"

or "what could be the future of webgl games"

Here is Diana

demo

Diana's Avatar

top notch avatar all in three.js
Quite Sexy
Designer wasnt thinking about his gramma

What if we made a dating game ?

Diana's Eyes

demo - by Artur Vill

Diana's Eyes

Very realistic
"the eyes are the window of the soul"
- important to convey feelings
All in custom Shaders

Occulus drift ?

homepage - John Carmack as CTO - 300usd

Already Available in THREE.js

link

Leap Motion Device

leapjs - JavaScript client for the Leap Motion Controller
100euro

Multiplayer

people able to share live
with alternative personna

WebRTC

open standard
audio/video conference
p2p so cheap to run

Future of This Dream

Future

realistic visual rendering - three.js
immersive 3d glasses - occulus drift
instinctive inputs - leap motions

Future

All are off-the-self devices
How long before somebody code this ?
My bet is one year max

Now mike is in love

He can't stop thinking about diana

Even when he is on the go

New Part

"Mike wants Diana on his Mobile"

or WebGL on mobile

Mobile Are Not Desktop

on desktop, keyboard, mouse and large screen
on mobile, touch screen and small screen

ALL UI is Changed

virtualjoystick.js

repo / demo / post

WebGL Support on Mobile

not widely supported yet...
not all OS
great difference between devices

Not Easy Yet

THREE.js Games Mobile

stellar7 WebGL clone from the old game
mmo3d multiplayer game

Works on Mobile

What if my device doesn't support WebGL ?

Cloud Gaming ?

To save the day

What are we gonna talk about ?

Possible solution for cloud gaming
apply to any webgl games
- not only three.js ones
cheap idea for cloud gaming for webgl
full slides

status : experimental, naive but working surprisingly well!

Demo Time

Youtube video here

What is Cloud Gaming ?

wikipedia definition
It is new. no widely accepted definition
usually implies render on server feature

Rougly…

Trying to run a game written for device A
on a device B, typically dumber than A.

What it is for us ?

Our Goal

To display a webgl game
on a non-webgl player mobil device

Simple Enough...

Theory Of Operations

Theory Of Operations - Server

a renderer browser web running the game on a server
take regular screenshots with .toDataUrl()
Send them to the player device via echo server
- mobile phone, tablette whatever.

Theory Of Operations - Player

player can see webgl rendering on any device
player uses touch screen as inputs
inputs are then sent to the server
server send them back to the renderer.

Theory Of Operations - Output

browser receives inputs from the player.
player sees what is displayed in the browser.

we got the whole loop

Theory Of Operations - Results

This is actual cloud gaming!
Simple implementation
Less than 24h to write!

Performances

left as an exercice to the reader :)
Depends about too many factors
- screen resolution, screen size
- network bandwidth, network latency
- servers cost