Все здорово, но без возможности динамически менять содержимое и взаимодействовать с пользователем все эти графические возможности существенно теряют значимость. Читать далее
Приемлемое отображение динамичной ЗЭ-графики в браузере всегда было не то чтобы проблемой, а скорее даже мечтой. И эту мечту воплощали. Сначала 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-элемента.
Теперь попробуем совместить интерактивность и анимацию. Напишем небольшую, но бодрящую игру (с мячиком!), дабы пояснить основные приемы создания canvas-игрушек.
Разбор этой технологии стоит предварить ремаркой о том, как вообще получить к ней доступ. В настоящий момент вполне корректно отображает OpenGL контент-браузер Google Crome (или Chromium) — там она включена по умолчанию. Читать далее
Теперь с имеющимся арсенальном средств мы вроде бы можем нарисовать буквально все! Даже трудно представить, что нам теперь недоступно. Вот только… сложно это все. Читать далее
Шейдер — это программа, выполняемая на графическом процессоре в процессе обработки сцены для определения окончательных параметров объекта или изображения. Читать далее
Просматривая материалы по графической ипостаси HTML5, можно заметить, что вторым по частоте упоминания термином после Canvas является даже не WebGL (о котором речь еще впереди), а в общем не такие уж незнакомые три буквы — SVG. Читать далее
Все аргументы, которые приводились ранее, в пользу применения облегчающих жизнь библиотек при работе с Canvas 2D или SVG, можно смело умножать на пять, а может, и на десять, когда мы собираемся разрабатывать какую-нибудь, хоть сколько-нибудь сложную
На первом шаге создадим контейнер для будущих шедевров:
<svg width=”300” height=”300” > </svg>
Ширину и высоту для него мы указали, как для обычного HTML-элемента. Читать далее
Еще одна деталь — добавим в композицию текстуру (это как раз использование готового изображения). Тут все очень напоминает работу с цветом, что неудивительно: текстура в WebGL (как и в OpenGL) — это, по сути, закрашивание фигуры другой картинкой. Приступим: