$30 off During Our Annual Pro Sale. View Details »

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

yomotsu
January 25, 2015

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

yomotsu

January 25, 2015
Tweet

More Decks by yomotsu

Other Decks in Programming

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