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 ...

    ...
31. None

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
34. None

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!
46. None

47. How to publish
 a 3D model with animations

48. None

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

58. None

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