A-FRAME Build theVirtual RealityW eb MozillaVRT eam @ cvanw @ - - PowerPoint PPT Presentation

▶
a frame
SMART_READER_LITE
LIVE PREVIEW

A-FRAME Build theVirtual RealityW eb MozillaVRT eam @ cvanw @ - - PowerPoint PPT Presentation

Dec 14, 2023 279 likes •632 views

A-FRAME Build theVirtual RealityW eb MozillaVRT eam @ cvanw @ dmarcos @ fernandojsg @ kearwoodgilbert @ ngokevin_ @ whoyee . It s too hard to create WebVR experiences. Josh Carpenter I ndex.htrnl - rainbowrneJT1brane

slide-1
SLIDE 1

A-FRAME

Build theVirtual RealityW eb

slide-2
SLIDE 2
slide-3
SLIDE 3
slide-4
SLIDE 4

MozillaVRT eam

@ cvanw @ dmarcos @ fernandojsg @ kearwoodgilbert @ ngokevin_ @ whoyee

slide-5
SLIDE 5

.

slide-6
SLIDE 6

It’s too hard to create WebVR experiences.

slide-7
SLIDE 7

Josh Carpenter

I

ndex.htrnl - rainbowrneJT1brane

UNREGISTERED FOLDERS T e, rainbowmembrane

... CJ audio ... CJ examples ... CJ img ... CJ lib ... D models ... CJ shaderChunks ... CJ shaders

.index.html.swn

G l : ) create.js G l : ) GEM.js G l : ) GUl.js G l : )

initTones. js

G l : )

Opening.js

G l : ) RayMaker.

js

G l : ) RepelerMesh.js G l : ) Tone.js

slide-8
SLIDE 8

<a-box> <a-sphere> <a-obj-model>

slide-9
SLIDE 9

<a-box depth=“5” height=“0.5” width=“2”> <a-sphere color=“crimson” radius=“1.5”> <a-obj-model src=“fox.obj”>

slide-10
SLIDE 10

A-FRAME

An open source framework for creating virtual reality web experiences without having to knowWebGL

slide-11
SLIDE 11
slide-12
SLIDE 12

OUT

  • OF-THE-BOX ELEMENTS

<a-video> <a-cylinder> <a-sky> <a-videosphere> <a-image> <a-box> <a-obj-model> <a-collada-model> <a-curvedimage> <a-light> <a-sphere>

slide-13
SLIDE 13

WITHVANILLA JAVASCRIPT

.querySelector(‘a-image’) .getAttribute(‘opacity’) .setAttribute(‘material’, ‘color’, .addEventListener(‘collide’) ’blanchedalmond’) .createElement(‘a-entity’)

slide-14
SLIDE 14

WITH LIBRARIES

$(‘a-box’).attr(‘width’, 5) d3.select(‘a-scene’).selectAll(‘a- box.bar’).data(data) <Entity geometry={{ primitive: ‘ring’, material={{ color: ‘red’, shader: radiusInner: 1.5 }}

.

‘flat’ }} light={...lightProperties}

  • nClick={this.changeColor}/>
.
slide-15
SLIDE 15

ANIMATION SYSTEM

<a-box> <a-animation attribute=“rotation” repeat=“indefinite” to=“0 360 0”></a-animation> </a-box>

slide-16
SLIDE 16

ASSET MANAGEMENT SYSTEM

<a-scene> <a-assets> <a-asset-item id=“monster” src=“monster.obj”></a-asset-item> </a-assets> <a-entity </a-scene>

  • bj-model=“src: #monster”></a-entity>
slide-17
SLIDE 17

Let’ s build a scene

slide-18
SLIDE 18

ENTITY

  • COMPONENT
  • SYSTEM

Composability over inheritance

slide-19
SLIDE 19

ENTITY

  • COMPONENT
  • SYSTEM
  • Entities - placeholder objects
  • Components - modify appearance,behavior

, functionality of entities

slide-20
SLIDE 20

REVEALINGTHE ABSTRACTION LAYER

<a-box width=“5” color=“#2E3837”> <a-entity geometry=“primitive: box; width: 5” material=“color: #2E3837”>

slide-21
SLIDE 21

COMPOSINGAN ENTITY

<a-entity>

slide-22
SLIDE 22

COMPOSING AN ENTITY

<a-entity geometry=“primitive: sphere; radius: 1.5” material=“color: tomato; metalness: 0.7”>

slide-23
SLIDE 23

COMPOSING AN ENTITY

<a-entity geometry=“primitive: sphere; radius: 1.5” material=“color: tomato; metalness: 0.7” light=“type: point; sound=“src: color: tomato” #rickroll; volume: 0.9”>

slide-24
SLIDE 24

COMPOSING AN ENTITY

<a-entity geometry=“primitive: sphere; radius: 1.5” material=“color: tomato; metalness: 0.7” light=“type: point; sound=“src: #rickroll; color: tomato” volume: 0.9” physics=“boundingRadius: 1.5; mass: 1” aggro=“100” explode follow-player vibrate>

slide-25
SLIDE 25

ANA T OMYAND PHYSIOLOGY

}); AFRAME.registerComponent(‘position’, {

slide-26
SLIDE 26

ANATOMY AND PHYSIOLOGY

}); AFRAME.registerComponent(‘position’, { schema: { type: ‘vec3’ },

slide-27
SLIDE 27

ANATOMY AND PHYSIOLOGY

}); AFRAME.registerComponent(‘position’, { schema: { type: ‘vec3’ }, update: function () { this.el.object3D.position.set ( this.data.x, this.data.y, this.data.z ); }

slide-28
SLIDE 28

STANDARD COMPONENTS

  • bj-model

collada-model physics rotation scale material fog geometry position light look-at look-controls sound text

slide-29
SLIDE 29

COMMUNITY COMPONENTS

along-path leap-motion-controls collider proxy-controls layout lazy-load extrude-geometry spawner

  • bj-loader

gamepad-controls lathe-geometry

slide-30
SLIDE 30

COMPOSING MIXINS

<a-scene> <a-assets> <a-mixin <a-mixin <a-mixin <a-mixin id=“ball” id=“cube” geometry=“primitive: geometry=“primitive: sphere”></a-mixin> box”></a-mixin> id=“green” material=“color: id=“shiny” light=“type: #B4CD93”></a-mixin> point”></a-mixin> </a-assets> </a-scene> <a-entity mixin=“green ball”></a-entity> <a-entity mixin=“shiny ball”></a-entity> <a-entity mixin=“shiny green cube”></a-entity>

slide-31
SLIDE 31

LATER ON, STYLESHEETS

#basketball { geometry { primitive: sphere; radius: 0.5; } material { roughness: 0.9; src: url(basketball.png); } physics { boundingRadius: mass: 0.8; 0.5; } visible: true; }

slide-32
SLIDE 32

A-FRAME + WEBVR

slide-33
SLIDE 33

GET INVOLVED

  • aframevr
  • slack.herokuapp.com
  • aframe.io
  • github.com/aframevr
  • mozvr

.com

slide-34
SLIDE 34