WebGL / Three.js Workshop at Futurejs 2014

Ross McKegney & Carlos Sanchez

@verold

Agenda:

9:00 Introduction & Basics of Three.js10:00 Adding 3D content to your web app11:15 Three.js and the Internet of Things12:45 Wrap up

Gaming & Web are converging

Gaming & Web are converging

This era of the web belongs to creative coders

Graphics WebGLProcessing WebCL / Workers / EmscriptenAudio Web AudioNetworking WebRTCReal-time + Devices Web Sockets

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

Three.js

Global Arms Trade Datavizby Google

Small arms trade data from 1992-2010 is visualized on an interactive 3D globe.

Journey to Middle Earthby North Kingdom

An interactive tour of Middle Earth for desktop and mobile, using WebGL and HTML5.

HexGLby 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: MaterialsThree.js comes with a number of built-in materials and shaders: Basic, Lambert, Phong.

MeshLambertMaterialFor non-shiny materials, lit per vertex

var geometry = new THREE.CubeGeometry(1,1,1);var material = new THREE.MeshLambertMaterial(

{ ambient: 'blue' } );var cube = new THREE.Mesh( geometry, material );cube.overdraw = true;scene.add( cube );

var ambientLight = new THREE.AmbientLight('white');scene.add(ambientLight);

http://codepen.io/rossmckegney/full/DaohB

MeshPhongMaterialFor shiny materials, lit per pixel

var geometry = new THREE.CubeGeometry(1,1,1);var material = new THREE.MeshPhongMaterial(

{ color: 'blue' } );var cube = new THREE.Mesh( geometry, material );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 modelThree.js comes with loaders for JSON, OBJ, Collada, STL, etc

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

var manager = new THREE.LoadingManager();manager.onProgress = function ( item, loaded, total ) {

console.log( item, loaded, total );};

var texture = new THREE.Texture();var loader = new THREE.ImageLoader( manager );loader.load( 'textures/UV_Grid_Sm.jpg', function ( image ) {

texture.image = image;texture.needsUpdate = true;

} );

var loader = new THREE.OBJLoader( manager );loader.load( 'obj/male02.obj', function ( object ) {

object.traverse( function ( child ) {if ( child instanceof THREE.Mesh ) {

child.material.map = texture;}

} );object.position.y = -90;scene.add( object );

} );

MODULE 2: Overview of Verold Studio

http://www.youtube.com/watch?v=bBAb3I6iYVQ

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 ModelGame logic is defined as modular components that can be attached to nodes on the scene graph.

Component Entity Model

Scene Graph

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

Component Entity Model

Scene Graph

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

Component Entity Model

Demo: Let’s light and rotate a cube!

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

Assisted LoadingYou 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 LoadingDemo: Loading scenarios

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

Mobile Support & FallbacksDevice constraints:● CPU & rendering performance● GPU capabilities● Network bandwidth

Mobile Support & FallbacksDemo: Thooloo.com

MODULE 3:Adding 3D to your website

Animated Hero ImageGreat way to bringyour homepage to life!

http://verold.com

Product ConfiguratorsYou can easily swap geometries, change lighting,materials, etc..

http://vrld.co/ogUzZk

3D ScansUseful not only formodelled 3D, but also for 3D scans.

http://www.juanvilla.es

http://bossfight.me

Plays well with others!Three.js and Verold worknicely for simple demos, or can be scaled up to robust frameworks likeAngular.js

http://brained.io

Offline too!Web can be used offlineor online. e.g. BPush kioskby James White designs.

http://ibptouch.dyndns.org/?range=26

And of course games :)The Verold engine is well suited to simple games, seamlesslyintegrated 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 model2. Setup scene and materials3. Create your responsive web app4. Load the Verold engine and model5. Setup controls and widgets

MODULE 4:Verold and the Internet of Things

IoT -> Web

External Device

NativeHandler

bluetooth

Node.js

Emittersocket

Web Browser

Web Appweb socket

Web Server

e.g.NeuroSkyOculus VRRaspberry PiLeap Motion...

Desktop

ex. Node-Neurosky

Connecting to Neurosky:this.port = opts.port || 13854this.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 = trueclient.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.jsLet’s integrate 3D gestures with our 3D scene!

Download the Leap Motion client app

https://www.leapmotion.com/setup

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

Verold Leap TemplateGrab the Verold Leap Template athttp://studio.verold.com/projects/5357f75685ce9f0200000058

VeroldController ComponentAttach 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 ComponentSample 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] } ] } ]}

What will you make?

COMMUNICATE IN 3D

Ross McKegney, CEOross.mckegney@verold.com

Carlos Sanchez, Senior Web Designercarlos@verold.com