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

1. Easy way to WebXR
Борис Могила
IG “RIA” (DOM.RIA - проект “Новобудови України”)

2. WebXR API дозволяє створювати веб-сайти
віртуальної та розширеної реальності, які можна
переглядати за допомогою VR засобів, таких як VR-
окуляри або телефон з підтримкою AR.

3. Навіщо ж нам WebXR?

4. ● Навчання
https://youtu.be/zmdRe_6lqtI

5. ● Медицина
https://youtu.be/tZvY1a-0rpg

6. ● Архітектура і дизайн
https://youtu.be/xpjhsOneeQQ

7. ● Маркетинг
https://youtu.be/WlPESQrIF3o

8. ● Ігрова індустрія
https://youtu.be/Q0URewFIB-8

9. Основні інструменти:

10. WebGL
WebXR API
Поліфіл
Javascript
Чи підключений
VR прилад?
Так
Ні
Властивості
Зображення
Керування
Зображення
Керування
Зображення

11. WebGL
● Все потрібно писати самому
● Спагетті код
● Відсутність поліфілів

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. demo
http://bit.ly/2R00THu
source
http://bit.ly/2T4hGuR

14. three.js
● Реалізовано основні функції
● Спагетті код
● Відсутність поліфілів

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. demo
http://bit.ly/2Cwyqno
source
http://bit.ly/2RFVSsO

17. babylon.js
● Реалізовано основні функції
● Наявна підтримка VR
режиму
● Спагетті код

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. demo
http://bit.ly/2T5JMWj
source
http://bit.ly/2AXOVsB

20. react-360
● Фреймворк
● CLI
● Компонентний підхід
● Підключені поліфіли
● Кросплатформенність
● Великий об’єм коду
● Погана документіція
● Важка обробка подій

21. class React_360 extends Component {
render() {
return (
<View>
<Box
dimWidth={200}
dimHeight={200}
dimDepth={200}
texture={{...asset('stone.jpeg')}}
/>
</View>
);
}
};

22. demo
http://bit.ly/2RTagNC
source
http://bit.ly/2U2BP4j

23. aframe.io
● Фреймворк
● Компонентний підхід
● Підключені поліфіли
● Легка інтеграція з існуючими
frontend фрейворками

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. demo
http://bit.ly/2sKZE5n
source
http://bit.ly/2U3iPTc

26. Давайте спробуємо щось створити
http://bit.ly/2U3mQr6
source
http://bit.ly/2W65mfr

27. Доповнена реальність демо
http://bit.ly/2Do2OCa
source
http://bit.ly/2R4pQBH

28. ● Слабка підтримка
● Поганий контроль
● Вартість обладнання
● Специфікація
Обмеження:

30. Панорама 360
http://bit.ly/2RXEvml
3d-тур
http://bit.ly/2CKpA6g
Production:

31. https://aframe.io
https://aframe.io/blog/
https://github.com/KhronosGroup/glTF-Sample-Models
https://poly.google.com/
https://webxr.io/
ar.js
Корисні посилання:

32. http://bit.ly/2OMDJVx

33. site : https://boryamogila.github.io/
facebook: Boris Mogila
twitter: Borya Mogila
email: bora.mog@gmail.com
Контактні дані

34. Дякую за увагу