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
370
Albers as a Millennial (SeattleJS)
billyroh
0
550
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
使えるデータ基盤を作る技術選定の秘訣 / selecting-the-right-data-technology
pei0804
6
1.2k
RubyKaigi NOC 近況 2025
sorah
1
900
Cursorを全エンジニアに配布 その先に見据えるAI駆動開発の未来 / 2025-05-13-forkwell-ai-study-1-cursor-at-loglass
itohiro73
2
510
Ruby on Rails の楽しみ方
morihirok
1
260
製造業向けIoTソリューション提案資料.pdf
haruki_uiru
0
250
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
5.5k
時間がないなら、つくればいい 〜数十人規模のチームが自律性を発揮するために試しているいくつかのこと〜
kakehashi
PRO
23
5.4k
Part1 GitHubってなんだろう?その1
tomokusaba
3
780
問 1:以下のコンパイラを証明せよ(予告編) #kernelvm / Kernel VM Study Kansai 11th
ytaka23
3
530
UIパフォーマンス最適化: AIを活用して100倍の速度向上を実現した事例
kinocoboy2
0
140
20250514 1Passwordを使い倒す道場 vol.1
east_takumi
0
100
Previewでもここまで追える! Azure AI Foundryで始めるLLMトレース
tomodo_ysys
2
670
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Git: the NoSQL Database
bkeepers
PRO
430
65k
For a Future-Friendly Web
brad_frost
177
9.7k
Automating Front-end Workflow
addyosmani
1370
200k
How to train your dragon (web standard)
notwaldorf
91
6k
GitHub's CSS Performance
jonrohan
1031
460k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.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