novice to ninja
Concepts
Stereo camera
Head tracking
spatial sound
UI/UX
the Real family (vr, ar, mr, cr, tr)
A-frame
Measuring
Position and orientation, velocity and acceleration
is the normal vision humans, the perception of two slightly differing images (one from each eye) as a single image. This results in depth perception, helping us to see the world in glorious 3D.
What The User Listen
- directional sound
- ambient sound
- reflection / postition
- physics on sounds
(Just basic rules)
Virtual Reality (VR)
Faking the reality
virtual reality completely replaces reality with a virtual world. Computing power and optics simulate a visual and auditory experience that seeks to fool the user into believing the virtual world is a real one.
CardBoard, Oculus, HTCVive
Augmented Reality (AR)
a better reality
AR enhances reality by layering information or virtual aspects over a direct view of actual reality
Google Glass,
Mixed Reality (MR)
3D object on the real world
MR combines digitally-rendered, interactive objects with the real environment. But unlike AR, which involves layering objects and information on top of the existing world, MR incorporates believable, virtual objects with reality.
WebVR is a JavaScript API for creating immersive 3D, Virtual Reality experiences in your browser.
HTML to 3D/vr Scenes
A-Frame lets you build scenes with just HTML while having unlimited access to JavaScript, three.js, and all existing Web APIs. A-Frame uses an entity-component-system pattern that promotes composition and extensibility
A-frame
3D API
VR API
VRDisplay
VRDisplayCapabilities
VRPose
etc..
WebVr App
DeviceOrientationEvent
DeviceOrientationEvent
A-frame
Entity-Component-System
Codepen example
Panorama / skybox
equirectangular image
<a-image>
<a-sky
src="http://4.bp.blogspot.com/_4ZFfiaaptaQ/TNHjKAwjK6I/AAAAAAAAE30/IG2SO24XrDU/s1600/new.png"
rotation="0 -130 0"></a-sky>
Video 360
<a-video>
<a-scene>
<a-assets>
<video id="video" src="https://ucarecdn.com/bcece0a8-86ce-460e-856b-40dac4875f15/"
autoplay loop crossorigin></video>
</a-assets>
<a-videosphere src="#video" rotation="0 180 0"></a-videosphere>
</a-scene>
gaze cursor
<a-cursor>
<a-scene>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
<a-box></a-box>
</a-scene>
gaze cursor click and hover
<a-cursor>
<a-entity camera>
<a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat">
</a-entity>
</a-entity>
<a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
AFRAME.registerComponent('cursor-listener', {
init: function () {
var COLORS = ['red', 'green', 'blue'];
this.el.addEventListener('click', function (evt) {
var randomIndex = Math.floor(Math.random() * COLORS.length);
this.setAttribute('material', 'color', COLORS[randomIndex]);
console.log('I was clicked at: ', evt.detail.intersection.point);
});
}
Loading Models
<a-scene>
<a-assets>
<a-asset-item id="tree"
src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/showcase/shopping/man/man.dae">
</a-asset-item>
</a-assets>
<a-entity collada-model="#tree"></a-entity>
</a-scene>
A-frame inspector
<ctrl> + <alt> + i
position tip
Models with boxels