SlideShare a Scribd company logo

Fate spazio al mio nuovo sito web: VR room scale su browser con A-Frame e HTC Vive

•
•
G
Giorgio Pomettini

Slides per l'evento community Aperitech SPVR 2016

Technology
1 of 67
Download to read offline
Fate spazio al mio nuovo sito web VR room scale su browser con A-Frame e HTC Vive
<html> <body> <p>Ciao mondo!</p> </body> <html>
<a-scene> <a-box color="red"></a-box> </a-scene>
Entity Component System
Creare Entità
<a-entity Creare Entità
<a-entity geometry=“primitive: sphere; radius: 100” Creare Entità
<a-entity geometry=“primitive: sphere; radius: 100” material=“color: blue”> Creare Entità
<a-entity geometry=“primitive: sphere; radius: 100” material=“color: blue”> <a-obj-model src=“gatto.obj”> Creare Entità
<a-entity geometry=“primitive: sphere; radius: 100” material=“color: blue”> <a-obj-model src=“gatto.obj”> <a-sky src=“panorama.png”> Creare Entità
Esempio Room Scale
Cannon.js
<a-scene>
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity>
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;"
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left"
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;"
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity>
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity>
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube"
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body position="0 0.25 -1” color="red"></a-box>
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body position="0 0.25 -1” color="red"></a-box> <a-box class="cube" dynamic-body position="-1 0.25 -1" color="green"></a-box>
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body position="0 0.25 -1” color="red"></a-box> <a-box class="cube" dynamic-body position="-1 0.25 -1" color="green"></a-box> <a-box class="cube" dynamic-body position="1 0.25 -1" color="blue"></a-box>
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body position="0 0.25 -1” color="red"></a-box> <a-box class="cube" dynamic-body position="-1 0.25 -1" color="green"></a-box> <a-box class="cube" dynamic-body position="1 0.25 -1" color="blue"></a-box> <!-- Terreno --> <a-grid
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body position="0 0.25 -1” color="red"></a-box> <a-box class="cube" dynamic-body position="-1 0.25 -1" color="green"></a-box> <a-box class="cube" dynamic-body position="1 0.25 -1" color="blue"></a-box> <!-- Terreno --> <a-grid static-body
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body position="0 0.25 -1” color="red"></a-box> <a-box class="cube" dynamic-body position="-1 0.25 -1" color="green"></a-box> <a-box class="cube" dynamic-body position="1 0.25 -1" color="blue"></a-box> <!-- Terreno --> <a-grid static-body></a-grid>
<a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body position="0 0.25 -1” color="red"></a-box> <a-box class="cube" dynamic-body position="-1 0.25 -1" color="green"></a-box> <a-box class="cube" dynamic-body position="1 0.25 -1" color="blue"></a-box> <!-- Terreno --> <a-grid static-body></a-grid> </a-scene>
Perché usare WebGL?
Perché usare WebGL? • Nessuna installazione richiesta
Perché usare WebGL? • Nessuna installazione richiesta • Supporta quasi (quasi) tutti i device
Perché usare WebGL? • Nessuna installazione richiesta • Supporta quasi (quasi) tutti i device • Si può estendere con una valanga di librerie
Adit (R + ShinyAframe)
MathWorld (dat.gui)
D3 Visualization (D3)
Perché usare WebGL? • Nessuna installazione richiesta • Supporta quasi (quasi) tutti i device • Si può estendere con una valanga di librerie • Facilita la creazione di esperienze multiplayer
Oculoops: Multiplayer Music Maker
Firebase Multiuser
WebSocket (Socket.IO)
Asymmetrical Gameplay
Perché usare WebGL? • Nessuna installazione richiesta • Supporta quasi (quasi) tutti i device • Si può estendere con una valanga di librerie • Facilita la creazione di esperienze multiplayer • A-Frame registry
A-Frame UI Widgets
Super Hands
Teleport
Crawling Cursor
MikuMikuDance
Perché usare WebGL? • Nessuna installazione richiesta • Supporta quasi (quasi) tutti i device • Si può estendere con una valanga di librerie • Facilita la creazione di esperienze multiplayer • A-Frame registry • Totalmente open source
Quando?
Is WebVR Ready? https://webvr.rocks/
Is WebVR Ready? https://webvr.rocks/ Full WebVR support (Vive + Controllers) (Experimental builds)
Is WebVR Ready? https://webvr.rocks/ Full WebVR support (Vive + Controllers) Headset tracking and basic support (Experimental builds) (WebVR Polyfill)
Now you have a chance!
Grazie
• Mail: giorgio.pomettini@gmail.com • Sito web: www.videogio.co • Twitter: @dreamquest • Azienda: www.centounopercento.com

Recommended

Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Robert DeLuca
 
JQuery
JQueryJQuery
JQueryRahul Jain
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)Oswald Campesato
 
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...JavaScripters Community
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginnersSiva Arunachalam
 
Unobtrusive javascript with jQuery
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQueryAngel Ruiz
 
MVVM with SwiftUI and Combine
MVVM with SwiftUI and CombineMVVM with SwiftUI and Combine
MVVM with SwiftUI and CombineTai Lun Tseng
 
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and SmartphonesDesign Patterns for Tablets and Smartphones
Design Patterns for Tablets and SmartphonesMichael Galpin
 

Recommended

Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Robert DeLuca
 
JQuery
JQueryJQuery
JQueryRahul Jain
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)Oswald Campesato
 
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...JavaScripters Community
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginnersSiva Arunachalam
 
Unobtrusive javascript with jQuery
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQueryAngel Ruiz
 
MVVM with SwiftUI and Combine
MVVM with SwiftUI and CombineMVVM with SwiftUI and Combine
MVVM with SwiftUI and CombineTai Lun Tseng
 
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and SmartphonesDesign Patterns for Tablets and Smartphones
Design Patterns for Tablets and SmartphonesMichael Galpin
 
Introductionandgreetings
IntroductionandgreetingsIntroductionandgreetings
IntroductionandgreetingsPozz ZaRat
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsEPAM Systems
 
Migration to jQuery 3.5.x
Migration to jQuery 3.5.xMigration to jQuery 3.5.x
Migration to jQuery 3.5.xStanislavIdolov
 
jQuery besic
jQuery besicjQuery besic
jQuery besicSyeful Islam
 
Stack Overflow Austin - jQuery for Developers
Stack Overflow Austin - jQuery for DevelopersStack Overflow Austin - jQuery for Developers
Stack Overflow Austin - jQuery for DevelopersJonathan Sharp
 
Angular Tutorial Freshers and Experienced
Angular Tutorial Freshers and ExperiencedAngular Tutorial Freshers and Experienced
Angular Tutorial Freshers and Experiencedrajkamaltibacademy
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery EssentialsBedis ElAchèche
 
Event source everything!
Event source everything!Event source everything!
Event source everything!The Software House
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQueryZeeshan Khan
 
Lille2010markp
Lille2010markpLille2010markp
Lille2010markpCh'ti JUG
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery EssentialsMark Rackley
 
jQuery Features to Avoid
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoiddmethvin
 
Intro to computer vision in .net
Intro to computer vision in .netIntro to computer vision in .net
Intro to computer vision in .netStephen Lorello
 
SwiftUI and Combine All the Things
SwiftUI and Combine All the ThingsSwiftUI and Combine All the Things
SwiftUI and Combine All the ThingsScott Gardner
 
Javascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & TricksJavascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & TricksHjörtur Hilmarsson
 
Model-Based Simulation of SOAP Web Services From Temporal Logic Specification...
Model-Based Simulation of SOAP Web Services From Temporal Logic Specification...Model-Based Simulation of SOAP Web Services From Temporal Logic Specification...
Model-Based Simulation of SOAP Web Services From Temporal Logic Specification...Sylvain Hallé
 
Getting started with ReactJS
Getting started with ReactJSGetting started with ReactJS
Getting started with ReactJSKrishna Sunuwar
 
jQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a TreejQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a Treeadamlogic
 
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiJ Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiMuhammad Ehtisham Siddiqui
 
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Elyse Kolker Gordon
 
Let's make a game for the Playdate
Let's make a game for the PlaydateLet's make a game for the Playdate
Let's make a game for the PlaydateGiorgio Pomettini
 
Rapid prototyping with ScriptableObjects
Rapid prototyping with ScriptableObjectsRapid prototyping with ScriptableObjects
Rapid prototyping with ScriptableObjectsGiorgio Pomettini
 

More Related Content

What's hot

Introductionandgreetings
IntroductionandgreetingsIntroductionandgreetings
IntroductionandgreetingsPozz ZaRat
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsEPAM Systems
 
Migration to jQuery 3.5.x
Migration to jQuery 3.5.xMigration to jQuery 3.5.x
Migration to jQuery 3.5.xStanislavIdolov
 
Stack Overflow Austin - jQuery for Developers
Stack Overflow Austin - jQuery for DevelopersStack Overflow Austin - jQuery for Developers
Stack Overflow Austin - jQuery for DevelopersJonathan Sharp
 
Angular Tutorial Freshers and Experienced
Angular Tutorial Freshers and ExperiencedAngular Tutorial Freshers and Experienced
Angular Tutorial Freshers and Experiencedrajkamaltibacademy
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQueryZeeshan Khan
 
Lille2010markp
Lille2010markpLille2010markp
Lille2010markpCh'ti JUG
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery EssentialsMark Rackley
 
jQuery Features to Avoid
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoiddmethvin
 
Intro to computer vision in .net
Intro to computer vision in .netIntro to computer vision in .net
Intro to computer vision in .netStephen Lorello
 
SwiftUI and Combine All the Things
SwiftUI and Combine All the ThingsSwiftUI and Combine All the Things
SwiftUI and Combine All the ThingsScott Gardner
 
Javascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & TricksJavascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & TricksHjörtur Hilmarsson
 
Model-Based Simulation of SOAP Web Services From Temporal Logic Specification...
Model-Based Simulation of SOAP Web Services From Temporal Logic Specification...Model-Based Simulation of SOAP Web Services From Temporal Logic Specification...
Model-Based Simulation of SOAP Web Services From Temporal Logic Specification...Sylvain Hallé
 
Getting started with ReactJS
Getting started with ReactJSGetting started with ReactJS
Getting started with ReactJSKrishna Sunuwar
 
jQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a TreejQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a Treeadamlogic
 
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiJ Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiMuhammad Ehtisham Siddiqui
 
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Elyse Kolker Gordon
 

What's hot (20)

Introductionandgreetings
IntroductionandgreetingsIntroductionandgreetings
Introductionandgreetings
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
 
Migration to jQuery 3.5.x
Migration to jQuery 3.5.xMigration to jQuery 3.5.x
Migration to jQuery 3.5.x
 
jQuery besic
jQuery besicjQuery besic
jQuery besic
 
Stack Overflow Austin - jQuery for Developers
Stack Overflow Austin - jQuery for DevelopersStack Overflow Austin - jQuery for Developers
Stack Overflow Austin - jQuery for Developers
 
Angular Tutorial Freshers and Experienced
Angular Tutorial Freshers and ExperiencedAngular Tutorial Freshers and Experienced
Angular Tutorial Freshers and Experienced
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
Event source everything!
Event source everything!Event source everything!
Event source everything!
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Lille2010markp
Lille2010markpLille2010markp
Lille2010markp
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
 
jQuery Features to Avoid
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoid
 
Intro to computer vision in .net
Intro to computer vision in .netIntro to computer vision in .net
Intro to computer vision in .net
 
SwiftUI and Combine All the Things
SwiftUI and Combine All the ThingsSwiftUI and Combine All the Things
SwiftUI and Combine All the Things
 
Javascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & TricksJavascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & Tricks
 
Model-Based Simulation of SOAP Web Services From Temporal Logic Specification...
Model-Based Simulation of SOAP Web Services From Temporal Logic Specification...Model-Based Simulation of SOAP Web Services From Temporal Logic Specification...
Model-Based Simulation of SOAP Web Services From Temporal Logic Specification...
 
Getting started with ReactJS
Getting started with ReactJSGetting started with ReactJS
Getting started with ReactJS
 
jQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a TreejQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a Tree
 
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiJ Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
 
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
 

More from Giorgio Pomettini

Let's make a game for the Playdate
Let's make a game for the PlaydateLet's make a game for the Playdate
Let's make a game for the PlaydateGiorgio Pomettini
 
Rapid prototyping with ScriptableObjects
Rapid prototyping with ScriptableObjectsRapid prototyping with ScriptableObjects
Rapid prototyping with ScriptableObjectsGiorgio Pomettini
 
Primi passi con ARKit & Unity
Primi passi con ARKit & UnityPrimi passi con ARKit & Unity
Primi passi con ARKit & UnityGiorgio Pomettini
 
Fist Of Fury (Roads): Come ho tradotto un gioco in Cinese in 48 ore
Fist Of Fury (Roads): Come ho tradotto un gioco in Cinese in 48 oreFist Of Fury (Roads): Come ho tradotto un gioco in Cinese in 48 ore
Fist Of Fury (Roads): Come ho tradotto un gioco in Cinese in 48 oreGiorgio Pomettini
 
Facciamo un gioco retrò in HTML5 con PICO-8
Facciamo un gioco retrò in HTML5 con PICO-8Facciamo un gioco retrò in HTML5 con PICO-8
Facciamo un gioco retrò in HTML5 con PICO-8Giorgio Pomettini
 

More from Giorgio Pomettini (6)

Let's make a game for the Playdate
Let's make a game for the PlaydateLet's make a game for the Playdate
Let's make a game for the Playdate
 
Rapid prototyping with ScriptableObjects
Rapid prototyping with ScriptableObjectsRapid prototyping with ScriptableObjects
Rapid prototyping with ScriptableObjects
 
Primi passi con ARKit & Unity
Primi passi con ARKit & UnityPrimi passi con ARKit & Unity
Primi passi con ARKit & Unity
 
Fist Of Fury (Roads): Come ho tradotto un gioco in Cinese in 48 ore
Fist Of Fury (Roads): Come ho tradotto un gioco in Cinese in 48 oreFist Of Fury (Roads): Come ho tradotto un gioco in Cinese in 48 ore
Fist Of Fury (Roads): Come ho tradotto un gioco in Cinese in 48 ore
 
Rust & Gamedev
Rust & GamedevRust & Gamedev
Rust & Gamedev
 
Facciamo un gioco retrò in HTML5 con PICO-8
Facciamo un gioco retrò in HTML5 con PICO-8Facciamo un gioco retrò in HTML5 con PICO-8
Facciamo un gioco retrò in HTML5 con PICO-8
 

Recently uploaded

From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?XfilesPro
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptxKey Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 

Recently uploaded (20)

From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptxKey Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 

Fate spazio al mio nuovo sito web: VR room scale su browser con A-Frame e HTC Vive

  • 1. Fate spazio al mio nuovo sito web VR room scale su browser con A-Frame e HTC Vive
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 9.
  • 10.
  • 15. <a-entity geometry=“primitive: sphere; radius: 100” material=“color: blue”> Creare Entità
  • 16. <a-entity geometry=“primitive: sphere; radius: 100” material=“color: blue”> <a-obj-model src=“gatto.obj”> Creare Entità
  • 17. <a-entity geometry=“primitive: sphere; radius: 100” material=“color: blue”> <a-obj-model src=“gatto.obj”> <a-sky src=“panorama.png”> Creare Entità
  • 18.
  • 22. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity>
  • 23. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;"
  • 24. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left"
  • 25. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;"
  • 26. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity>
  • 27. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity>
  • 28. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box
  • 29. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube"
  • 30. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body
  • 31. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body position="0 0.25 -1” color="red"></a-box>
  • 32. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body position="0 0.25 -1” color="red"></a-box> <a-box class="cube" dynamic-body position="-1 0.25 -1" color="green"></a-box>
  • 33. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body position="0 0.25 -1” color="red"></a-box> <a-box class="cube" dynamic-body position="-1 0.25 -1" color="green"></a-box> <a-box class="cube" dynamic-body position="1 0.25 -1" color="blue"></a-box>
  • 34. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body position="0 0.25 -1” color="red"></a-box> <a-box class="cube" dynamic-body position="-1 0.25 -1" color="green"></a-box> <a-box class="cube" dynamic-body position="1 0.25 -1" color="blue"></a-box> <!-- Terreno --> <a-grid
  • 35. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body position="0 0.25 -1” color="red"></a-box> <a-box class="cube" dynamic-body position="-1 0.25 -1" color="green"></a-box> <a-box class="cube" dynamic-body position="1 0.25 -1" color="blue"></a-box> <!-- Terreno --> <a-grid static-body
  • 36. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body position="0 0.25 -1” color="red"></a-box> <a-box class="cube" dynamic-body position="-1 0.25 -1" color="green"></a-box> <a-box class="cube" dynamic-body position="1 0.25 -1" color="blue"></a-box> <!-- Terreno --> <a-grid static-body></a-grid>
  • 37. <a-scene> <!-- Camera --> <a-entity camera look-controls></a-entity> <!-- Mani --> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: left" 
 sphere-collider="objects: .cube;" grab></a-entity> <a-entity static-body="shape: sphere; sphereRadius: 0.02;" vive-controls="hand: right" sphere-collider="objects: .cube;" grab></a-entity> <!-- Oggetti --> <a-box class="cube" dynamic-body position="0 0.25 -1” color="red"></a-box> <a-box class="cube" dynamic-body position="-1 0.25 -1" color="green"></a-box> <a-box class="cube" dynamic-body position="1 0.25 -1" color="blue"></a-box> <!-- Terreno --> <a-grid static-body></a-grid> </a-scene>
  • 38.
  • 40. Perché usare WebGL? • Nessuna installazione richiesta
  • 41. Perché usare WebGL? • Nessuna installazione richiesta • Supporta quasi (quasi) tutti i device
  • 42. Perché usare WebGL? • Nessuna installazione richiesta • Supporta quasi (quasi) tutti i device • Si può estendere con una valanga di librerie
  • 43. Adit (R + ShinyAframe)
  • 46.
  • 47. Perché usare WebGL? • Nessuna installazione richiesta • Supporta quasi (quasi) tutti i device • Si può estendere con una valanga di librerie • Facilita la creazione di esperienze multiplayer
  • 52. Perché usare WebGL? • Nessuna installazione richiesta • Supporta quasi (quasi) tutti i device • Si può estendere con una valanga di librerie • Facilita la creazione di esperienze multiplayer • A-Frame registry
  • 53.
  • 59. Perché usare WebGL? • Nessuna installazione richiesta • Supporta quasi (quasi) tutti i device • Si può estendere con una valanga di librerie • Facilita la creazione di esperienze multiplayer • A-Frame registry • Totalmente open source
  • 62. Is WebVR Ready? https://webvr.rocks/ Full WebVR support (Vive + Controllers) (Experimental builds)
  • 63. Is WebVR Ready? https://webvr.rocks/ Full WebVR support (Vive + Controllers) Headset tracking and basic support (Experimental builds) (WebVR Polyfill)
  • 64.
  • 65. Now you have a chance!
  • 67. • Mail: giorgio.pomettini@gmail.com • Sito web: www.videogio.co • Twitter: @dreamquest • Azienda: www.centounopercento.com