Nowadays frontend developer is quite bored - news about new JS-based language aren't exciting, just like about new frameworks. And one day, while writing another logic of the another component or, Jesus Christ, bug fixing IE9, you can find absolutely charming create - WebVR. In my lecture I'm going to share some secred knowledge about its behaviour, training tools, as well as gained experience.

2. Dzmitry Bartalevich
Javascript Developer, EPAM Systems
telegram - @dimati_bart
skype - dzmitry.bartalevich1
email - dimati.bart@gmail.com

4. VR’n

6. So you wonna be a webVR
dev
Как разрабатывать?
Что разрабатывать?
Для каких девайсов разрабатывать?

7. Использование

8. High-level Девайсы
Oculus Rift - $598 HTC Vive - $799 PS VR - $400

9. Middle-level Девайсы
Gear VR - $70 Google Daydream - $80

10. Low-level Девайсы
Google Cardboard и аналоги - $10

11. Что бы вы не выбрали,
браузер покрывает все эти
платформы

12. А ещё обеспечивает мгновенный
доступ без необходимости
установки ( ͡° ͜ʖ ͡°)

13. Но в каких сферах вот это
всё будет использоваться?

14. Прогноз рынка к 2020 году
0,0
3,0
6,0
9,0
12,0
Млрд $
0,7
1,6
3,2
4,7
5,1
11,6
Видеоигры
Здравоохранение
Инжиниринг
Видео
Торговля
Образование
Source: Goldman Sachs Group

15. Но ещё только 2017 год

16. Разработка

17. VR в вебе = WebVR + WebGL

18. WebVR API - программный
интерфейс для VR устройств

19. WebVR
https://github.com/googlevr/webvr-polyfill

20. WebVR
navigator.getVRDisplays().then(function(displays) {
//Fun time 3000
});

21. VRDisplay
VRDisplay.getEyeParameters()
VRDisplay.getPose()

22. navigator.getVRDisplays().then(displays => {
if (displays.length < 1) {
return console.warn('No displays found!');
}
displays.forEach(vrDisplay => { buildVRDisplay(vrDisplay) })
});
function buildVRDisplay(vrDisplay) {
const frameData = new VRFRameData;
vrDisplay.getFrameData(frameData);
const rightEye = vrDisplay.getEyeParameters('left');
const onAnimationFrame = () => {
vrDisplay.requestAnimationFrame(onAnimationFrame);
};
vrDisplay.requestAnimationFrame(onAnimationFrame);
}

23. Подходы к разработке
WebGL + WebVR

24. <script id="shader-vs" type="x-shader/x-vertex">
attribute highp vec3 aVertexNormal;
attribute highp vec3 aVertexPosition;
attribute highp vec2 aTextureCoord;
uniform highp mat4 uNormalMatrix;
uniform highp mat4 uMVMatrix;
uniform highp mat4 uPMatrix;
varying highp vec2 vTextureCoord;
varying highp vec3 vLighting;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;
// Apply lighting effect
highp vec3 ambientLight = vec3(0.6, 0.6, 0.6);
highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);
highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
vLighting = ambientLight + (directionalLightColor * directional);
}
</script>

26. Подходы к разработке
WebGL + WebVR Three.js

27. function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth /
window.innerHeight, 1, 20000 );
scene = new THREE.Scene();
scene.add( camera );
var light = new THREE.PointLight( 0x0011ff, 1, 5500 );
light.position.set( 4000, 0, 0 );
scene.add( light );
renderer = new THREE.WebGLRenderer( { clearColor: 0x050505,
clearAlpha: 1, antialias: false, alpha: false } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.sortObjects = false;
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.physicallyBasedShading = true;
container.appendChild( renderer.domElement );
}

29. Подходы к разработке
WebGL + WebVR Three.js A-frameReact-VR

30. <a-scene>
<a-entity position="0 0 3.8">
<a-camera></a-camera>
</a-entity>
</a-scene>

32. Подходы к разработке
WebGL + WebVR Three.js A-frameReact-VR Unity

33. A-frame
https://aframe.io

34. Entity-Component
паттерн

35. Entity

36. Component

37. Entity + Component = ❤
<a-entity>
<a-entity geometry="primitive: box"
material="color: red">

38. Primitives
<a-box>
<a-camera>
<a-circle>
<a-collada-model>
<a-cone>
<a-cursor>
<a-curvedimage>
<a-cylinder>
<a-image>
<a-light>
<a-obj-model>
<a-plane>
<a-ring>
<a-sky>
<a-scene>
<a-sound>
<a-sphere>
<a-video>
<a-videosphere>

40. react-aframe
https://github.com/aframevr/aframe-react

41. Но зачем Virtual DOM
в VR?

43. Но почему бы не использовать
React вместе с Three.js?

45. React рассчитан на
60fps в 2D DOM
А не на 90fps в 3D

46. Поэтому каждый отвечает за
то, в чём он хорош
A-frame - 3D, VR, rendering
react - views, state management and data binding

47. Синтаксисные штуки
ReactDOM.render(
<VRScene/>,
document.getElementById('app')
);
import 'aframe';
class VRScene extends React.Component {
render () {
return (
<Scene>
</Scene>
);
}
}
import {Entity, Scene} from 'aframe-react';
import React from 'react';
import ReactDOM from 'react-dom';
<Entity geometry={{primitive: 'box'}} material="color: red" position={[0, 0, -5]}/>
<Entity text={{value: 'HELLO WORLD'}} position="{[0, 1, -5]}"/>

48. Да покажи ты уже
демо
Демо

49. Легко начать, легко изучать,
легко работать

50. Могу ли я портировать свой
сайт/веб-приложение под
VR?

51. Problems, officer?
• Новые UI-практики
• HTML + CSS

52. VR в обычном HTML?
https://aframe.io/aframe/examples/showcase/wikipedia/

53. Пара слов о Unity
https://mozvr.com/demos/SECVRITY/
WebGL import + WebVR bridge

54. Вывод

55. Спасибо за внимание.
Question time!