1 of 9

A-Frame

Concepts

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 Unity. 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

Project

Inclusive Apps with WebXR & AI

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

Goals

Introduction to WebXR concepts
Exploring the potential applications of WebXR & AI for accessibility and better user experience
Lightweight introduction to A-Frame

WebXR

AI Applications

Remix template for AR

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

Creating WebXR apps for Transportation with A-Frame

Transportation Game

Video outline:

What could go wrong?

Resources

A-Frame and Project Resources

A-Frame Documentation: http://aframe.io/
A-Frame VR game examples: https://dseffects.com/vr/games.php
WebXR Input Profiles: https://github.com/immersive-web/webxr-input-profiles
A-Frame Ocean Example: http://codevember-19-ocean.glitch.me/
3D Assets: https://github.com/Yonet/MixedRealityResources#assets
Mesh Optimizer library: https://github.com/zeux/meshoptimizer
Mesh Optimizer Options: https://github.com/zeux/meshoptimizer/tree/master/gltf#options
Gltf Viewer: https://gltf-viewer.donmccurdy.com/
RapidCompact Mesh Optimizer: https://rapidcompact.com/
VArtiste Texture Painting Tool: https://vartiste.xyz/
VArtiste Tutorial:

Skies texture: https://www.cgskies.com/

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 Unity. 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

Resources

A-Frame and Project Resources

A-Frame Documentation: http://aframe.io/
A-Frame VR game examples: https://dseffects.com/vr/games.php
WebXR Input Profiles: https://github.com/immersive-web/webxr-input-profiles
A-Frame Ocean Example: http://codevember-19-ocean.glitch.me/
3D Assets: https://github.com/Yonet/MixedRealityResources#assets
Mesh Optimizer library: https://github.com/zeux/meshoptimizer
Mesh Optimizer Options: https://github.com/zeux/meshoptimizer/tree/master/gltf#options
Gltf Viewer: https://gltf-viewer.donmccurdy.com/
RapidCompact Mesh Optimizer: https://rapidcompact.com/
VArtiste Texture Painting Tool: https://vartiste.xyz/
VArtiste Tutorial:

Skies texture: https://www.cgskies.com/

Transportation Game

Video outline:

Introduction

A-Frame VR game examples:

WebXR Input Profiles:

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

Inclusive Apps with WebXR & AI

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

Slides:

Goals

Introduction to WebXR concepts
Exploring the potential applications of WebXR & AI for accessibility and better user experience
Lightweight introduction to A-Frame

WebXR

State of WebXR APIs:

Mozilla Developer Network:

AI Applications

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

 <script src="https://aka.ms/csspeech/jsbrowserpackageraw"></script>

Creating WebXR apps for Transportation with A-Frame

Find the related links document: .

Introduction

Why are we doing this?

What are we building in this video?

What you need for this session. Google Docs:

Introduction to Glitch:

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 .