Сейчас практически не существует веб-сайтов, которые не содержали бы графических элементов. Любой ресурс, даже если его предназначение состоит в сугубо текстовом информировании, будет хоть как-то да украшен графическими элементами - без кнопок, пиктограмм и логотипа никак не обойтись.
В этой статье мы немного порассуждаем о том, как графика влияет на сайтостроение и какую роль, занимает в этом глобальном процессе.
Согласитесь, тема эта весьма многогранна, но мы, в меру своих сил, постараемся быть лаконичными. Эта статья предназначена в первую очередь начинающим веб-мастерам - с каждым годом таких персонажей становится все больше и больше . И это радует.
Итак, начнем наше повествование.
Даже если человека не кормить какое-то время, он все равно будет хотеть смотреть на картинки. Так устроена человеческая психика и наш глаз, повинуясь законам природы, всегда стремится найти изображение или узор на белом полотне. В веб-дизайне эту функцию человеческого мозга - желание найти осмысленное изображение - можно использовать по-разному.
Например, можно делать сайты, которые будут приносить неплохие доходы, посредством того, что люди, заходящие на них, начнут кликать по цветастым и заманчивым картинкам - каждый клик - это переход и за него веб-масетру капает небольшая денежка. Ну а если таких переходов будет много, то небольшая денежка, в конечном итоге, станет очень даже и большой.
Но давайте не будем забегать вперед и остановимся только на том, что любое изображение (будь то картинка или элемент дизайна) является не чем иным, как катализатором внимания со стороны посетителя. Грамотно подобранные графические объекты в своей совокупности могут сделать чрезвычайно много позитивных вещей.
Давайте же рассмотрим, так сказать, основы использования графики в вебе .
Вне всякого сомнения, графика является тем механизмом, который улучшает ваш сайт.
Однако, следует помнить, что графика это не только дизайн, но еще и контент - сайты с графическим контентом, кстати сказать, самые популярные в паутинке (вы наверное догадались,что мы имеем в виду порнографию и все что с ней связанно). Как мы уже сказали в самом начале нашей статьи, сайтов, в которых так или иначе не задействована графика, не существует.
Если говорить про текстовые сайты (например, такие ресурсы, основой контента которых являются статьи), то графика, в первую очередь выполняет инфографическую роль . Это свойство графика демонстрирует тогда, когда она становится не просто частью дизайна, а частью опубликованного материала. Став неотъемлемой частицей публикации, графика обращает на себя внимание читателя уже не как "картинка" - она становится источником информации, который ничем не уступает тексту. В данном случае мы говорим, про графические схемы и диаграммы.
Существуют и более сложные виды информационной графики.
Например, таймлайны и другие динамические фотоматериалы, которые призваны помочь читателю в полной мере понять существующую на определенный момент ситуацию.
Теперь рассмотрим другой вариант - графика, как основа контента .
В данном случае, графика полностью перестает быть дополнением - ее функция начинает играть решающую роль и трафик, который поступает на сайт, полностью подчиняется динамике обновления графического контента. В качестве примера можно привести какой либо из фото-блогов - впрочем, вы, наверное, и сами знаете их адреса. Как вариант - знаменитый проект Flickr .
Ну а сейчас еще об одном позитиве, который может дать вашему сайту правильное использование графического контента .
Известно ли вам, что пользователи первый раз попав на сайт, читают его по диагонали?
Это совершенно естественная реакция человеческого глаза на что-то новое - глаз пытается найти зацепку, суть и после этого уже приступить к детальному изучению представшего перед ним контента. На основании этой особенности человеческого поведения ушлые маркетологи разработали немало приемов, посредством которых, человек начинает проявлять недюжую активность в плане что-то купить.
Но мы отвлеклись.
Понятное дело, что графика имеет больше шансов обратить на себя внимание, чем текст. Особенно, если она интересна и непосредственно касается темы статьи. Таким образом, напрашивается вывод - используя изображения в качестве иллюстративного или дополнительного материала к основному блоку своего контента (чаще всего это текст), вы имеете больше шансов удержать внимание читателя на протяжении долго времени.
Еще одна сторона позитива от использования графики - это привлечение посетителей из поисковиков.
У вас может возникнуть вполне закономерный вапрос - а причем тут поисковики? Ведь еще не придуманы поисковые роботы, которые могли бы сканировать изображение и делать выводы касательно того, что конкретно там изображено (дерево или, например, человек)!
Конечно - тут спору нет. Таких технологий еще не придумано (но ученные, кстати сказать, уже работают в этом направлении). Однако - если вы грамотно окружите свою картинку релевантным текстом, то поисковой бот обязательно догадается о том, что же изображено на картинке. Не забывайте использовать тег alt=" " - пауки очень любят читать то, что там написано.
Трафик, который поступает на сайт из поисковиков, которые занимаются поиском графики весьма велик - пренебрегать им не стоит ни в коем разе. На нашем сайте есть несколько публикаций, которые напрямую касаются поисковой оптимизации графических объектов - рекомендуем ознакомиться! К примеру, вот имеется статья посвященная технологии оптимизации картинок под поисковики.
Ну а теперь пару слов про негатив, который может возникнуть, если графику использовать неправильно.
Конечно же, тут имеется в виду фактор размера изображений. Как известно, любая картинка в электронном виде весит какое-то количество байт и задача веб-мастера сделать так, что бы это количество было меньшим, а качество изображения оставалось максимально зачетным.
Следует помнить, что, несмотря на то, что многие пользователи сети в настоящее время используют широкополосный Интернет, по-прежнему остается немалый процент народа, который такого блага не имеет. Многие люди до сих пор выходят в сеть, через диалап-модемы! Есть и еще одна причина, которая заставляет обращать внимание на компрессию графических объектов - это использование мобильного Интернета, который бегает не так шустро, как DSL или оптоволокно.
Подведем небольшой итог.
На основании вышесказанного можно сказать следующее - использовать графику в веб-дизайне следует не только в обязательном порядке (без графики никак!), но еще и с умом. Заработки в сети будут зависеть не только от того, сколь много вы получите входящих ссылок на свой сайт. Главное - это, то, как вы будете удержать посетителя на нем.
Графика - это одно из средств, которым обязательно надо воспользоваться.
наполнение сайта - статьи о ньансах заполнения вашего сайта различными материалами
Графика широко используется в Web. Известно, что одна небольшая картинка может заменить целую страницу текста. Web-дизайнеры без устали совершенствуются и даже соревнуются в оформлении сайтов, а в информационном содержании Web-страниц графическая информация занимает все более весомое место.
Главной особенностью графики в Web-дизайне является то, что обычно она соседствует с текстовой информацией и элементами интерфейса (кнопками, переключателями и т. п.), и это соседство приходится учитывать при создании изображений. Основное назначение графики в том, чтобы привлечь внимание к Web-странице в целом или к отдельным ее фрагментам, а также представить информацию, которую словами не опишешь. Иначе говоря, графика используется и для оформления страницы, и для представления информации (иллюстраций). Она может как существенно помочь посетителю понять информацию, так и наоборот, сбить его с толку, сделать тексты трудночитаемыми. Графический дизайн Web-сайта - дело тонкое, требующее вкуса и чувства меры. Плохое графическое оформление сайта может просто отпугнуть посетителей. В то же время нужно помнить, что посетители возвращаются к сайту снова и снова благодаря, прежде всего, его информативности, а не красоте. Таким образом, разработчик графического дизайна сайта не просто свободный художник. Ближе всего он к архитектору.
Другая немаловажная особенность графики для Web заключается в довольно жестких ограничениях, накладываемых на объем файлов. И это связано не столько с экономией дискового пространства компьютера, сколько с пропускной способностью каналов связи. В настоящее время подавляющее большинство посетителей Интернета используют подключение к серверу через модем. Сегодня наиболее производительные модемы обеспечивают скорость передачи данных 57 600 бит/с (около 6 Кбайт/с). Многие используют модемы производительностью 33 600 бит/с и ниже. Если Web-страница загружается в браузер дольше 10 с. это раздражает посетителей, которые могут уйти по другому адресу, так и не дождавшись окончания загрузки. Отсюда следует, что надо стремиться к тому, чтобы Web-страница не превышала по объему 50-60 Кбайт. Для графических изображений это довольно серьезное ограничение, требующее от дизайнеров особых знаний и умения. В частности, нужно хорошо разбираться в форматах файлов и способах монтирования изображений в Web-страницу.
Третья особенность графики состоит в том, что в мире встречаются компьютеры, построенные, как говорится, на различных платформах. Так, существуют компьютеры на платформе PC и на платформе Macintosh. Мониторы этих компыотеров имеют различную яркость. Если этого не учитывать, то одна и та же картинка, великолепно выглядящая на одном мониторе, может потерять свою выразительность на другом. Поэтому художник, занимающийся Web-дизайном или просто публикующий свои произведения и Интернете, должен учитывать это обстоятельство и уметь настраивать свой монитор.
Web-страница мертва без графики. Графические изображения применяются для иллюстрации текстов. Но пользователям стало надоедать десятками минут дожидаться окончания загрузки какой-нибудь странички, на которую они и заглянули-то, чтобы узнать текущий курс доллара по отношению к немецкой марке или выяснить прогноз погоды на завтра. Поэтому вопрос объема графики назрел.
Графические компоненты Web-страниц по назначению можно условно разделить на три обширные категории:
иллюстративная графика, включая дополняющие текст фотографии, пояснительные рисунки, чертежи и схемы,
функциональная графика, представляющая собой элементы управления сайтом (кнопки навигации, счетчики и элементы интерактивных форм) и, наконец,
декоративная графика - элементы дизайна страницы, включенные в нее «для красоты» и не несущие информационной нагрузки (фоновые рисунки, линии-разделители, выполненные в виде графических файлов заголовки и многое другое).
Графический формат gif
В далеком 1978 году двое израильских исследователей Якоб Зив (Jacob Ziv)и Абрахам Лемпел (Abraham Lempel) разработали принципиально новый для того времени алгоритм сжатия информации без потери данных, которому, немудрствуя лукаво, дали полученное из сокращения собственных фамилий и даты завершения своего проекта название: LZ78. Информация о принципах построения этого алгоритма была общедоступной, и спустя несколько лет американский программист Терри Уэлч (Terry Welch) усовершенствовал его, добавил в обозначение первую букву своей фамилии и запатентовал новый алгоритм под названием LZW, также предоставив свою разработку для использования всем желающим.
Одним из таких «желающих» оказался сотрудник компании CompuServe Inc.Боб Берри (Bob Berry), взявший LZW в качестве основы для созданного им в 1987 году принципиально нового графического формата GIF (Graphic Interchange Format). Созданная Терри Уэлчем компания Unisys, которой и принадлежали авторские права на алгоритм LZW, взимала плату за его использование только с производителей аппаратного обеспечения для компьютеров, в котором применялся данный стандарт, например, с изготовителей модемов. Разработчики программного обеспечения «комиссионными сборами» не облагались.
Однако зимой 1994 года компания Unisys, начавшая испытывать финансовые проблемы, объявила LZW коммерческим стандартом, использование которого требует оплаты. Это автоматически сделало GIF единственным в мире «платным» графическим форматом, что вызвало волну недовольства среди пользователей Интернета, поскольку практически на всех современных Web-сайтах так или иначе применяются элементы GIF. Тем не менее, GIF чрезвычайно широко используется в Интернете и сейчас, причем пользователи не обязаны оплачивать кому бы то ни было возможность разместить на своей страничке изображение в данном формате, так как упомянутые выше финансовые претензии касаются, в первую очередь, производителей работающего с GIF программного обеспечения. Ситуация с дальнейшей судьбой этого стандарта до сих пор остается не разрешенной.
Благодаря возможностям алгоритма LZW стандарт GIF позволяет значительно сокращать объем итогового графического файла по сравнению с исходным изображением. Достигается это методом смешения сходных оттенков в один. Если, например, в составе рисунка имеется участок, состоящий из нескольких сходных полутонов, к примеру, голубого, светло-голубого и темно-голубого цвета, они будут кодированы одним оттенком - голубым. Информация об изображении в файле стандарта GIF записывается построчно, то есть представляет собой массив описаний строк высотой в один пиксел. Именно это свойство GIF, а также то, что данный формат оперирует фиксированной, так называемой индексированной палитрой, причем число цветов в этой палитре не превышает 256,явилось основой для появления двух простых правил, применяющихся в современномWeb-дизайне. Вот они.
ВНИМАНИЕ Стандарт GIF используется в документах HTML только для отображения так называемой бизнес-графики: диаграмм, логотипов, кнопок, разделительных линий, других элементов оформления страницы. Для размещения на Web-сайте фотографий, репродукций картин и изображений с большим количеством цветов и цветовых переходов используется стандарт JPEG.
В упрощенном виде данный закон «Web-мастерства» можно сформулировать так: если изображение рисованное, его следует представлять в стандарте GIF, во всех остальных случаях лучше воспользоваться JPEG.
ВНИМАНИЕ Подготавливая рисунок для сохранения его в формате GIF, необходимо избегать следующих художественных приемов: градиентных заливок, размытий, постепенных цветовых переходов с множеством оттенков, а также графических фильтров, обеспечивающих неравномерное смешение нескольких цветов на одном участке изображения, например, эффектов изменения интенсивности освещения, подобных фильтру «блик» редактора Adobe Photoshop.
Это правило продиктовано тем, что алгоритм замещения схожих оттенков одним в формате GIF далеко не всегда работает корректно. Правильнее было бы, наверное, сказать «работает некорректно почти всегда». Поэтому участки со множеством различных оттенков на небольшом физическом пространстве рисунка после сохранения изображения в индексированной палитре будут выглядеть смазанными и «грязными». Этого можно избежать, применяя в своей иллюстрации по возможности однотонные и контрастные цвета. Одно из замечательных свойств стандарта GIF - его уникальная особенность, названная разработчиками «interlace», или, по-русски, «черессторность». Она позволяет загружать картинку с сервера в клиентский браузер не целиком, а частями, причем процедура считывания файла выглядит следующим образом: сначала на экране отображаются первая, пятая и десятая строки, составляющие изображение, затем - вторая, шестая и одиннадцатая и т. д. Таким образом, для пользователя создается иллюзия постепенной загрузки графического элемента: картинка как бы медленно «проявляется» на странице, что иногда бывает очень полезно при включении в документ изображений большого размера -психологически зрителю легче дождаться полной прорисовки иллюстрации, чем несколько минут скучать перед пустым экраном. К тому же еще до полной загрузки файла пользователь может оценить приблизительное содержимое картинки и решить, стоит ли ему дожидаться ее полной прорисовки или нет.
Через несколько лет после создания стандарта GIF, в 1989 году, компания CompuServe выпустила новую версию этого графического формата, получившую название GIF89a. Данная модификация включает в себя еще две уникальные особенности, широко использующиеся в современном Интернете. Первая называется «transparency» и подразумевает создание для изображения прозрачного фона методом сохранения вместе с файлом так называемого альфа-канала, представляющего собой маску прозрачности рисунка. Цвета, помеченные в альфа-канале как прозрачные, станут невидимы в браузерах и большинстве других программ, предназначенных для просмотра изображений. Эта функция необходима, например, при размещении картинок неправильной геометрической формы на странице со сложным фоновым рисунком, когда корректно «подогнать» части изображений друг к другу не представляется возможным.
СОВЕТ Убрать ненужный фон из файла GIF можно, воспользовавшись встроенной процедурой графического редактора Adobe Photoshop. Для этого вменю «файл» необходимо выбрать пункт «экспорт», среди предложенных вариантов отметить «GIF89a» и в появившемся окне с помощью инструмента «пипетка» указать цвета, в которых вы больше не нуждаетесь.
Другая полезная особенность стандарта GIF89a заключается том, что этот формат позволяет сохранять в файле с одним физическим заголовком несколько разных изображений, демонстрируя их на экране последовательно одно за другим, причем с возможностью специфицировать порядок их чередования и временной интервал между сменами кадра. Именно на этом принципе построена весьма распространенная в Интернете GIF-анимация, о которой мы поговорим подробнее в этом же уроке.
Восприятие цвета человеком основано на реакции зрительной системы на воздействие света с разной длиной волны. Белый свет является сложным светом, состоящим из лучей различной цветности: красного, оранжевого, желтого, зеленого, голубого, синего, фиолетового – такое разложение называется спектром . Если белый свет падает на белый предмет, то все составляющие белого света отражаются от него, и мы видим белый цвет предмета. Если белый свет падает на зеленый предмет, то все составляющие света поглощаются поверхностью предмета, и лишь зеленая составляющая отражается, в результате чего мы видим зеленую окраску предмета. Аналогично происходит и с другими цветами: красным, синим, зеленым и т.п. Если свет падает на поверхность черного цвета, то поглощаются все составляющие спектра, и мы видим черный предмет. Таким образом, цвет окружающих нас предметов получается путем вычитания из белого отдельных спектральных составляющих. Такой способ получения цвета носит название "субтрактивный (вычитательный) синтез" .
Однако, если посмотреть на экран монитора через увеличительное стекло, можно увидеть, что цвет любой точки экрана (пикселя) формируется из трех светящихся точек разных цветов: Красного (R
), Зеленого (G
), и Синего (B
). Поскольку в данном случае мы имеем дело не с отраженным светом, а со светящимся экраном, происходит не вычитание составляющих из основного цвета, а сложение цветов световых лучей. Такая модель смешения цветов называется аддитивной
. Черный цвет в таком случае получается, если ни одна из трех цветных составляющих не задействована. Белый цвет получается при смешивании чистых излучений трёх основных цветов (красного, зелёного и синего) максимальной яркости.
Для формирования изображений на мониторах, экранах телевизоров, проекторах используется аддитивная цветовая схема RGB (R ed, G reen, B lue). Любой цвет на экране получается путем смешения составляющих красного, зелёного и синего цветов различной интенсивности.
Работая с графическими редакторами, мы сталкиваемся и с другими цветовыми моделями.
Цветовая модель CMYK предназначена для работы с отраженным цветом, т.е. является субтрактивной. Цветовыми составляющими этой модели являются цвета: голубой (Cyan), пурпурный (Magenta), желтый (Yellow) и черный (BlacK). Голубой, пурпурный и желтый цвета получаются в результате вычитания основных цветов модели RGB из белого цвета. Черный цвет задается отдельно, поскольку получить черный цвет путем смешения красок невозможно технологически. Катриджи современных печатающих устройств содержат краски этих четырех цветов. В компьютерной графике модель CMYK применяется для подготовки печатных документов.
Цветовая модель HSB
Системы цветов RGB и CMYK связаны с ограничениями, накладываемыми аппаратным обеспечением (монитор компьютера в случае RGB и типографские краски в случае CMYK).
Цветовая модель HSB наиболее удобна для человека, т.к. она хорошо согласуется с моделью восприятия цвета человеком.
Компонентами модели HSB являются:
- тон (H ue)
- насыщенность (S aturation)
- яркость цвета (B rightness)
Веб-технологии прочно вошли в нашу повседневную жизнь. Мы проводим во всемирной паутине достаточно большое количество времени - смотрим новости, совершаем покупки, общаемся и работаем. Индустрия услуг и развлечений в сети Интернет стремительно развивается, ведущие разработчики программного обеспечения улучшают поддержку трехмерной графики в своих продуктах. Традиционно ее поддержка ограничивалась высокопроизводительными компьютерами или специализированными игровыми консолями, а программирование требовало применения сложных алгоритмов. Однако благодаря росту производительности персональных компьютеров и расширению возможностей браузеров стало возможным создание и отображение трехмерной графики с применением веб-технологий.
В отличие от других технологий для работы с трехмерной графикой (таких как OpenGL и Direct3D), WebGL предназначена для использования в веб-страницах и не требует установки специализированных расширений или библиотек. Одно из преимуществ WebGL - приложения конструируются как веб-страницы, то есть одна и та же программа будет успешно выполняться на самых разных устройствах (к примеру, на смартфонах, планшетных компьютерах и игровых консолях). Это означает, что WebGL будет оказывать все более усиливающееся влияние на сообщество разработчиков и станет одним из основных инструментов программирования графики.
Достоинства WebGL
С развитием HTML разработчики получили возможность создавать все более сложные веб-приложения. На заре своего развития язык HTML предлагал только возможность отображения статического контента, но с добавлением поддержки JavaScript стало возможным реализовывать более сложные взаимодействия элементов и отображения динамического контента. Внедрение стандарта HTML5 позволило использовать новые возможности, включая поддержку двухмерной графики в виде тега canvas. Создание технологии WebGL позволило отображать и манипулировать трехмерной графикой на веб-страницах с помощью JavaScript. При помощи WebGL разработчики могут создавать совершенно новые пользовательские интерфейсы, трехмерные игры и использовать трехмерную графику для визуализации различной информации. Несмотря на внушительные возможности, WebGL отличается от других технологий доступностью и простотой использования, что способствует ее быстрому распространению.
Поддержка браузерами
В настоящий момент WebGL поддерживается следующими браузерами:
Десктопные браузеры
- Mozilla Firefox (с 4-й версии)
- Google Chrome (с 9-й версии)
- Safari (с 6-й версии, по умолчанию поддержка WebGL отключена)
- Opera (с 12-й версии, по умолчанию поддержка WebGL отключена)
- IE (с 11-й версии, для других версий можно воспользоваться сторонними плагинами, например, IEWebGL)
- Android-браузер (поддерживает WebGL только на некоторых устройствах)
- Opera Mobile (начиная с 12-й версии и только для ОС Android)
- IOS (полная поддержка с версии 8.1)
- Firefox for mobile (с 4-й версии)
- Google Chrome для Android (с 25-й версии)
- Кроссбраузерность и отсутствие привязки к определенной платформе. Windows, MacOS, Linux - все это неважно, главное, чтобы ваш браузер поддерживал WebGL.
- Использование языка JavaScript, который достаточно распространен.
- Автоматическое управление памятью. В отличие от OpenGL, в WebGL не надо выполнять специальные действия для выделения и очистки памяти.
- Поскольку WebGL для рендеринга графики использует графический процессор на видеокарте (GPU), для этой технологии характерна высокая производительность, которая сравнима с производительностью нативных приложений.
Наиболее распространенными технологиями отображения компьютерной графики на персональных компьютерах являются Direct3D и OpenGL.
Direct3D - составная часть пакета технологий Microsoft DirectX.
Альтернативная ей технология OpenGL, благодаря ее открытости, получила гораздо более широкое распространение. Реализации OpenGL доступны для различных операционных систем и аппаратных платформ. Спецификация OpenGL была разработана компанией Silicon Graphics Inc. и опубликована как открытый стандарт в 1992 году. Технология оказала огромное влияние на развитие трехмерной графики.
WebGL уходит корнями в OpenGL, однако назвать его прямым потомком нельзя. Непосредственным прототипом WebGL принято считать OpenGL ES (for Embedded Systems для встраиваемых систем), создана в 2003--2004 годах и обновлена в 2007-м (ES 2.0) и в 2012-м (ES 3.0) годах. Переход к версии OpenGL 2.0 обозначился появлением новой важной особенности - поддержкой программных шейдеров. Эта поддержка была перенесена в OpenGL ES 2.0 и стала одним из основных элементов спецификации WebGL 1.0.
В начале 2009 года консорциум Khronos Group (некоммерческий промышленный консорциум, образованный для разработки, публикации и продвижения различных открытых стандартов) учредил рабочую группу WebGL и запустил процесс стандартизации WebGL на основе OpenGL ES 2.0. В 2011-м под его эгидой была выпущена первая версия WebGL. Однако в июне того же года корпорация Microsoft выразила свою обеспокоенность безопасностью технологии WebGL, сославшись на чрезмерные права доступа к оборудованию и ненадежность механизмов защиты. Вице-президент Mozilla Марк Шавер отверг критику Microsoft, назвав опасения преувеличенными. В то время корпорация Microsoft обладала собственной 3D веб-технологией Silverlight 5, основанной на тех же принципах, что и WebGL, которую, тем не менее, корпорация считала достаточно надежной. Позднее Microsoft изменила своё отношение к технологии WebGL, реализовав её поддержку в своем браузере Internet Explorer 11. Корпорация Apple приняла решение о поддержке WebGL в браузере Safari на конференции WWDC в 2014 году.
Обзор фреймворков для разработки на WebGL
Технология WebGL использует низкоуровневое API, этот аспект облегчает внедрение технологии разработчиками браузеров в свои продукты, но создает достаточно большие трудности при создании интерфейсов. Большое количество времени и сил было вложено в разработку библиотек, фреймворков и сторонних программных средств, которые упростили работу разработчикам сайтов.
Достаточно именитая библиотека для разработки приложений с использованием WebGL. Библиотека ориентирована больше на динамическое изменение сцены. Однако последние изменения в репозитории датированы 2014 годом, поэтому есть причины усомниться в актуальности библиотеки на сегодняшний день.
Неполный список функций:
- Покадровая анимация
- Поддержка общего освещения, направленного освещения (spot) и точечных источников света
- Поддержка карты нормалей
- Анимирование материалов
- Скелетная анимация
- Поддержка формата Collada
- Поддержка карт смещения
- Рендеринг текста
- Туман
- Глубина теней
- Карты окружения
- Отражение / преломление
- Анимация Collada
- 2d фильтры
- Culling - удаления скрытых частей сцены из процесса обработки
- Поддержка LOD - уровни детализации объекта
- Физика
Наиболее популярная и активно развивающаяся библиотека на сегодняшний день. Подробная и доступная документация и огромное количество рабочих примеров делают эту библиотеку одним из лидеров среди аналогичных систем.
Неполный список функций:
- Рендереры - Canvas, SVG или WebGL
- Добавление и удаление объектов в режиме реального времени
- Туман
- Перспективная или ортографическая камеры
- Каркасная анимация, различные виды кинематики, покадровая анимация
- Несколько типов источников света - внешний, направленный, точечный
- Брошенные и полученные тени
- Шейдеры (GLSL)
- Объекты - сети, частицы, спрайты, линии, скелетная анимация и так далее
- Множество предустановленных типов геометрии - плоскость, куб, сфера, тор, 3D текст и так далее
- Активная поддержка модификаторов - ткань, выдавливание
- Возможность загрузки множества типов данных - двоичный, изображения, JSON и сцена
- Экспорт и импорт обьектов Blender, openCTM, FBX, 3D Studio Max и Wavefront .obj файл
Библиотека с открытым исходным кодом для создания полноценных 3D приложений и игр, работающих в веб-браузере без использования сторонних плагинов и расширений. Babylon JS по своим возможностям близок к ThreeJS, однако имеет в своем арсенале некоторые встроенные функции, недоступные в Three JS из коробки. К таким приятным особенностям относятся встроенный физический движок oimo.js - достаточно простой способ создать реалистичный ландшафт, используя карту высот. Разумеется, в three js также присутствуют такие возможности, но реализованы они при помощи различных дополнительных приложений. Однако за функциональность библиотеки приходиться платить нескромным весом в 800 кб.
Список функций:
- Сцена - использование готовых мешей, туман, скайбоксы
- Физический движок (модуль oimo.js)
- Сглаживание
- Анимационный движок
- Звуковой движок
- Система частиц (партиклов)
- Аппаратное масштабирование
- Поддержка LOD-ов
- Автоматическая оптимизация сцены
- Панель отладки
- 4 источника освещения - точечный, излучаемый повсюду, прожектор и реалистичное
- Пользовательские материалы и шейдеры
- Широкие возможности текстурирования
- Блики
- 9 видов камеры, в том числе и для сенсорного управления
- Экспортеры для 3ds Max, Blender, Unity3D, Cheetah 3d
- Карта высот
Каждый разработчик может выбрать библиотеку под свои конкретные нужды - кому-то важна скелетная анимация, кому-то - реалистичный свет или физика, а кто-то является действительно ортодоксальным профессионалом, который не признает ничего кроме чистейшего WebGL API и пишет шейдеры в блокноте. Однако всех объединяет желание создать качественные, легкие и производительные веб-приложения, активно использующие возможности трехмерной графики.
Bluetooth
