SlideShare a Scribd company logo
Introduc)on to WebVR
VR Setup*
*
Illustra*ons from Mozilla
VR Experiences
New considera-ons for VR app development
Focus on User Experience
- Stereoscopic vision & interpupillary distance (IPD)
- Head tracking & degrees of freedom (DoF)
- Cone of focus & field of view (FOV)
- 3D posi-onal audio
- Latency & frame rate (frames per second / FPS)
Focus on User Comfort
- Eye strain
- Mo-on sickness
Degrees of Freedom, Stereoscopic Vision & Interpupillary Distance*
*
Illustra*ons from Mozilla

Recommended for you

Casper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux
Casper Fabricius (Cimmerse): WebVR with A-Frame, React and ReduxCasper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux
Casper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux

A talk from the Developer Track at AWE Europe 2017 - the largest conference for AR+VR in Munich, Germany October 19-20, 2017 Casper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux Web-based virtual reality allows VR experiences at the click of a link, and it enables millions of web developers to dive straight into VR and AR. This workshop will teach developers with some web and javascript experience to use the popular React, Redux and A-Frame libraries to build advanced, interactive WebVR sites step by step. Participants will also learn how to add WebVR to existing websites, leveraging and sharing existing code between 2D, 3D and VR.

augmented realityvirtual realityawe2017
The next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRThe next frontier: WebGL and WebVR
The next frontier: WebGL and WebVR

"The next frontier: WebGL and WebVR" by Martin Naumann The browser is a window into a vast, unlimited world. But what about we don't just peek into a flat, page-based world, but into a space with depth? What can we build with that? And now that our browser is the portal to a space, how can we immerse ourselves into it, rather than stare into it from the outside? And maybe we can link this world inside our browser to our real world as well? This talk explores the possibilities technologies such as Augmented Reality and Virtual Reality by using WebGL and Javascript to extend and enhance the web beyond the flat browser window.

codemotion romemartin naumanncodemotion
【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界
【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界
【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界

講演者:千葉 悟史(Kudan株式会社) こんな人におすすめ ・UnityでモバイルAR/MRアプリを開発したい方 ・AR/MRを非ゲーム領域でも活用したい方 受講者が得られる知見 ・モバイルAR/MRの新しい活用可能性 ・AR/MRアプリ開発の容易さ ・Computer Vision技術の最新動向とグローバル事例

unityunite 2017 tokyo
Na#ve VR Devices (PC & Console)
HTC Vive (room-scale VR)
Oculus Ri6
Playsta:on VR
Fove
Razer OSVR
Mobile VR Devices (Smartphone)
Samsung Gear VR
Daydream
Cardboard
Hundreds of third-party headsets
VR Programming
• Unreal Engine (C++)
• Unity (C#)
• Source Engine (C++)
• WebVR (JS)
VR Distribu+on
• SteamVR
• Google Play
• Oculus Store
• The Ri8 Arcade
• V "open alterna>ve" to SteamVR

Recommended for you

【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説

講演者:ラス・スカンメル(Unity Technologies) こんな人におすすめ ・2Dゲーム開発をする方 ・2Dゲーム開発に興味がある方 受講者が得られる知見 ・Unityの新しい2D機能の内容 ・今後実装される2D新機能の内容 講演動画:https://youtu.be/H9H2MxZwzY0

unite 2017 tokyounity
Building Multiplayer Games (w/ Unity)
Building Multiplayer Games (w/ Unity)Building Multiplayer Games (w/ Unity)
Building Multiplayer Games (w/ Unity)

An introduction to what multiplayer games are, what makes them different from normal games, how to approach building them and specifically how to begin building them with the Unity game engine. Talk given at the GameIS & Dragonplay mobile multiplayer hackathon, 30/7/2015

multiplayer network games unity
Sergey Gonchar - Fast rendering with Starling
Sergey Gonchar - Fast rendering with StarlingSergey Gonchar - Fast rendering with Starling
Sergey Gonchar - Fast rendering with Starling

The document discusses Stage3D and Starling frameworks. It describes how Stage3D allows managing texture memory, vertex and pixel shading, and mesh rendering using OpenGL and DirectX. It also explains that Starling uses a quad batching approach to group quads with the same state for efficient rendering and provides a vertex buffer description to store quad vertex attributes. The document recommends profiling tools for optimizing 3D rendering and references books for further reading.

2dgamesas3
Why WebVR?
• No app store ecosystem, distribu3on via internet
• Mobile & desktop automa3cally supported
• Uses current tools and libraries for JS
• Easy switch between VR & non-VR mode
• Interfacing with hardware through the browser
Progressive Enhancement by Arturo Paracuellos
Virtual Reality on the Web
A Retrospec+ve 1/2
• 1994 VRML - first a0empt to create an internet-based 3D
language. (Mark Pesce presented the Labyrinth demo he
developed with Tony Parisi and Peter Kennard.)
• VRML2 (1997) - added many features (animaMon) and later was
succeeded by X3D
Problem of VRML: plugin-based technology that only came
preinstalled on IE
Virtual Reality on the Web
A Retrospec+ve 2/2
• 2003 OpenGL ES - cross-language and mul9-pla:orm 3D
graphics API.
Hardware accelerated rendering of 3D objects.
• WebGL 1.0 introduced by Mozilla based on OpenGL ES uses
DOM (canvas element)
• X3D introduced X3DOM

Recommended for you

Practical guide to optimization in Unity
Practical guide to optimization in UnityPractical guide to optimization in Unity
Practical guide to optimization in Unity

Valentin Simonov is a field engineer at Unity Technologies who helps game studios optimize their games. He teaches developers how to use Unity efficiently through conferences, trainings, blog posts, and translating books. He maintains an open source project on GitHub. The document provides tips on using tools like the Unity Profiler to identify optimization opportunities and make informed decisions on optimizations. It highlights platform-specific testing and avoiding outdated information online.

devgammconferencegaming
Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016

Slides from my presentation at Autodesk Forge 2016 http://forge.autodesk.com/tracks-and-speakers/#track-2

autodeskvirtual realitywebgl
【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来
【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来
【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来

講演者:アルトゥロ・ヌネス(Unity Technologies) こんな人におすすめ ・2DアニメーションパイプラインをUnityに持ち込みたい2D アーティスト ・Anima2D のアニメーションワークフローを拡張することに興味のあるプログラマー ・ビルドサイズを拡大することなく、ゲームにもっと多くの機能やアニメーションを使用したいゲーム開発者 受講者が得られる知見 ・Anima2Dのオーサリングパイプラインとスケルトン、アニメーション、バリアントを作成する方法 ・スケルトンベースのアニメーションをコードでオーバーライドする方法 ・Anima2Dアニメーションに各種Unityコンポーネントを統合する方法

unite 2017 tokyounity
Most popular WebGL
Engines today
• Three.js by Ricardo Cabello in 2010
• Babylon.js
• PlayCanvas.js
• Goo Engine
• Scene.js
• Turbulenz
Stackoverflow score growth over 0me by tag comparison
WebGL Framework Comparison
What is WebVR?
WebVR is a experimental Javascript API that
provides interfaces to VR hardware to allow
developers to build compelling, comfortable
VR experiences on the web.
WebVR
WebVR v1.1 Editor’s Dra,, 04/05/17
- deviceOrienta-on
- VRDisplay object handles almost everything
- available on mul-ple pla<orms
..soon..
WebVR (2.0) Editor’s Dra,, 04/17/17
- not backwards compa-ble
- device support
- introduc-on of VRDevice & VRSession to replace VRDisplay
- read Explainer doc!

Recommended for you

Breathing Life in Data Visualizations with Axure
Breathing Life in Data Visualizations with AxureBreathing Life in Data Visualizations with Axure
Breathing Life in Data Visualizations with Axure

Svetlin Denkov gives a presentation on building interactive visualizations using Axure. He demonstrates techniques for creating basic charts like bar charts and donut charts from scratch in Axure. He then shows how to add interactivity through animations like resizing and rotating elements. Finally, he shares more advanced examples from others and discusses limitations of Axure as well as finding the right tool based on project needs. The presentation includes live demos at each stage.

axureuxdesign
WebVR, not just Holograms in the web but powerful platform
WebVR, not just Holograms in the web but powerful platformWebVR, not just Holograms in the web but powerful platform
WebVR, not just Holograms in the web but powerful platform

We'll build a game with WebVR then bring it across multiple different platforms with Progressive Web Applications. We'll show how to be able to have import assets, use controllers, and even show how the code is portable across all VR devices.

Introduction to Phaser.js
Introduction to Phaser.jsIntroduction to Phaser.js
Introduction to Phaser.js

An high-level introduction to Phaser.js. https://github.com/sH4rk0/meetupRush https://github.com/sH4rk0/xmas2016 Thanks to Michel Wacker (@starnut) for some input.

phaserjsgamedevjavascript
Goals of WebVR
• Detect available virtual reality devices.
• Query the device’s capabili6es.
• Poll the device’s posi6on and orienta6on.
• Display imagery on the device at the appropriate frame rate.
Non-goals of WebVR
• Define how a virtual reality browser would work.
• Take full advantage of augmented reality devices.
• Build “The Metaverse.”
Check out h*ps://webvr.rocks/ for support updates
WebVR Frameworks
• A-Frame by Mozilla
• ReactVR by Facebook
• ForgeJS by GoPro, Inc., great for 360 photo & video content
• Primrose great for collaboraIve VR web apps
• Janus VR VR browser/editor
• Vizor in-browser VR development, SocialVR
• GLAM (GL And Markup) declaraIve language for 3D web
Demo Comparison A & B

Recommended for you

HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...

Full-day training on mobile game development with JavaScript using the Phaser library. To learn more about our online and on-site training on game, web and mobile app development visit https://zenva.com

html5 game developmenthtml5 developer conferencephaser seminar
My 10 days with Phaser.js - WarsawJS Meetup #13
My 10 days with Phaser.js - WarsawJS Meetup #13My 10 days with Phaser.js - WarsawJS Meetup #13
My 10 days with Phaser.js - WarsawJS Meetup #13

Video: https://www.youtube.com/watch?v=klDeljOKDjU O tym jak przez kolejne 10 dni pisałem grę z użyciem Phaser.js. Fabuła gry opiera się na anime Dragon Ball. Grafikę do gry robiłem własnoręcznie, o czym możecie się przekonać wchodząc na www.dragonballplay.com, gdzie znajduje się wersja v1.0 tego projektu. Codziennie poświęcałem 5-6 godzin po pracy, aby od 1 do 10 września stworzyć pełnoprawną grę internetową.

javascripthackathonphaser.js
Low Latency Networking on IOS and Android over Cloud by Oguz Bastemur
Low Latency Networking on IOS and Android over Cloud by Oguz BastemurLow Latency Networking on IOS and Android over Cloud by Oguz Bastemur
Low Latency Networking on IOS and Android over Cloud by Oguz Bastemur

For today’s mobile apps, it is quite important to provide interaction among the end users. Consider a game application have users from both Android and IOS and you want them to play together. How about scalability? low latency? user state management? Definitely, there were lots of things you had to deal with so far. On this session, I will try to simplify the things and prepare the sample apps for both IOS and Android talking each other.

codemotion berlin 2013
Three.js and WebVR
comparison with
A-Frame
A-Frame
• a 3DML (3D markup language) like X3Dom and GLAM
• DOM-based En>ty-Component System => declara>ve &
extensible (similar to Unity/UE4/PlayCanvas)
The A-Frame Stack:
A-Frame
En#ty-Component System
A-Frame
• En$$es are HTML elements (i.e., <a-entity>)
• Components are HTML a9ributes, set on the en$ty
<body>
<a-scene>
<a-entity geometry="primitive:box" material="color:#c00">
</a-entity>
</a-scene>
</body>

Recommended for you

Cross Game Dev with Corona
Cross Game Dev with CoronaCross Game Dev with Corona
Cross Game Dev with Corona

Learn about Cross Platform Mobile Game Development with CoronaSDK from Corona Labs. I discuss some of the benefits I've found with Corona and why I chose this platform for our game development.

game developmentiosandroid
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)

This document provides an overview and introduction to building virtual reality (VR) experiences using WebVR and the A-Frame framework. It discusses: - What WebVR is and how it allows creating VR tools, standards, and experiences for the open web. - What A-Frame is and its features for building VR scenes in HTML such as being easy to learn, cross-platform support, performance optimizations, and a visual inspector. - Examples of VR experiences that have been built with A-Frame, Mozilla's work in mixed reality and VR including Firefox Reality, Spoke for creating 3D environments, and Unity WebVR assets.

mozillaphmozillawebvr
Building AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScriptBuilding AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScript

AR/VR in JavaScript Apps discusses emerging technologies for building augmented and virtual reality experiences using web technologies. It introduces key concepts like AR, VR, and XR. It also outlines several JavaScript libraries and frameworks that can be used to create 3D content and immersive experiences, such as Three.js, WebXR, A-Frame, and React 360. The document recommends resources for continued learning and provides examples of how to get started with these technologies.

 
by FITC
artvrjavascript
En#ty
• general purpose objects (e.g. create a player, ball, or field)
• they inherently have a posi;on, rota;on and scale in a scene
<a-entity
geometry="primitive:box;
width:0.2;
height:0.3;
depth:0.5;"
material="color:#c00"
position="0 0 -1"
rotation="0 30 30"
material="color:#c00">
</a-entity>
Primi%ves (concise, seman%c building blocks)
<a-entity geometry="primitive:box;
width:0.2;
height:0.3;
depth:0.5;"
material="color:#c00">
</a-entity>
<a-box width="0.2"
height="0.3"
depth="0.5"
material="color:#c00">
</a-box>
Mixins
<a-mixin id="box"
geometry="primitive:box;
width:0.2;
height:0.3;
depth:0.5;"
material="color:#c00">
</a-mixin>
<a-entity mixin="box">
</a-entity>
Custom Components
AFRAME.registerComponent('foo', {
schema: {
bar: {type: 'number'},
baz: {type: 'string'}
},
init: function () {
// Do something when component is plugged in.
},
update: function () {
// Do something when component's data is updated.
}
});

Recommended for you

Foundations of the Immersive Web
Foundations of the Immersive WebFoundations of the Immersive Web
Foundations of the Immersive Web

Tony Parisi discusses the foundations of the immersive web and how it can reach billions of users by 2020. Key points include: - WebVR allows rendering of 3D graphics and VR content directly in browsers using standards like WebGL and a new VR API. - This eliminates friction compared to native apps by allowing instant access to VR content through web links on any device with a compatible browser. - Current browsers like Chrome and Firefox are adding initial WebVR support, and content can already be experienced on mobile in Cardboard viewers. - The immersive web is being built on open standards and has potential to scale to the billions of users accessible through the existing web ecosystem and its development

vrwebvrhtc
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!

Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca Virtual Reality development has become very active recently, with the availability of low cost and high quality headsets, motion tracking equipment, and sensors. However, most VR app development is happening natively — users are stuck in the days of needing to download the right binary, trust a third-party that their code isn’t malicious and fix compatibility issues. Developers need to target multiple platforms, thus often ignoring those with fewer users. Instead, wouldn’t it be great if high quality VR content could be delivered through the Web? In this session, Vladimir Vukicevic will address additions to HTML, CSS, and WebGL that Mozilla is experimenting with which allow Web developers to create immersive VR experiences. Everything from pure VR WebGL content to responsive HTML and CSS that can shift from mobile to tablet to desktop to VR will be covered. Additionally, Vladimir will discuss delivering VR video via the Web, as well as how to mix WebGL and CSS content in a true 3D space. OBJECTIVE To show how VR and the Web work together, and the techniques for bringing VR content to the Web. TARGET AUDIENCE Web developers and designers ASSUMED AUDIENCE KNOWLEDGE Some knowledge of at least one of WebGL, CSS 3D Transforms, or modern 3D graphics would be helpful. FIVE THINGS AUDIENCE MEMBERS WILL LEARN An overview of current VR devices, their capabilities and how they can interface with the Web. How to render WebGL content to a VR device. How to create documents using HTML and CSS that can be projected in VR. How to create responsive documents that can shift in and out of VR based on user choice. How WebGL and CSS content can be mixed, providing interactive 3D graphics but with the full power of HTML for non-3D elements.

 
by FITC
web design and developmentwebglhtml5
Immersed in the Web
Immersed in the WebImmersed in the Web
Immersed in the Web

Learn about XR, how it works on the web, and how it can leverage the power of additional Web APIs to creative Immersive Experiences

webxrweb developmentvirtual reality
Gaze-Based Control
Gaze-Based Cursor Interac2ons
AFRAME.registerComponent('clickable', {
init: function () {
var el = this.el;
el.addEventListener('mouseenter', function () {
el.setAttribute('color', '#f00');
});
el.addEventListener('mouseleave', function () {
el.setAttribute('color', '#fff');
});
el.addEventListener('click', function () {
el.setAttribute('material', 'src' , 'assets/football.png');
});
}
});
<a-sphere clickable src="assets/basketball.png" radius="0.5" color="#fff"></a-sphere>
<a-camera><a-cursor></a-cursor></a-camera>
A-Frame Component Registry
h"ps://aframe.io/docs/0.5.0/

Recommended for you

Introduction to WebGL - 1st WebGL meetup Amsterdam
Introduction to WebGL - 1st WebGL meetup AmsterdamIntroduction to WebGL - 1st WebGL meetup Amsterdam
Introduction to WebGL - 1st WebGL meetup Amsterdam

1. The document summarizes a meetup about developing graphics with WebGL. It discusses WebGL and how it allows 3D rendering in browsers using OpenGL ES and JavaScript. 2. It then provides information about the company ThreeDee Media and their WebGL framework and tools. Examples of what can be done with WebGL are shown. 3. The document outlines how WebGL works, integrating 3D graphics with HTML5 pages using WebGL contexts on canvas elements. It discusses why one would use WebGL for rich internet experiences with hardware-accelerated 3D.

3dhtml5webgl
sdc-2016-gvrf-and-io_public
sdc-2016-gvrf-and-io_publicsdc-2016-gvrf-and-io_public
sdc-2016-gvrf-and-io_public

The document discusses the Gear VR Framework (GVRf), an open source Java library for developing VR applications for Android on the Gear VR. It provides an overview of GVRf's features like loading 3D models and textures, scene management, and handling head tracking. It demonstrates how to create a basic "hello world" app and discusses new features in development like standard shapes, scene objects for video/camera/webviews, scripting support, and improved 3D modeling capabilities. A key focus is the new 3D Cursor interaction model and support for various VR input devices through a common API to standardize interaction across apps. Live demos of hand/eye tracking were shown to illustrate cursor behaviors.

Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012

This document discusses getting started with WebGL. It begins with an introduction to WebGL, explaining that it allows 3D graphics in browsers similarly to OpenGL. It then provides examples of what can be done with WebGL, such as data visualization, games, 3D modeling, and more. The document proceeds to explain the basic graphics pipeline and JavaScript API used in WebGL. It concludes by discussing how to set up a basic 3D scene and choose a WebGL library like Three.js or PhiloGL to get started creating WebGL applications.

webgljavascriptopera
A-Frame Inspector
[control]+[option]+[i]
Create responsibly!
Resources
* A-Frame Slack
* A-Frame Component Registry
* mozvr.com
* VR Gets Real with WebVR
* WebVR API
* The UX of VR
Get In Touch
@rolanddubois
rolanddubois.com
It’s code *me! Here’s what we’re building:
• github.com/rdub80/Ferguson-VR-Hackathon
• XAMPP, MAMP or $ python -m SimpleHTTPServer
• JSBin

Recommended for you

Prototyping in aframe
Prototyping in aframePrototyping in aframe
Prototyping in aframe

A quick starter for prototyping in Aframe. Designers often find it difficult to communicate their VR design ideas to fellow developers. This is the presentation prepared for a VR design meetup in Bangalore wherein I gave hands on workshop to prototype in aframe for VR

virtual realityvrvr design
Windows Phone 7 and Windows Azure – A Match Made in the Cloud
Windows Phone 7 and Windows Azure – A Match Made in the CloudWindows Phone 7 and Windows Azure – A Match Made in the Cloud
Windows Phone 7 and Windows Azure – A Match Made in the Cloud

Windows Phone 7 and Windows Azure are a good match because they both provide easy and familiar development environments, connectivity through the cloud, and scalability. They are compatible in these areas. The document discusses how Windows Phone 7 and Windows Azure can be used together through features like data storage in Windows Azure tables and blobs, push notifications, and identity management with Access Control Services. It provides examples of how to integrate the platforms for storing, retrieving, and displaying data stored in the cloud.

windows phone 7windows azurewindows phone
Byte Conf React Native 2018
Byte Conf React Native 2018Byte Conf React Native 2018
Byte Conf React Native 2018

This document discusses developing augmented reality (AR) and virtual reality (VR) applications using React Native. It provides an overview of AR and VR history and technologies. It then discusses using the Viro React library to build cross-platform AR, VR, and XR applications in React Native. It covers components for 3D objects, lighting, and particle effects. Examples are provided for basic component layout and using 3D models, lighting, and particle effects in a Viro application. Considerations for when to use Viro React are discussed.

react conf arbyte confreact native

More Related Content

What's hot

Making HTML5 Games with Phaser
Making HTML5 Games with PhaserMaking HTML5 Games with Phaser
Making HTML5 Games with Phaser
IndieOutpost
 
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
Unity Technologies Japan K.K.
 
Scotland JS 2016 Keynote: The VR Web and the Future of the Browser
Scotland JS 2016 Keynote: The VR Web and the Future of the BrowserScotland JS 2016 Keynote: The VR Web and the Future of the Browser
Scotland JS 2016 Keynote: The VR Web and the Future of the Browser
Liv Erickson
 
Casper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux
Casper Fabricius (Cimmerse): WebVR with A-Frame, React and ReduxCasper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux
Casper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux
AugmentedWorldExpo
 
The next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRThe next frontier: WebGL and WebVR
The next frontier: WebGL and WebVR
Codemotion
 
【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界
【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界
【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界
Unity Technologies Japan K.K.
 
【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説
Unity Technologies Japan K.K.
 
Building Multiplayer Games (w/ Unity)
Building Multiplayer Games (w/ Unity)Building Multiplayer Games (w/ Unity)
Building Multiplayer Games (w/ Unity)
Noam Gat
 
Sergey Gonchar - Fast rendering with Starling
Sergey Gonchar - Fast rendering with StarlingSergey Gonchar - Fast rendering with Starling
Sergey Gonchar - Fast rendering with Starling
Flash Conference
 
Practical guide to optimization in Unity
Practical guide to optimization in UnityPractical guide to optimization in Unity
Practical guide to optimization in Unity
DevGAMM Conference
 
Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016
Tony Parisi
 
【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来
【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来
【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来
Unite2017Tokyo
 
Breathing Life in Data Visualizations with Axure
Breathing Life in Data Visualizations with AxureBreathing Life in Data Visualizations with Axure
Breathing Life in Data Visualizations with Axure
Svetlin Denkov
 
WebVR, not just Holograms in the web but powerful platform
WebVR, not just Holograms in the web but powerful platformWebVR, not just Holograms in the web but powerful platform
WebVR, not just Holograms in the web but powerful platform
Windows Developer
 
Introduction to Phaser.js
Introduction to Phaser.jsIntroduction to Phaser.js
Introduction to Phaser.js
Francesco Raimondo
 
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
Pablo Farías Navarro
 
My 10 days with Phaser.js - WarsawJS Meetup #13
My 10 days with Phaser.js - WarsawJS Meetup #13My 10 days with Phaser.js - WarsawJS Meetup #13
My 10 days with Phaser.js - WarsawJS Meetup #13
Piotr Kowalski
 
Low Latency Networking on IOS and Android over Cloud by Oguz Bastemur
Low Latency Networking on IOS and Android over Cloud by Oguz BastemurLow Latency Networking on IOS and Android over Cloud by Oguz Bastemur
Low Latency Networking on IOS and Android over Cloud by Oguz Bastemur
Codemotion
 
Cross Game Dev with Corona
Cross Game Dev with CoronaCross Game Dev with Corona
Cross Game Dev with Corona
Shawn Grimes
 

What's hot (19)

Making HTML5 Games with Phaser
Making HTML5 Games with PhaserMaking HTML5 Games with Phaser
Making HTML5 Games with Phaser
 
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
 
Scotland JS 2016 Keynote: The VR Web and the Future of the Browser
Scotland JS 2016 Keynote: The VR Web and the Future of the BrowserScotland JS 2016 Keynote: The VR Web and the Future of the Browser
Scotland JS 2016 Keynote: The VR Web and the Future of the Browser
 
Casper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux
Casper Fabricius (Cimmerse): WebVR with A-Frame, React and ReduxCasper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux
Casper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux
 
The next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRThe next frontier: WebGL and WebVR
The next frontier: WebGL and WebVR
 
【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界
【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界
【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界
 
【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説
 
Building Multiplayer Games (w/ Unity)
Building Multiplayer Games (w/ Unity)Building Multiplayer Games (w/ Unity)
Building Multiplayer Games (w/ Unity)
 
Sergey Gonchar - Fast rendering with Starling
Sergey Gonchar - Fast rendering with StarlingSergey Gonchar - Fast rendering with Starling
Sergey Gonchar - Fast rendering with Starling
 
Practical guide to optimization in Unity
Practical guide to optimization in UnityPractical guide to optimization in Unity
Practical guide to optimization in Unity
 
Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016
 
【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来
【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来
【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来
 
Breathing Life in Data Visualizations with Axure
Breathing Life in Data Visualizations with AxureBreathing Life in Data Visualizations with Axure
Breathing Life in Data Visualizations with Axure
 
WebVR, not just Holograms in the web but powerful platform
WebVR, not just Holograms in the web but powerful platformWebVR, not just Holograms in the web but powerful platform
WebVR, not just Holograms in the web but powerful platform
 
Introduction to Phaser.js
Introduction to Phaser.jsIntroduction to Phaser.js
Introduction to Phaser.js
 
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
 
My 10 days with Phaser.js - WarsawJS Meetup #13
My 10 days with Phaser.js - WarsawJS Meetup #13My 10 days with Phaser.js - WarsawJS Meetup #13
My 10 days with Phaser.js - WarsawJS Meetup #13
 
Low Latency Networking on IOS and Android over Cloud by Oguz Bastemur
Low Latency Networking on IOS and Android over Cloud by Oguz BastemurLow Latency Networking on IOS and Android over Cloud by Oguz Bastemur
Low Latency Networking on IOS and Android over Cloud by Oguz Bastemur
 
Cross Game Dev with Corona
Cross Game Dev with CoronaCross Game Dev with Corona
Cross Game Dev with Corona
 

Similar to Ferguson VR Hackathon - May 6, 2017

Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Robert 'Bob' Reyes
 
Building AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScriptBuilding AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScript
FITC
 
Foundations of the Immersive Web
Foundations of the Immersive WebFoundations of the Immersive Web
Foundations of the Immersive Web
Tony Parisi
 
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
FITC
 
Immersed in the Web
Immersed in the WebImmersed in the Web
Introduction to WebGL - 1st WebGL meetup Amsterdam
Introduction to WebGL - 1st WebGL meetup AmsterdamIntroduction to WebGL - 1st WebGL meetup Amsterdam
Introduction to WebGL - 1st WebGL meetup Amsterdam
ThreeDee Media
 
sdc-2016-gvrf-and-io_public
sdc-2016-gvrf-and-io_publicsdc-2016-gvrf-and-io_public
sdc-2016-gvrf-and-io_public
Rick Lau
 
Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012
philogb
 
Prototyping in aframe
Prototyping in aframePrototyping in aframe
Prototyping in aframe
Kumar Ahir
 
Windows Phone 7 and Windows Azure – A Match Made in the Cloud
Windows Phone 7 and Windows Azure – A Match Made in the CloudWindows Phone 7 and Windows Azure – A Match Made in the Cloud
Windows Phone 7 and Windows Azure – A Match Made in the Cloud
Michael Collier
 
Byte Conf React Native 2018
Byte Conf React Native 2018Byte Conf React Native 2018
Byte Conf React Native 2018
Pulkit Kakkar
 
The Enterprise Dilemma: Native vs. Web
The Enterprise Dilemma: Native vs. WebThe Enterprise Dilemma: Native vs. Web
The Enterprise Dilemma: Native vs. Web
Motorola Mobility - MOTODEV
 
Immersive Web
Immersive WebImmersive Web
移动端Web app开发
移动端Web app开发移动端Web app开发
移动端Web app开发
Zhang Xiaoxue
 
Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Webgl 기술동향 2011.8
Webgl 기술동향 2011.8
Seung Joon Choi
 
Sx sw speaker proposal slides
Sx sw speaker proposal slidesSx sw speaker proposal slides
Sx sw speaker proposal slides
Mitch Williams
 
Building VR Applications For Google Cardboard
Building VR Applications For Google CardboardBuilding VR Applications For Google Cardboard
Building VR Applications For Google Cardboard
Mark Billinghurst
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
Sascha Corti
 
Mixed reality for Windows 10
Mixed reality for Windows 10Mixed reality for Windows 10
Mixed reality for Windows 10
Jiri Danihelka
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
George Kanellopoulos
 

Similar to Ferguson VR Hackathon - May 6, 2017 (20)

Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
 
Building AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScriptBuilding AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScript
 
Foundations of the Immersive Web
Foundations of the Immersive WebFoundations of the Immersive Web
Foundations of the Immersive Web
 
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
 
Immersed in the Web
Immersed in the WebImmersed in the Web
Immersed in the Web
 
Introduction to WebGL - 1st WebGL meetup Amsterdam
Introduction to WebGL - 1st WebGL meetup AmsterdamIntroduction to WebGL - 1st WebGL meetup Amsterdam
Introduction to WebGL - 1st WebGL meetup Amsterdam
 
sdc-2016-gvrf-and-io_public
sdc-2016-gvrf-and-io_publicsdc-2016-gvrf-and-io_public
sdc-2016-gvrf-and-io_public
 
Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012
 
Prototyping in aframe
Prototyping in aframePrototyping in aframe
Prototyping in aframe
 
Windows Phone 7 and Windows Azure – A Match Made in the Cloud
Windows Phone 7 and Windows Azure – A Match Made in the CloudWindows Phone 7 and Windows Azure – A Match Made in the Cloud
Windows Phone 7 and Windows Azure – A Match Made in the Cloud
 
Byte Conf React Native 2018
Byte Conf React Native 2018Byte Conf React Native 2018
Byte Conf React Native 2018
 
The Enterprise Dilemma: Native vs. Web
The Enterprise Dilemma: Native vs. WebThe Enterprise Dilemma: Native vs. Web
The Enterprise Dilemma: Native vs. Web
 
Immersive Web
Immersive WebImmersive Web
Immersive Web
 
移动端Web app开发
移动端Web app开发移动端Web app开发
移动端Web app开发
 
Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Webgl 기술동향 2011.8
Webgl 기술동향 2011.8
 
Sx sw speaker proposal slides
Sx sw speaker proposal slidesSx sw speaker proposal slides
Sx sw speaker proposal slides
 
Building VR Applications For Google Cardboard
Building VR Applications For Google CardboardBuilding VR Applications For Google Cardboard
Building VR Applications For Google Cardboard
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
 
Mixed reality for Windows 10
Mixed reality for Windows 10Mixed reality for Windows 10
Mixed reality for Windows 10
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 

Recently uploaded

Marketing Articles and ppt on how to do marketing ..Challenges faced during M...
Marketing Articles and ppt on how to do marketing ..Challenges faced during M...Marketing Articles and ppt on how to do marketing ..Challenges faced during M...
Marketing Articles and ppt on how to do marketing ..Challenges faced during M...
ankitamarik05
 
Effective-Recruitment-Strategies and leveraging linkedin
Effective-Recruitment-Strategies and leveraging linkedinEffective-Recruitment-Strategies and leveraging linkedin
Effective-Recruitment-Strategies and leveraging linkedin
DivyaMehta193660
 
HERO.pdf hero company working cap management project
HERO.pdf hero company working cap management projectHERO.pdf hero company working cap management project
HERO.pdf hero company working cap management project
SambalpurTokaSatyaji
 
calcaneal fracture seminar by dr vishu.pptx
calcaneal fracture seminar by dr vishu.pptxcalcaneal fracture seminar by dr vishu.pptx
calcaneal fracture seminar by dr vishu.pptx
Skmch
 
Risks & Business Risks Reduce - investment.pdf
Risks & Business Risks Reduce  - investment.pdfRisks & Business Risks Reduce  - investment.pdf
Risks & Business Risks Reduce - investment.pdf
Home
 
2024-07-07 Transformed 06 (shared slides).pptx
2024-07-07 Transformed 06 (shared slides).pptx2024-07-07 Transformed 06 (shared slides).pptx
2024-07-07 Transformed 06 (shared slides).pptx
Dale Wells
 
stackconf 2024 | Buzzing across the eBPF Landscape and into the Hive by Bill ...
stackconf 2024 | Buzzing across the eBPF Landscape and into the Hive by Bill ...stackconf 2024 | Buzzing across the eBPF Landscape and into the Hive by Bill ...
stackconf 2024 | Buzzing across the eBPF Landscape and into the Hive by Bill ...
NETWAYS
 
stackconf 2024 | Using European Open Source to build a Sovereign Multi-Cloud ...
stackconf 2024 | Using European Open Source to build a Sovereign Multi-Cloud ...stackconf 2024 | Using European Open Source to build a Sovereign Multi-Cloud ...
stackconf 2024 | Using European Open Source to build a Sovereign Multi-Cloud ...
NETWAYS
 
Workshop Wednesday with SaaStr CEO Jason Lemkin - VC Workshop
Workshop Wednesday with SaaStr CEO Jason Lemkin - VC WorkshopWorkshop Wednesday with SaaStr CEO Jason Lemkin - VC Workshop
Workshop Wednesday with SaaStr CEO Jason Lemkin - VC Workshop
saastr
 
At the intersection of SEO & Product - Vanda Pokecz presentation
At the intersection of SEO & Product - Vanda Pokecz presentationAt the intersection of SEO & Product - Vanda Pokecz presentation
At the intersection of SEO & Product - Vanda Pokecz presentation
Vanda Pokecz
 
TEST WORTHINESS: VALIDITY, RELIABILITY, PRACTICALITY
TEST WORTHINESS: VALIDITY, RELIABILITY, PRACTICALITYTEST WORTHINESS: VALIDITY, RELIABILITY, PRACTICALITY
TEST WORTHINESS: VALIDITY, RELIABILITY, PRACTICALITY
AaSs197122
 
Destyney Duhon personal brand exploration
Destyney Duhon personal brand explorationDestyney Duhon personal brand exploration
Destyney Duhon personal brand exploration
minxxmaree
 
A study on drug utilization evaluation of bronchodilators using DDD method
A study on drug utilization evaluation of bronchodilators using DDD methodA study on drug utilization evaluation of bronchodilators using DDD method
A study on drug utilization evaluation of bronchodilators using DDD method
Dr. Afreen Nasir
 
Call India - AmanTel on the App Store.ppt
Call India - AmanTel on the App Store.pptCall India - AmanTel on the App Store.ppt
Call India - AmanTel on the App Store.ppt
Best International calling app on the market
 
Pengukuran berat badan anak dan tinggi badan anak
Pengukuran berat badan anak dan tinggi badan anakPengukuran berat badan anak dan tinggi badan anak
Pengukuran berat badan anak dan tinggi badan anak
DeviDamayanti53
 
stackconf 2024 | On-Prem is the new Black by AJ Jester
stackconf 2024 | On-Prem is the new Black by AJ Jesterstackconf 2024 | On-Prem is the new Black by AJ Jester
stackconf 2024 | On-Prem is the new Black by AJ Jester
NETWAYS
 
Recruitment articles and posts- different & effective ways of recruitment
Recruitment articles and posts- different & effective ways of recruitmentRecruitment articles and posts- different & effective ways of recruitment
Recruitment articles and posts- different & effective ways of recruitment
Rashi427200
 
Biography of the late Mrs. Stella Atsupui Eddah.pdf
Biography of the late Mrs. Stella Atsupui Eddah.pdfBiography of the late Mrs. Stella Atsupui Eddah.pdf
Biography of the late Mrs. Stella Atsupui Eddah.pdf
AbdulSadickZutah
 
Building Digital Products & Content Leadership
Building Digital Products & Content LeadershipBuilding Digital Products & Content Leadership
Building Digital Products & Content Leadership
Rajesh Math
 
the sparks foundation JOB READINESS- how to be job ready. task 2
the sparks foundation JOB READINESS- how to be job ready. task 2the sparks foundation JOB READINESS- how to be job ready. task 2
the sparks foundation JOB READINESS- how to be job ready. task 2
Rashi427200
 

Recently uploaded (20)

Marketing Articles and ppt on how to do marketing ..Challenges faced during M...
Marketing Articles and ppt on how to do marketing ..Challenges faced during M...Marketing Articles and ppt on how to do marketing ..Challenges faced during M...
Marketing Articles and ppt on how to do marketing ..Challenges faced during M...
 
Effective-Recruitment-Strategies and leveraging linkedin
Effective-Recruitment-Strategies and leveraging linkedinEffective-Recruitment-Strategies and leveraging linkedin
Effective-Recruitment-Strategies and leveraging linkedin
 
HERO.pdf hero company working cap management project
HERO.pdf hero company working cap management projectHERO.pdf hero company working cap management project
HERO.pdf hero company working cap management project
 
calcaneal fracture seminar by dr vishu.pptx
calcaneal fracture seminar by dr vishu.pptxcalcaneal fracture seminar by dr vishu.pptx
calcaneal fracture seminar by dr vishu.pptx
 
Risks & Business Risks Reduce - investment.pdf
Risks & Business Risks Reduce  - investment.pdfRisks & Business Risks Reduce  - investment.pdf
Risks & Business Risks Reduce - investment.pdf
 
2024-07-07 Transformed 06 (shared slides).pptx
2024-07-07 Transformed 06 (shared slides).pptx2024-07-07 Transformed 06 (shared slides).pptx
2024-07-07 Transformed 06 (shared slides).pptx
 
stackconf 2024 | Buzzing across the eBPF Landscape and into the Hive by Bill ...
stackconf 2024 | Buzzing across the eBPF Landscape and into the Hive by Bill ...stackconf 2024 | Buzzing across the eBPF Landscape and into the Hive by Bill ...
stackconf 2024 | Buzzing across the eBPF Landscape and into the Hive by Bill ...
 
stackconf 2024 | Using European Open Source to build a Sovereign Multi-Cloud ...
stackconf 2024 | Using European Open Source to build a Sovereign Multi-Cloud ...stackconf 2024 | Using European Open Source to build a Sovereign Multi-Cloud ...
stackconf 2024 | Using European Open Source to build a Sovereign Multi-Cloud ...
 
Workshop Wednesday with SaaStr CEO Jason Lemkin - VC Workshop
Workshop Wednesday with SaaStr CEO Jason Lemkin - VC WorkshopWorkshop Wednesday with SaaStr CEO Jason Lemkin - VC Workshop
Workshop Wednesday with SaaStr CEO Jason Lemkin - VC Workshop
 
At the intersection of SEO & Product - Vanda Pokecz presentation
At the intersection of SEO & Product - Vanda Pokecz presentationAt the intersection of SEO & Product - Vanda Pokecz presentation
At the intersection of SEO & Product - Vanda Pokecz presentation
 
TEST WORTHINESS: VALIDITY, RELIABILITY, PRACTICALITY
TEST WORTHINESS: VALIDITY, RELIABILITY, PRACTICALITYTEST WORTHINESS: VALIDITY, RELIABILITY, PRACTICALITY
TEST WORTHINESS: VALIDITY, RELIABILITY, PRACTICALITY
 
Destyney Duhon personal brand exploration
Destyney Duhon personal brand explorationDestyney Duhon personal brand exploration
Destyney Duhon personal brand exploration
 
A study on drug utilization evaluation of bronchodilators using DDD method
A study on drug utilization evaluation of bronchodilators using DDD methodA study on drug utilization evaluation of bronchodilators using DDD method
A study on drug utilization evaluation of bronchodilators using DDD method
 
Call India - AmanTel on the App Store.ppt
Call India - AmanTel on the App Store.pptCall India - AmanTel on the App Store.ppt
Call India - AmanTel on the App Store.ppt
 
Pengukuran berat badan anak dan tinggi badan anak
Pengukuran berat badan anak dan tinggi badan anakPengukuran berat badan anak dan tinggi badan anak
Pengukuran berat badan anak dan tinggi badan anak
 
stackconf 2024 | On-Prem is the new Black by AJ Jester
stackconf 2024 | On-Prem is the new Black by AJ Jesterstackconf 2024 | On-Prem is the new Black by AJ Jester
stackconf 2024 | On-Prem is the new Black by AJ Jester
 
Recruitment articles and posts- different & effective ways of recruitment
Recruitment articles and posts- different & effective ways of recruitmentRecruitment articles and posts- different & effective ways of recruitment
Recruitment articles and posts- different & effective ways of recruitment
 
Biography of the late Mrs. Stella Atsupui Eddah.pdf
Biography of the late Mrs. Stella Atsupui Eddah.pdfBiography of the late Mrs. Stella Atsupui Eddah.pdf
Biography of the late Mrs. Stella Atsupui Eddah.pdf
 
Building Digital Products & Content Leadership
Building Digital Products & Content LeadershipBuilding Digital Products & Content Leadership
Building Digital Products & Content Leadership
 
the sparks foundation JOB READINESS- how to be job ready. task 2
the sparks foundation JOB READINESS- how to be job ready. task 2the sparks foundation JOB READINESS- how to be job ready. task 2
the sparks foundation JOB READINESS- how to be job ready. task 2
 

Ferguson VR Hackathon - May 6, 2017

  • 3. VR Experiences New considera-ons for VR app development Focus on User Experience - Stereoscopic vision & interpupillary distance (IPD) - Head tracking & degrees of freedom (DoF) - Cone of focus & field of view (FOV) - 3D posi-onal audio - Latency & frame rate (frames per second / FPS) Focus on User Comfort - Eye strain - Mo-on sickness
  • 4. Degrees of Freedom, Stereoscopic Vision & Interpupillary Distance* * Illustra*ons from Mozilla
  • 5. Na#ve VR Devices (PC & Console) HTC Vive (room-scale VR) Oculus Ri6 Playsta:on VR Fove Razer OSVR
  • 6. Mobile VR Devices (Smartphone) Samsung Gear VR Daydream Cardboard Hundreds of third-party headsets
  • 7. VR Programming • Unreal Engine (C++) • Unity (C#) • Source Engine (C++) • WebVR (JS)
  • 8. VR Distribu+on • SteamVR • Google Play • Oculus Store • The Ri8 Arcade • V "open alterna>ve" to SteamVR
  • 9. Why WebVR? • No app store ecosystem, distribu3on via internet • Mobile & desktop automa3cally supported • Uses current tools and libraries for JS • Easy switch between VR & non-VR mode • Interfacing with hardware through the browser
  • 10. Progressive Enhancement by Arturo Paracuellos
  • 11. Virtual Reality on the Web A Retrospec+ve 1/2 • 1994 VRML - first a0empt to create an internet-based 3D language. (Mark Pesce presented the Labyrinth demo he developed with Tony Parisi and Peter Kennard.) • VRML2 (1997) - added many features (animaMon) and later was succeeded by X3D Problem of VRML: plugin-based technology that only came preinstalled on IE
  • 12. Virtual Reality on the Web A Retrospec+ve 2/2 • 2003 OpenGL ES - cross-language and mul9-pla:orm 3D graphics API. Hardware accelerated rendering of 3D objects. • WebGL 1.0 introduced by Mozilla based on OpenGL ES uses DOM (canvas element) • X3D introduced X3DOM
  • 13. Most popular WebGL Engines today • Three.js by Ricardo Cabello in 2010 • Babylon.js • PlayCanvas.js • Goo Engine • Scene.js • Turbulenz
  • 14. Stackoverflow score growth over 0me by tag comparison WebGL Framework Comparison
  • 15. What is WebVR? WebVR is a experimental Javascript API that provides interfaces to VR hardware to allow developers to build compelling, comfortable VR experiences on the web.
  • 16. WebVR WebVR v1.1 Editor’s Dra,, 04/05/17 - deviceOrienta-on - VRDisplay object handles almost everything - available on mul-ple pla<orms ..soon.. WebVR (2.0) Editor’s Dra,, 04/17/17 - not backwards compa-ble - device support - introduc-on of VRDevice & VRSession to replace VRDisplay - read Explainer doc!
  • 17. Goals of WebVR • Detect available virtual reality devices. • Query the device’s capabili6es. • Poll the device’s posi6on and orienta6on. • Display imagery on the device at the appropriate frame rate.
  • 18. Non-goals of WebVR • Define how a virtual reality browser would work. • Take full advantage of augmented reality devices. • Build “The Metaverse.” Check out h*ps://webvr.rocks/ for support updates
  • 19. WebVR Frameworks • A-Frame by Mozilla • ReactVR by Facebook • ForgeJS by GoPro, Inc., great for 360 photo & video content • Primrose great for collaboraIve VR web apps • Janus VR VR browser/editor • Vizor in-browser VR development, SocialVR • GLAM (GL And Markup) declaraIve language for 3D web
  • 22. A-Frame • a 3DML (3D markup language) like X3Dom and GLAM • DOM-based En>ty-Component System => declara>ve & extensible (similar to Unity/UE4/PlayCanvas) The A-Frame Stack:
  • 24. A-Frame • En$$es are HTML elements (i.e., <a-entity>) • Components are HTML a9ributes, set on the en$ty <body> <a-scene> <a-entity geometry="primitive:box" material="color:#c00"> </a-entity> </a-scene> </body>
  • 25. En#ty • general purpose objects (e.g. create a player, ball, or field) • they inherently have a posi;on, rota;on and scale in a scene <a-entity geometry="primitive:box; width:0.2; height:0.3; depth:0.5;" material="color:#c00" position="0 0 -1" rotation="0 30 30" material="color:#c00"> </a-entity>
  • 26. Primi%ves (concise, seman%c building blocks) <a-entity geometry="primitive:box; width:0.2; height:0.3; depth:0.5;" material="color:#c00"> </a-entity> <a-box width="0.2" height="0.3" depth="0.5" material="color:#c00"> </a-box>
  • 28. Custom Components AFRAME.registerComponent('foo', { schema: { bar: {type: 'number'}, baz: {type: 'string'} }, init: function () { // Do something when component is plugged in. }, update: function () { // Do something when component's data is updated. } });
  • 30. Gaze-Based Cursor Interac2ons AFRAME.registerComponent('clickable', { init: function () { var el = this.el; el.addEventListener('mouseenter', function () { el.setAttribute('color', '#f00'); }); el.addEventListener('mouseleave', function () { el.setAttribute('color', '#fff'); }); el.addEventListener('click', function () { el.setAttribute('material', 'src' , 'assets/football.png'); }); } }); <a-sphere clickable src="assets/basketball.png" radius="0.5" color="#fff"></a-sphere> <a-camera><a-cursor></a-cursor></a-camera>
  • 35. Resources * A-Frame Slack * A-Frame Component Registry * mozvr.com * VR Gets Real with WebVR * WebVR API * The UX of VR Get In Touch @rolanddubois rolanddubois.com
  • 36. It’s code *me! Here’s what we’re building: • github.com/rdub80/Ferguson-VR-Hackathon • XAMPP, MAMP or $ python -m SimpleHTTPServer • JSBin