WebGL + 3D models by using Three.js Blender Exporter

Slide 1

Slide 1 text

WebGL + 3D models by using  Three.js Blender Exporter Presented by Akihiro Oyamada (@yomotsu) Jan 25, 2015

Slide 2

Slide 2 text

Frontend Engineer at PixelGrid, Inc. @yomotsu recent works • http://yomotsu.github.io/walkthrough/ • http://yomotsu.github.io/xmas2014/ Akihiro Oyamada

Slide 3

Slide 3 text

Download  the hands-on material  https://github.com/tokyowebglmeetup/ h5conf2015_session2/

Slide 4

Slide 4 text

three.js and Blender

Slide 5

Slide 5 text

5 http://threejs.org/

Slide 6

Slide 6 text

6 http://www.blender.org/

Slide 7

Slide 7 text

WebGL + 3D models is much more fun!

Slide 8

Slide 8 text

You don't make 3D models? There are many 3D models with open license!

Slide 9

Slide 9 text

9 http://nasa3d.arc.nasa.gov/

Slide 10

Slide 10 text

10 http://blendswap.com/

Slide 11

Slide 11 text

11 https://www.yobi3d.com/

Slide 12

Slide 12 text

Now you can prepare 3D models. How do we convert  3D models to WebGL?

Slide 13

Slide 13 text

three.js Blender exporter!

Slide 14

Slide 14 text

FYI  We use previous exporter r69  The brand new exporter (r70) is still limited a bit,  as of January 2015

Slide 15

Slide 15 text

How to install  Blender exporter

Slide 16

Slide 16 text

Download three.js r69  for previous blender exporter 16 https://github.com/mrdoob/three.js/releases/tag/r69

Slide 17

Slide 17 text

Although, we don't use this time,  You can get latest three.js package  for the new Exporter,  from GitHub 17 https://github.com/mrdoob/three.js or FYI

Slide 18

Slide 18 text

Copy io_three folder three.js-r69 ... utils exporters blender 2.65 scripts addons io_three

Slide 19

Slide 19 text

Put io_three into following place    Windows: C:\Program Files\Blender Foundation\Blender\2.7X\scripts\addons\ Mac OSX: /Applications/blender.app/Contents/Resources/2.7X/scripts/addons/

Slide 20

Slide 20 text

Can’t Open Blender as a folder in your Mac? Just right click, then Show Package Contents

Slide 21

Slide 21 text

Macintosh HD/Applications/blender.app/Contents/Resources/2.7X/scripts/addons/ C:\Program Files\Blender Foundation\Blender\2.7X\scripts\addons\

Slide 22

Slide 22 text

Launch Blender

Slide 23

Slide 23 text

File > User Preferences

Slide 24

Slide 24 text

Type in three in the search box

Slide 25

Slide 25 text

Mark to activate

Slide 26

Slide 26 text

Press Save User Setting button

Slide 27

Slide 27 text

Now three.js Exporter is ready!

Slide 28

Slide 28 text

1. Download three.js package 2. Copy io_three folder 3. Put it into scripts/addons folder of Blender 4. Active the addon under  User Preferences > Addons SFWJFX

Slide 29

Slide 29 text

How to publish  a 3D model

Slide 30

Slide 30 text

we are gonna use alfaromeo.blend html5conf/session2 _original 1_object alfaromeo.blend ... ...

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Mouse TrackPad Rotate Pan Zoom Select CBTJDPQFSBUJPO + shift + shift

Slide 33

Slide 33 text

Mouse TrackPad Translate Rotate Scale Delete CBTJDPQFSBUJPO → G → R → S → G → R → S Z Z

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Mark following options,  then save it.

Slide 36

Slide 36 text

You will have  a JSON ﬁle and  texture images model data texture textu

Slide 37

Slide 37 text

How to append  the 3D model  into a Web page

Slide 38

Slide 38 text

var width = window.innerWidth, height = window.innerHeight, clock = new THREE.Clock(), scene, camera, renderer, ambientLight, directionalLight, loader, alfaromeo = new THREE.Object3D(); ! scene = new THREE.Scene(); ! camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 ); camera.position.set( 0, 1, 5 ); ! renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( width, height ); document.body.appendChild( renderer.domElement ); write code as usual

Slide 39

Slide 39 text

directionalLight, loader, alfaromeo = new THREE.Object3D(); ! scene = new THREE.Scene(); ! camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 ); camera.position.set( 0, 1, 5 ); ! renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( width, height ); document.body.appendChild( renderer.domElement ); ! ambientLight = new THREE.AmbientLight( 0xffffff ) scene.add( ambientLight ); ! directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 0, 1, 0 ); scene.add( directionalLight ); ! scene.add( new THREE.GridHelper( 10, 1 ) ); ! loader = new THREE.JSONLoader(); write code as usual

Slide 40

Slide 40 text

camera.position.set( 0, 1, 5 ); ! renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( width, height ); document.body.appendChild( renderer.domElement ); ! ambientLight = new THREE.AmbientLight( 0xffffff ) scene.add( ambientLight ); ! directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 0, 1, 0 ); scene.add( directionalLight ); ! scene.add( new THREE.GridHelper( 10, 1 ) ); ! loader = new THREE.JSONLoader(); loader.load( 'alfaromeo.json', function( geometry, materials ) { ! alfaromeo = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) ); ! write code as usual

Slide 41

Slide 41 text

! ambientLight = new THREE.AmbientLight( 0xffffff ) scene.add( ambientLight ); ! directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 0, 1, 0 ); scene.add( directionalLight ); ! scene.add( new THREE.GridHelper( 10, 1 ) ); ! loader = new THREE.JSONLoader(); loader.load( 'alfaromeo.json', function( geometry, materials ) { ! alfaromeo = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) ); ! scene.add( alfaromeo ); ! } ); ! ( function renderLoop () { write code as usual

Slide 42

Slide 42 text

Slide 43

Slide 43 text

directionalLight.position.set( 0, 1, 0 ); scene.add( directionalLight ); ! scene.add( new THREE.GridHelper( 10, 1 ) ); ! loader = new THREE.JSONLoader(); loader.load( 'alfaromeo.json', function( geometry, materials ) { ! alfaromeo = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) ); ! scene.add( alfaromeo ); ! } ); ! ( function renderLoop () { ! requestAnimationFrame( renderLoop ); var elapsed = clock.getElapsedTime(); alfaromeo.rotation.y = elapsed / 2; renderer.render( scene, camera ); use load method

Slide 44

Slide 44 text

Slide 45

Slide 45 text

new THREE.MeshFaceMaterial( materials ) ); ! scene.add( alfaromeo ); ! } ); ! ( function renderLoop () { ! requestAnimationFrame( renderLoop ); var elapsed = clock.getElapsedTime(); alfaromeo.rotation.y = elapsed / 2; renderer.render( scene, camera ); ! } )(); render it!

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

How to publish  a 3D model with animations

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Apply rest pose 1. go to Pose Mode 2. select all bones 3. Pose >   Clear Transform > All 4. ctrl + A 5. Apply Location 6. ctrl + A 7. Apply Rotation 8. ctrl + A 9. Apply Scale

Slide 50

Slide 50 text

Mark following options,  and set Frame step.  then save it.

Slide 51

Slide 51 text

load JSON

Slide 52

Slide 52 text

active skinning

Slide 53

Slide 53 text

make a SkinnedMesh

Slide 54

Slide 54 text

make animations

Slide 55

Slide 55 text

add it

Slide 56

Slide 56 text

start an animation

Slide 57

Slide 57 text

update animations

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

TIPS

Slide 60

Slide 60 text

Blender exporter does not support  CJK letters for names of geometries, materials, bones and others. Replace them to ascii

Slide 61

Slide 61 text

Since WebGL work on web browsers,  .tga image format is not supported. use PNG images instead.

Slide 62

Slide 62 text

three.js does not support IK,  Bake as FK in Blender see http://yomotsu.net/blog/2014/02/19/convert-mmd-for- threejs.html

Slide 63

Slide 63 text

If you publish a model with animations,  set rest pose in Blender see http://stackoverﬂow.com/questions/18752146/blender- exports-a-three-js-animation-bones-rotate-strangely/ 18770716#18770716