Основы программирования в «Вердж3Д»

Цель этого раздела — краткое введение в программирование с использованием «Вердж3Д». Мы создадим простое, но довольно функциональное приложение с вращающимся кубом, использовав для этого всего несколько строк на языке «ЯваСкрипт» и простейшую ХТМЛ-разметку.

Создаём каркас приложения

Перед тем как писать код самого приложения, создайте папку где оно будет храниться. В этой папке будет находиться ХТМЛ-файл с вёрсткой, загружаемая сцена и главный модуль движка «Вердж3Д». Начнём с ХТМЛ. Сохраните следующий ХТМЛ-код в файл в папке приложения и назначьте ему понятное имя, не забыв про расширение .html, например моё_приложение.html.


    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Моё первое Вердж3Д-приложение</title>
        <style>
          body { margin: 0; }
          #v3d-container { position: absolute; width: 100%; height: 100% }
        </style>
      </head>
      <body>
        <div id="v3d-container"></div>
        <script src="v3d.js"></script>
        <script>
          // наш ЯваСкрипт пойдёт сюда
        </script>
      </body>
    </html>

Как видно, ничего сложного мы не сделали. Имеется простейший ХТМЛ-файл с <div>-элементом, предоставляющим контейнер, в котором будет находиться 3Д-холст с кубом. Стили внутри элемента <style> делают так, чтобы 3Д-холст занимал всё доступное место на странице, а наш будущий код пойдёт внутрь тега <script>.

Также в этом файле мы подключаем главный модуль движка «Вердж3Д» — v3d.js. Вы можете скопировать его из папки build из инсталляционной директории «Вердж3Д» или скачать отсюда.

Пишем код приложения

Чтобы иметь возможность отображать что-либо с помощью «Вердж3Д», нам потребуется экземпляр класса App, который загрузит ГЛТФ-файл сцены, содержащий нужный нам куб.


    const app = new v3d.App('v3d-container');

    app.loadScene('cube.glb', () => {
        app.enableControls();
        app.run();
    });

Получается, что нам нужен этот самый ГЛТФ-файл, но где его взять? В данный момент задача моделирования перед нами не стоит, поэтому возьмём готовый здесь.

ХТМЛ-файл приложения готов, но если вы запустите его в браузере, вы увидите... ничего! Дело в том, что браузеры блокируют загрузку ассетов с локальной файловой системы из соображений безопасности, требуя запускать приложения с помощью веб-сервера. Запуск целого сервера может показаться сложной процедурой, но это не так!

Запускаем приложение

Есть масса способов запустить веб-сервер для разработки приложений на локальной машине, но самым простым будет воспользоваться тем, что уже поставляется в составе «Вердж3Д». Скопируйте всю папку с кубом в папку приложений менеджера проектов и запустите ваше новое приложение с помощью синей кнопки:

Как вариант, если на вашей системе установлен «Питон», вы можете запустить сервер с помощью простейшей команды (запускать в папке с приложением):

python3 -m http.server

Далее откройте браузер, перейдите на страницу http://0.0.0.0:8000 и кликните на ХТМЛ-файле приложения из предложенного списка.

Добавляем анимацию

Первое, что делают начинающие 3Д-программисты — заставляют куб крутиться. Не будем отходить от традиций и тоже реализуем такой поворот. Одним из вариантом было бы проворачивать модель на небольшой угол каждый кадр, но мы сделаем лучше: вместо поворота модели, станем крутить камеру вокруг объекта!

Добавьте следующую строчку кода сразу под вызовом метода app.run():


    app.controls.autoRotate = true;

Закругляемся

Поздравляем! Вы только что создали ваше первое «Вердж3Д»-приложение. В нём всего лишь пять строчек на «ЯваСкрипте», но оно уже способно на многое:

Загружает сцену, камеру, источник света и 3Д-модель.
Использует сложный шейдер освещения на основе ПБР, собранный на лету из материала, который в свою очередь основан на системе шейдерных нод. Сам материал был скомпонован не нами, а опытным художником в его любимом пакете моделирования.
Пользователь может управлять камерой с помощью мыши или тачскрина мобильного устройства.
На сцене используется освещение с помощью карты окружения в формате ХДР. Карта загружается, парсится и преобразовывается в нужный формат автоматически.
И конечно, на сцене используется камера, двигающаяся по сложной орбитальной траектории

Полный код приложения будет выглядеть так:


    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Моё первое Вердж3Д-приложение</title>
        <style>
          body { margin: 0; }
          #v3d-container { position: absolute; width: 100%; height: 100% }
        </style>
      </head>
      <body>
        <div id="v3d-container"></div>
        <script src="v3d.js"></script>
        <script>
          const app = new v3d.App('v3d-container');

          app.loadScene('cube.glb', () => {
              app.enableControls();
              app.run();
              app.controls.autoRotate = true;
          });
        </script>
      </body>
    </html>

Дальнейшие шаги

Рантайм «Ноуд Джей Эс» и система управления пакетами НПМ предоставляют огромную экосистему для «ЯваСкрипт»-разработчиков. Воспользуйтесь ими, чтобы значительно повысить эффективность вашей работы.