Графика в HTML5

WebGL — врываемся в третье измерение

Приемлемое отображение динамичной ЗЭ-графики в браузере всегда было не то чтобы проблемой, а скорее даже мечтой. И эту мечту воплощали. Сначала Java-апплетами, потом Flash-сценами, VRML, псевдо-ЗЭ в SVG, наконец, псевдо-ЗЭ-построениями в canvas. И все это по тем или иным причинам не давало удовлетворительного результата. В основном из-за громоздкого и слабо модифицируемого воплощения. Будем честны: ЗЭ-графика — и без всякого веба вещь не совсем простая. Не зря же для работы с ней разработаны такие мощные программные решения, как DirectX и OpenGL, библиотеки, взаимодействующие непосредственно с памятью видеокарты. Возможно такое на веб-странице? Теперь да!

WebGL (Web — based Graphics Library) является программным JavaScript API, предназначенным для построения трехмерной графики. WebGL построена на основе OpenGL ES 2.0 и разрабатывается под кураторством Khronos Group — некоммерческой организации, ответственной за сопровождение OpenGL (широко распространенной кроссплатформенной библиотеки для реализации ЗЭ-графики). WebGL не является альтернативой или заменой canvas, напротив, работа библиотеки проходит в контексте этого HTML-элемента.

Play the Game!

Теперь попробуем совместить интерактивность и анимацию. Напишем небольшую, но бодрящую игру (с мячиком!), дабы пояснить основные приемы создания canvas-игрушек.

Читать далее

Браузеры и драйверы

Разбор этой технологии стоит предварить ремаркой о том, как вообще получить к ней доступ. В настоящий момент вполне корректно отображает OpenGL контент-браузер Google Crome (или Chromium) — там она включена по умолчанию. Читать далее

Шейдеры

Шейдер — это программа, выполняемая на графическом процессоре в процессе обработки сцены для определения окончательных параметров объекта или изображения. Читать далее

SVG — векторная графика в www

Просматривая материалы по графической ипостаси HTML5, можно заметить, что вторым по частоте упоминания термином после Canvas является даже не WebGL (о котором речь еще впереди), а в общем не такие уж незнакомые три буквы — SVG. Читать далее

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

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

Читать далее

Рисуем тегами

На первом шаге создадим контейнер для будущих шедевров:

<svg width=”300” height=”300” > </svg>

Ширину и высоту для него мы указали, как для обычного HTML-элемента. Читать далее

Текстура и освещение

Еще одна деталь — добавим в композицию текстуру (это как раз использование готового изображения). Тут все очень напоминает работу с цветом, что неудивительно: текстура в WebGL (как и в OpenGL) — это, по сути, закрашивание фигуры другой картинкой. Приступим:

Читать далее

Кривая вывезет

А что насчет кривых? Тут все не так просто.

Здесь нам придется изучить, наверное, самый главный и сложный svg-элемент — path. По существу, все основные примитивы являются частным случаем этого суперэлемента. Читать далее