Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS Fest 2019. Борис Могила. Легкий путь к WebXR

20 views

Published on

Мы поговорим о возможностях WebXR API и о том, что оно может дать пользователю. Рассмотрим с чего начать и на что обратить внимание в первую очередь. Обсудим, что вы можете использовать сегодня и что нас ждет завтра. Также посмотрим как выглядит дополненная реальность в браузере и что она может нам дать.

Published in: Education
  • Be the first to comment

  • Be the first to like this

JS Fest 2019. Борис Могила. Легкий путь к WebXR

  1. 1. Easy way to WebXR Борис Могила IG “RIA” (DOM.RIA - проект “Новобудови України”)
  2. 2. WebXR API дозволяє створювати веб-сайти віртуальної та розширеної реальності, які можна переглядати за допомогою VR засобів, таких як VR- окуляри або телефон з підтримкою AR.
  3. 3. Навіщо ж нам WebXR?
  4. 4. ● Навчання https://youtu.be/zmdRe_6lqtI
  5. 5. ● Медицина https://youtu.be/tZvY1a-0rpg
  6. 6. ● Архітектура і дизайн https://youtu.be/xpjhsOneeQQ
  7. 7. ● Маркетинг https://youtu.be/WlPESQrIF3o
  8. 8. ● Ігрова індустрія https://youtu.be/Q0URewFIB-8
  9. 9. Основні інструменти:
  10. 10. WebGL WebXR API Поліфіл Javascript Чи підключений VR прилад? Так Ні Властивості Зображення Керування Зображення Керування Зображення
  11. 11. WebGL ● Все потрібно писати самому ● Спагетті код ● Відсутність поліфілів
  12. 12. function initTexture(gl, url) { const texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); const level = 0; const internalFormat = gl.RGBA; const width = 1; const height = 1; const border = 0; const srcFormat = gl.RGBA; const srcType = gl.UNSIGNED_BYTE; const pixel = new Uint8Array([0, 0, 255, 255]); gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, srcFormat, srcType,pixel); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); return texture; }
  13. 13. demo http://bit.ly/2R00THu source http://bit.ly/2T4hGuR
  14. 14. three.js ● Реалізовано основні функції ● Спагетті код ● Відсутність поліфілів
  15. 15. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 ); const geometry = new THREE.CubeGeometry(20, 20, 20); const video = document.getElementById('videoSky'); const videoTexture = new THREE.VideoTexture(video); const material = new THREE.MeshPhongMaterial({ map: videoTexture }); const mesh = new THREE.Mesh(geometry, material); mesh.position.z = -50; const light = new THREE.DirectionalLight(0xffffff); light.position.set(0, 1, 1).normalize(); scene.add(light).add(mesh); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.getElementById('container').appendChild(renderer.domElement); render();
  16. 16. demo http://bit.ly/2Cwyqno source http://bit.ly/2RFVSsO
  17. 17. babylon.js ● Реалізовано основні функції ● Наявна підтримка VR режиму ● Спагетті код
  18. 18. const scene = new BABYLON.Scene(engine); const light = new BABYLON.PointLight( "Omni", new BABYLON.Vector3(0, 100, 100), scene ); const camera = new BABYLON.ArcRotateCamera( "Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene ); camera.attachControl(canvas, true); const box = BABYLON.Mesh.CreateBox("Box1", 20.0, scene); box.position.x = -20; box.rotation.x = 150; const videoMat = new BABYLON.StandardMaterial("textVid", scene); videoMat.diffuseTexture = new BABYLON.VideoTexture( "video", ["../static/video.mp4"], scene, false );
  19. 19. demo http://bit.ly/2T5JMWj source http://bit.ly/2AXOVsB
  20. 20. react-360 ● Фреймворк ● CLI ● Компонентний підхід ● Підключені поліфіли ● Кросплатформенність ● Великий об’єм коду ● Погана документіція ● Важка обробка подій
  21. 21. class React_360 extends Component { render() { return ( <View> <Box dimWidth={200} dimHeight={200} dimDepth={200} texture={{...asset('stone.jpeg')}} /> </View> ); } };
  22. 22. demo http://bit.ly/2RTagNC source http://bit.ly/2U2BP4j
  23. 23. aframe.io ● Фреймворк ● Компонентний підхід ● Підключені поліфіли ● Легка інтеграція з існуючими frontend фрейворками
  24. 24. <a-scene> <a-entity position="0 1 -4" material="color:grey;src: #videoSky" geometry="primitive: box;" depth="4" height="4" width="4" > </a-entity> </a-scene>
  25. 25. demo http://bit.ly/2sKZE5n source http://bit.ly/2U3iPTc
  26. 26. Давайте спробуємо щось створити http://bit.ly/2U3mQr6 source http://bit.ly/2W65mfr
  27. 27. Доповнена реальність демо http://bit.ly/2Do2OCa source http://bit.ly/2R4pQBH
  28. 28. ● Слабка підтримка ● Поганий контроль ● Вартість обладнання ● Специфікація Обмеження:
  29. 29. Панорама 360 http://bit.ly/2RXEvml 3d-тур http://bit.ly/2CKpA6g Production:
  30. 30. https://aframe.io https://aframe.io/blog/ https://github.com/KhronosGroup/glTF-Sample-Models https://poly.google.com/ https://webxr.io/ ar.js Корисні посилання:
  31. 31. http://bit.ly/2OMDJVx
  32. 32. site : https://boryamogila.github.io/ facebook: Boris Mogila twitter: Borya Mogila email: bora.mog@gmail.com Контактні дані
  33. 33. Дякую за увагу

×