arrow-left

All pages
gitbookPowered by GitBook
1 of 9

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Concepts

Aframe docs:

: Ctrl + Alt + i

https://aframe.io/docs/arrow-up-right
Visual inspectorarrow-up-right

A-Frame

Inclusive Apps with WebXR & AI

This project is going to discuss WebXR & AI use cases and work on an hands on project

Slides: https://bit.ly/XRWomenAIarrow-up-right

https://www.youtube.com/WebXRarrow-up-right

hashtag
Goals

hashtag
WebXR

State of WebXR APIs:

Mozilla Developer Network:

hashtag
AI Applications

hashtag
Remix template for AR

Project is built on Immersive Web Co-chair 's AR starter project on Glitch. You can create a free account and make a copy of the AR Starter Kit project linked below by choosing Remix option. This will copy the project on to your account and you can start editing directly.

You can find Ada's XR Template on Github

You can find more WebXR templates on Glitch WebXR Playlist

Add Speech SDK by including the below script in html

Basic A-Frame Scene

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Primitives are similar to prefabs in Unityarrow-up-right. They abstract the core entity-component API to:

  • Pre-compose useful components together with prescribed defaults

  • Act as a shorthand for complex-but-common types of entities (e.g., <a-sky>)

  • Provide a familiar interface for beginners since A-Frame takes HTML in a new direction

You can see the resulting page on Glitch

https://caniuse.com/?search=webxrarrow-up-right
https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_APIarrow-up-right
Ada Rose Cannonarrow-up-right
 <script src="https://aka.ms/csspeech/jsbrowserpackageraw"></script>

Project

Creating WebXR apps for Transportation with A-Frame

Find the related links document: bit.ly/webstreetarrow-up-right.

00:00arrow-up-right Introduction

02:24arrow-up-right Why are we doing this?

03:51arrow-up-right What are we building in this video?

05:30arrow-up-right What you need for this session. Google Docs: http://bit.ly/webstreetarrow-up-right

11:10arrow-up-right Introduction to Glitch: https://glitch.com/arrow-up-right

A-Frame intro:

Adding Orbit Controls Component

3DStreet component:

Mapbox Component:

After manual configuration to position and rotate the street entity:

Augmented Reality example

A-Frame Presentation Component:

Q&A

Find the links on .

What could go wrong?

18:10arrow-up-right
http://aframe.io/arrow-up-right
39:16arrow-up-right
40:13arrow-up-right
https://github.com/kfarr/3dstreetarrow-up-right
55:15arrow-up-right
https://github.com/mattrei/aframe-map...arrow-up-right
58:45arrow-up-right
https://glitch.com/edit/#!/17thbikelanearrow-up-right
1:19:40arrow-up-right
1:11:07arrow-up-right
https://github.com/rvdleun/aframe-pre...arrow-up-right
11:18arrow-up-right
Resources

Transportation Game

Video outline:

00:00arrow-up-right Introduction http://bit.ly/webstreetarrow-up-right

07:00arrow-up-right A-Frame VR game examples: https://dseffects.com/vr/games.phparrow-up-right

09:30arrow-up-right WebXR Input Profiles: https://github.com/immersive-web/webx...arrow-up-right

10:35arrow-up-right Frogger game

A-Frame Ocean Example:

Helicopter Model from Sketchfab:

3D Assets:

Asset Optimization

Texture Optimization

Gltf Viewer:

Mesh Optimizer library: Mesh Optimizer Options:

RapidCompact Mesh Optimizer: Scene components overview

HDRI(High-Dynamic-Range Imaging) component

VArtiste Texture Painting Tool:

Skies texture:

Orbit Control component settings

Animation Street Components

Draw calls

15:30arrow-up-right
http://codevember-19-ocean.glitch.me/arrow-up-right
18:11arrow-up-right
https://sketchfab.com/3d-models/bell-...arrow-up-right
20:00arrow-up-right
https://github.com/Yonet/MixedReality...arrow-up-right
20:30arrow-up-right
21:09arrow-up-right
23:23arrow-up-right
https://gltf-viewer.donmccurdarrow-up-right
25:00arrow-up-right
https://github.com/zeux/meshoptimizarrow-up-right
26:15arrow-up-right
https://github.com/zeux/meshoptimizer...arrow-up-right
28:00arrow-up-right
https://rapidcompact.com/arrow-up-right
30:55arrow-up-right
33:00arrow-up-right
34:11arrow-up-right
https://vartiste.xyz/arrow-up-right
36:35arrow-up-right
https://www.cgskies.com/arrow-up-right
39:00arrow-up-right
42:25arrow-up-right
49:00arrow-up-right
1:00:00arrow-up-right
SeeingAI Microsoft Research video
GitHub - Yonet/MixedRealityResources: Mixed Reality related resourcesGitHubchevron-right
Mixed Reality Resources Repository
https://turquoise-pastoral-gruyere.glitch.me/turquoise-pastoral-gruyere.glitch.mechevron-right
Click to view the glitch project on VR or AR enabled mobile device
Glitch Blogglitch.comchevron-right
Basic Aframe scene on Glitch
Logo
GitHub - AdaRoseCannon/aframe-xr-boilerplate: Get started quickly with VR and AR using AFrameGitHubchevron-right
Aframe-xr-boilerplate on Github by Ada Rose Cannon
Logo
W3C workshop on immersive worlds on the webw3cchevron-right
W3C Metaverse Workshop
Glitch Blogglitch.comchevron-right
AR Starter Kit by Ada Rose Cannonarrow-up-right
Logo
Logo
Logo
Glitch Blogglitch.comchevron-right
Glitch WebXR Playlist of templates
Logo

Resources

A-Frame and Project Resources

  • A-Frame Documentation: http://aframe.io/arrow-up-right

  • A-Frame VR game examples: https://dseffects.com/vr/games.phparrow-up-right

  • WebXR Input Profiles:

  • A-Frame Ocean Example:

  • 3D Assets: https://github.com/Yonet/MixedRealityResources#assets

  • Mesh Optimizer library:

  • Mesh Optimizer Options:

  • Gltf Viewer:

  • RapidCompact Mesh Optimizer:

  • VArtiste Texture Painting Tool:

  • VArtiste Tutorial:

  • Skies texture:

https://github.com/immersive-web/webxr-input-profilesarrow-up-right
http://codevember-19-ocean.glitch.me/arrow-up-right
https://github.com/zeux/meshoptimizerarrow-up-right
https://github.com/zeux/meshoptimizer/tree/master/gltf#optionsarrow-up-right
https://gltf-viewer.donmccurdy.com/arrow-up-right
https://rapidcompact.com/arrow-up-right
https://vartiste.xyz/arrow-up-right
https://www.cgskies.com/arrow-up-right