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 ...
Gaming & Web are converging
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
Three.js
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, ...
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 geometry = new THREE.CubeGeometry(1,1,1);
var material = n...
MeshPhongMaterial
For shiny materials, lit per pixel
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THRE...
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 ...
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loade...
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...
So, we built an open-source game engine
extending Three.js!
● Component Entity Model
● Assisted Loading
● Mobile Support a...
Component Entity Model
Game 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 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 ...
Assisted Loading
Demo: Loading scenarios
Mobile Support & Fallbacks
Ideally, HTML5 is write once, run
anywhere. Not true in practice.
Mobile Support & Fallbacks
Device constraints:
● CPU & rendering performance
● GPU capabilities
● Network bandwidth
Mobile Support & Fallbacks
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
An...
Offline too!
Web can be used offline
or online. e.g. BPush kiosk
by James White designs.
http://ibptouch.dyndns.org/?range...
And of course games :)
The Verold engine is
well suited to simple
games, seamlessly
integrated with your
website.
http://t...
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
you...
Steps:
1. Upload 3D model
2. Setup scene and materials
3. Create your responsive web app
4. Load the Verold engine and mod...
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.
...
ex. Node-Neurosky
Connecting to Neurosky:
this.port = opts.port || 13854
this.host = opts.host || 'localhost'
if(typeof(opts.appName) !== 's...
Listening:
NeuroSkyClient.prototype.connect = function(){
...
client.on('data',function(data){
if(!self.configSent){
self....
Emitting:
var express = require(‘express’), app = express(), server = require(‘http’).createServer(app),
io = require(‘soc...
JS Client:
var socket = io.connect(‘http://localhost:3000’);
socket.on(‘think’, function(data) {
if (data[‘data’] && data[...
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
connect...
VeroldListener Component
Sample component to show you how to listen to
Leap events from the LeapController.
Component.prot...
Do Leap things!!!
LeapFrame = {
hands: [
{
palmPosition: [x,y,z]
palmNormal: [x,y,z]
direction: [x,y,z]
roll()
pitch()
yaw...
What will you make?
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
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
Upcoming SlideShare
Loading in …5
×

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

2,312 views

Published on

The first workshop at the first ever FutureJS conference in Barcelona. From Three.js Hello World to building your first interactive 3D app, to connecting your web app with the Internet of Things.

Published in: Software, Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,312
On SlideShare
0
From Embeds
0
Number of Embeds
98
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. WebGL / Three.js Workshop at Futurejs 2014 Ross McKegney & Carlos Sanchez @verold
  2. 2. 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
  3. 3. Gaming & Web are converging
  4. 4. Gaming & Web are converging This era of the web belongs to creative coders
  5. 5. Graphics WebGL Processing WebCL / Workers / Emscripten Audio Web Audio Networking WebRTC Real-time + Devices Web Sockets
  6. 6. This is for you! The web is evolving, and it will reshape game development AND web design
  7. 7. Three.js
  8. 8. Global Arms Trade Dataviz by Google Small arms trade data from 1992-2010 is visualized on an interactive 3D globe.
  9. 9. Journey to Middle Earth by North Kingdom An interactive tour of Middle Earth for desktop and mobile, using WebGL and HTML5.
  10. 10. HexGL by Thibaut Despoutin A simple racing game built for the web using Three.js.
  11. 11. MODULE 1: Getting Started with Three.js http://threejs.org/docs/index.html
  12. 12. Three.js starts with: ● Scene ● Renderer (we’ll always use WebGL) ● Camera, Objects, Materials, Lights
  13. 13. 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
  14. 14. Tweak 1: Materials Three.js comes with a number of built-in materials and shaders: Basic, Lambert, Phong.
  15. 15. MeshLambertMaterial For 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
  16. 16. MeshPhongMaterial For 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
  17. 17. Tweak 2: Load model Three.js comes with loaders for JSON, OBJ, Collada, STL, etc
  18. 18. THREE.OBJLoader Three.js extension, allows to load an OBJ file. Load the mesh and texture, with progress reporting. Watch out for CORS.
  19. 19. 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 ); } );
  20. 20. MODULE 2: Overview of Verold Studio
  21. 21. 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.
  22. 22. So, we built an open-source game engine extending Three.js! ● Component Entity Model ● Assisted Loading ● Mobile Support and Fallbacks
  23. 23. Component Entity Model Game logic is defined as modular components that can be attached to nodes on the scene graph.
  24. 24. Component Entity Model Scene Graph The scene graph holds your models, lights, cameras, etc
  25. 25. Component Entity Model Scene Graph Behaviours are defined by attaching modular components to nodes in the scene graph
  26. 26. Component Entity Model Demo: Let’s light and rotate a cube!
  27. 27. Assisted Loading In a game engine (especially for the web) you need fine-grained control over loading
  28. 28. 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.
  29. 29. Assisted Loading Demo: Loading scenarios
  30. 30. Mobile Support & Fallbacks Ideally, HTML5 is write once, run anywhere. Not true in practice.
  31. 31. Mobile Support & Fallbacks Device constraints: ● CPU & rendering performance ● GPU capabilities ● Network bandwidth
  32. 32. Mobile Support & Fallbacks Demo: Thooloo.com
  33. 33. MODULE 3: Adding 3D to your website
  34. 34. Animated Hero Image Great way to bring your homepage to life! http://verold.com
  35. 35. Product Configurators You can easily swap geometries, change lighting, materials, etc.. http://vrld.co/ogUzZk
  36. 36. 3D Scans Useful not only for modelled 3D, but also for 3D scans. http://www.juanvilla.es http://bossfight.me
  37. 37. 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
  38. 38. Offline too! Web can be used offline or online. e.g. BPush kiosk by James White designs. http://ibptouch.dyndns.org/?range=26
  39. 39. And of course games :) The Verold engine is well suited to simple games, seamlessly integrated with your website. http://thooloo.com
  40. 40. 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.
  41. 41. 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
  42. 42. MODULE 4: Verold and the Internet of Things
  43. 43. 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
  44. 44. ex. Node-Neurosky
  45. 45. 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)
  46. 46. 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()) } } })
  47. 47. 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}); } });
  48. 48. 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]; } }
  49. 49. Exercise: Leap Motion and Three.js Let’s integrate 3D gestures with our 3D scene!
  50. 50. Download the Leap Motion client app https://www.leapmotion.com/setup
  51. 51. Get LeapJS Learn more about LeapJS at https://developer. leapmotion.com/leapjs/welcome
  52. 52. Verold Leap Template Grab the Verold Leap Template at http://studio.verold.com/projects/5357f75685ce9f0200000058
  53. 53. 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);
  54. 54. 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; };
  55. 55. 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] } ] } ] }
  56. 56. What will you make?
  57. 57. COMMUNICATE IN 3D Ross McKegney, CEO ross.mckegney@verold.com Carlos Sanchez, Senior Web Designer carlos@verold.com

×