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
   

   View Slide

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

   View Slide

3. Download

   the hands-on material

   https://github.com/tokyowebglmeetup/
   h5conf2015_session2/
   

   View Slide

4. three.js and Blender
   

   View Slide

5. 5
   http://threejs.org/
   

   View Slide

6. 6
   http://www.blender.org/
   

   View Slide

7. WebGL + 3D models
   is much more fun!
   

   View Slide

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

   View Slide

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

   View Slide

10. 10
    http://blendswap.com/
    

    View Slide

11. 11
    https://www.yobi3d.com/
    

    View Slide

12. Now you can prepare 3D models.
    How do we convert

    3D models to WebGL?
    

    View Slide

13. three.js Blender exporter!
    

    View Slide

14. FYI

    We use previous exporter r69

    The brand new exporter (r70) is still limited a bit,

    as of January 2015
    

    View Slide

15. How to install

    Blender exporter
    

    View Slide

16. Download three.js r69

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

    View Slide

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
    

    View Slide

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

    View Slide

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/
    

    View Slide

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

    View Slide

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

    View Slide

22. Launch Blender
    

    View Slide

23. File > User Preferences
    

    View Slide

24. Type in three in the search box
    

    View Slide

25. Mark to activate
    

    View Slide

26. Press Save User Setting button
    

    View Slide

27. Now three.js Exporter is ready!
    

    View Slide

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
    

    View Slide

29. How to publish

    a 3D model
    

    View Slide

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

    View Slide

31. View Slide

32. Mouse TrackPad
    Rotate
    Pan
    Zoom
    Select
    CBTJDPQFSBUJPO
    +
    shift +
    shift
    

    View Slide

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

    View Slide

34. View Slide

35. Mark following options,

    then save it.
    

    View Slide

36. You will have

    a JSON file and

    texture images
    model data texture textu
    

    View Slide

37. How to append

    the 3D model

    into a Web page
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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!
    

    View Slide

46. View Slide

47. How to publish

    a 3D model
    with animations
    

    View Slide

48. View Slide

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
    

    View Slide

50. Mark following options,

    and set Frame step.

    then save it.
    

    View Slide

51. load JSON
    

    View Slide

52. active skinning
    

    View Slide

53. make a SkinnedMesh
    

    View Slide

54. make animations
    

    View Slide

55. add it
    

    View Slide

56. start an animation
    

    View Slide

57. update animations
    

    View Slide

58. View Slide

59. TIPS
    

    View Slide

60. Blender exporter does not support

    CJK letters for names of geometries,
    materials, bones and others.
    Replace them to ascii
    

    View Slide

61. Since WebGL work on web browsers,

    .tga image format is not supported.
    use PNG images instead.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

64. The New Blender Exporter

    Features
    

    View Slide

65. • BufferGeometry
    • Precision for float numbers
    • Debug logging
    

    View Slide

66. gl.finish();
    @yomotsu
    

    View Slide