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 Virtual Reality
Search
Billy Roh
May 18, 2018
Technology
1
170
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
270
Albers as a Millennial (SeattleJS)
billyroh
0
510
Albers as a Millennial
billyroh
1
600
Albers as a Millennial (WaffleJS)
billyroh
0
170
Building Modern Emails
billyroh
0
430
Other Decks in Technology
See All in Technology
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
簡単に始めるSnowflakeの機械学習
nayuts
1
190
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
760
AOAI Dev Day - Opening Session
yoshidashingo
2
470
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
210
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
MySQLのロックの種類とその競合
yoku0825
6
1.6k
Featured
See All Featured
For a Future-Friendly Web
brad_frost
173
9.2k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Become a Pro
speakerdeck
PRO
15
4.8k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
The Invisible Side of Design
smashingmag
294
50k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
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