##### Два. Инициализация WebGL

Обычно инициализация программы WebGL состоит из нескольких этапов: компиляция вершинных и фрагментных шейдеров -> создание буферов вершин и текстур -> установка цвета очистки канвы -> активация тестирования глубины.

```javascript
function drawVRScene() {
    const canvas = document.getElementById('glcanvas');
    // Получаем контекст WebGL
    const gl = canvas.getContext('webgl');
    // Инициализация WebGL
    init(gl);
    // Отображение WebGL
    render(gl);
}
function init(gl) {
    // Предварительная компиляция шейдеров
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Не удалось инициализировать шейдеры.');
        return;
    }
    // Создание буфера вершин
    initVertexBuffers(gl);
    // Создание буфера текстур
    initTextures(gl, './assets/texture.jpg');
    gl.clearColor(0.4, 0.4, 0.4, 1.0);
    // Активация тестирования глубины
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);
}  

Основная задача фрагментного шейдера — обработка цвета пикселей. В данном случае он просто передает координаты текстуры и объект текстуры в фрагментный шейдер.```javascript
const FSHADER_SOURCE = `
uniform sampler2D u_Sampler;
varying highp vec2 v_TexCoord;
void main() {
    gl_FragColor = texture2D(u_Sampler, v_TexCoord);
}
`;

функция render(gl, vrDisplay) {
    // Создаем объект данных кадра VR
    const frameData = new VRFrameData();
    const u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');

    function animate() {
        // TODO
        draw(frameData, u_MvpMatrix);
        // Через рекурсивный вызов анимационной функции создается анимация
        vrDisplay.requestAnimationFrame(animate);
    }

    animate();
}

Ширина левого и правого видовых окон составляет половину ширины холста (`canvas`). Начальная точка левого окна находится в `(0,0)`, а начальная точка правого окна — в `(canvas.width * 0.5, 0)`.

##### 2.2 Динамическое рендериование с использованием [VRFrameData](https://developer.mozilla.org/en-US/docs/Web/API/VRFrameData)

Как было упомянуто ранее, для рендера VR требуется динамически рисовать каждую сцену в зависимости от действий пользователя. Это достигается следующими шагами:

1. Получение текущего кадра матрицы проекции и матрицы просмотра через экземпляр `VRFrameData` API WebVR;
2. Передача матриц просмотра-проекции в шейдер для рендера;
3. Генерация следующих данных кадра и отправка их текущему холсту;
4. Переход к следующему кадровому обратному вызову.

Конкретный код представлен ниже:

```javascript
function draw(gl, frameData, u_MvpMatrix) {
    const {
        leftProjectionMatrix,
        leftViewMatrix,
        rightProjectionMatrix,
        rightViewMatrix
    } = frameData;
``````markdown
// Инициализируем модельную матрицу, матрицу модели-просмотра-проекции
let modelMatrix = mat4.create(),
    vpMatrix = mat4.create(),
    mvpMatrix = mat4.create();
}

// Отображаем левый глаз в левой части холста
gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
// mvpMatrix = ProjectionMatrix × ViewMatrix × ModelMatrix
// Здесь используется mat4 объект из библиотеки gl-matrix.js для выполнения операций с матрицами над float32Array
mat4.multiply(vpMatrix, leftProjectionMatrix, leftViewMatrix);
mat4.multiply(mvpMatrix, vpMatrix, modelMatrix);
// Передаем модель-проекционную матрицу mvpMatrix в шейдер
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix);
// Отрисовываем левую часть
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0);
``````md
// Отображаем правый глаз в правой части холста
gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
mat4.multiply(vpMatrix, rightProjectionMatrix, rightViewMatrix);
mat4.multiply(mvpMatrix, vpMatrix, modelMatrix);
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix);
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0);

// Генерируем данные следующего кадра и заменяем текущие frameData
vrDisplay.getFrameData(frameData);
vrDisplay.submitFrame();
}

Первоначально, перед отрисовкой анимации, мы получаем экземпляр `frameData`, используя `new VRFrameData()`, и передаем его в функцию отрисовки анимации.

Затем, внутри функции анимации, мы получаем свойства экземпляра `frameData`:

| Свойство экземпляра VRFrameData |
| :------------------------------ |
| leftProjectionMatrix            | Левая проекционная матрица |
| leftViewMatrix                  | Левая матрица просмотра     |
| rightProjectionMatrix           | Правая проекционная матрица |
| rightViewMatrix                 | Правая матрица просмотра    |

Конечно, `VRFrameData` также включает такие свойства как `pose` и `orientation`, но они здесь не указаны.

С использованием этих формул вычисляем модели-матрицы просмотра и проекции для левого и правого глаза и передаем их в вершинный шейдер, где они перемножаются с координатами вершин из буфера вершин для получения окончательной позиции вершин.

> MvpMatrix = ProjectionMatrix × ViewMatrix × ModelMatrix
```Наконец, перед завершением каждого кадра анимации, мы вызываем `vrDisplay.getFrameData(frameData)`, чтобы сгенерировать данные следующего кадра и заменить текущие `frameData`. Затем используем `vrDisplay.submitFrame()` для отправки текущего кадра на отрисовку на текущий холст.На этом основные этапы разработки приложения WebVR закончены. Для более подробного понимания можно обратиться к примеру ниже.
![](http://upload-images.jianshu.io/upload_images/1939855-2deb638717d350a5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Проектный код: [https://github.com/YoneChen/webvr-demo](https://github.com/YoneChen/webvr-demo)

### Заключение
Разработка приложений WebVR с использованием нативного WebGL значительно сложнее, чем использование three.js или A-Frame, но именно такой подход позволяет более глубоко понять принципы работы WebVR.

Для изучения разработки WebVR с помощью three.js можно обратиться к статье ["ВР-волна приходит — что могут сделать веб-разработчики?"](https://zhuanlan.zhihu.com/p/25567905). Также приветствую подписку на мой цикл статей [«Усадьба технологий WebVR»](https://zhuanlan.zhihu.com/c_99472965), где материалы будут регулярно обновляться.

### Ссылки на дополнительные материалы
- Основы компьютерной графики: [Матричные преобразования](http://www.opengl-tutorial.org/cn/beginners-tutorials/tutorial-3-matrices/)
- Быстрый старт с WebGL: [Руководство по подготовке к работе с WebGL](http://taobaofed.org/blog/2015/12/21/webgl-handbook/)
- Google Developers | WebVR: [Основы WebVR](https://developers.google.com/web/fundamentals/vr/)
- MDN | WebVR API: [Использование WebVR API](https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API)