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