Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
3D + the Web Platform
Search
vladikoff
May 23, 2017
Technology
0
380
3D + the Web Platform
vladikoff
May 23, 2017
Tweet
Share
More Decks by vladikoff
See All by vladikoff
The state of end-to-end testing for modern web apps
vladikoff
0
68
SmashingConf 2020
vladikoff
0
18
dotJS 2019 - Into WebAssembly
vladikoff
0
19
7 years of three.js
vladikoff
0
130
node.js @ GA 2015
vladikoff
0
440
JS Testing Stack - Full Stack Toronto 2014
vladikoff
1
810
Node.JS Intro - General Assembly
vladikoff
3
470
CSS Preprocessor Workflow with Grunt
vladikoff
3
2.7k
3D Voxel Worlds with voxel.js
vladikoff
1
1.9k
Other Decks in Technology
See All in Technology
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
120
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
28
12k
【若手エンジニア応援LT会】ソフトウェアを学んできた私がインフラエンジニアを目指した理由
kazushi_ohata
0
140
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
120
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
110
Lexical Analysis
shigashiyama
1
150
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
0
980
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
220
dev 補講: プロダクトセキュリティ / Product security overview
wa6sn
1
2.3k
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
490
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
0
110
Amazon Personalizeのレコメンドシステム構築、実際何するの?〜大体10分で具体的なイメージをつかむ〜
kniino
1
100
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Agile that works and the tools we love
rasmusluckow
327
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Transcript
3D + The Web Platform
• WebGL • WebVR • WebAR • WebAssembly
@vladikoff
2011 webgl 1.0 2009 webgl WG 2010 three.js 2017 webgl
2.0, WebAR WG, React VR 2013 shadertoy.com pixi.js 2014 WebVR WG, PlayCanvas 2016 WebVR 1.0 2012 sketchfab.com Future • WebAR 1.0 • three.js w/ webgl 2.0 • Cross-browser WebVR • Better tooling for 3D • VR / AR web browsers
None
Demo Whitestorm.js & nin
WebGL2
Demo webgl2
Virtual Reality
None
None
None
None
Augmented Reality
None
Demo ar1.vf.io
WebAssembly
Demo wasm Thanks to Kamaron Peterson for the amazing WASM
brew install cmake # Get the emscripten SDK git clone
https://github.com/juj/emsdk.git cd emsdk ./emsdk install sdk-incoming-64bit binaryen-master-64bit ./emsdk activate sdk-incoming-64bit binaryen-master-64bit # Make "emcc" available in the PATH source ./emsdk_env.sh # Ready! emcc program.c
hacks.mozilla.org/category/webassembly webassembly.org
None
vf.io/3dweb References • Xbox Controller with Babylon.js: https://xboxdesignlab.xbox.com/en-CA/customize • WebGL
2 demo: https://playcanv.as/e/p/44MRmJRU/ • AFrame Gallery: https://aframe.io/examples/showcase/360-image-gallery/ • A-Painter: https://aframe.io/a-painter/ • Servo on Steam VR: https://www.youtube.com/watch?v=STm7VBBM26A • AR.js: https://github.com/jeromeetienne/AR.js • WASM 3d demo: https://github.com/sessamekesh/wasm-3d-animation-demo • Dubstep: https://www.youtube.com/watch?v=hmzvV--FwnM • WASM-init: https://github.com/shamadee/wasm-init • hacks.mozilla.org/category/webassembly • ninjadev tools: https://github.com/ninjadev/nin • whitestorm.js: https://github.com/WhitestormJS/whitestorm.js