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
370
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
34
SmashingConf 2020
vladikoff
0
10
dotJS 2019 - Into WebAssembly
vladikoff
0
11
7 years of three.js
vladikoff
0
120
node.js @ GA 2015
vladikoff
0
400
JS Testing Stack - Full Stack Toronto 2014
vladikoff
1
780
Node.JS Intro - General Assembly
vladikoff
3
450
CSS Preprocessor Workflow with Grunt
vladikoff
3
2.6k
3D Voxel Worlds with voxel.js
vladikoff
1
1.9k
Other Decks in Technology
See All in Technology
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.5k
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.9k
JSON攻略法.pdf
miyakemito
8
5k
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
420
データベース02: データベースの概念
trycycle
0
150
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
370
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
280
Hands-on Gemini, the Google DeepMind LLM
meteatamel
1
110
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
5
490
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.6k
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
VS CodeでAWSを操作しよう
smt7174
7
1.6k
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
A designer walks into a library…
pauljervisheath
200
23k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
Optimizing for Happiness
mojombo
370
69k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
GitHub's CSS Performance
jonrohan
1025
450k
GraphQLとの向き合い方2022年版
quramy
32
12k
Infographics Made Easy
chrislema
238
18k
Product Roadmaps are Hard
iamctodd
44
9.7k
Building an army of robots
kneath
300
41k
RailsConf 2023
tenderlove
4
540
The Invisible Customer
myddelton
114
12k
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