Инструментарий для работы с WebGL

Все аргументы, которые приводились ранее, в пользу применения облегчающих жизнь библиотек при работе с Canvas 2D или SVG, можно смело умножать на пять, а может, и на десять, когда мы собираемся разрабатывать какую-нибудь, хоть сколько-нибудь сложную


Рис. 70. Включаем подсветку

BD-сцену. Естественно, инструменты для этих целей начали появляться почти сразу, некоторые из них очень интересны, и их можно и нужно использовать.

WebGLU — первая общедоступная библиотека для работы с WebGL. Она предназначена для быстрого создания относительно простых сцен. Отличительной ее особенностью вылепляется представление шейдеров объектов в удобном json-формате.

Three. js — наверное, самая известный WebGL фрэймворк. Сказать, что он делает работу с WebGL намного комфортней, — значит не сказать ничего. Помните, как много кода нам пришлось написать, прежде чем мы смогли полюбоваться на вращающийся кубик? Следите за руками:

Var renderer = new THREE. WebGLRenderer({antialias: true}): function animate() {

T = new Date().getTime():

Camera. position. set(Math. sin(t/1000)*300, 150, Math. cos(t/1000)*300):

Renderer. clear():

Camera. lookAt(scene. position):

Renderer. render(scene, camera):

Window. requestAnimationFrame(animate, renderer. domElement):

};

Renderer. setSize(800, 600):

Document. body. appendChild(renderer. domElement):

Renderer. setClearColorHex(0xCCDDDD, 1.0) renderer. clear();

Var camera = new THREE. PerspectiveCamera(45, 1, 1, 1000);

Camera. position. z = 300;

Var scene = new THREE. Scene():

Var materials = [];

For (var i = 0; i < 6; i ++) {

Materials. push(new THREE. MeshBasicMaterial({ color: Math. random() * 0xffffff }) ) ;

}

Var cube = new THREE. Mesh(

New THREE. CubeGeometry(100, 120, 100, 1, 1, 1, materials), new THREE. MeshFaceMaterial()

);

Scene. add(cube);

Renderer. render(scene, camera);

Animate(new Date().getTime());

Результат — на рис. 71. Тут мы не только запустили вращающийся кубик со случайным образом окрашенными гранями, мы еще и установили камеру (до этой темы мы в изучении WebGL не добрались). Все возможности обычного API, включая текстуру, работу с текстом и освещением, Three. js также предоставляет. Кроме того, в библио теке есть средства по интерактивному взаимодействию и ра-

Рис. 71. Эй-сцена за пять минут с помощью Three. js

Боте со множеством объектов (последнее на чистом WebGL выглядит совсем не подъемно). Вообще, уже давно традицией стало при демонстрации воплощения WebGL на различных it-мероприятиях использовать сцены, созданные с помощью этой библиотеки. Не будем отходить от подобного обычая и мы (рис. 72).

Рис. 72. Возможности Three. js — все дело в волшебных пузырьках!

Для того чтобы жизнь разработчика была совсем безоблачна, в составе современной версии библиотеки идет замечательный инструмент для визуальной разработки — генерации кода в результате «ручного» манипулирования с графическими объектами (рис. 73).

Что еще можно упомянуть?

CopperLicht — этоJavaScгipt-библиотека для создания игр и приложений, запускающихся в браузере с помощью WebGL. Она отрисовывает 3D-графику с использованием аппаратного ускорения и без применения каких-либо плагинов.

SpiderGL — JavaScript-библиотека для разработки графических приложений (презентаций, 3D-демок) и рендеринга в реальном времени, основанная на WebGL.

EnergizeGL — JavaScript-фреймворк, позволяющий работать с WebGL без знаний OpenGL и матричных преобразований.

Gwt-g3d — G3D-обертка WebGL для GWT (Google Web Toolkit), насколько этот инструмент сейчас актуален, сказать сложно, но он развивается — следовательно, вполне востребован.

Рис. 73. Визуальная разработка с помощью Three. js

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *