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.
Easy way to WebXR
Борис Могила
IG “RIA” (DOM.RIA - проект “Новобудови України”)
WebXR API дозволяє створювати веб-сайти
віртуальної та розширеної реальності, які можна
переглядати за допомогою VR засобі...
Навіщо ж нам WebXR?
● Навчання
https://youtu.be/zmdRe_6lqtI
● Медицина
https://youtu.be/tZvY1a-0rpg
● Архітектура і дизайн
https://youtu.be/xpjhsOneeQQ
● Маркетинг
https://youtu.be/WlPESQrIF3o
● Ігрова індустрія
https://youtu.be/Q0URewFIB-8
Основні інструменти:
WebGL
WebXR API
Поліфіл
Javascript
Чи підключений
VR прилад?
Так
Ні
Властивості
Зображення
Керування
Зображення
Керування
...
WebGL
● Все потрібно писати самому
● Спагетті код
● Відсутність поліфілів
function initTexture(gl, url) {
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
const level = ...
demo
http://bit.ly/2R00THu
source
http://bit.ly/2T4hGuR
three.js
● Реалізовано основні функції
● Спагетті код
● Відсутність поліфілів
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
70, window.innerWidth / window.innerHeight, 1...
demo
http://bit.ly/2Cwyqno
source
http://bit.ly/2RFVSsO
babylon.js
● Реалізовано основні функції
● Наявна підтримка VR
режиму
● Спагетті код
const scene = new BABYLON.Scene(engine);
const light = new BABYLON.PointLight(
"Omni", new BABYLON.Vector3(0, 100, 100), s...
demo
http://bit.ly/2T5JMWj
source
http://bit.ly/2AXOVsB
react-360
● Фреймворк
● CLI
● Компонентний підхід
● Підключені поліфіли
● Кросплатформенність
● Великий об’єм коду
● Поган...
class React_360 extends Component {
render() {
return (
<View>
<Box
dimWidth={200}
dimHeight={200}
dimDepth={200}
texture=...
demo
http://bit.ly/2RTagNC
source
http://bit.ly/2U2BP4j
aframe.io
● Фреймворк
● Компонентний підхід
● Підключені поліфіли
● Легка інтеграція з існуючими
frontend фрейворками
<a-scene>
<a-entity
position="0 1 -4"
material="color:grey;src: #videoSky"
geometry="primitive: box;"
depth="4"
height="4"...
demo
http://bit.ly/2sKZE5n
source
http://bit.ly/2U3iPTc
Давайте спробуємо щось створити
http://bit.ly/2U3mQr6
source
http://bit.ly/2W65mfr
Доповнена реальність демо
http://bit.ly/2Do2OCa
source
http://bit.ly/2R4pQBH
● Слабка підтримка
● Поганий контроль
● Вартість обладнання
● Специфікація
Обмеження:
Панорама 360
http://bit.ly/2RXEvml
3d-тур
http://bit.ly/2CKpA6g
Production:
https://aframe.io
https://aframe.io/blog/
https://github.com/KhronosGroup/glTF-Sample-Models
https://poly.google.com/
http...
http://bit.ly/2OMDJVx
site : https://boryamogila.github.io/
facebook: Boris Mogila
twitter: Borya Mogila
email: bora.mog@gmail.com
Контактні дані
Дякую за увагу
JS Fest 2019. Борис Могила. Легкий путь к WebXR
Upcoming SlideShare
Loading in …5
×

of

JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 1 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 2 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 3 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 4 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 5 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 6 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 7 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 8 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 9 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 10 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 11 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 12 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 13 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 14 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 15 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 16 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 17 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 18 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 19 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 20 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 21 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 22 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 23 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 24 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 25 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 26 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 27 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 28 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 29 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 30 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 31 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 32 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 33 JS Fest 2019. Борис Могила. Легкий путь к WebXR Slide 34
Upcoming SlideShare
What to Upload to SlideShare
Next

1 Like

Share

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

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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. Дякую за увагу
  • AndreyDmitriyev

    May. 1, 2020

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

Views

Total views

175

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

1

×