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
210
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
500
Albers as a Millennial (SeattleJS)
billyroh
0
580
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
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
160
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
310
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
200
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
110
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
180
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
kimjaewook
0
130
CoRL 2025 Survey
harukiabe
0
140
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
4
360
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
170
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
130
Adapty_東京AI祭ハッカソン2025ピッチスライド
shinoyamada
0
270
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
7
4.3k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Practical Orchestrator
shlominoach
190
11k
Fireside Chat
paigeccino
40
3.7k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Music & Morning Musume
bryan
46
6.8k
4 Signs Your Business is Dying
shpigford
185
22k
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