Учебник HTML5

  

Шейдеры

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

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

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

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-элемента.

Canvas vs SVG

Итак, вопрос, который по определению провокационный и флеймообразующий: что использовать — canvas или SVG, — на первый взгляд, он не очень правомерен: SVG — это векторная графика, Canvas представляет растовые изображения. Но тем не менее области применения обеих технологий на веб-страницах сильно пересекаются. Читать далее

Библиотеки для работы с SVG

Естественно, создавать реальные, сложные приложения с использованием SVG — значит обрекать себя на написание большого количества повторяющегося, однообразного и рутинного кода. Читать далее

SMIL — язык анимации SVG

Анимация в SVG осуществляется средствами языка SMIL. Это язык разметки, рекомендованный W3C для описания мультимедийных презентаций. И тут все гораздо интереснее, чем, допустим, в Canvas или в WebGL (где анимация — покадровая), хотя подход довольно необычный: в SVG каждой отдельной геометрической фигуре можно присвоить свои анимационные инструкции, заставить двигаться. Как и SVG, SMIL является простым подмножеством XML.

Читать далее

Группируй и властвуй

Просто повторять рисунок неинтересно. Давайте на его примере освоим технологию SVG-трансформации. Для того чтобы применять преобразования ко всему рисунку, с помощью тега <g> организуем группу:

Читать далее

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

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

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

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

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

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

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