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
390
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
69
SmashingConf 2020
vladikoff
0
22
dotJS 2019 - Into WebAssembly
vladikoff
0
21
7 years of three.js
vladikoff
0
140
node.js @ GA 2015
vladikoff
0
450
JS Testing Stack - Full Stack Toronto 2014
vladikoff
1
810
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
EM初心者として半年間マネジャーをやってみて分かったこと
sansantech
PRO
0
190
DIってなんだか難しい? 依存という概念を「使う・使われる」 という言葉で整理しよう
akinoriakatsuka
1
730
空が堕ち、大地が割れ、海が涸れた日~もしも愛用しているフレームワークが開発停止したら?~ #phperkaigi 2025
77web
2
950
PHPでアクターモデルを活用したSagaパターンの実践法 / php-saga-pattern-with-actor-model
ytake
0
830
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
110
Redefine_Possible
upsider_tech
0
150
年末調整プロダクトの内部品質改善活動について
kaomi_wombat
0
130
PostgreSQL Unconference #52 pg_tde
nori_shinoda
0
110
SaaSプロダクト開発におけるバグの早期検出のためのAcceptance testの取り組み
kworkdev
PRO
0
140
これからクラウドエンジニアになるために本当に必要なスキル 5選
hiyanger
1
440
職種に名前が付く、ということ/The fact that a job title has a name
bitkey
1
200
ドメインイベントを活用したPHPコードのリファクタリング
kajitack
2
790
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
45
14k
Building an army of robots
kneath
304
45k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Practical Orchestrator
shlominoach
186
10k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
101
18k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
A better future with KSS
kneath
238
17k
KATA
mclloyd
29
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
14
1.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
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