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
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.5k
データ戦略部門 紹介資料
sansan33
PRO
1
3.7k
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
830
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
280
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
330
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
570
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.6k
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
120
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
140
20251010_HCCJP_AdaptiveCloudUpdates
sdosamut
0
130
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
The Pragmatic Product Professional
lauravandoore
36
6.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Ace a Technical Interview
jacobian
280
24k
Side Projects
sachag
455
43k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
RailsConf 2023
tenderlove
30
1.2k
Music & Morning Musume
bryan
46
6.8k
Building Applications with DynamoDB
mza
96
6.7k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Agile that works and the tools we love
rasmusluckow
331
21k
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