TL;DR:

Установите пакеты three-orbit-viewer, glslify, three.js, dat.gui с помощью npm, свяжите их с browserify и используйте сервер budo dev для быстрого инкрементного связывания и оперативной перезагрузки в браузере.

Вот репозиторий на github, показывающий все это вместе, если вы хотите сразу приступить к делу. Просто установите npm и запустите npm.

Трехорбитный просмотрщик

three-orbit-viewer — это программа, скрывающая детали создания стандартных объектов three.js (камера, сцена, средство визуализации, элементы управления) и присоединения средства визуализации к DOM. Он предоставляет вам сцену three.js с элементами управления орбитой, поэтому вы можете просто начать добавлять сетки, источники света и подключаться к обратному вызову рендеринга для получения обновлений. Код предельно прост и говорит сам за себя:

var createOrbitViewer = require('three-orbit-viewer')(THREE);
var viewer = createOrbitViewer({ fov: 65 });

// create your meshes, lights, etc
var mesh = ...
var light = ...
viewer.scene.add(mesh);
viewer.scene.add(light);
viewer.on('tick', function(dt) {
    // handle geometry updates etc before next render call
});

Вы можете найти более подробную информацию в репозитории github.

glsify

glslify позволяет использовать модули GLSL, установленные через npm. Это основная часть stack.gl. Получив доступ к часто используемым функциям в графическом программировании, вы сможете быстро ускорить разработку (и, возможно, научиться кое-чему интересному математику у других)!

Эти пакеты перечислены как glsl-* в npm. Хотите модель зеркального освещения blinn-phong? Просто npm установите glsl-blinn-phong, и теперь вы можете требовать() его в своем шейдере с помощью специальной прагмы glslify. Подробная информация о том, как использовать glslify, хорошо изложена в файле readme в репозитории github, поэтому я не буду здесь вдаваться в подробности.

Я использую этот инструмент как преобразование браузера для встроенного связывания строк GLSL в мой javascript, но glslify также можно вызвать вручную из командной строки для вывода шейдеров GLSL. В конце я покажу конфигурацию для npm + browserify, которая позволит вам это сделать.

Будо

budo — это веб-сервер для разработки, созданный специально для работы с браузером. Он инкрементно объединяет ваш исходный код (например, browserify) каждый раз, когда вы сохраняете файл, и, если он вообще достаточно умен, откладывает запросы, если вы пытаетесь обновить браузер, пока он занят созданием пакета. Вы также получаете LiveReload, делающий все очень плавным.

По сравнению с моим старым черновым рабочим процессом, budo + browserify позволяет собрать мой пакет в несколько раз быстрее. Я использую гарнир для красивой печати на терминале. Это мелочи…

Связываем все вместе!

Теперь нам просто нужно взять наши причудливые шейдеры, которые используют модули GLSL, распространяемые с помощью npm, и связать их с нашим javascript! Также мы не хотим ждать целую вечность, пока наш пакет будет готов. Браузер спешит на помощь!

Мы настроим npm для вызова budo (который использует браузер за кулисами) для разработки и браузера для производства. Вы увидите, что я также использую uglify-js для минимизации/изменения «производственного» пакета. Это, конечно, необязательно, но мне нравится, чтобы мой пакет был как можно меньше.

Вот package.json для npm:

{
...
 “scripts”: {
   “start”: “budo index.js:js/bundle.js -t glslify -v — live | garnish”,
   “build”: “browserify -t glslify index.js | uglifyjs -cm > js/bundle.js”
 },
 “devDependencies” : {
   “browserify”: “^10.2.3”,
   “budo”: “^4.0.0”,
   “garnish”: “^2.1.3”,
   “uglify-js”: “^2.4.23”,
   “watchify”: “^3.2.1”,
   “dat-gui”: “^0.5.0”,
   “three”: “^0.71.0”,
   “three-orbit-viewer”: “^69.3.0”,
   “domready”: “^1.0.8”
 },
 “browserify”: {
   “transform”: [
     “glslify”
   ]
 },
 “dependencies”: {
   “glslify”: “^2.1.2”
 }
}

Я надеюсь, что эти инструменты помогут вам ускорить разработку и поощрять повторное использование кода/модульное программирование. В другой статье я расскажу, почему это так важно. Быть в курсе!