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
400
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
70
SmashingConf 2020
vladikoff
0
24
dotJS 2019 - Into WebAssembly
vladikoff
0
22
7 years of three.js
vladikoff
0
140
node.js @ GA 2015
vladikoff
0
460
JS Testing Stack - Full Stack Toronto 2014
vladikoff
1
820
Node.JS Intro - General Assembly
vladikoff
3
480
CSS Preprocessor Workflow with Grunt
vladikoff
3
2.7k
3D Voxel Worlds with voxel.js
vladikoff
1
2k
Other Decks in Technology
See All in Technology
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.9k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
5
13k
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
2
17k
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
480
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
320
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
2k
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
290
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
MobileActOsaka_250704.pdf
akaitadaaki
0
130
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
110
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
220
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
530
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Side Projects
sachag
455
42k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Speed Design
sergeychernyshev
32
1k
Adopting Sorbet at Scale
ufuk
77
9.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Faster Mobile Websites
deanohume
307
31k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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