SlideShare a Scribd company logo
1 of 26
Download to read offline
A brief look at visionOS
Ray Yuan Liu
Hi!
劉瑞元 Ray Yuan Liu
- Software Developer
- Tech Lover
- JetBrains 粉絲
Outline
- visionOS SDK
- UI Interactions
- RealityKit
- 3D Model
1
How can I get into VISION PRO 👓
- You can’t purchase a kit yet. (US only)
- Simulator in XCode 15
2
Download Vision SDK
3
Let us replicate a website
- The Inspiration 4 Website
4
UI interactions in Spatial Computing
- Eyes
- Pinch
- New glass effects: glassBackgroundEffect
- Volumetric
z axis
5
glassBackgroundEffect
6
RealityKit
- RealityView
- 3D object as a window
- Work with SwiftUI
- Full immersive Scene
7
RealityView
Load
Scene.usdz
from realitykit
content bundle
Add entity to
RealityView
8
3D object as a window
a volumetric
window
9
3D object as a window
10
Work with SwiftUI
Add view as
attachment
Adjust view
in
RealityView
11
Work with SwiftUI
12
Full immersive Scene
Also can be
a .mixed
mode
13
3D Object
- Model Editor: Reality Composer Pro
- Like Unity
- Built-in particle projector
- Swift code can interact with 3D objects
- Component
- A representation of a geometry or a behavior that you apply to an entity.
- Skybox light (One of a predefined component)
- System
- Use systems to implement any behavior or logic that updates entities every frame.
- e.g. rotation
14
Reality Composer Pro
15
Component
e.g. built-in light effect
Add
components
to a entity
16
17
System
E.g. Custom System with a custom components
Update per
frame 18
System
Register into main entry point
Custom
components and
systems should
be registered
19
System
Custom component: set and get
20
Can I use Unity 3D over Reality Composer Pro?
- Only Pro and Enterprise version can use Vision SDK
- Free version is NOT supported
- Unity Pro annual prepaid pricing will be $2,040/yr
21
Where to get free resources of 3D object?
- Sketchfab
- Download usdz file
22
Let’s
Walkthrough…
23
References
- visionOS Development Fundamentals - Build A VisionOS App From Scratch
- https://www.youtube.com/watch?v=eMA1Vd1nc9M
- RealityKit Documentation
- https://developer.apple.com/documentation/realitykit
24
- https://rayuan.tw
- me@rayuan.tw
- https://www.linkedin.com/in/rayyuanliu/
Find me at

More Related Content

Similar to A brief look at visionOS - How to develop app on Apple's Vision Pro

Getting started with immersive technologies
Getting started with immersive technologiesGetting started with immersive technologies
Getting started with immersive technologiesUchechukwu Obimma
 
Front matter: Next Level Front End Deployments on OpenShift
Front matter: Next Level Front End Deployments on OpenShiftFront matter: Next Level Front End Deployments on OpenShift
Front matter: Next Level Front End Deployments on OpenShiftLance Ball
 
Loopback: An Easy and Robust Mobile Backend - Michael Hantler & Aviv Callande...
Loopback: An Easy and Robust Mobile Backend - Michael Hantler & Aviv Callande...Loopback: An Easy and Robust Mobile Backend - Michael Hantler & Aviv Callande...
Loopback: An Easy and Robust Mobile Backend - Michael Hantler & Aviv Callande...Codemotion Tel Aviv
 
Building Browser VR Experience in React VR
Building Browser VR Experience in React VRBuilding Browser VR Experience in React VR
Building Browser VR Experience in React VRMarcin Mincer
 
Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"Fwdays
 
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...Gavin Pickin
 
FrenchKit: SwiftUI Data Flow with Redux
FrenchKit: SwiftUI Data Flow with ReduxFrenchKit: SwiftUI Data Flow with Redux
FrenchKit: SwiftUI Data Flow with ReduxThomasRicouard
 
Responsive Design with Axure 7.0’s Adaptive Views
Responsive Design with Axure 7.0’s Adaptive ViewsResponsive Design with Axure 7.0’s Adaptive Views
Responsive Design with Axure 7.0’s Adaptive ViewsSvetlin Denkov
 
From React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I startedFrom React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I startedsparkfabrik
 
Flutter vs ReactNative
Flutter vs ReactNativeFlutter vs ReactNative
Flutter vs ReactNativeSumit Sahoo
 
React Native for multi-platform mobile applications
React Native for multi-platform mobile applicationsReact Native for multi-platform mobile applications
React Native for multi-platform mobile applicationsMatteo Manchi
 
Layar Q&A June 2015
Layar Q&A June 2015Layar Q&A June 2015
Layar Q&A June 2015Layar
 
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...Ortus Solutions, Corp
 
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React NativeEric Deng
 
Augmenting reality: Bring digital objects into the real world
Augmenting reality: Bring digital objects into the real worldAugmenting reality: Bring digital objects into the real world
Augmenting reality: Bring digital objects into the real worldUnity Technologies
 

Similar to A brief look at visionOS - How to develop app on Apple's Vision Pro (20)

Getting started with android studio
Getting started with android studioGetting started with android studio
Getting started with android studio
 
Getting started with immersive technologies
Getting started with immersive technologiesGetting started with immersive technologies
Getting started with immersive technologies
 
Front matter: Next Level Front End Deployments on OpenShift
Front matter: Next Level Front End Deployments on OpenShiftFront matter: Next Level Front End Deployments on OpenShift
Front matter: Next Level Front End Deployments on OpenShift
 
Loopback: An Easy and Robust Mobile Backend - Michael Hantler & Aviv Callande...
Loopback: An Easy and Robust Mobile Backend - Michael Hantler & Aviv Callande...Loopback: An Easy and Robust Mobile Backend - Michael Hantler & Aviv Callande...
Loopback: An Easy and Robust Mobile Backend - Michael Hantler & Aviv Callande...
 
React native
React nativeReact native
React native
 
Building Browser VR Experience in React VR
Building Browser VR Experience in React VRBuilding Browser VR Experience in React VR
Building Browser VR Experience in React VR
 
Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"
 
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
 
FrenchKit: SwiftUI Data Flow with Redux
FrenchKit: SwiftUI Data Flow with ReduxFrenchKit: SwiftUI Data Flow with Redux
FrenchKit: SwiftUI Data Flow with Redux
 
Responsive Design with Axure 7.0’s Adaptive Views
Responsive Design with Axure 7.0’s Adaptive ViewsResponsive Design with Axure 7.0’s Adaptive Views
Responsive Design with Axure 7.0’s Adaptive Views
 
Devraj_Nataraj_CV_PDF
Devraj_Nataraj_CV_PDFDevraj_Nataraj_CV_PDF
Devraj_Nataraj_CV_PDF
 
From React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I startedFrom React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I started
 
virtual_chess
virtual_chessvirtual_chess
virtual_chess
 
Flutter vs ReactNative
Flutter vs ReactNativeFlutter vs ReactNative
Flutter vs ReactNative
 
React Native for multi-platform mobile applications
React Native for multi-platform mobile applicationsReact Native for multi-platform mobile applications
React Native for multi-platform mobile applications
 
Layar Q&A June 2015
Layar Q&A June 2015Layar Q&A June 2015
Layar Q&A June 2015
 
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
 
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native
 
Swt 2009
Swt 2009Swt 2009
Swt 2009
 
Augmenting reality: Bring digital objects into the real world
Augmenting reality: Bring digital objects into the real worldAugmenting reality: Bring digital objects into the real world
Augmenting reality: Bring digital objects into the real world
 

Recently uploaded

Involute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdf
Involute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdfInvolute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdf
Involute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdfJNTUA
 
1893-part-1-2016 for Earthquake load design
1893-part-1-2016 for Earthquake load design1893-part-1-2016 for Earthquake load design
1893-part-1-2016 for Earthquake load designAshishSingh1301
 
Seizure stage detection of epileptic seizure using convolutional neural networks
Seizure stage detection of epileptic seizure using convolutional neural networksSeizure stage detection of epileptic seizure using convolutional neural networks
Seizure stage detection of epileptic seizure using convolutional neural networksIJECEIAES
 
Operating System chapter 9 (Virtual Memory)
Operating System chapter 9 (Virtual Memory)Operating System chapter 9 (Virtual Memory)
Operating System chapter 9 (Virtual Memory)NareenAsad
 
UNIT-2 image enhancement.pdf Image Processing Unit 2 AKTU
UNIT-2 image enhancement.pdf Image Processing Unit 2 AKTUUNIT-2 image enhancement.pdf Image Processing Unit 2 AKTU
UNIT-2 image enhancement.pdf Image Processing Unit 2 AKTUankushspencer015
 
5G and 6G refer to generations of mobile network technology, each representin...
5G and 6G refer to generations of mobile network technology, each representin...5G and 6G refer to generations of mobile network technology, each representin...
5G and 6G refer to generations of mobile network technology, each representin...archanaece3
 
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdflitvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdfAlexander Litvinenko
 
ALCOHOL PRODUCTION- Beer Brewing Process.pdf
ALCOHOL PRODUCTION- Beer Brewing Process.pdfALCOHOL PRODUCTION- Beer Brewing Process.pdf
ALCOHOL PRODUCTION- Beer Brewing Process.pdfMadan Karki
 
Raashid final report on Embedded Systems
Raashid final report on Embedded SystemsRaashid final report on Embedded Systems
Raashid final report on Embedded SystemsRaashidFaiyazSheikh
 
"United Nations Park" Site Visit Report.
"United Nations Park" Site  Visit Report."United Nations Park" Site  Visit Report.
"United Nations Park" Site Visit Report.MdManikurRahman
 
The battle for RAG, explore the pros and cons of using KnowledgeGraphs and Ve...
The battle for RAG, explore the pros and cons of using KnowledgeGraphs and Ve...The battle for RAG, explore the pros and cons of using KnowledgeGraphs and Ve...
The battle for RAG, explore the pros and cons of using KnowledgeGraphs and Ve...Roi Lipman
 
SLIDESHARE PPT-DECISION MAKING METHODS.pptx
SLIDESHARE PPT-DECISION MAKING METHODS.pptxSLIDESHARE PPT-DECISION MAKING METHODS.pptx
SLIDESHARE PPT-DECISION MAKING METHODS.pptxCHAIRMAN M
 
Filters for Electromagnetic Compatibility Applications
Filters for Electromagnetic Compatibility ApplicationsFilters for Electromagnetic Compatibility Applications
Filters for Electromagnetic Compatibility ApplicationsMathias Magdowski
 
handbook on reinforce concrete and detailing
handbook on reinforce concrete and detailinghandbook on reinforce concrete and detailing
handbook on reinforce concrete and detailingAshishSingh1301
 
Introduction to Arduino Programming: Features of Arduino
Introduction to Arduino Programming: Features of ArduinoIntroduction to Arduino Programming: Features of Arduino
Introduction to Arduino Programming: Features of ArduinoAbhimanyu Sangale
 
Dynamo Scripts for Task IDs and Space Naming.pptx
Dynamo Scripts for Task IDs and Space Naming.pptxDynamo Scripts for Task IDs and Space Naming.pptx
Dynamo Scripts for Task IDs and Space Naming.pptxMustafa Ahmed
 
analog-vs-digital-communication (concept of analog and digital).pptx
analog-vs-digital-communication (concept of analog and digital).pptxanalog-vs-digital-communication (concept of analog and digital).pptx
analog-vs-digital-communication (concept of analog and digital).pptxKarpagam Institute of Teechnology
 
Autodesk Construction Cloud (Autodesk Build).pptx
Autodesk Construction Cloud (Autodesk Build).pptxAutodesk Construction Cloud (Autodesk Build).pptx
Autodesk Construction Cloud (Autodesk Build).pptxMustafa Ahmed
 
Electrical shop management system project report.pdf
Electrical shop management system project report.pdfElectrical shop management system project report.pdf
Electrical shop management system project report.pdfKamal Acharya
 
21P35A0312 Internship eccccccReport.docx
21P35A0312 Internship eccccccReport.docx21P35A0312 Internship eccccccReport.docx
21P35A0312 Internship eccccccReport.docxrahulmanepalli02
 

Recently uploaded (20)

Involute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdf
Involute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdfInvolute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdf
Involute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdf
 
1893-part-1-2016 for Earthquake load design
1893-part-1-2016 for Earthquake load design1893-part-1-2016 for Earthquake load design
1893-part-1-2016 for Earthquake load design
 
Seizure stage detection of epileptic seizure using convolutional neural networks
Seizure stage detection of epileptic seizure using convolutional neural networksSeizure stage detection of epileptic seizure using convolutional neural networks
Seizure stage detection of epileptic seizure using convolutional neural networks
 
Operating System chapter 9 (Virtual Memory)
Operating System chapter 9 (Virtual Memory)Operating System chapter 9 (Virtual Memory)
Operating System chapter 9 (Virtual Memory)
 
UNIT-2 image enhancement.pdf Image Processing Unit 2 AKTU
UNIT-2 image enhancement.pdf Image Processing Unit 2 AKTUUNIT-2 image enhancement.pdf Image Processing Unit 2 AKTU
UNIT-2 image enhancement.pdf Image Processing Unit 2 AKTU
 
5G and 6G refer to generations of mobile network technology, each representin...
5G and 6G refer to generations of mobile network technology, each representin...5G and 6G refer to generations of mobile network technology, each representin...
5G and 6G refer to generations of mobile network technology, each representin...
 
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdflitvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
 
ALCOHOL PRODUCTION- Beer Brewing Process.pdf
ALCOHOL PRODUCTION- Beer Brewing Process.pdfALCOHOL PRODUCTION- Beer Brewing Process.pdf
ALCOHOL PRODUCTION- Beer Brewing Process.pdf
 
Raashid final report on Embedded Systems
Raashid final report on Embedded SystemsRaashid final report on Embedded Systems
Raashid final report on Embedded Systems
 
"United Nations Park" Site Visit Report.
"United Nations Park" Site  Visit Report."United Nations Park" Site  Visit Report.
"United Nations Park" Site Visit Report.
 
The battle for RAG, explore the pros and cons of using KnowledgeGraphs and Ve...
The battle for RAG, explore the pros and cons of using KnowledgeGraphs and Ve...The battle for RAG, explore the pros and cons of using KnowledgeGraphs and Ve...
The battle for RAG, explore the pros and cons of using KnowledgeGraphs and Ve...
 
SLIDESHARE PPT-DECISION MAKING METHODS.pptx
SLIDESHARE PPT-DECISION MAKING METHODS.pptxSLIDESHARE PPT-DECISION MAKING METHODS.pptx
SLIDESHARE PPT-DECISION MAKING METHODS.pptx
 
Filters for Electromagnetic Compatibility Applications
Filters for Electromagnetic Compatibility ApplicationsFilters for Electromagnetic Compatibility Applications
Filters for Electromagnetic Compatibility Applications
 
handbook on reinforce concrete and detailing
handbook on reinforce concrete and detailinghandbook on reinforce concrete and detailing
handbook on reinforce concrete and detailing
 
Introduction to Arduino Programming: Features of Arduino
Introduction to Arduino Programming: Features of ArduinoIntroduction to Arduino Programming: Features of Arduino
Introduction to Arduino Programming: Features of Arduino
 
Dynamo Scripts for Task IDs and Space Naming.pptx
Dynamo Scripts for Task IDs and Space Naming.pptxDynamo Scripts for Task IDs and Space Naming.pptx
Dynamo Scripts for Task IDs and Space Naming.pptx
 
analog-vs-digital-communication (concept of analog and digital).pptx
analog-vs-digital-communication (concept of analog and digital).pptxanalog-vs-digital-communication (concept of analog and digital).pptx
analog-vs-digital-communication (concept of analog and digital).pptx
 
Autodesk Construction Cloud (Autodesk Build).pptx
Autodesk Construction Cloud (Autodesk Build).pptxAutodesk Construction Cloud (Autodesk Build).pptx
Autodesk Construction Cloud (Autodesk Build).pptx
 
Electrical shop management system project report.pdf
Electrical shop management system project report.pdfElectrical shop management system project report.pdf
Electrical shop management system project report.pdf
 
21P35A0312 Internship eccccccReport.docx
21P35A0312 Internship eccccccReport.docx21P35A0312 Internship eccccccReport.docx
21P35A0312 Internship eccccccReport.docx
 

A brief look at visionOS - How to develop app on Apple's Vision Pro

Editor's Notes

  1. 用這個 Space X 的網站當成基底來做相關的內容
  2. 修改 intensity 去改有多亮
  3. 自己自訂的 component 和 system 都要在 entry point 註冊