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
Learning through Art: An Introduction to Virtua...
Search
Billy Roh
May 18, 2018
Technology
1
200
Learning through Art: An Introduction to Virtual Reality
Billy Roh
May 18, 2018
Tweet
Share
More Decks by Billy Roh
See All by Billy Roh
Reviving the Dream of the 90s with WebGL
billyroh
0
440
Albers as a Millennial (SeattleJS)
billyroh
0
570
Albers as a Millennial
billyroh
1
610
Albers as a Millennial (WaffleJS)
billyroh
0
180
Building Modern Emails
billyroh
0
440
Other Decks in Technology
See All in Technology
AI導入の理想と現実~コストと浸透〜
oprstchn
0
190
OPENLOGI Company Profile
hr01
0
67k
How Community Opened Global Doors
hiroramos4
PRO
1
140
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
230
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
320
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5k
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
380
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
7.7k
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
560
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
260
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
120
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.5k
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
Unsuck your backbone
ammeep
671
58k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
A designer walks into a library…
pauljervisheath
207
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
BBQ
matthewcrist
89
9.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Become a Pro
speakerdeck
PRO
28
5.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
260
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Transcript
None
Opendoor Work WaffleJS Meetup @billyroh Twitter
Low-end Phone-in-a-box, no dedicated anything High-end Dedicated machines, controllers, sensors
Social Media Games Videos
Not Infinitely Replicable One-Way Street Tight Guardrails Not Infinitely Replicable
One-Way Street Tight Guardrails
Virtual reality is uncharted territory.
None
None
None
None
You are the viewer, not the participant.
None
Virtual reality, but make it personal.
1. Scene Layout 2. Dynamic Entities 3. Interaction & Physics
Creating a scene and populating it Generating entities in the scene on the fly Having the stickers fly and stick as expected %
None
None
None
✅ ✅
Asset Management A-Frame’s asset loading and caching system
None
None
None
None
.obj Skeleton of the model. The physical shape. .mtl Skin
of the model. The materials and colours.
None
Caching is caring. It’s also better for performance. 3D models
Images Audio/Video
None
None
None
Coffee Table 1 flower 1 <a-cylinder> 4 <a-box>
None
Create the surface
Create the legs
Wrap it in <a-entity> for clarity.
None
Console 1 TV 1 <a-box> 4 <a-cylinder>
None
No Lighting Low Contrast
Lighting the Scene Adding lighting to the scene for better
contrast
Ambient Position-agnostic, affects globally Point Position-dependent, affects locally
Spot Only lights in a specific direction
Directional Like ambient, but lights in a specific direction
Hemisphere Like ambient, but with two separate colours
None
Type Ambient, directional, hemisphere, point, spot Distance How far the
light should reach Intensity How bright the light should be Color What colour the light should emit
None
None
12 lighting elements <20 fps 3 lighting elements >30 fps
Default lighting, low contrast. Custom lighting, higher contrast.
Dynamic Generation Appending stickers to the scene on the fly
None
None
1. Get Camera Coordinates
2. Generate Cylinder ✨
3. Set Position and Append
None
Rotating around the y-axis. Rotating around the x-axis.
None
x-axis z-axis -1 -1 +1 +1
Always facing the same way. Facing the direction of the
camera.
Create a mirror image when z < 0.
None
None
None
None
A Brief Lesson on Physics Integrating a physics engine to
the scene
aframe-physics-system
Dynamic Body Reactive to collisions and gravity. Static Body Fixed
position, or fixed animation, unreactive.
None
Directly set the velocity.
None
After a collision, make it a static-body.
None
The Two-Body Problem Altering the default physics body
The model is complex. The body is simple.
The engine makes its best guess. Sometimes it’s wrong.
Create a box in its image.
Make it invisible then you’re done.
Closing Remarks A final demo and things to think about
None
None
No one knows what they’re doing. Don’t be afraid to
make something strange and beautiful.
Twitter @billyroh billyroh.com/obliteration Demo