Downloaded 49 times
![let scene = document.querySelector('a-scene');
let raycaster = document.querySelector('[ar-raycaster]');
let mark = document.querySelector('#intersection');
raycaster.addEventListener('raycaster-intersection', function(e) {
mark.setAttribute('position', e.detail.intersections[0].point);
mark.setAttribute('visible', true);
});
raycaster.addEventListener('raycaster-intersection-cleared', function(e) {
mark.setAttribute('visible', false);
});](https://cdn.statically.io/img/image.slidesharecdn.com/2018-01-script-confwithoutnotes-180119172613/75/Creating-Augmented-Reality-Apps-with-Web-Technology-80-2048.jpg)
![window.addEventListener('click', function () {
let furniture = document.querySelector('[io3d-furniture]');
let position = mark.getAttribute('position');
furniture.setAttribute('position', position);
furniture.setAttribute('visible', true);
});](https://cdn.statically.io/img/image.slidesharecdn.com/2018-01-script-confwithoutnotes-180119172613/75/Creating-Augmented-Reality-Apps-with-Web-Technology-81-2048.jpg)
![<a-scene arjs="trackingMethod:best;">
<a-assets>[…]</a-assets>
<a-anchor hit-testing-enabled="true">[…]</a-anchor>
<a-camera-static/>
</a-scene>](https://cdn.statically.io/img/image.slidesharecdn.com/2018-01-script-confwithoutnotes-180119172613/75/Creating-Augmented-Reality-Apps-with-Web-Technology-90-2048.jpg)
Uploaded byGeilDanke
Creating Augmented Reality Apps with Web Technology
The document provides an overview of augmented reality (AR) technology, contrasting it with virtual reality (VR) and mixed reality (MR). It discusses the historical context of AR, notable figures like Ivan Sutherland, and various use cases across industries. Additionally, it highlights the web technologies facilitating AR, including ARKit and ARCore, as well as practical examples and applications in different settings.
Creating Augmented Reality Apps with Web Technology
- 1.
- 2.
- 3.
- 4.
- 5.
- 6. Augmented Reality virtualoverlay
- 7. Mixed Reality virtualand real world coincide
- 8. @fischaelameergeildanke.com @SCRIPT18 A ShortHistory of Augmented Reality
- 9.
- 10. Ivan Sutherland’s The Swordof Damocles
- 11. Ivan Sutherland’s The Swordof Damocles
- 12. Sword of Damocles,1812 Richard Westall
- 13.
- 14.
- 16. ❝ Augmented Reality(AR) is a variation of Virtual Environments (VE), or Virtual Reality as it is more commonly called. ❞ Ronald Azura, 1997
- 17. ❝ VE technologiescompletely immerse a user inside a synthetic environment. While immersed, the user cannot see the real world around him. ❞ Ronald Azura, 1997
- 18. ❝ In contrast,AR allows the user to see the real world, with virtual objects superimposed upon or composited with the real world. Therefore, AR supplements reality, rather than completely replacing it. ❞ Ronald Azura, 1997
- 19.
- 20. @fischaelameergeildanke.com @SCRIPT18 Technology andUse Cases of Augmented Reality Today
- 22.
- 23. Innovation Trigger Peak ofInflated Expectations
- 24. Innovation Trigger Peak ofInflated Expectations Trough of Disillusionment
- 25. Innovation Trigger Peak ofInflated Expectations Trough of Disillusionment Slope of Enlightenment
- 26. Innovation Trigger Peak ofInflated Expectations Trough of Disillusionment Slope of Enlightenment Plateau of Productivity
- 27. Innovation Trigger Peak ofInflated Expectations Trough of Disillusionment Slope of Enlightenment Plateau of Productivity Machine Learning Blockchain Augmented Reality Virtual Reality
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 41.
- 43.
- 44.
- 45.
- 46. Write Once, RunsAnywhere
- 47. Write Once, RunsAnywhere No App Download Required
- 48.
- 49.
- 50.
- 51. WebGL API &WebVR API
- 52. WebGL API &WebVR API Media Capture and Streams API
- 53.
- 54.
- 55. @fischaelameergeildanke.com @SCRIPT18 Markerless AugmentedReality with ARCore and ARKit
- 56.
- 57. ARKit ARCore by Appleby Google
- 58. ARKit ARCore by Appleby Google World/Motion Tracking Scene Analyzation Light Estimation
- 59. ARKit ARCore by Appleby Google WebAROnARKit WebAROnARCore Two Experimental Browser Apps https://github.com/google-ar/WebARonARKit https://github.com/google-ar/WebARonARCore
- 60. ARKit ARCore by Appleby Google three.ar.js three.js for AR
- 62. <script src="aframe-master.min.js"></script> <script src="three.ar.js"></script> <scriptsrc="aframe-ar.js"></script> <script src="3dio.min.js"></script> <script src="main.js"></script>
- 63. <script src="aframe-master.min.js"></script> <script src="three.ar.js"></script> <scriptsrc="aframe-ar.js"></script> <script src="3dio.min.js"></script> <script src="main.js"></script>
- 64. <script src="aframe-master.min.js"></script> <script src="three.ar.js"></script> <scriptsrc="aframe-ar.js"></script> <script src="3dio.min.js"></script> <script src="main.js"></script>
- 65. <script src="aframe-master.min.js"></script> <script src="three.ar.js"></script> <scriptsrc="aframe-ar.js"></script> <script src="3dio.min.js"></script> <script src="main.js"></script>
- 66. <script src="aframe-master.min.js"></script> <script src="three.ar.js"></script> <scriptsrc="aframe-ar.js"></script> <script src="3dio.min.js"></script> <script src="main.js"></script>
- 67.
- 68. <script src="aframe-master.min.js"></script> <script src="three.ar.js"></script> <scriptsrc="aframe-ar.js"></script> <script src="3dio.min.js"></script> <script src="main.js"></script>
- 69. <body> <a-scene ar> <a-entity io3d-furniture="id:123"visible="false"></a-entity> <a-sphere id="intersection" visible="false" radius="0.04" color="yellow"></a-sphere> <a-camera> <a-entity cursor="fuse:false" raycaster ar-raycaster></a-entity> <a-entity position="0 0 -0.1" scale="0.001 0.001 0.001" geometry="primitive: ring; radiusInner: 0.8; radiusOuter: 1" material="color: yellow; shader: flat; transparent:true"> </a-entity> </a-camera> </a-scene> </body>
- 70. <body> <a-scene ar> <a-entity io3d-furniture="id:123"visible="false"></a-entity> <a-sphere id="intersection" visible="false" radius="0.04" color="yellow"></a-sphere> <a-camera> <a-entity cursor="fuse:false" raycaster ar-raycaster></a-entity> <a-entity position="0 0 -0.1" scale="0.001 0.001 0.001" geometry="primitive: ring; radiusInner: 0.8; radiusOuter: 1" material="color: yellow; shader: flat; transparent:true"> </a-entity> </a-camera> </a-scene> </body>
- 71. let scene =new THREE.Scene(); let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000); let renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); function render() { requestAnimationFrame(render); renderer.render(scene, camera); } render();
- 72. <body> <a-scene ar> <a-entity io3d-furniture="id:123"visible="false"></a-entity> <a-sphere id="intersection" visible="false" radius="0.04" color="yellow"></a-sphere> <a-camera> <a-entity cursor="fuse:false" raycaster ar-raycaster></a-entity> <a-entity position="0 0 -0.1" scale="0.001 0.001 0.001" geometry="primitive: ring; radiusInner: 0.8; radiusOuter: 1" material="color: yellow; shader: flat; transparent:true"> </a-entity> </a-camera> </a-scene> </body>
- 73. <body> <a-scene ar> <a-entity io3d-furniture="id:123"visible="false"></a-entity> <a-sphere id="intersection" visible="false" radius="0.04" color="yellow"></a-sphere> <a-camera> <a-entity cursor="fuse:false" raycaster ar-raycaster></a-entity> <a-entity position="0 0 -0.1" scale="0.001 0.001 0.001" geometry="primitive: ring; radiusInner: 0.8; radiusOuter: 1" material="color: yellow; shader: flat; transparent:true"> </a-entity> </a-camera> </a-scene> </body>
- 74. <body> <a-scene ar> <a-entity io3d-furniture="id:123"visible="false"></a-entity> <a-sphere id="intersection" visible="false" radius="0.04" color="yellow"></a-sphere> <a-camera> <a-entity cursor="fuse:false" raycaster ar-raycaster></a-entity> <a-entity position="0 0 -0.1" scale="0.001 0.001 0.001" geometry="primitive: ring; radiusInner: 0.8; radiusOuter: 1" material="color: yellow; shader: flat; transparent:true"> </a-entity> </a-camera> </a-scene> </body>
- 75. <body> <a-scene ar> <a-entity io3d-furniture="id:123"visible="false"></a-entity> <a-sphere id="intersection" visible="false" radius="0.04" color="yellow"></a-sphere> <a-camera> <a-entity cursor="fuse:false" raycaster ar-raycaster></a-entity> <a-entity position="0 0 -0.1" scale="0.001 0.001 0.001" geometry="primitive: ring; radiusInner: 0.8; radiusOuter: 1" material="color: yellow; shader: flat; transparent:true"> </a-entity> </a-camera> </a-scene> </body>
- 76. <body> <a-scene ar> <a-entity io3d-furniture="id:123"visible="false"></a-entity> <a-sphere id="intersection" visible="false" radius="0.04" color="yellow"></a-sphere> <a-camera> <a-entity cursor="fuse:false" raycaster ar-raycaster></a-entity> <a-entity position="0 0 -0.1" scale="0.001 0.001 0.001" geometry="primitive: ring; radiusInner: 0.8; radiusOuter: 1" material="color: yellow; shader: flat; transparent:true"> </a-entity> </a-camera> </a-scene> </body>
- 78. <body> <a-scene ar> <a-entity io3d-furniture="id:123"visible="false"></a-entity> <a-sphere id="intersection" visible="false" radius="0.04" color="yellow"></a-sphere> <a-camera> <a-entity cursor="fuse:false" raycaster ar-raycaster></a-entity> <a-entity position="0 0 -0.1" scale="0.001 0.001 0.001" geometry="primitive: ring; radiusInner: 0.8; radiusOuter: 1" material="color: yellow; shader: flat; transparent:true"> </a-entity> </a-camera> </a-scene> </body>
- 79. <body> <a-scene ar> <a-entity io3d-furniture="id:123"visible="false"></a-entity> <a-sphere id="intersection" visible="false" radius="0.04" color="yellow"></a-sphere> <a-camera> <a-entity cursor="fuse:false" raycaster ar-raycaster></a-entity> <a-entity position="0 0 -0.1" scale="0.001 0.001 0.001" geometry="primitive: ring; radiusInner: 0.8; radiusOuter: 1" material="color: yellow; shader: flat; transparent:true"> </a-entity> </a-camera> </a-scene> </body>
- 80. let scene =document.querySelector('a-scene'); let raycaster = document.querySelector('[ar-raycaster]'); let mark = document.querySelector('#intersection'); raycaster.addEventListener('raycaster-intersection', function(e) { mark.setAttribute('position', e.detail.intersections[0].point); mark.setAttribute('visible', true); }); raycaster.addEventListener('raycaster-intersection-cleared', function(e) { mark.setAttribute('visible', false); });
- 81. window.addEventListener('click', function (){ let furniture = document.querySelector('[io3d-furniture]'); let position = mark.getAttribute('position'); furniture.setAttribute('position', position); furniture.setAttribute('visible', true); });
- 83.
- 84.
- 85.
- 86. <script src="aframe.min.js"></script> <script src="aframe-ar.js"></script> <scriptsrc="annyang.min.js"></script> <script src="aframe-speech-command-component.js"></script>
- 87. <script src="aframe.min.js"></script> <script src="aframe-ar.js"></script> <scriptsrc="annyang.min.js"></script> <script src="aframe-speech-command-component.js"></script>
- 88. <script src="aframe.min.js"></script> <script src="aframe-ar.js"></script> <scriptsrc="annyang.min.js"></script> <script src="aframe-speech-command-component.js"></script>
- 89. <script src="aframe.min.js"></script> <script src="aframe-ar.js"></script> <scriptsrc="annyang.min.js"></script> <script src="aframe-speech-command-component.js"></script>
- 90.
- 91. <a-assets> <a-asset-item id="sun-obj" src="assets/sun.obj"></a-asset-item> <a-asset-itemid="sun-mtl" src="assets/sun.mtl"></a-asset-item> </a-assets>
- 92. <a-anchor hit-testing-enabled="true"> <a-box position="00.5 0" material="opacity:0;"> <a-entity obj-model="obj:#sun-obj; mtl:#sun-mtl" scale="0.2 0.2 0.2" visible="false"> <a-animation attribute="rotation" to="360 0 0" dur="5000" easing="linear" repeat="indefinite"> </a-animation> </a-entity> </a-box> </a-anchor>
- 93. <a-anchor hit-testing-enabled="true"> <a-box position="00.5 0" material="opacity:0;"> <a-entity obj-model="obj:#sun-obj; mtl:#sun-mtl" scale="0.2 0.2 0.2" visible="false"> <a-animation attribute="rotation" to="360 0 0" dur="5000" easing="linear" repeat="indefinite"> </a-animation> </a-entity> </a-box> </a-anchor>
- 94. <a-anchor hit-testing-enabled="true"> <a-box position="00.5 0" material="opacity:0;"> <a-entity obj-model="obj:#sun-obj; mtl:#sun-mtl" scale="0.2 0.2 0.2" visible="false"> <a-animation attribute="rotation" to="360 0 0" dur="5000" easing="linear" repeat="indefinite"> </a-animation> </a-entity> </a-box> </a-anchor>
- 95. <a-anchor hit-testing-enabled="true"> <a-box position="00.5 0" material="opacity:0;"> <a-entity obj-model="obj:#sun-obj; mtl:#sun-mtl" scale="0.2 0.2 0.2" visible="false"> <a-animation attribute="rotation" to="360 0 0" dur="5000" easing="linear" repeat="indefinite"> </a-animation> </a-entity> </a-box> </a-anchor>
- 96. <a-entity id="annyang" annyang-speech-recognition></a-entity> <a-anchorhit-testing-enabled="true"> <a-box position="0 0.5 0" material="opacity:0;"> <a-entity obj-model="obj:#sun-obj; mtl:#sun-mtl" scale="0.2 0.2 0.2" visible="false"> <a-animation attribute="rotation" to="360 0 0" dur="5000" easing="linear" repeat="indefinite"> </a-animation> </a-entity> </a-box> </a-anchor>
- 97. <a-entity id="annyang" annyang-speech-recognition></a-entity> <a-anchorhit-testing-enabled="true"> <a-box position="0 0.5 0" material="opacity:0;"> <a-entity obj-model="obj:#sun-obj; mtl:#sun-mtl" scale="0.2 0.2 0.2" visible="false" speech-command__show="command: sun; type: attribute; attribute: visible; value: true;" speech-command__hide="command: hide; type: attribute; attribute: visible; value: false;"> <a-animation attribute="rotation" to="360 0 0" dur="5000" easing="linear" repeat="indefinite"> </a-animation> </a-entity> </a-box> </a-anchor>
- 98.
- 99.
- 100. @fischaelameergeildanke.com @SCRIPT18 UX Designfor Augmented Reality
- 101.
- 102.
- 103.
- 104. User Input andInteraction User Interface and Information Interpretability Context Comfort Safety Illusion Usefulness Delight https://medium.com/@beaucronin/the-hierarchy-of-needs-in-virtual-reality-development-4333a4833acc
- 105.
- 106. Respond Immediately User Inputand Interaction
- 107. Respond Immediately Use SimpleInteractions User Input and Interaction
- 109. Respond Immediately Use SimpleInteractions Don’t Apply 2D patterns User Input and Interaction
- 110. User Interface and Information ProvideInformation in Context
- 111.
- 112. Provide Information inContext Use Visual Indicators User Interface and Information
- 113.
- 114. Provide Information inContext Use Visual Indicators Onboarding is Important User Interface and Information
- 115. Walktrough Camera Access Request Scanning PlacingObjects Interacting
- 116. Walktrough Camera Access Request Scanning PlacingObjects Interacting
- 117. Walktrough Camera Access Request Scanning PlacingObjects Interacting
- 118. Walktrough Camera Access Request Scanning PlacingObjects Interacting
- 119.
- 120. Provide Information inContext Use Visual Indicators Onboarding is Important Error Handling, too User Interface and Information
- 121. Creating an Illusion Light andShadow are Important
- 122.
- 123. Light and Shadoware Important Avoid Interruptions Creating an Illusion
- 124. Light and Shadoware Important Avoid Interruptions Avoid Clutter Creating an Illusion
- 125. Consider the Context Consider aUser’s Environment
- 126. Consider a User’sEnvironment There’s No Optimal Setting Consider the Context
- 127.
- 129. Avoid Fatiguing TheUser Comfort and Safety
- 130. Avoid Fatiguing TheUser Support Short Usage Comfort and Safety
- 131. Avoid Fatiguing TheUser Support Short Usage Avoid Large Movements Comfort and Safety
- 132. Avoid Fatiguing TheUser Support Short Usage Avoid Large Movements Respect Safe Space Comfort and Safety
- 133. @fischaelameergeildanke.com @SCRIPT18 The Futureof AR in the Web
- 134. WebXR as anExtension The Future of AR in the Web
- 135. WebXR as anExtension Declarative WebGL The Future of AR in the Web
- 136. WebXR as anExtension Declarative WebGL 3D Positions for Elements The Future of AR in the Web
- 137.
- 138. Get involved! The Futureof AR in the Web
- 139.
- 140.