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
15
7 years of three.js
vladikoff
0
130
node.js @ GA 2015
vladikoff
0
430
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
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
170
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
一休.comレストランにおけるRustの活用
kymmt90
3
580
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
180
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
480
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
170
初心者に Vue.js を 教えるには
tsukuha
5
390
生成AIとAWS CDKで実現! 自社ブログレビューの効率化
ymae
2
330
Autify Company Deck
autifyhq
1
39k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
425
64k
Facilitating Awesome Meetings
lara
49
6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
How GitHub (no longer) Works
holman
311
140k
Unsuck your backbone
ammeep
668
57k
Thoughts on Productivity
jonyablonski
67
4.3k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Teambox: Starting and Learning
jrom
132
8.7k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
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