WebGL Libs for  WebApp Frameworks

Presented by Akihiro Oyamada (@yomotsu) Sep 24, 2017 WebGL Libs
for  WebApp Frameworks

Frontend Engineer at PixelGrid, Inc. Akihiro Oyamada @yomotsu https://github.com/mrdoob/three.js/graphs/contributors

https://twitter.com/aniplex_plus/status/779261285783392256 http://yomotsu.net/blog/assets/2016-12-25-xmas/ Made with +

webpack three.js pixi.js etc React Vue.js Angular etc three.js logo:
https://github.com/mrdoob/three.js/issues/2789

Tips for development with frameworks + WebGL libs: 1. Import
three.js plugins in webpack. 2. Handle Canvas and Renderer as a WebApp view. 3. Remove Canvas and GL context appropriately. 4. Assets compressing. Agenda

Import three.js plugins  in webpack

• OrbitControls • EﬀectComposer and Passes • CSS3DRenderer • Loaders
and others. Plugins for three.js

Plugins do not support  es6 module import/export Problem so far.

webpack imports-loader Solution https://github.com/mrdoob/three.js/issues/9562#issuecomment-307092696

import * as THREE from 'three'; THREE.OrbitControls = require( 'imports-loader?THREE!
exports-loader?THREE.OrbitControls!../node_modules/ three/examples/js/controls/OrbitControls.js' ); // snip const controls = new THREE.OrbitControls( camera );

demo http://localhost:8080/

Warnings will be ignored in the production build. http://localhost:8000/demo1-webpack/

Handle Canvas  as a WebApp view

Canvas element has to be handled  by the WebApp framework.
Problem

Use mounted canvas,  then bind Renderer in  mounted or  componentDidMount
hock. Solution

<template> <canvas></canvas> </template> <script> import * as THREE from 'three';
export default { name: 'view-3d', data () { return { width: 200, height: 200 mount a canvas element

} }, mounted() { const width = this.width; const height
= this.height; const loader = new THREE.JSONLoader(); // (snip) this.renderer = new THREE.WebGLRenderer( { canvas: this.$el, // <-- bind to mouted canvas antialias: true, stencil: false } );

<template> <canvas></canvas> </template> <script> import * as PIXI from 'pixi.js';
export default { data () { return {} }, mounted() {

return {} }, mounted() { this.renderer = new PIXI.WebGLRenderer( {
width: 300, height: 300, view: this.$el, antialias: true, transparent: false, backgroundColor: 0xcccccc } );

demo http://localhost:8000/demo2-mount-three/ http://localhost:8000/demo2-mount-pixi/ http://localhost:8000/demo2-mount-chart/

Removing  Canvas and GL context

If canvas and renderer were removed inappropriately. It causes memory
leaking. Problem

Clear cache and unbind GL context in  beforeDestroy or  componentWillUnmount
hock. Solution

tick() { if ( ! this.running ) return; requestAnimationFrame( ()
=> this.tick() ); this.mesh.rotation.y += 0.03; this.renderer.render( this.scene, this.camera ); } Your render loop

beforeDestroy() { this.running = false; while ( this.scene.children.length > 0
) { const object = this.scene.children[ this.scene.children.length - 1 ]; deepDispose( object ); this.scene.remove( object ); } this.renderer.dispose(); this.renderer.forceContextLoss(); this.renderer.context = undefined; this.renderer.domElement = undefined; // until next garbage collection this.$el.width = 1; this.$el.height = 1; }, Dispose all objects

beforeDestroy() { this.running = false; while ( this.scene.children.length > 0
) { const object = this.scene.children[ this.scene.children.length - 1 ]; deepDispose( object ); this.scene.remove( object ); } this.renderer.dispose(); this.renderer.forceContextLoss(); this.renderer.context = undefined; this.renderer.domElement = undefined; // until next garbage collection this.$el.width = 1; this.$el.height = 1; }, Children of scene consist of • Meshes • Lights • Object3d

function deepDispose( object3D ) { object3D.traverse( object3D => dispose( object3D
) ); } function dispose ( object3D ) { if ( !! object3D.geometry ) { object3D.geometry.dispose(); object3D.geometry = undefined; } if ( !! object3D.material && object3D.material instanceof Array ) { object3D.material.forEach( material => disposeMaterial( material ) );

function disposeMaterial( material ) { if ( !! material.map )
{ material.map.dispose(); material.map = undefined; } // do that for normalMap, specularMap and bumpMap too material.dispose(); material = undefined; }

Before unmount: • Stop render loop. • Dispose all geoms,
materials and textures recursively. • Release renderer and context. • Resize canvas to 1px * 1px.

demo http://localhost:8000/demo3-unmount/

tick() { if ( ! this.running ) return; requestAnimationFrame( ()
=> this.tick() );  this.movieClip.rotation += 0.03; this.renderer.render( this.stage ); }

beforeDestroy() { this.running = false; const destroyChildren = true; this.stage.destroy(
destroyChildren ); this.renderer.destroy(); this.renderer.view = undefined; // until next garbage collection this.$el.width = 1; this.$el.height = 1; },

Before unmount: • Stop render loop. • Destroy the stage
with deep option. • Release renderer and context. • Resize canvas to 1px * 1px.

FYI: May not necessary to remove the canvas. It may
cause flickering. Consider to just hide it.

<template> <button type="button" @click="toggleShow”> toggleShow </button> <my-canvas-component v-if="show"></my-canvas-component> </template>

<template> <button type="button" @click="toggleShow”> toggleShow </button> <my-canvas-component v-show="show"></my-canvas-component> </template>

demo http://localhost:8000/demo3-show-toggle/

Assets compressing

The ﬁle size of 3D objects are big. Problem

Compress them. Solution

original 16,513KB zgip 4,585KB draco 344KB

• gZip and Zip reduce 70%. • Draco reduces 98%.

Draco loader for three.js

Prepare draco libs https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders/draco

Load only DRACOLoader.js into your JS. Others will be loaded
by Loader.

'wasm' : 'js'; const dracoLoader = new THREE.DRACOLoader( DRACO_PATH, { type: DRACO_TYPE } ); dracoLoader.load( './model/rameses.drc', ( geometry ) => { const material = new THREE.MeshStandardMaterial( { map: texture } ); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); The decoder will be loaded from external file.  You need set the path to it.

'wasm' : 'js'; const dracoLoader = new THREE.DRACOLoader( DRACO_PATH, { type: DRACO_TYPE } ); dracoLoader.load( './model/rameses.drc', ( geometry ) => { const material = new THREE.MeshStandardMaterial( { map: texture } ); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); The recorder is available in both Wasm and JS. Use preferred version.

'wasm' : 'js'; const dracoLoader = new THREE.DRACOLoader( DRACO_PATH, { type: DRACO_TYPE } ); dracoLoader.load( './model/rameses.drc', ( geometry ) => { const material = new THREE.MeshStandardMaterial( { map: texture } ); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); Make a loader instance for three.js

'wasm' : 'js'; const dracoLoader = new THREE.DRACOLoader( DRACO_PATH, { type: DRACO_TYPE } ); dracoLoader.load( './model/rameses.drc', ( geometry ) => { const material = new THREE.MeshStandardMaterial( { map: texture } ); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); } ); Load a drc file

'wasm' : 'js'; const dracoLoader = new THREE.DRACOLoader( DRACO_PATH, { type: DRACO_TYPE } ); dracoLoader.load( './model/rameses.drc', ( geometry ) => { const material = new THREE.MeshStandardMaterial( { map: texture } ); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); } );

demo http://yomotsu.net/blog/assets/2017-09-18-draco/demo/demo1.html

For more info, read my blog post:  http://yomotsu.net/blog/2017/09/18/draco.html

Unzip JS lib is available on NPM as well:  https://www.npmjs.com/package/zip-loader

• Pass renderer.render() if not needed. • Store as numbers:
colour, time etc… Other things

three.js / pixi.js and others can be  a part of
WebApp! Not only for artistic projects. Conclusion

For Viewer, Simulator, DataVisualization and more! Conclusion

gl.ﬁnish(); @yomotsu All demos can be found: https://www.dropbox.com/sh/hx2zgyh38i1n4z3/AACdSlmGcI3OOZ9Hv_wMU1kua?dl=0

WebGL Libs for WebApp Frameworks

WebGL Libs for WebApp Frameworks

More Decks by yomotsu

Other Decks in Programming

Featured

Transcript

WebGL Libs for  WebApp Frameworks

WebGL Libs for  WebApp Frameworks