A WebGL scene in 30 mins
51
Create an Interactive 3D WebGL Scene
-
Upload
jens-arps -
Category
Technology
-
view
811 -
download
4
description
The slides from my talk at CologneJS in February 2014. The example code is available here: https://github.com/jensarps/cgnjs-feb-2014
Transcript of A WebGL scene in 30 mins
Create an Interactive 3D WebGL Scene
Create an Interactive 3D WebGL Scene
… in half an hour!
http://www.flickr.com/photos/kevlar/5152987233
No Rocket Science!
http://www.flickr.com/photos/kevlar/5152987233
No Rocket Science!
No Danger!
Step 0:
Getting a Model
Step 0: Getting a Model
Where from?
Model Repositories
Step 0: Getting a Model
Where from?
Model Repositories
http://www.turbosquid.com/http://tf3dm.com/
…
Step 0: Getting a Model
Where from?
Convert Game Assets
Step 0: Getting a Model
Format
#1: Lightwave (.obj + .mtl)
Step 0: Getting a Model
Format
#2: COLLADA (.dae)
Step 0: Getting a Model
Format
#2: COLLADA (.dae)
http://sketchup.google.com/3dwarehouse/
Step 0: Getting a Model
Considerations
Size/Complexity
License
Step 0: Getting a Model
Tools
Blender
Step 0: Getting a Model
Tools
Meshlab
Step 1:
Loading into WebGL
Step 1: Loading into WebGL
WebGL Wrappers/Libraries
Step 1: Loading into WebGL
WebGL Wrappers/Libraries
three.js
Babylon.js
GLGE
Step 1: Loading into WebGL
WebGL Wrappers/Libraries
three.js
Babylon.js
GLGE
Step 1: Loading into WebGL
WebGL Wrappers/Libraries
All available on GitHub
Step 2:
User Input
Step 2: User Input
Wrappers/Libraries
three.js controls
Step 2: User Input
Wrappers/Libraries
decoupled-input
Step 2: User Input
Wrappers/Libraries
decoupled-input
https://github.com/jensarps/decoupled-input
Step 3:
Adding some Spice
Step 3: Adding some Spice
Visuals
ClearColor
Fog
Lights
Step 3: Adding some Spice
Technical
Window resize
Pausing
Step 4:
HTML5 Goodness
Step 4: HTML5 Goodness
New APIs
Step 4: HTML5 Goodness
New APIs
Fullscreen
Step 4: HTML5 Goodness
New APIs
PointerLock
Step 4: HTML5 Goodness
New APIs
GamePad
Step 4: HTML5 Goodness
And More:
WebAudio
PageVisibility
SpeechRecognition
…
Step 4: HTML5 Goodness
Tools:
https://github.com/toji/game-shim
Step 5:
Collision Detection
Step 5: Collision Detection
Many Concepts
Step 5: Collision Detection
Many Concepts
Heightmap
Step 5: Collision Detection
Many Concepts
Raycasting
Step 6:
The Aftermath
Step 6: The Aftermath
A Well-Performing Render Loop
Step 6: The Aftermath
A Well-Performing Render Loop
1) Do everything inside of the loop.
Step 6: The Aftermath
A Well-Performing Render Loop
2) Be kind to your memory.
Step 6: The Aftermath
A Well-Performing Render Loop
3) Optimize hot functions.
Step 6: The Aftermath
Read about Entity-Component Architecture
Step 7:
Further
Step 7: Further
Get Inspired!
Step 7: Further
Get Inspired!
Read WebGL around the Nethttp://learningwebgl.com/blog/
Step 7: Further
Get Inspired!
Follow three.js on G+https://plus.google.com/u/0/104300307601542851567/posts
Check out featured projectshttp://threejs.org/
Step 7: Further
Play Around!
Step 7: Further
Play Around!
Check out Jerome Etienne‘s three.xhttp://jeromeetienne.github.io/threex/
Step 7: Further
Play Around!
Go shoot at balls:http://jensarps.github.io/shooting-at-balls/
thanks!
blog: jensarps.decode: github.com/jensarps
social: google.com/+JensArps
the rest: google.com/search?q=Jens+Arps
