На протяжении нескольких лет было несколько попыток добавить третье измерение в веб. К сожалению, большинство из них имеют недостатки: открытые форматы, такие, как X3D, никогда не получали большой популярности; движки, основанные на Flash ограничены в производительности, а коммерческие предложения могут стоить от нескольких сотен до нескольких тысяч долларов.
Новый проект от Google, O3D, нацелен на преодоление этих недостатков путем предоставления свободного, открытого, кроссплатформенного и кроссбраузерного плагина, который дает гибкость и скорость низкоуровневой графики, такой, как OpenGL или Direct3D, превосходя ограничения запуска в браузере. Этот плагин дает веб-разработчикам возможность использовать графическое оборудование сервера напрямую, позволяя отображать детализированные 3D-сцены прямо в браузере. А так как O3D свободен для использования, нет никакого ценового барьера.
Установка
Эта статья продемонстрирует написание очень простого O3D-приложения. Прежде всего, установите сам плагин O3D. Запустив несколько примеров приложений, вы можете протестировать, правильно ли установился плагин и соответствует ли ваш компьютер минимальным требованиям.
Большинство O3D-приложений создаются с помощью библиотеки утилит O3D, написанной на JavaScript. Файл samples.zip, который вы можете скачать со страницы загрузки O3D, содержит директорию o3djs, в которой и находится данная библиотека. Для корректного функционирования, директория o3djs должна быть скопирована в директорию, где расположен HTML-файл, отображающий приложение O3D.
Примечание
Исходный код, который идет вместе с этой статьей, содержит библиотеку утили O3D, поэтому в скачивании файла sample.zip с сайта O3D нет необходимости, но полезно знать, где расположены эти файлы.
Как работает O3D
Плагин O3D написан на C/C++, а это означает то, что вся «тяжелая »работа по вычислению и рендерингу сделана в нативном коде, а поэтому производится довольно быстро. Разработчики контролируют плагин через JavaScript-интерфейс O3D. Обычное приложение O3D содержит HTML-страницу, код на JavaScript и активы, которые будут отображаться приложением.
Примечание
Не все движки JavaScript сделаны одинаково. У Google Chrome есть V8, Firefox работает на TraceMonkey, а Apple — на SquirrelFish. Хорошая новость состоит в том, что O3D включает в себя JavaScript-движок V8 от Google, что гарантирует одинаковую производительность для всех браузеров. Использовать встроенный движок V8 не обязательно (влияет на вашу возможность отлаживать код на JavaScript), но рекомендуется. Дальнейшие указания покажут, как его можно использовать.
HTML-файл
Так как O3D-приложение отображается на веб-странице, требуется HTML-файл. В данном случае, это GettingStarted.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>O3D Tutorials</title>
<script type="text/javascript" src="o3djs/base.js"></script>
<script type="text/javascript" src="gettingstarted.js"></script>
</head>
<body>
<div id="o3d" style="width: 600px; height: 400px;"></div>
</body>
</html>
Данный HTML очень прост, — он включает в себя два файла JavaScript и один элемент DIV. Файл o3djs/base.js представляет собой часть библиотеки утилит O3D, а файл gettingstarted.js мы детально рассмотрим в следующей части этой статьи.
Элемент DIV важен, так как в нем будет отображаться приложение O3D в получившийся веб-странице. Одним из шагов инициализации плагина O3D является указание DIV-элемента, который будет содержать O3D-плагин. По умолчанию, у этого элемента DIV должен быть ID, начинающийся с o3d (так что o3d, o3d-element и o3d-position будут примерами валидного ID). Возможно, обойти это правило, но использование таких правил экономит время на написание кода.
O3D использует 100% пользовательской площади элемента DIV, так что важно указать размер DIV. В данном случае, размер будет определяться встроенным атрибутом style, но вы также можете использовать CSS, таблицу или любой другой родительский элемент для определения размера элемента DIV.
JavaScript-файл
Второй частью этого приложения является файл JavaScript, gettingstarted.js:
// загрузка библиотек O3D производится
// с помощью функции require:
o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
o3djs.require('o3djs.camera');
o3djs.require('o3djs.pack');
o3djs.require('o3djs.scene');
window.onload = init;
var g_o3d;
var g_math;
var g_client;
var g_viewInfo;
var g_pack;
function init()
{
// Создание объекта O3D внутри DIV-ов, чей id
// начинается с o3d и вызов initS:
o3djs.util.makeClients(initStep2);
}
function initStep2(clientElements)
{
// Инициализация глобальных переменных и библиотек
var o3dElement = clientElements[0];
g_o3d = o3dElement.o3d;
g_math = o3djs.math;
g_client = o3dElement.client;
g_pack = g_client.createPack();
// Создание графа для просмотра
g_viewInfo = o3djs.rendergraph.createBasicView(
g_pack,
g_client.root,
g_client.renderGraphRoot);
// Получение полного пути к сцене
var scenePath = o3djs.util.getCurrentURI() + 'assets/teapot.o3dtgz';
// Загрузка
o3djs.scene.loadScene(g_client, g_pack, g_client.root, scenePath, callback);
function callback(pack, parent, exception)
{
if (exception)
{
alert('Could not load: ' + scenePath + '\n' + exception);
return;
}
// Получение объекта CameraInfo (объекта с матрицами вида и
// проекции)
var cameraInfo = o3djs.camera.getViewAndProjectionFromCameras(
parent,
g_client.width,
g_client.height);
// Копирование вида и проекции
g_viewInfo.drawContext.view = cameraInfo.view;
g_viewInfo.drawContext.projection = cameraInfo.projection;
o3djs.pack.preparePack(pack, g_viewInfo);
}
}
Давайте рассмотрим этот код. Как было указано выше, O3D включает в себя библиотеку утилит JavaScript. Прежде чем мы сможем использовать эти функции, они должны быть инициализированы путем вызова функции require:
o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
o3djs.require('o3djs.camera');
o3djs.require('o3djs.pack');
o3djs.require('o3djs.scene');
Файл o3djs/base.js определяет функцию require, поэтому он был включен в HTML-файл прежде, чем gettingstarted.js.
O3D будет инициализирована единожды, при загрузке окна, поэтому событию onload следует присвоить инициализирующую функцию init:
window.onload = init;
Затем для удобства мы определяем несколько глобальных переменных:
var g_o3d;
var g_math;
var g_client;
var g_viewInfo;
var g_pack;
В этом нет необходимости в данном приложении, так как только одна функция ссылается на эти переменные (initStep2). Как бы то ни было, в более сложных приложениях это сэкономит вам время.
В данном приложении определены две функции. Первая функция, init, содержит одно выражение: вызов makeClients. Вот где DIV-элемент, который был определен ранее в HTML-файле, редактируется для включения в себя кода, необходимого для отображения O3D-плагина.
function init()
{
o3djs.util.makeClients(initStep2);
}
Добавляя дополнительные параметры функции makeClients, можно менять ID у элемента DIV, начиная от чего-то, начинающегося с o3d и заканчивая любой другой строкой (хотя существует мало причин, чтобы это делать).
Вторая функция, initStep2 передается функции makeClients и вызывается единожды, когда плагин готов к использованию. Реальная работа по инициализации O3D происходит именно в этой функции.
Прежде всего, инициализируются несколько глобальных переменных:
var o3dElement = clientElements[0];
g_o3d = o3dElement.o3d;
g_math = o3djs.math;
g_client = o3dElement.client;
И снова, следующее только для удобства:
• Переменная o3dElement ссылается на элемент OBJECT, который был добавлен в качестве потомка элемента DIV.
• g_client — входная точка приложения O3D.
• g_o3d — пространство имен для O3D.
• g_math — пространство имен для математической библиотеки.
Затем создается Pack:
g_pack = g_client.createPack();
Pack используется для управления памятью и содержит методы, которые позволяют создавать новые O3D-объекты. Любой объект, созданный с помощью функции, вроде Pack.createSomething, автоматически помещается в Pack.
Для отрисовки 3D-сцены необходимо создать граф представления. Граф представления — это набор объектов для отрисовки 3D элементов на 2D дисплей (да-да, на веб-страницу), который отображает итоговый результат. Положительным моментом является то, что все они инициализируются путем вызова o3djs.rendergraph.createBasicView. Некоторые сложные функции требуют создания специального графа представления, но для большинства целей графа представления, созданного с помощью вызова createBasicView достаточно. Значение, возвращаемое createBasicView, объект Viewinfo, хранится в глобальной переменной g_viewInfo.
g_viewInfo = o3djs.rendergraph.createBasicView(
g_pack,
g_client.root,
g_client.renderGraphRoot);
Прежде чем отобразить 3D-модель, её нужно сначала загрузить. Тема подготовки 3D-модели для загрузки в приложении O3D — это тема отдельной статьи, но будет достаточным сказать, что существуют инструменты для создания пакетов, которые могут быть легко загружены с помощью библиотеки утилит O3D. В нашем приложении будет отображаться знаменитая модель чайника, содержащаяся в файле teapot.o3dtgz, который был извлечен из директории assets архива sample.zip, о котором говорилось выше. Пакет o3dtgz может быть загружен простым вызовом o3djs.scene.loadScene.
var scenePath = o3djs.util.getCurrentURI() + 'assets/teapot.o3dtgz';
o3djs.scene.loadScene(g_client, g_pack, g_client.root, scenePath, callback);
Как только сцена будет загружена, вызовется функция callback. Если произойдет какая-нибудь ошибка, будет установлен параметр exceprion, сообщая пользователю, в какой точке что-то пошло не так:
if (exception)
{
alert('Could not load: ' + scenePath + '\n' + exception);
return;
}
Если никаких проблем с загрузкой сцены не произошло, нужно создать «камеру» для её просмотра. Как и в OpenGL или DirectX, O3D представляет собой низкоуровневый API и не определяет концепцию камеры. Не смотря на это, для большинства приложений идея просмотра сцены через камеру понятна и проста для представления. К счастью, библиотека утилит имеет набор классов и функций для простого создания и управления объектом камеры.
Для просмотра 3D-сцены потребуются две матрицы: view и projection. Матрица view представляет собой вид внутри 3D-сцены; матрица projection принимает 3D-координаты объектов сцены и переводит их в 2D-координаты, которые и отображаются на экране. Конечно же, можно создать и работать с этими двумя матрицами вручную, но для простого приложения как наше, может быть вызвана функция o3djs.camera.getViewAndProjectionFromCameras, которая создаст объект CameraInfo, чьи матрицы будут автоматически вычисляться для генерации итогового вида, охватывающего данную цену (в данном случае, модель чайника):
var cameraInfo = o3djs.camera.getViewAndProjectionFromCameras(
g_client.root,
g_client.width,
g_client.height);
Матрицы view и projection, которые были вычислены вызовом getViewAndProjectionFromCameras и сохранены в переменной cameraInfo, должны быть присвоены графу представления. Допустимо работать со многими камерами, но только одна камера может быть отображена графом представления. Присваивая матрицы view и projection объекта CameraInfo соответствующим матрицам в свойстве drawContext графа отображения, сцена эффективно отображается с точки данной камеры.
g_viewInfo.drawContext.view = cameraInfo.view;
g_viewInfo.drawContext.projection = cameraInfo.projection;
Последним шагом будет приготовления Pack для загрузки сцены. И снова, в библиотеке утилит O3D есть функция под названием o3djs.pack.preparePack, делающая этот процесс довольно простым:
o3djs.pack.preparePack(pack, g_viewInfo);
Конечным результатом будет статичный вид модели чайника (вы можете скачать его исходный код).
Итоги
Это руководство покрывает только вопросы того, что возможно сделать с помощью O3D. Те разработчики, кто пойдет дальше в его изучении, обнаружат, что O3D — очень мощная технология, дающая им возможность создавать высокодетализированные 3D-сцены прямо внутри браузера.
|
