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

Transcript

1. WebGL + 3D models by using
 Three.js Blender Exporter Presented by Akihiro Oyamada (@yomotsu) Jan 25, 2015
2. Frontend Engineer at PixelGrid, Inc. @yomotsu recent works • http://yomotsu.github.io/walkthrough/ • http://yomotsu.github.io/xmas2014/ Akihiro Oyamada
3. Download
 the hands-on material
 https://github.com/tokyowebglmeetup/ h5conf2015_session2/
4. three.js and Blender
5. 5 http://threejs.org/
6. 6 http://www.blender.org/
7. WebGL + 3D models is much more fun!
8. You don't make 3D models? There are many 3D models with open license!
9. 9 http://nasa3d.arc.nasa.gov/
10. 10 http://blendswap.com/
11. 11 https://www.yobi3d.com/
12. Now you can prepare 3D models. How do we convert
 3D models to WebGL?
13. three.js Blender exporter!
14. FYI
 We use previous exporter r69
 The brand new exporter (r70) is still limited a bit,
 as of January 2015
15. How to install
 Blender exporter
16. Download three.js r69
 for previous blender exporter 16 https://github.com/mrdoob/three.js/releases/tag/r69
17. 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
18. Copy io_three folder three.js-r69 ... utils exporters blender 2.65 scripts addons io_three
19. 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/
20. Can’t Open Blender as a folder in your Mac? Just right click, then Show Package Contents
21. Macintosh HD/Applications/blender.app/Contents/Resources/2.7X/scripts/addons/ C:\Program Files\Blender Foundation\Blender\2.7X\scripts\addons\
22. Launch Blender
23. File > User Preferences
24. Type in three in the search box
25. Mark to activate
26. Press Save User Setting button
27. Now three.js Exporter is ready!
28. 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
29. How to publish
 a 3D model
30. we are gonna use alfaromeo.blend html5conf/session2 _original 1_object alfaromeo.blend ... ...
32. Mouse TrackPad Rotate Pan Zoom Select CBTJD
    PQFSBUJPO + shift + shift
33. Mouse TrackPad Translate Rotate Scale Delete CBTJD
    PQFSBUJPO → G → R → S → G → R → S Z Z
35. Mark following options,
 then save it.
36. You will have
 a JSON file and
 texture images model data texture textu
37. How to append
 the 3D model
 into a Web page
38. 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
39. 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
40. 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
41. ! 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
42. ! 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 () { make a loader
43. 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
44. 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 ); make call back
45. 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!
47. How to publish
 a 3D model with animations
49. 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
50. Mark following options,
 and set Frame step.
 then save it.
51. load JSON
52. active skinning
53. make a SkinnedMesh
54. make animations
55. add it
56. start an animation
57. update animations
59. TIPS
60. Blender exporter does not support
 CJK letters for names of geometries, materials, bones and others. Replace them to ascii
61. Since WebGL work on web browsers,
 .tga image format is not supported. use PNG images instead.
62. three.js does not support IK,
 Bake as FK in Blender see http://yomotsu.net/blog/2014/02/19/convert-mmd-for- threejs.html
63. If you publish a model with animations,
 set rest pose in Blender see http://stackoverflow.com/questions/18752146/blender- exports-a-three-js-animation-bones-rotate-strangely/ 18770716#18770716
64. The New Blender Exporter
 Features
65. • BufferGeometry • Precision for float numbers • Debug logging
66. gl.finish(); @yomotsu