From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014

WebGL / Three.js Workshop
at Futurejs 2014
Ross McKegney
& Carlos Sanchez
@verold

Agenda:
9:00 Introduction & Basics of Three.js
10:00 Adding 3D content to your web app
11:15 Three.js and the Internet of Things
12:45 Wrap up

Gaming & Web are converging
This era of the web belongs to creative coders

Graphics WebGL
Processing WebCL / Workers / Emscripten
Audio Web Audio
Networking WebRTC
Real-time + Devices Web Sockets

This is for you!
The web is evolving, and it will reshape
game development AND web design

Global Arms Trade Dataviz
by Google
Small arms trade data from 1992-2010 is
visualized on an interactive 3D globe.

Journey to Middle Earth
by North Kingdom
An interactive tour of Middle Earth for desktop
and mobile, using WebGL and HTML5.

HexGL
by Thibaut Despoutin
A simple racing game built for the web using
Three.js.

MODULE 1:
Getting Started with Three.js
http://threejs.org/docs/index.html

Three.js starts with:
● Scene
● Renderer (we’ll always use WebGL)
● Camera, Objects, Materials, Lights

var scene = new THREE.Scene();
var camera =
new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight,
0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial(
{ color: 0x00ff00, wireframe: true } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
cube.rotation.x += 0.01;
cube.position.z += 0.01;
}
render(); http://codepen.io/rossmckegney/full/lcAta

Tweak 1: Materials
Three.js comes with a number of built-in
materials and shaders: Basic, Lambert,
Phong.

MeshLambertMaterial
For non-shiny materials, lit per vertex
var material = new THREE.MeshLambertMaterial(
{ ambient: 'blue' } );
cube.overdraw = true;
scene.add( cube );
var ambientLight = new THREE.AmbientLight('white');
scene.add(ambientLight);
http://codepen.io/rossmckegney/full/DaohB

MeshPhongMaterial
For shiny materials, lit per pixel
var material = new THREE.MeshPhongMaterial(
{ color: 'blue' } );
scene.add( cube );
var directionalLight = new THREE.DirectionalLight( 'white', 0.5 );
directionalLight.position.set( 0, 0, 1 );
scene.add( directionalLight );
http://codepen.io/rossmckegney/full/lkwnI

Tweak 2: Load model
Three.js comes with loaders for JSON,
OBJ, Collada, STL, etc

THREE.OBJLoader
Three.js extension, allows to load an OBJ
file. Load the mesh and texture, with
progress reporting. Watch out for CORS.

MODULE 2:
Overview of Verold Studio

Let’s be clear:
Three.js is an easy-to-use graphics library
supported by a large community of
developers. It is not a game engine.

So, we built an open-source game engine
extending Three.js!
● Component Entity Model
● Assisted Loading
● Mobile Support and Fallbacks

Component Entity Model
Game logic is defined as modular
components that can be attached to nodes
on the scene graph.

Scene Graph
The scene graph holds
your models, lights,
cameras, etc

Scene Graph
Behaviours are defined
by attaching modular
components to nodes in
the scene graph

Demo: Let’s light and rotate a cube!

Assisted Loading
In a game engine (especially for the web)
you need fine-grained control over loading

Assisted Loading
You might load everything upfront
(loading bar), or defer loading. We need a
way to trigger asset/object loading and
bind to different stages of load.

Assisted Loading
Demo: Loading scenarios

Mobile Support & Fallbacks
Ideally, HTML5 is write once, run
anywhere. Not true in practice.

Device constraints:
● CPU & rendering performance
● GPU capabilities
● Network bandwidth

Demo: Thooloo.com

MODULE 3:
Adding 3D to your website

Animated Hero Image
Great way to bring
your homepage to life!
http://verold.com

Product Configurators
You can easily swap
geometries, change lighting,
materials, etc..
http://vrld.co/ogUzZk

3D Scans
Useful not only for
modelled 3D, but also
for 3D scans.
http://www.juanvilla.es
http://bossfight.me

Plays well with others!
Three.js and Verold work
nicely for simple demos,
or can be scaled up to
robust frameworks like
Angular.js
http://brained.io

Offline too!
Web can be used offline
or online. e.g. BPush kiosk
by James White designs.
http://ibptouch.dyndns.org/?range=26

And of course games :)
The Verold engine is
well suited to simple
games, seamlessly
integrated with your
website.
http://thooloo.com

OK… so let’s add some 3D to a page!
The goal for this exercise is to walk you
through adding a 3D model to a canvas on
your web app.

Steps:
1. Upload 3D model
2. Setup scene and materials
3. Create your responsive web app
4. Load the Verold engine and model
5. Setup controls and widgets

MODULE 4:
Verold and the Internet of Things

IoT -> Web
External
Device
Native
Handler
bluetooth
Node.js
Emitter
socket
Web Browser
Web App
web socket
Web Server
e.g.
NeuroSky
Oculus VR
Raspberry Pi
Leap Motion
...
Desktop

Connecting to Neurosky:
this.port = opts.port || 13854
this.host = opts.host || 'localhost'
if(typeof(opts.appName) !== 'string') throw new NodeNeuroSkyError('Must specify appName')
if(typeof(opts.appKey) !== 'string') throw new NodeNeuroSkyError('Must specify appKey')
this.auth = {
appName:opts.appName,
appKey:opts.appKey
}
this.config = {
enableRawOutput: false,
format: "Json"
}
events.EventEmitter.call(this)

Listening:
NeuroSkyClient.prototype.connect = function(){
...
client.on('data',function(data){
if(!self.configSent){
self.configSent = true
client.write(JSON.stringify(self.config))
} else {
try{
self.emit('data',JSON.parse(data.toString()))
}catch(e){
self.emit('parse_error',data.toString())
}
}
})

Emitting:
var express = require(‘express’), app = express(), server = require(‘http’).createServer(app),
io = require(‘socket.io’).listen(server, {log:false}),
nodeThinkGear = require(‘../node-thinkgear’), mySocket = undefined;
…
var tgClient = nodeThinkGear.createClient({ appName: ‘NodeThinkGear’, appKey: ‘xxx’ });
tgClient.connect();
io.sockets.on(‘connection’, function (socket) { mySocket = socket; });
tgClient.on(‘data, function(data) {
if (data[‘poorSignalLevel’]) {
console.log(“connecting…”);
}
if (mySocket) {
mySocket.emit(‘think’, {data: data});
}
});

JS Client:
var socket = io.connect(‘http://localhost:3000’);
socket.on(‘think’, function(data) {
if (data[‘data’] && data[‘data’][‘eSense’]) {
attention = data[‘data’[‘eSense’][‘attention’];
meditation = data[‘data’[‘eSense’][meditation];
}
}

Exercise: Leap Motion and Three.js
Let’s integrate 3D gestures with our 3D scene!

Download the Leap Motion client app
https://www.leapmotion.com/setup

Get LeapJS
Learn more about LeapJS at https://developer.
leapmotion.com/leapjs/welcome

Verold Leap Template
Grab the Verold Leap Template at
http://studio.verold.com/projects/5357f75685ce9f0200000058

VeroldController Component
Attach this to your Scene, and then it will
establish a connection to Leap and pass the
connection as the ‘leapReady’ event.
// Connect to Leap
var leap = new Leap.Controller({host: 'localhost', port: 6437});
leap.connect();
// This allows us to maintain the connection even whilst in an iFrame.
leap.setBackground(true);
// Pass the leap controller to all listeners
this.events.trigger("leapReady", leap);

VeroldListener Component
Sample component to show you how to listen to
Leap events from the LeapController.
Component.prototype.init = function() {
this.listenTo(this.events, "leapReady", this.initLeap);
};
Component.prototype.initLeap = function(leap) {
this.leap = leap;
};

Do Leap things!!!
LeapFrame = {
hands: [
{
palmPosition: [x,y,z]
palmNormal: [x,y,z]
direction: [x,y,z]
roll()
pitch()
yaw()
fingers: [
{
tipPosition: [x,y,z]
direction: [x,y,z]
}
]
}
]
}

COMMUNICATE IN 3D
Ross McKegney, CEO
ross.mckegney@verold.com
Carlos Sanchez, Senior Web Designer
carlos@verold.com

From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014

More Related Content

What's hot

Viewers also liked

Similar to From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014

Recently uploaded

From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014