Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
WebGL / WebVR for FrontEnd Engineer
yomotsu
February 25, 2017
Technology
4
4.2k
WebGL / WebVR for FrontEnd Engineer
yomotsu
February 25, 2017
Tweet
Share
More Decks by yomotsu
See All by yomotsu
PBR in three.js
yomotsu
1
530
dialog要素でつくるモーダルダイアログ
yomotsu
0
590
IE to Edge
yomotsu
1
160
A Camera Control Library for three.js
yomotsu
1
680
Let’s try AR on mobile Web with <model-viewer>
yomotsu
0
420
WebXR: Beyond WebGL
yomotsu
2
1.3k
Non-DOM components with WebGL in Vue.js
yomotsu
5
11k
WebGL Libs for WebApp Frameworks
yomotsu
4
7.4k
How do you show assets loading?
yomotsu
1
900
Other Decks in Technology
See All in Technology
JAWS-UG 横浜 #54 資料
takakuni
0
190
Akiba-dot-SaaS-ExtraHop
sakaitakeshi
1
110
DNS権威サーバのクラウドサービス向けに行われた攻撃および対策 / DNS Pseudo-Random Subdomain Attack and mitigations
kazeburo
5
1.2k
マイクロサービス宣言から8年 振り返りとこれから / Eight Years After the Microservices Declaration A Look Back and A Look Ahead
eisuke
2
130
立ち止まっても、寄り道しても / even if I stop, even if I take a detour
katoaz
0
170
OCI技術資料 : ロード・バランサー 詳細 / Load Balancer 200
ocise
2
7.1k
マネーフォワードクラウドを支える事業者基盤
machisuke
0
520
AI Services 概要 / AI Services overview
oracle4engineer
PRO
0
160
メドレー エンジニア採用資料/ Medley Engineer Guide
medley
3
5k
経営統合をきっかけに会社をエンジニアリングした話 / btconjp-2023
carta_engineering
0
140
Optimizing your Swift code
kateinoigakukun
0
1.3k
インフラ技術基礎勉強会 開催概要
toru_kubota
0
150
Featured
See All Featured
Thoughts on Productivity
jonyablonski
49
2.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
338
18k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
Visualization
eitanlees
128
12k
How to Ace a Technical Interview
jacobian
270
21k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
In The Pink: A Labor of Love
frogandcode
132
21k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Bootstrapping a Software Product
garrettdimon
299
110k
Building Your Own Lightsaber
phodgson
96
4.9k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
Infographics Made Easy
chrislema
235
17k
Transcript
WebGL / WebVR for FrontEnd Engineer Presented by Akihiro Oyamada
(@yomotsu) Feb 25, 2017
Frontend Engineer at PixelGrid, Inc. Akihiro Oyamada @yomotsu
I don’t talk about WebVR much… Disclaimer...
None
http://yomotsu.net/blog/assets/2016-12-25-xmas/ http://www.welcometofillory.com/ https://plus360degrees.com/uxcars/ http://www.playkeepout.com/
Almost native app looks! Cuz it works on top of
native graphic APIs
None
Sounds difficult? There are libraries!
None
Pros • Strong and large community • Docs and examples
• JS friendly easy APIs • Low level WebGL access Cons • Doesn't follow semver, Breaking changes sometime • Tricky garbage collection
None
None
None
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(
60, width / height, 1, 1000 ); camera.position.set( 0, 0, 5 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( width, height ); document.body.appendChild( renderer.domElement ); var light = new THREE.HemisphereLight( 0x443333, 0x332222, 2 ); scene.add( light ); var geometry = new THREE.SphereGeometry( 2, 2, 2 ); var material = new THREE.MeshPhongMaterial( { color: 0xff0000 } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer.render( scene, camera );
let’s move onto the main topics for today
• Avoid unnecessary rendering • Reduce drawcalls • Avoid frequent
texture uploading • Consider to use GPU • Compress 3D assets
Avoid unnecessary rendering
Continuously re-rendering Better
demo 19 http://localhost:8000/1_re-rendering/bad.html http://localhost:8000/1_re-rendering/better.html
( function anim () { requestAnimationFrame( anim ); renderer.render( scene,
camera ); } )(); Re-rendering may unnecessary
window.addEventListener( 'resize', function () { const width = window.innerWidth; const
height = window.innerHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize( width, height ); renderer.render( scene, camera ); // <- don't do this! } ); Re-rendering may unnecessary
( function anim () { requestAnimationFrame( anim ); if (
!myApp.needsUpdate ) { return; } renderer.render( scene, camera ); } )(); Pass re-rendering if unnecessary
var prevPosition = new THREE.Vector3(); var checkCameraPosition = function ()
{ if ( !approximatelyEqual( camera.position, prevPosition ) ) { myApp.needsUpdate = true; } prevPosition.copy( camera.position ); }; Checking “needsUpdate”
window.addEventListener( 'resize', function () { const width = window.innerWidth; const
height = window.innerHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize( width, height ); myApp.needsUpdate = true; // for next rAF } ); Checking “needsUpdate”
Reduce drawcalls
Continuously repainting Better 8 drawcalls 1 drawcall
demo 27 http://localhost:8000/2_texture-atlas/1_house1.html http://localhost:8000/2_texture-atlas/2_house2.html
.FSHFNBUFSJBMT
3 drawcalls for 3 objects 1 drawcall 3 objects
demo 30 http://localhost:8000/2_texture-atlas/3_house-multi1.html http://localhost:8000/2_texture-atlas/4_house-multi2.html http://localhost:8000/2_texture-atlas/5_house-multi3.html
var houseGeometry = ...; var houseGeometry2 = ...; houseGeometry2.applyMatrix( new
THREE.Matrix4().makeTranslation( -10, 0, 0 ) ); houseGeometry.merge( houseGeometry2 ); Merge geometries
Avoid frequent texture uploading
None
demo 34 http://localhost:8000/3_spriteAnim/bad.html http://localhost:8000/3_spriteAnim/better.html
None
None
$16BOE(16 BSFQIZTJDBMMZTFQBSBUFE
( function anim () { var elapsed = clock.getElapsedTime(); requestAnimationFrame(
anim ); texture.image = images[ frame ]; texture.needsUpdate = true; renderer.render( scene, camera ); frame = ( elapsed * 20 % images.length ) | 0; } )(); Bad: Replacing image
( function anim () { var elapsed = clock.getElapsedTime(); requestAnimationFrame(
anim ); texture.offset.set( frame % frameCol / frameCol, ( frameRow - 1 ) / frameRow - ( ( frame / frameCol ) | 0 ) / frameRow ); renderer.render( scene, camera ); frame = ( elapsed * 20 % frameLength ) | 0; } )(); Better: Use UV offset
None
var rtt = new THREE.WebGLRenderTarget( 512, 512, { minFilter: THREE.LinearFilter,
magFilter: THREE.NearestFilter, format: THREE.RGBFormat } ); renderer.render( sceneRTT, cameraRTT, rtt, true ); RTT
GPU may be utilised
None
demo 44 http://localhost:8000/4_particle/bad.html http://localhost:8000/4_particle/better.html
requestAnimationFrame( anim ); for ( var i = 0, l
= particleLength; i < l; i ++ ) { if ( geometry.attributes.position.array[ i * 3 + 1 ] > - boxHeight * 0.5 ) { geometry.attributes.position.array[ i * 3 + 1 ] -= delta; } else { geometry.attributes.position.array[ i * 3 + 1 ] = boxHeight * 0.5; } }; geometry.attributes.position.needsUpdate = true; Calc in CPU
uniform float time; uniform float height; uniform float scale; void
main () { vec3 pos = vec3( position.x, position.y - time * 1.0, position.z ); pos.y = mod( pos.y, height ) - ( height * 0.5 ); vec4 mvPosition = modelViewMatrix * vec4( pos, 1.0 ); gl_Position = projectionMatrix * mvPosition; gl_PointSize = 1.0; } Calc in GPU (Shader)
Compress 3D assets
3D Model file consists of mostly numbers
3D scanned(ish) Model file
http://localhost:8000/5_compress/bad.html
None
Save 70% of size!
None
zip is an archive format
Multiple files in one zip file
• Contains multi files • Compressed One file • Arrows
you to make a progressive bar • UnZip JS libs are available on GitHub
None
None
https://opensource.googleblog.com/2017/01/introducing-draco-compression-for-3d.html As of Jan 13, 2017
• Compressing lib for 3D assets • Developed by Google
• Decompressor is available in JS (but 800kb emscripten) Might be still early…?
Conclusion
WebGL is… • Click, then it will open • No
installing, but loading • Devices/Browsers are unspecified
• Write your code efficiently • CPU and GPU are
separated • Compress 3D assets Conclusion
WebVR?
https://www.youtube.com/watch?v=cBvCS78ZC1c
https://w3c.github.io/webvr/
Navigator.getVRDisplays() params and states
Navigator.getVRDisplays() params and states •d[ i ].VREyeParameters •FOV •offset (eye
transition) •d[ i ].getPose() •position •orientation (quaternion) and etc…
WebVR is a small API!
None
None
One more thing
None
... mounted () { const scene = this.getScene(); scene.add( this.mesh
); }, beforeDestroy () { const scene = this.getScene(); // optional // this.mesh.material.map.dispose(); // this.mesh.geometry.dispose(); // this.mesh.material.dispose(); scene.remove( this.mesh ); },
WebGL can be used with WebApp frameworks!
for FrontEnd Engineer Presented by Akihiro Oyamada (@yomotsu) Feb
25, 2017 WebGL / WebVR
three.js for FrontEnd Engineer Presented by Akihiro Oyamada (@yomotsu) Feb
25, 2017
gl.finish(); @yomotsu
Ξϯέʔτʹ ͝ڠྗ͍ͩ͘͞ http://bit.ly/2meQNnL gl.finish(); @yomotsu