Все аргументы, которые приводились ранее, в пользу применения облегчающих жизнь библиотек при работе с 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
Добавить комментарий