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

Slides: https://bit.ly/XRWomenAI

https://www.youtube.com/WebXR

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: https://caniuse.com/?search=webxr

Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API

AI Applications

Remix template for AR

Project is built on Immersive Web Co-chair Ada Rose Cannon'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: bit.ly/webstreet.

00:00 Introduction

02:24 Why are we doing this?

03:51 What are we building in this video?

05:30 What you need for this session. Google Docs: http://bit.ly/webstreet

11:10 Introduction to Glitch: https://glitch.com/

18:10 A-Frame intro: http://aframe.io/

39:16 Adding Orbit Controls Component

40:13 3DStreet component: https://github.com/kfarr/3dstreet

55:15 Mapbox Component: https://github.com/mattrei/aframe-map...

58:45 After manual configuration to position and rotate the street entity: https://glitch.com/edit/#!/17thbikelane

1:19:40 Augmented Reality example

1:11:07 A-Frame Presentation Component: https://github.com/rvdleun/aframe-pre...

11:18 Q&A

Find the links on Resources.

Transportation Game

Video outline:

00:00 Introduction http://bit.ly/webstreet

07:00 A-Frame VR game examples: https://dseffects.com/vr/games.php

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

10:35 Frogger game

15:30 A-Frame Ocean Example: http://codevember-19-ocean.glitch.me/

18:11 Helicopter Model from Sketchfab: https://sketchfab.com/3d-models/bell-...

20:00 3D Assets: https://github.com/Yonet/MixedReality...

20:30 Asset Optimization

21:09 Texture Optimization

23:23 Gltf Viewer: https://gltf-viewer.donmccurd

25:00 Mesh Optimizer library: https://github.com/zeux/meshoptimiz 26:15 Mesh Optimizer Options: https://github.com/zeux/meshoptimizer...

28:00 RapidCompact Mesh Optimizer: https://rapidcompact.com/30:55 Scene components overview

33:00 HDRI(High-Dynamic-Range Imaging) component

34:11 VArtiste Texture Painting Tool: https://vartiste.xyz/

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

39:00 Orbit Control component settings

42:25 Animation49:00 Street Components

1:00:00 Draw calls

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/