Вместо предисловия
Это первая статья из небольшой серии, которая написана разработчиками трехмерного javascript-движка на базе WebGL. Эта статья — обзорная, но в последующих планируется рассказать уже о самом движке и его возможностях — с примерами, демонстрациями и проч. И автор будет благодарен, если кто-нибудь поделится для него инвайтом, чтобы он мог не только отвечать на возможные вопросы в комментариях, но и последующие статьи на эту тему мог бы публиковать не через меня, а самостоятельно.Обзор 3D в Web
Привет всем хабражителям. В этой статье я хочу немного рассказать о состоянии дел в области трехмерной графики в Web, и о том, что может предложить наша команда для тех, кто бы хотел реализовать проект, связанный с 3D, в вебе, но сомневается в выборе технологии или просто не знает в какую сторону «копать». Также надеюсь, что статья будет интересна всем, кто следит за развитием веб-технологий.
Несмотря на то, что технологии трехмерной графики, используемые в десктопных приложениях, довольно долгое время шагают семимильными шагами, и за прошедшие 10 лет успело смениться несколько поколений 3D API и графического железа, веб-разработчики не имели родной для веба технологии, позволяющей работать с 3D.
Компании, создающие проекты с трехмерной графикой вынуждены были разрабатывать собственные плагины к браузерам, либо использовать сторонние, обеспечивающие отображение 3D графики. Эти подходы сопряжены с необходимостью либо содержать отдельную команду для поддержки плагина, либо быть ограниченным тем уровнем функционала и поддержки, который предлагали компании создающие решения для 3D графики в браузере.
Ситуация начала исправляться пару лет назад, когда Apple предложила API для работы с 3D в Web. Начинание Apple поддержали Google и Mozilla, и, несколько позднее, Opera. Так родилась спецификация WebGL.
Приблизительно в то же время Adobe объявила о том, что Flash 11 будет иметь API для работы с трехмерной графикой. На мой взгляд, несмотря на имеющиеся неоспоримые достоинства, Flash является плагином и также как и любой другой плагин не является родной для веба технологией. Он очень слабо интегрирован с экосистемой браузера, и фактически выживается с мобильных платформ. Кроме того Stage3D API не базируется на каком-то устоявшемся и популярном 3D API, а значит требует много времени для изучения и понимания возможностей, узких мест, например затруднен перенос существующих исходных кодов шейдеров. Кроме того, при создании проектов на Flash сложно опираться на HTML-инструментарий для сложной верстки и затруднено согласование (наложение, взаимодействие) DOM страницы и контента, сделанного с использованием Flash, а при разработке на ActionScript невозможно воспользоваться всем богатством библиотек созданных сообществом Web-разработчиков.
На мой взгляд, WebGL имеет больше перспектив. Надеюсь, я смогу убедить вас в этом.
Обзор WebGL
В основе WebGL лежит API OpenGL, и с некоторой долей условности можно сказать, что WebGL – это биндинг OpenGL для JavaScript. WebGL ориентируется на набор возможностей предоставляемых OpenGL ES 2.0, что позволяет использовать его на широком спектре оборудования: как на десктопах, так на мобильных платформах. Разумеется, возможности настольных компьютеров в большинстве случаев существенно превышают то, что может дать WebGL. Но такое решение позволило создать некоторое единообразие с мобильными платформами, где ускорители трехмерной графики обосновались относительно недавно и на данный момент по уровню функционала и производительности примерно соответствуют графическим ускорителям среднего класса для десктопных компьютеров 5-7 ми летней давности.
Как и OpenGL, WebGL – это довольно низкоуровневый API, и для того чтобы создавать проекты, используя его непосредственно, нужно довольно хорошо разбираться во многих непростых аспектах трехмерной графики. Однако история показала, что высокоуровневые 3D API плохо приживаются в среде разработчиков, так, например, канул в лету Direct3D 7 Retained Mode, к 8-й версии Direct3D Microsoft перестала его развивать. На мой взгляд, причина тому – очень сильные различия в задачах, стоящих перед 3D-разработчиками. Перед многими стоит задача создать максимально реалистичную графику, работающую в режиме реального времени, и никто не желает жертвовать существенной частью производительности ради универсальности или несколько большей простоты. При работе с низкоуровневым API зачастую имеются возможности сделать менее универсальное (но решающее поставленную задачу), зато в разы более быстрое и/или даже простое решение. Многие могут напомнить мне известную фразу Дональда Кнута: «Преждевременная оптимизация – корень всех бед», но в случае с трехмерной графикой выводить минимум 30, а лучше 60 кадров в секунду – не просто желание, это – необходимость. При этом требуется обеспечивать привлекательный и конкурентный уровень графики приложения.
Разработчики стандарта WebGL при рассмотрении этих противоречий рассчитывают на то, что сложность работы с WebGL непосредственно будет компенсирована большим числом библиотек. Таким образом, будут удовлетворены и опытные разработчики, создающие сложные приложения, и начинающие – они смогут создавать проекты, не вникая сразу во все детали низкоуровневого API, а будут использовать те или иные библиотеки/фрэймворки.
В настоящий момент WebGL уже поддерживается браузерами Google Chrome и Mozilla Firefox для Windows, Linux и MacOS, и браузером Firefox for Android. Opera в 12-й версии также представила реализацию WebGL (хоть и довольно сырую), в ночных сборках Safari для MacOS имеется возможность включить поддержку WebGL. В iOS можно активировать WebGL в компоненте UIWebView, правда пока что с использованием приватных API (соответственно такое приложение не может быть опубликовано в AppStore).
Обзор IEWebGL
Внимательный читатель к этому моменту уже наверняка заметил, что я обошел стороной вопрос поддержки WebGL со стороны Microsoft. К сожалению, по ряду причин, обсуждение которых выходит далеко за рамки этой статьи, в Microsoft решили, что WebGL недостаточно соответствует духу Web, и идеям, на которых вырос современный Интернет, а также, что стандарт WebGL в существующем виде имеет ряд проблем с безопасностью.
Это не может не огорчать любого, кто имеет достаточный опыт веб-разработки и знает, как тяжело строить свои решения на технологиях, которые имеют существенно отличающийся уровень поддержки среди производителей браузеров.
Наша команда рада предложить возможное решение для тех, кто хочет создавать проекты на WebGL и в то же время не хочет упускать пользователей браузеров Internet Explorer. Наша разработка – IEWebGL. Это ActiveX плагин для IE, работающий во всех версиях браузера с 6-й по 10-ю и реализующий API WebGL. IEWebGL абсолютно бесплатен. Вы можете использовать его для создания своих проектов без ограничений. Плагин работает как в 32-х, так и в 64-х битных версиях браузеров Internet Explorer на операционных системах начиная с Windows XP и заканчивая Windows 8 (за исключением Metro-style IE и ARM-версии Windows 8, но об этом подробнее в следующей статье).
Расскажу немного подробнее о том, как устроен IEWebGL.
Возможно, вы знаете что, для нормальной работы OpenGL в Windows необходимо устанавливать драйвер от производителя видеокарты, так как драйверы, входящие в комплект Windows обеспечивают только аппаратное ускорение Direct3D. В связи с этим Google и Mozilla разработали библиотеку с открытым исходным кодом ANGLE, которая эмулирует API OpenGL посредством Direct3D и таким образом не зависит от наличия OpenGL драйвера в системе. ANGLE-рендерер используется браузерами Chrome и Firefox в Windows по умолчанию. ANGLE также содержит в своем составе транслятор языка шейдеров GLSL (используемый в OpenGL/WebGL) в язык HLSL, используемый Direct3D. В настоящий момент реализация стандарта OpenGL ES 2.0 библиотекой ANGLE, проходит все тесты на совместимость ES 2.0.3.
Плагин IEWebGL построен на основе ANGLE и поэтому предоставляет высококачественную реализацию стандарта WebGL, сравнимую по качеству с реализациями в Google Chrome и Mozilla Firefox. Кроме того, в современных версиях IE используются новые API для аппаратно-ускоренного композитинга страницы и графического контента плагина, таким образом обеспечивается высокая скорость работы и низкое потребление энергии, так как графический контент не покидает пределов видеоадаптера и не требуется его обработка центральным процессором.
Разумеется, плагин не является частью браузера, и потому имеются некоторые очень незначительные отличия, в основном касающиеся получения контекста WebGL. По стандарту контекст WebGL создается вызовом .getContext(“webgl”) элемента canvas, однако плагины создаются на странице с использованием элемента object и поэтому разработчику сайта нужно либо генерировать разный HTML-код для IE и для прочих браузеров, либо использовать JavaScript для динамического создания нужного элемента (object или canvas) в зависимости от браузера. К счастью на этом отличия практически заканчиваются. В IE вы используете тот же вызов .getContext(“webgl”) применительно к элементу object и в дальнейшем работаете с контекстом в полном соответствии с API WebGL.
Код для браузеров со встроенной поддержкой WebGL:
<!doctype html>
<html>
<head>
<script type="text/javascript">
function initWebGL() {
var glCanvas = document.getElementById("renderArea");
var glCtx = glCanvas.getContext("experimental-webgl");
if (glCtx) alert("got WebGL context");
}
</script>
</head>
<body onload="initWebGL()">
<canvas id="renderArea"></canvas>
</body>
</html>
Код для браузеров Internet Explorer:
<!doctype html>
<html>
<head>
<script type="text/javascript">
function initWebGL() {
var glCanvas = document.getElementById("renderArea");
var glCtx = glCanvas.getContext("experimental-webgl");
if (glCtx) alert("got WebGL context");
}
</script>
</head>
<body onload="initWebGL()">
<object id="renderArea" type="application/x-webgl">
</object>
</body>
</html>
IEWebGL также реализует полную поддержку стандарта TypedArray в IE до 9-й версии включительно. В IE10 IEWebGL использует реализацию TypedArray встроенную в браузер. Таким образом, даже если ваш сайт не работает с 3D графикой, вы можете использовать IEWebGL, для того, чтобы добавить возможность работы с бинарными данными в IE версий 9 и ниже используя стандартные API.
Подводя итог, хочу сказать, что на сегодняшний день при выборе технологии для отображения 3D в Web, стоит рассмотреть WebGL как реальную альтернативу старым подходам, надежно работающую в большинстве браузеров.
Сайт IEWebGL: iewebgl.com
В следующей статье мы расскажем уже непосредственно про наш javascript-движок, использующий возможности WebGL для трехмерной визуализации.
