Введение
Формат X3D
X3D – открытый, стандартизованный, основанный на XML (eXtensible Markup Language, расширяемый язык разметки) формат для представления интерактивных трехмерных сцен и объектов и обмена трехмерными данными между приложениями.
X3D был разработан консорциумом Web3D и стандартизован комитетом ISO. Последняя на данный момент версия стандарта 3.0 была принята в 2003 году. В настоящее время (конец 2012) осуществляется процесс стандартизации версии 3.3.
Формат X3D является эволюционным развитием формата VRML (Virtual Reality Modelling Language, язык моделирования виртуальной реальности), использовавшегося в 1990-х годах.
HTML5
HTML5 – последний (на 2012 год незаконченный) стандарт языка HTML (HyperText Markup Language, язык разметки гипертекста), использующегося для создания веб-страниц.
Стандарт, как и предыдущие его версии, находится в разработке при участии W3C (World Wide Web Consortium, Консорциума Всемирной паутины) и является существенным улучшением стандарта HTML 4.01, стандартизованного комитетом ISO в 2000 году.
В частности, черновик стандарта предусматривает возможность включения в веб-страницу интерактивной 2D- и 3D-графики. Причем регламентируется возможность как императивного описания графической сцены (с использованием процедурного API на языке Javascript), так и декларативного описания (с использованием графа сцены и включением описания сцены напрямую в HTML-страницу с интеграцией в DOM (Document Object Model, объектная модель документа)).
Для двухмерных интерактивных построений императивное средство реализации представлено элементом <canvas> (глава 4.8.11 черновика стандарта), а декларативное – элементом <svg>, использующим одноименный стандартизованный основанный на XML формат SVG (Scalable Vector Graphics, масштабируемая векторная графика) (глава 4.8.16 черновика стандарта).
Средства для отображения трехмерных сцен на 2012 год не прошли процедуру включения в черновик стандарта, но уже существуют их реализации. Так, для императивного отображения графики используется библиотека стандарта WebGL (Web-based Graphics Library, графическая библиотека для веба), разрабатываемого Khronos Group, а также компаниями Mozilla, Google, Apple, Opera, AMD и Nvidia. WebGL представляет собой контекст элемента <canvas>, обеспечивающий выполнение кода Javascript напрямую на GPU с использованием аппаратного ускорения, без использования плагинов. Технология WebGL начала разрабатываться в 2006 году, а первая спецификация была выпущена в 2011 году.
Декларативное средство отображения 3D-графики представлено разрабатываемым институтом Fraunhofer проектом X3DOM. Проект начат в 2009 году.
X3DOM
X3DOM – библиотека, использующая WebGL для рендеринга внутри веб-страницы трехмерных сцен, описанных в формате X3D, без использования плагинов.
Параметры сцены X3DOM
В качестве атрибутов узла <X3D> могут быть указаны ряд параметров, влияющих на поведение библиотеки X3DOM.
| Параметр | Значения | По умолч. | Описание |
| showLog | true, false | false | Скрыть/отобразить консоль с журналом |
| showStat | true, false | false | Скрыть/отобразить оверлей со статистикой |
| showProgress | true, false, bar | true | Скрыть/показать индикатор загрузки. По умолчанию используется вращающийся индикатор. Значение ‘bar’ выведет полосу загрузки. |
| width | Количество пикселей | 300px | Ширина окна. |
| height | Количество пикселей | 150px | Высота окна |
Внешний вид окна X3DOM можно гибко настроить, применяя к элементу <X3D> стили. Так, например, можно сделать окно полноэкранным:
<X3D style="left:0px; top:0px; width:100%; height:100%; border:none;">
Управление камерой
Управление камерой в X3DOM осуществляется в одном из следующих режимов:
Осмотр (Examine)
Активируется нажатием клавиши "e".
| Функция | Кнопка мыши |
| Вращение | Лев / Лев + Shift |
| Панорамирование | Сред / Лев + Ctrl |
| Зум | Прав / Колесо / Лев + Alt |
| Установить центр вращения | Дв. лев. щелчок |
Ходьба (Walk)
Активируется нажатием клавиши "w".
| Функция | Кнопка мыши |
| Идти вперед | Лев |
| Идти назад | Прав |
Полет (Fly)
Активируется нажатием клавиши "f".
| Функция | Кнопка мыши |
| Двигаться вперед | Лев |
| Двигаться назад | Прав |
Вертолет (Helicopter)
Активируется нажатием клавиши "h".
Смотреть вниз/вверх: клавиши 8/9
Подниматься/опускаться: клавиши 6/7.
| Функция | Кнопка мыши |
| Двигаться вперед | Лев |
Изучение (Look at)
Активируется нажатием клавиши "l".
| Функция | Кнопка мыши |
| Приблизить | Лев |
| Отдалить | Прав |
Игровой режим (Game)
Активируется нажатием клавиши "g".
Для вращения камеры двигайте мышью.
| Функция | Клавиша |
| Двигаться вперед | Стрелка вверх |
| Двигаться назад | Стрелка вниз |
| Стрейфиться влево | Стрелка влево |
| Стрейфиться вправо | Cursor right |
Во всех режимах доступны следующие команды управления камерой:
| Функция | Клавиша |
| Сброс к начальному положению камеры | r |
| Показать всю сцену | a |
| Выпрямить камеру | u |
Граф сцены
Сцена X3DOM представляет собой встроенный напрямую в код HTML-страницы элемент <X3D>, в котором размещен XML-код, описывающий так называемый граф сцены.
Граф сцены имеет древовидную ациклическую структуру, которая иерархически определяет геометрию объектов сцены, их внешний вид, позицию в пространстве, ориентацию и т.д. При визуализации браузер обходит дерево графа сцены, определяет изменившиеся узлы и визуализирует сцену с использованием доступных оптимизаций. Подобного рода оптимизации управляются из кода сцены. К ним относятся тиражирование подграфов сцены (DEF/USE), группировка, задание bounding box, включение backface culling, объявление convex-полигонов и другие. Их использование позволяет уменьшить вычислительную сложность рендеринга сцены, что критично для real-time. Подробнее различные виды оптимизаций будут рассмотрены далее.
В целом граф сцены, к примеру, в сравнении с методом обратной трассировки лучей, гораздо больше подходит для визуализации в реальном времени, поскольку вычислительные затраты на пересчет изменившихся элементов сцены относительно невелики. Недостатком метода графа сцены является существенно меньшая реалистичность изображения.
Описание узлов
Полную информацию о формате X3D можно получить в постоянно пополняемых спецификациях стандарта X3D, доступных онлайн по адресу http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/Architecture.html
При описании узла в спецификации указывается следующая информация:
- Имя узла
- Абстрактные типы узлов, от которых наследуется данный узел
- Список спецификаций полей данного узла, каждый пункт которого включает в себя:
- Тип поля (SFFloat, MFInt32…)
- Тип доступа к полю ([], [in], [out], [in,out]). Подробнее типы доступа будут рассмотрены при обсуждении событий. При проектировании сцены могут указываться значения только для полей с типами доступа [] и [in,out]
- Имя поля
- Значение поля по умолчанию
- Допустимые значения поля
В X3D, который является словарем XML, узлы графа сцены описываются в виде элементов XML (парных или непарных тегов), а поля – в виде атрибутов узла (наборов ключ='значение' в открывающем теге элемента).
Например,
<Viewpoint orientation='0 -1 0 0.05' position='0.13 2.51 11.24'> </Viewpoint>
При задании значения атрибута могут использоваться как двойные, так и одинарные кавычки. При это вид открывающей и закрывающей кавычек должен совпадать.
Между открывающим и закрывающим тегами узла могут быть определены дочерние узлы графа сцены.
Типы полей X3D
| Название типа | Описание | Примеры значений |
| SFBool | Одиночное булево значение | true |
| MFBool | Несколько булевых значений | true false false true |
| SFColor | Одиночное значение цвета в формате RGB | 0 0.5 1.0 |
| MFColor | Несколько значений цвета в формате RGB | 1 0 0, 0 1 0, 0 0 1 |
| SFColorRGBA | Одиночное значение цвета в формате RGB с alpha-каналом (прозрачность) | 0 0.5 1.0 0.75 |
| MFColorRGBA | Несколько значений цвета в формате RGB с alpha-каналом (прозрачность) | 1 0 0 0.25, 0 1 0 0.5, 0 0 1 0.75 |
| SFInt32 | Одиночное 32-битное целое число | |
| MFInt32 | Несколько 32-битных целых чисел | 1 2 3 4 5 |
| SFFloat | Одиночное число с плавающей точкой с одинарной точностью | 1.0 |
| MFFloat | Несколько чисел с плавающей точкой с одинарной точностью | -1 2.0 3.14159 |
| SFDouble | Одиночное число с плавающей точкой с двойной точностью | 2.7128 |
| MFDouble | Несколько чисел с плавающей точкой с двойной точностью | -1 2.0 3.14159 |
| SFImage | Одиночная картинка | 2 2 3 0xFF0000 0x00FF00 0x0000FF 0xFF0000 |
| MFImage | Несколько картинок | 2 2 3 0xFF0000 0x00FF00 0x0000FF 0xFF0000, 2 2 3 0x00FF00 0x0000FF 0xFF0000 0xFF0000 |
| SFNode | Одиночный узел | <Shape /> |
| MFNode | Несколько узлов | <Shape /> <Transform /> |
| SFRotation | Одиночный массив вращения (3 значения вектора оси, угол в радианах) | 0 1 0 1.57 |
| MFRotation | Несколько массивов вращения | 0 1 0 0, 0 1 0 1.57, 0 1 0 3.14 |
| SFString | Одиночная строка | “Hello world” |
| MFString | Несколько строк | “Hello” “world” |
| SFTime | Одиночное значение времени | |
| MFTime | Несколько значений времени | −1 0 1 567890 |
| SFVec2F/SFVec2D | Одиночный вектор 2 чисел с плавающей точкой с одинарной/двойной точностью | 0 1.5 |
| MFVec2F/MFVec2D | Несколько векторов 2 чисел с плавающей точкой с одинарной/двойной точностью | 1 0, 2 2, 3 4, 5 5 |
| SFVec3F/SFVec3D | Одиночный вектор 3 чисел с плавающей точкой с одинарной/двойной точностью | 0 1.5 2 |
| MFVec3F/MFVec3D | Несколько векторов 3 чисел с плавающей точкой с одинарной/двойной точностью | 10 20 30, 4.4 −5.5 6.6 |
Простые геометрические формы
Shape: X3DShapeNode { SFNode [in,out] appearance NULL [X3DAppearanceNode] SFNode [in,out] geometry NULL [X3DGeometryNode] SFNode [in,out] metadata NULL [X3DMetadataObject] SFVec3f [] bboxCenter 0 0 0 (-∞,∞) SFVec3f [] bboxSize -1 -1 -1 [0,∞) or −1 −1 −1}
Узел Shape является основополагающим в любой сцене и призван определять одиночный объект.
Узел Shape к качестве дочернего может содержать один из возможных геометрических узлов. Также, он может содержать узел Appearance, отвечающий за внешний вид формы, который в свою очередь содержит узел Material, определяющий цветовые свойства объекта и/или узлы, отвечающие за текстурирование. Таким образом, Shape содержит совокупность информации о геометрических свойствах и свойствах внешнего вида для одиночного объекта сцены.
Простые геометрические формы описываются как один из заранее заданных геометрических примитивов, а детали отображения, в т. ч. тесселяция (разбиение на полигоны) осуществляется средствами WebGL.
У всех геометрических узлов есть одно общее важное свойство: solid.
Дело в том, что все треугольники (простейшие полигоны, из которых строится поверхность) имеют 2 стороны. При этом для повышения производительности широко применяется удаление невидимых граней (backface culling), когда рендерингу подвергается только одна из сторон полигона. По умолчанию backface culling включен, что может вызвать неудобства при попадании «внутрь» геометрической формы, когда она становится невидимой для наблюдателя. Чтобы избежать такой ситуации, необходимо явно указывать в качестве значения параметра solid=’false’, отключая таким образом backface culling.
Единица измерения длины, принятая в X3D, – метр.
Все примитивы изначально располагаются в координатах (0,0,0).
Еще одно общее свойство узлов – metadata – служит для добавления дополнительной информации (метаданных) к сцене.
Box
Определяет прямоугольный параллелепипед
Box: X3DGeometryNode {
SFNode [in,out] metadata NULL [X3DMetadataObject]
SFVec3f [] size 2 2 2 (0,∞)
SFBool [] solid TRUE
}
Здесь и далее будет приводиться только описание полей с типами доступа [] и [in,out]. Поля с типами доступа [in] и [out] недоступны для редактирования в design-time и могут быть доступны лишь динамически в процессе выполнения.
Описание полей:
size – размерности параллелепипеда по трем осям координат.
Пример
Создается параллелепипед размером 1x2x3 метров с материалом по умолчанию.
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Пример 1</title> <link rel="stylesheet" type="text/css" href="x3dom.css" /> <script type="text/javascript" src="x3dom.js"></script> </head> <body> <h1>Пример 1</h1> <X3D> <Scene> <Shape> <Appearance> <Material></Material> </Appearance> <Box size=”1 2 3”></Box> </Shape> </Scene> </X3D> </body></html> Данный пример содержит полный код html-документа со встроенной в него сценой. В дальнейшем для краткости в примерах будет приводиться только элемент <Scene>, отвечающий за содержимое сцены, а код страницы, включающей в себя X3D-элемент, будет подразумеваться.
Cylinder
Определяет цилиндр
Cylinder: X3DGeometryNode { SFNode [in,out] metadata NULL [X3DMetadataObject] SFBool [] bottom TRUE SFFloat [] height 2 (0,∞) SFFloat [] radius 1 (0,∞) SFBool [] side TRUE SFBool [] solid TRUE SFBool [] top TRUE}
Для определения радиуса и высоты цилиндра служат параметры radius и height соответственно. В этом узле существует ещё 3 параметра: side, top, и bottom, имеющие значения true или false (по умолчанию true), которые сообщают браузеру, выводить ли соответственно верх, низ или сторону цилиндра (например, если нижняя часть цилиндра перекрывается другим объектом, для ускорения рендеринга можно выставить параметр bottom=”false”).
Cone
Определяет конус.
Cone: X3DGeometryNode {
SFNode [in,out] metadata NULL [X3DMetadataObject]
SFBool [] bottom TRUE
SFFloat [] bottomRadius 1 (0,∞)
SFFloat [] height 2 (0,∞)
SFBool [] side TRUE
SFBool [] solid TRUE
}
Описание полей:
bottomRadius – радиус основания
height – высота
По умолчанию конус будет на 1 метр выше и ниже оси Y, и радиусом основания 1 метр. Его центральная ось будет параллельна оси Y.
Sphere
Определяет сферу.
Sphere: X3DGeometryNode { SFNode [in,out] metadata NULL [X3DMetadataObject] SFFloat [] radius 1 (0,∞) SFBool [] solid TRUE}
Описание полей:
radius – радиус сферы
Text
С помощью узла Text в сцене создаётся 2D-текст.
Text: X3DGeometryNode { SFNode [in,out] fontStyle NULL [X3FontStyleNode] MFFloat [in,out] length [] [0,∞) SFFloat [in,out] maxExtent 0.0 [0,∞) SFNode [in,out] metadata NULL [X3DMetadataObject] MFString [in,out] string [] MFVec2f [out] lineBounds SFVec3f [out] origin SFVec2f [out] textBounds SFBool [] solid FALSE}
FontStyle: X3DFontStyleNode { SFNode [in,out] metadata NULL [X3DMetadataObject] MFString [] family "SERIF" SFBool [] horizontal TRUE MFString [] justify "BEGIN" ["BEGIN","END","FIRST","MIDDLE",""] SFString [] language "" SFBool [] leftToRight TRUE SFFloat [] size 1.0 (0,∞) SFFloat [] spacing 1.0 [0,∞) SFString [] style "PLAIN" ["PLAIN"|"BOLD"|"ITALIC"|"BOLDITALIC"|""] SFBool [] topToBottom TRUE}
Описание полей узла Text:
· string – здесь перечисляются строки.
· fontStyle – в качестве значения этого поля используется вложенный узел FontStyle, определяющий параметры текста.
· maxExtent - максимальная ширина текста.
· length - ширина каждой из строк.
Описание полей узла FontStyle:
· size - высота строки текста (влияет также на межстрочный интервал).
· family – определяет последовательность гарнитур в порядке их предпочтения, например ["Lucida Sans Typewriter", "Lucida Sans", "Helvetica", "SANS"]. Все браузеры по умолчанию поддерживают как минимум базовый набор из трех типов гарнитур, задаваемых ключевыми словами “SERIF” (пропорциональная с засечками), “SANS” (пропорциональная без засечек) и “TYPEWRITER” (моноширинная)· style - стиль шрифта – “PLAIN”, “BOLD”, “ITALIC” или “BOLDITALIC”.
· horizontal - горизонтальный текст – TRUE, вертикальный – FALSE.
· leftToRight - TRUE(слева направо) или FALSE(наоборот).
· topToBottom - TRUE(сверху вниз) или FALSE(наоборот).
· language - код языка (2 символа).
· justify - выравнивание текста – “BEGIN”, “MIDDLE” или “END”.
· spacing - расстояние между строками текста (1-normal, 2-double spacing, и т.д.).
Torus
Определяет тор.
Спецификация узла недоступна, поскольку узел является специфичным для X3DOM и не включен в стандарт X3D.
Описание полей:
innerRadius – малый радиус
outerRadius – большой радиус
Трансформация объектов
Для вращения, масштабирования и сдвига объектов используется узел Transform.
Узел Transform (Трансформация)
Синтаксис узла:
Transform: X3DGroupingNode { MFNode [in] addChildren [X3DChildNode] MFNode [in] removeChildren [X3DChildNode] SFVec3f [in,out] center 0 0 0 (-∞,∞) MFNode [in,out] children [] [X3DChildNode] SFNode [in,out] metadata NULL [X3DMetadataObject] SFRotation [in,out] rotation 0 0 1 0 [-1,1] or (-∞,∞) SFVec3f [in,out] scale 1 1 1 (-∞, ∞) SFRotation [in,out] scaleOrientation 0 0 1 0 [-1,1] or (-∞,∞) SFVec3f [in,out] translation 0 0 0 (-∞,∞) SFVec3f [] bboxCenter 0 0 0 (-∞,∞) SFVec3f [] bboxSize -1 -1 -1 [0,∞) or −1 −1 −1}
Описание полей:
· center – определяет центр локальной системы координат относительно оригинальной (0,0,0), в которой будет происходить трансформация.
· children – здесь находятся узлы (например, примитивы), подлежащие трансформации.
· rotation – указывается вектор, соответствующий оси вращения (3 числа – X Y Z), далее угол в радианах.
· scale – расширение/сжатие по осям X Y Z (указываются масштабные коэффициенты).
· scaleOrientation – определяет вращение системы координат перед масштабированием.
· translation – перемещение по осям X Y Z.
· bboxCenter | - эти поля определяют соответственно центр и размеры замкнутой
· bboxSize | геометрической области (Bounding Box), в которой находятся узлы из children
· addChildren | - входные события, позволяющие соответственно добавить или
· removeChildren | удалить узел для поля children.
Трансформация выполняется единообразно для всех объектов из children, объединяя их в единую группу.
Bounding Box служит для оптимизации работы браузера, подсказывая ему размеры группы объектов с целью более эффективного выполнения операций отсечения. Задавать его необязательно.
Преобразования применяются к объекту (группе объектов) в такой последовательности:
1) Масштабирование (возможно, неравномерное) в произвольно заданной системе координат
2) Вращение относительно произвольной оси
3) Смещение
Внешний вид
Appearance
Описывет внешний вид объекта.
Синтаксис узла:
Appearance: X3DAppearanceNode { SFNode [in,out] fillProperties NULL [FillProperties] SFNode [in,out] lineProperties NULL [LineProperties] SFNode [in,out] material NULL [X3DMaterialNode] SFNode [in,out] metadata NULL [X3DMetadataObject] MFNode [in,out] shaders [] [X3DShaderNode] SFNode [in,out] texture NULL [X3DTextureNode] SFNode [in,out] textureTransform NULL [X3DTextureTransformNode]}
Material
Описывает свойства материала объекта.
Синтаксис узла:
Material: X3DMaterialNode { SFFloat [in,out] ambientIntensity 0.2 [0,1] SFColor [in,out] diffuseColor 0.8 0.8 0.8 [0,1] SFColor [in,out] emissiveColor 0 0 0 [0,1] SFNode [in,out] metadata NULL [X3DMetadataObject] SFFloat [in,out] shininess 0.2 [0,1] SFColor [in,out] specularColor 0 0 0 [0,1] SFFloat [in,out] transparency 0 [0,1]}
Описание полей:
· diffuseColor – нормальный цвет объекта (R G B, каждые R,G или B в интервале от 0 до 1; например, серый – 0.5 0.5 0.5).
· specularColor – цвет освещённых участков объекта (R G B). Определяет
· emissiveColor – какой цвет излучает объект (свет не отбрасывается на окружающие объекты) (R G B).
· ambientIntensity – интенсивность отражаемого объектом рассеянного света (значение от 0 до 1). Рассеянный свет является всенаправленным и не зависит от расположения источников света, учитывается только их количество в сцене.
· shininess – определяет степень резкости освещения блестящих участков объекта (значение от 0 до 1). Блеск возникает, когда свет на поверхность падает под углом, близким к углу, под которым на поверхность смотрит наблюдатель. Низкие значения параметра дают более мягкий блеск, высокие – более жесткий.
· transparency – прозрачность объекта (значение от 0 до 1)
TwoSidedMaterial
Описывает двусторонний материал.
Синтаксис узла:
TwoSidedMaterial: X3DMaterialNode { SFFloat [in,out] ambientIntensity 0.2 [0,1] SFFloat [in,out] backAmbientIntensity 0.2 [0,1] SFColor [in,out] backDiffuseColor 0.8 0.8 0.8 [0,1] SFColor [in,out] backEmissiveColor 0 0 0 [0,1] SFFloat [in,out] backShininess 0.2 [0,1] SFColor [in,out] backSpecularColor 0 0 0 [0,1] SFFloat [in,out] backTransparency 0 [0,1] SFColor [in,out] diffuseColor 0.8 0.8 0.8 [0,1] SFColor [in,out] emissiveColor 0 0 0 [0,1] SFNode [in,out] metadata NULL [X3DMetadataObject] SFFloat [in,out] shininess 0.2 [0,1] SFBool [in,out] separateBackColor FALSE SFColor [in,out] specularColor 0 0 0 [0,1] SFFloat [in,out] transparency 0 [0,1]}
Текстурирование
ImageTexture
Задает для объекта текстуру из подгружаемого файла изображения.
Синтаксис узла:
ImageTexture: X3DTexture2DNode, X3DUrlObject { SFNode [in,out] metadata NULL [X3DMetadataObject] MFString [in,out] url [] [URI] SFBool [] repeatS TRUE SFBool [] repeatT TRUE SFNode [] textureProperties NULL [TextureProperties]}
Сложные объекты
В X3D существуют геометрические узлы, позволяющие создавать объекты произвольной формы, не ограниченной набором заданных примитивов. Так же, как и узлы геометрических примитивов, они являются дочерними узлами узла Shape и схожим образом могут быть использованы в паре с узлом внешнего вида (Appearance), определяющим материал или текстурирование. Тем не менее, для сложных узлов существует возможность более детального задания параметров внешнего вида для отдельных поверхностей/полигонов/линий/точек с использованием узлов Color и Normal.
Сложные объекты описываются на низком уровне – путем задания массива координат (вертексов) вершин полигонов с последующим их индексированием и объединением в поверхности.
Coordinate
Определяет массив координат в трехмерном пространстве.
Описание полей:
point – массив координат
<Coordinate point='0 0 0, 1 1 1'></Coordinate>
Color и ColorRGBA
Color определяет массив цветов в пространстве RGB.
Color определяет массив цветов в пространстве RGBA. Четвертый компонент – прозрачность (альфа-канал).
Описание полей:
color – массив цветов
<Color color='0 0 0, 1 1 1, 1 0 0, 0 1 0, 0 0 1'></Color>
<ColorRGBA color='0 0 0 0.5, 1 1 1 0.5, 1 0 0 0.5, 0 1 0 0.5, 0 0 1 0.5'></ColorRGBA>
Normal
Определяет список векторов нормалей.
Описание полей:
vector – массив векторов нормалей
Например узел:
<normal vector=”1 0 1, -1 0.5 -1, -2 0 -3”> </normal>определяет 3 вектора нормалей с соответствующими координатами.
Нормали определяют, как поверхность будет освещена.
