Webgl примеры. Оживление объектов при помощи WebGL

Ты уже наверняка слышал о противостоянии, что развернулось между известным хакером GeoHot’ом и компанией Sony, чью суперзащищенную приставку (PlayStation 3) он взломал. По сути, GeoHot сейчас в судебном порядке отстаивает право всех исследователей ломать свои смартфоны, консоли и другие гаджеты, если им того захочется.

Краткая биографическая справка

Чтобы разобраться в этой запутанной истории, сначала нужно понять, кто такой GeoHot, и чем он знаменит.

Имя и никнейм нашего героя ты мог неоднократно встречать на страницах журнала, но подробно о нем мы не рассказывали ни разу. Кажется, пришла пора это исправить. Сейчас ему всего 21 год, он родился 9-го октября 1989 года в США, в городе Глен Рок. В Сети и за ее пределами он известен как Джордж Фрэнcис Хотц, GeoHot, million75 или же просто mil. Невзирая на свой, в общем-то, юный возраст, Хотц успел достигнуть многого. Если говорить об образовании, то небезынтересен хотя бы тот факт, что GeoHot - выпускник Центра талантливой молодежи при Университете Джона Хопкинса.

Слава пришла к Хотцу задолго до того, как он вплотную занялся джейлбрейком. Еще в начале 2000-х он успел отметиться на ISEF - Intel International Science and Engineering Fair. Это престижное соревнование для студентов и школьников, на котором они представляют свои научные проекты. Впервые Джордж участвовал в ISEF в 2004 году с проектом «The Mapping Robot». С первого же раза он вошел в список финалистов, в результате чего засветился на ТВ, дав интервью Ларри Кингу в мегапопулярном на Западе «Today Show». На следующий год успех повторился, на этот раз Хотц сорвал овации с проектом «The Googler».

Судя по фотографиям (да и просто исходя из названий) нетрудно догадаться, что все проекты GeoHot’а были связаны с робототехникой, которая Хотцу и по сей день очень интересна. И этот интерес возник совсем не вдруг - еще в школе Джордж входил в состав команды Titanium Knights, которая занималась боевыми ботами. А на досуге вундеркинд возился с проектом «Neuropilot» - разработка представляла собой девайс, основанный на железках OpenEEGпроекта, и эта штука могла считывать ЭЭГ-волны человеческого мозга. Джорджу удалось снискать признание публики на ISEF и в третий раз - в 2007 году.

Его очередной проект «I want a Holodeck» заработала сразу несколько призов в разных категориях, и заняла топовые места. Успех обернулся не только денежным эквивалентом (за самые интересные проекты Intel и Ко платят молодежи неплохие деньги), но и пристальным вниманием прессы. За эти годы наш герой успел побывать в эфире почти всех крупнейших телеканалов (Fox, CNN, NBC, CBS, G4, ABC, CNBC, BBC), дать интервью многим ведущим мировым СМИ (например, Forbes) и выступить на различных IT-конференциях. Словом, нет ничего удивительного в том, что уважаемый журнал PC World включил имя Джорджа Хотца в топ-10 самых перспективных учеников младше 21 года.

Вскрытие яблочных продуктов

Ценные призы и умиление со стороны СМИ Джорджа, очевидно, не прельщали. От перспективных конкурсов для талантливой молодежи он перешел к вещам менее законным и куда более скандальным. Признание в среде андеграунда и широкая (более того - уже мировая) известность пришли к нему в 2008-2009 годах, когда он джейлбрейкнул первый iPhone от Apple, написав blackra1n и purplera1n.

Этот поступок снова привлек внимание прессы и общественности к молодому (тогда 17-летнему) хакеру, что ему, судя по всему, пришлось по душе. И дело было даже не в том, что он писал полезный, но не слишком легальный софт (напоминаем - тогда поправки в DMCA еще не внесли, и джейлбрейк не был одобрен законом:)), просто время от времени Хотц также выдавал в своем блоге длинные тирады о Правильном Хакерстве. Например, он крайне эмоционально писал о том, что настоящие хакеры (то есть он сам и парни из Dev Team, ih8sn0w и chronicdev) не берут денег за свои программы, а те, кто поступает иначе - просто сволочи. Или, скажем, резко осуждал пиратство. Увы, на данный момент старый блог GeoHot’а закрыт и подтерт, так что придется обойтись без ссылок и поверить нам на слово.

Заметим, кстати, что джейлбрейк iPhone (а впоследствии и PS3) - дело рук не только Джорджа лично. Хотц вообще-то работал в команде, просто у его коллег не наблюдалось такой острой тяги к общению с прессой, длинным рассуждениям об этике хакерства и тому подобным вещам. Сам Джордж о своих «боевых товарищах», впрочем, не забывал. К примеру, тот самый первый взломанный iPhone он отдал для исследований Тери Дитаборну, основателю компании Certicell, в обмен на Nissan 350Z и три новых iPhone 8 ГБ.

Полученные смартфоны GeoHot раздал помогавшим ему друзьям. И все, пожалуй, шло бы хорошо - Apple выпускала бы новые продукты, Хотц и компания - взламывали их, публика - продолжала их любить, в Apple - скрипели зубами, и все были бы счастливы. Только вот после релиза iOS 4.0 Хотцу все это начало надоедать.

Летом 2010 года он написал в Твиттере, что собирается покинуть сцену, так как джейлбрейк ему наскучил, люди воспринимают все, что он делает, чересчур серьезно, а для него это лишь способ скрасить время. Страждущим он посоветовал обратить внимание на «конкурирующий продукт» - утилиту Spirit, также предназначенную для джейлбрейка «яблочной» техники.

Однако многие могли расценить этот ход как позорную капитуляцию - мол, не вышло у Хотца разлочить iPhone 4, и тут же началось: «я устал, я ухожу». От такого поворота событий GeoHot застраховался просто - он заранее, еще до объявления об уходе, заявил, что готовит джейлбрейк для iOS 4.0 и обещал представить его публике в обозримом будущем. Скептиков, конечно, нашлось немало - злые языки утверждали, что на этот раз у «юного гения» попросту нет решения, вот он и тянет время, но Хотц свое слово сдержал. В октябре 2010, как только в Сети появилась утилита GreenPois0n, вскрывавшая наконец-то iPhone 4, Хотц, якобы отошедший от дел, вдруг дал о себе знать, выпустив свою прогу limera1n.

Релиз явно был собран в некоторой спешке, так как limera1n вообще не работал для 3GS-девайсов и ощутимо бажил на остальных. Но мелкие технические косяки были делом поправимым - куда хуже то, что GeoHot, по сути, подставил коллег по цеху, и, как многие тогда писали, нанес вред всему iКомьюнити.

Об этой ситуации мы уже рассказывали довольно подробно, но все же напомним: парни из Dev-Team обнаружили, что девайсы на базе Apple A4 имеют уязвимость в bootrom. Они радостно всех заверили, что скоро выпустят джейлбрейк, и всем будет счастье. Ведь чтобы пофиксить дырку в bootrom, Apple придется перекапывать аппаратную часть устройств, а это дело небыстрое. Но планы Dev-Team оказались сорваны, и виной тому - не кто иной, как Джордж Хотц.

Он также выпустил свое средство для джейлбрейка аппаратов с iOS 4.0 и 4.1 - limera1n. Вся соль ситуации заключалась в том, что limera1n тоже использовал дырку в bootrom, только другую. Наш герой нашел вторую уязвимость и не стал утаивать ее от общественности. И хотя детище Хотца вышло в бета-версии, глючило (было замечено исчезновение иконок App Store, Maps, GameCenter и Calendar, вернуть которые не удалось даже процедурой восстановления), коллеги-хакеры все равно были в бешенстве. Еще бы, ведь если Apple будет обладать информацией об обоих эксплойтах, то сможет закрыть оба одним махом! Таким образом, перед остальными джейлбрейкерами планеты встал нелегкий выбор: либо придержать свои разработки и подождать, пока Apple закроет дыру, используемую Хотцом, либо публиковать все без оглядки, давая Apple возможность залатать все уязвимости одним махом.

GeoHot’а случившееся, похоже, не особенно взволновало (или, что более вероятно, он рассчитывал именно на такой эффект). В течение нескольких дней он довел до ума свой релиз, выпустив последнюю версию RC1b, и спокойно (подозреваем, что с чувством выполненного долга) отошел от «яблочных» дел. На этот раз, похоже, насовсем. По крайней мере, с тер пор Хотц больше не принимал активного участия в жизни Apple-комьюнити.

Взлом PS3 и разбирательство с Sony

Без достойного вызова жизнь скучна, а когда ты умен и талантлив - скучна вдвойне. Перспектива вернуться к студенческим олимпиадам и конкурсам, попробовав «запретный плод» известности, видимо, не слишком радовала GeoHot’а. Тем более, что Рочестерский Технологический Институт, в который ему удалось без проблем поступить, Джордж вскоре после громкого взлома iPhone бросил, не проучившись там и года. Новую планку Хотц поставил себе еще в конце 2009-го - тогда он опубликовал в своем блоге запись, озаглавленную «A Real Challenge» («Настоящий вызов»).

В посте он сообщил о намерении низвергнуть защиту Sony PlayStation 3, которая давно являлась эталоном стойкости. Взлом должен был быть чисто программным - разного рода USB-донглы, при помощи которых ломали PlayStation 2, хакера не интересовали. GeoHot тщательно документировал в блоге свои достижения, и уже пять недель спустя (22 января 2010 года) объявил о том, что цель достигнута. Дело в том, что при желании на PS3 можно запустить Linux, который, в свою очередь, работает под управлением гипервизора. Хотцу удалось получить доступ к гипервизору после запуска Linux в режиме «OtherOS». Он использовал эксплойт, чтобы добавить несколько функций произвольного доступа к памяти на чтение/ запись, а также для получения дампов гипервизора.

Дальше в ход пошел глитчинг памяти и - вуаля! 26 января, опубликовав в блоге все подробности о проделанной работе, GeoHot заметил: «У Sony могут возникнуть трудности с пропатчиванием эксплойта». И не угадал. В Sony подошли к решению проблемы не слишком изящно, но эффективно - выпустили новую версию прошивки, из которой исключили функцию «OtherOS». Кстати, в Slim-версии консоли эта функция отсутствовала уже давно. Хотц не только не растерялся, но заинтересовался еще больше - ведь это уже действительно был вызов! В блоге он заявил, что теперь будет разрабатывать собственную прошивку, в которой Linux и «OtherOS» будут доступны.

Этот «обмен любезностями» произошел в марте, а уже через месяц GeoHot опубликовал в Сети видео, на котором PlayStation 3 с прошивкой 3.21 на борту, как ни в чем ни бывало, демонстрировала работу «OtherOS». Джордж подчеркнул, что его кастомная прошивка, получившая имя 3.21OO, заработает и на самых последних Slim-версиях приставки. Дату релиза он, однако, не назвал. Как оказалось - не зря, прошивка так и не увидела свет, и начинание потихоньку заглохло. В какой-то момент вообще казалось, что последней вестью с полей так и останется твит Хотца, датированный июлем 2010. Хакер писал, что PS3 слишком крепкий орешек, и он уже почти не надеется продвинуться дальше со своим взломом. За вышеупомянутым твитом последовало более полугода тишины.

Злопыхатели уже праздновали победу и потирали руки (как же, Хотц наконец-то облажался!), когда появилось новое сообщение от GeoHot’а. Оказалось, эти шесть месяцев он не сидел без дела и к январю 2011 сумел продемонстрировать homebrew приложение, запущенное на PS3 с прошивкой 3.55. И это без донглов - чистый софтверный взлом, базой для которого послужил эксплойт, обнаруженный командой Fail0verflow. Эти ребята занимались изучением вопроса шифрования в консолях Sony и добились определенного успеха. На конференции Chaos Communication Congress они показали полностью взломанную приставку и рассказали, что обнаружили баг в системе подписи лицензионного обеспечения, исправить который с помощью новой прошивки у Sony не выйдет.

Подчеркиваем - показана была только видео-демонстрация с описанием процесса. Очевидно, ее-то и посмотрел GeoHot, а в его руках подробности о ключе шифрования стали серьезным козырем. Еще день спустя Хотц подбросил дров в разгоравшийся в Сети костер споров, продемонстрировав еще одно видео - на этот раз homebrew-приложения работали на модифицированной прошивке 3.55. На geohot.com он опубликовал свой джейлбрейк (а также rootkey-приставки), позволяющий проделать то же самое всем и каждому. В ответ на это Sony подала в суд. 21 января 2011 года Sony Computer Entertainment America обратилась в Калифорнийский суд с иском в адрес Джорджа Хотца и еще восьми человек - ребят из Fail0verflow и «неустановленных личностей» - заявляя, что они нарушают DMCA (закон об авторском праве в цифровую эпоху), являются компьютерными мошенниками и нарушителями авторских прав. Окружной судья Сьюзан Иллстон (очевидно, разделяющая точку зрения Sony) 27 января постановила, что GeoHot и компания обязаны передать все свои консоли и жесткие диски в руки юристов, а также немедленно прекратить распространять инструменты для взлома PlayStation 3. По сути, суд удовлетворил прошение Sony о так называемом «temporary restraining order» - это судебный приказ о временном запрещении чего-либо. Запрет продлится до принятия окончательного решения по иску.

И вот тут-то и начинаются странности. Во-первых, суд проходил в Северной Калифорнии, а Хотц проживает в Нью-Джерси, так что судить и даже обвинять его в Калифорнии не имели права.

Во-вторых, как уже упоминалось выше, недавно были приняты поправки в DMCA, согласно которым джейлбрейк - легален, и люди вправе делать с техникой, которую они законно приобрели, все, что им заблагорассудится. В законе, правда, как всегда есть нюанс. В тексте речь идет конкретно о мобильных телефонах, но Хотц и его адвокаты настаивают, что с определенной точки зрения смартфоны и приставки довольно близки друг к другу, и если можно взламывать одно, то можно и другое. В-третьих, сам GeoHot и парни из Fail0verflow подчеркивают, что они были, есть и будут противниками пиратства. Свои изыскания они проводили исключительно с целью запускать на консоли Linux и homebrew-приложения, что определенно не является криминалом. Если буквально, то Хотц сделал утилиту, позволяющую запускать на PS3 неподписанный код.

Однако разозленный медиагигант - страшная сила. Sony реально верит в возможность ликвидации джейлбрейка в Сети, и продолжает бороться. Недавно компания в судебном порядке принялась штурмовать YouTube, Twitter, Google, PayPal и сайты вроде Slashdot, Kickstarter и Github. Зачем? В поисках информации о других хакерах, причастных ко взлому и распространению ценных секретных данных.

Судя по всему, не безрезультатно, так как повестки начали приходить даже людям, которые просто просматривали видео-демонстрацию Fail0verflow на YouTube! Команда, кстати, вынуждена была закрыть свой сайт fail0verflow.com и вывесить на главной странице предупреждение, что вся сетевая активность ими прекращена, а YouTubeканалы или Facebook-аккаунты имени их группы заведены мошенниками, которые пытаются выклянчить немного денег у сердобольной публики. Затем Sony организовала массовую рассылку, в которой недвусмысленно напомнила пользователям, что использование устройств взлома является нарушением пользовательского соглашения. За непослушание компания грозит юзерам вечным баном и отключением от сервисов PlayStation Network и Qriocity.

И только Джордж Хотц не сдается. Парень нанял двух адвокатов, сбор средств на услуги которых проходил в Сети (кстати, нужная сумма была собрана за рекордные восемнадцать часов). GeoHot’а без преувеличения поддержал весь мир - например, ему предложила безвозмездную помощь компания Electronic Frontier Foundation. Нанятые Джорджем юристы теперь настаивают, что обвинения Sony беспочвенны, их подзащитный не «хакер», и консоль он вовсе не взламывал, а лишь активировал упраздненные ранее функции. Также, по совету своих адвокатов, GeoHot пока отказывается передавать на экспертизу свой компьютер (ссылаясь на то, что зарабатывает на жизнь программированием) и категорически отрицает связь с командой Fail0verflow. Не чурается Хотц и внимания СМИ - напротив, на его сайте сейчас висит призыв к прессе распространять информацию об этой истории как можно шире. Он также выступает за бойкотирование Sony (не покупать игры, не качать DLC, не пользоваться услугами PSN), обвиняет компанию в незаконном сборе личных данных о пользователях и недостаточной защите этих самых данных. Недавно Джордж появился в эфире канала G4, где на вопрос ведущего «Почему Sony так рьяно бросилась на борьбу с тобой, за что они тебя судят, как ты считаешь?» с ухмылкой ответил «Я просто их разозлил».

Не похоже, чтобы GeoHot унывал. Напротив, кажется, в центре этой заварушки он чувствует себя, как рыба в воде. Джордж развернул в Сети настоящую военную кампанию - например, на очередные выпады Sony он недавно ответил бодрым матерным рэпом на YouTube. У ролика уже больше полутора миллионов просмотров, а в песне GeoHot фактически объявляет себя «воплощением свободы для всех»:). По случаю Хотц реанимировал и свой блог, в котором теперь публикуется оперативная хроника происходящего и мысли автора. Так что на geohot.com можно найти все документы, факты, явки и пароли, связанные с этой историй.

Как это противостояние будет развиваться дальше - скоро узнаем. Пока точно можно сказать лишь одно - Джордж Хотц не намерен сдаваться без боя и уверен в своей правоте. И его, кстати, поддерживают уже не только компании и абстрактные сетевые массы, но и вполне конкретные уважаемые люди. Яркий тому пример - профессор университета Карнеги-Меллон Дэвид Турецки. Хватит ли всего этого, чтобы победить корпорацию? Кто знает…

Материал в оригинале можно найти

Первое, что вам нужно сделать при начале работы с WebGL — обзавестись браузером, который его поддерживает. Что именно использовать — зависит от того, хотите ли вы просто посмотреть на готовые примеры WebGL или разработать свои.

Простой путь

• При использовании Windows убедитесь, что установлена Исполняемая библиотека Microsoft DirectX — ее можно бесплатно скачать с сайта Microsoft.
• После этого установите самую последнюю версию драйверов видеокарты.
• Теперь выбирайте браузер:
  • Firefox: достаточно версии 4 и выше.
  • Chrome: вам нужно просто установить его . Если вы его уже используете, просто проверьте, что он обновлен до версии 10 — почти наверняка это произошло автоматически (версия выпущена в марте 2011), но вы можете убедиться в этом в пункте меню «О браузере Google Chrome».
  • Safari: на Mac, OS X 10.7 имеет поддержку WebGL, но она отключена по умолчанию. Для ее включения зайдите в меню разработчика и отметьте флажок «Включить WebGL».

Сложный путь

Если вы сами разрабатываете на WebGL или вам нужны новейшие возможности, тогда вам просто необходимо иметь самую последнюю версию браузера. WebGL поддерживается в версиях для разработчиков всех браузеров, кроме Internet Explorer, поэтому вам остается просто выбрать подходящую версию для вашего компьютера. Насколько это легко — зависит от того, какой у вас компьютер:

Firefox

«Нестабильная» версия Firefox для разработчиков называется Minefield. Она обновляется каждую ночь и уже довольно надежная: я не замечал падений в последнее время (а я использую ее постоянно). Она может работать наряду с обычной версией Firefox, поэтому не нужно волноваться, что придется удалять ее, если вы прекратите ей пользоваться или просто на время переключитесь в обычную версию Firefox.

Для получения Minefield:

• Открывайте страницу ночных сборок и выбирайте подходящую версию для вашего компьютера. Будьте внимательны! Там может быть множество версий, с именами типа «firefox-10.0a1что-то там» или «firefox-10.0a2что-то там». Вам нужна самая последняя, где будет самое большое число после ‘a’ (альфа) или ‘b’ (бета).
• Запускайте Minefield.

Полезная подсказка — если вы хотите работать с Minefield вместе с обычным Firefox, вы можете сделать это добавлением аргументов командной строки: -P Minefield -no-remote. Первый аргумент запускает его с отдельным профилем (чтобы у вас были раздельные истории и наборы открытых вкладок в каждом браузере), а второй параметр обозначает, что при запуске Minefield, когда Firefox уже открыт, Minefield не будет открыт новой вкладкой в уже запущенном Firefox. Возможно, вы также захотите добавить -P default -no-remote к аргументам запуска обычного Firefox для аналогичного эффекта. Пользователям Windows: вы можете установить аргументы командной строки для любого приложения, кликнув правой кнопкой мыши на иконке приложения, затем выбрав «Свойства» и добавив параметры в конец поля «Объект». Пользователям Mac и Linux — я не знаю, как вы это делаете, но вероятно, что вы и сами в курсе:).

Запуск Minefield с программным рендерингом на Linux

Если ваша видеокарта — или драйвер, что более вероятно — не поддерживают OpenGL 2.0, то единственный способ добиться работы WebGL на Linux — использовать библиотеку под названием Mesa. По существу, Mesa эмулирует видеокарту на программном уровне, поэтому работает она медленнее — но это лучше, чем ничего. Mesa интегрируется с Minefield, «нестабильной» версией Firefox для разработчиков, обычно это часть вашего дистрибутива Linux. И вот как все это можно сделать:

• Скачайте последнюю версию Minefield
• Установите ее (на это время вам нужно будет закрыть все открытые экземпляры Firefox).
• Через менеджер пакетов Linux убедитесь, что Mesa установлена и обновлена до последней версии
• Запускайте Minefield.
• Перейдите на страницу «about:config»
• Отфильтруйте по «webgl»
• Установите значение настройки «webgl.enabled_for_all_sites» в значение «true».
• Установите значение настройки «webgl.software_rendering» в значение «true».
• Пропишите в «webgl.osmesalib» путь к библиотеке OSMesa (обычно это /usr/lib/libOSMesa.so).

Safari

Запомните, что Safari поддерживает WebGL на Mac с системой Snow Leopard (OS X 10.6). Если у вас Leopard (10.5), Windows или Linux, то вам нужно использовать или (при более старой версии OS/X я не знаю браузера, который вы могли бы использовать 🙁).

Итак, если у вас Snow Leopard, вам необходимо:

• Убедитесь, что у вас по крайней мере четвертая версия Safari.
• Загрузите и установите ночную сборку WebKit
• Откройте терминал и выполните в нем команду: defaults write com.apple.Safari WebKitWebGLEnabled -bool YES
• Запустите установленный WebKit

Chromium

Если вы хотите создаете страницы с использованием WebGL, разработчики Chrome рекомендуют использовать ночные сборки Chromium — браузера с открытым исходным кодом, на котором основан Chrome. Схема немного отличается для каждой операционной системы. Здесь инструкции для , и . (Предупреждение: я пробовал только на Windows, но мне сказали, что настройки остальных ОС тоже в порядке. Оставляйте комментарии, если это не так 🙂).

Windows

• Открывайте , прокрутите вниз до самой последней сборки и нажмите на ссылку для получения chrome-win32.zip
• В распакованном каталоге запустите chrome.exe

Macintosh

• Открывайте страницу непрерывной интеграции , прокрутите вниз до самой последней сборки и нажмите на ссылку для получения chrome-mac.zip
• Распакуйте файл в удобном для себя месте
• Откройте терминал и перейдите в распакованный каталог chrome-mac
• Выполните следующую команду: ./Chromium.app/Contents/MacOS/Chromium
• После того как убедитесь, что все работает, вы, возможно, захотите немного автоматизировать вещи, чтобы не набирать команду каждый раз. Julien Limoges подсказал для этого полезный shell-скрипт .

Linux

• Открывайте 32-разрядную или 64-разрядную страницу непрерывной интеграции, прокрутите вниз до самой последней сборки и нажмите на ссылку для получения chrome-linux.zip
• Распакуйте файл в удобном для себя месте
• Убедитесь, что Chrome не запущен
• Выполните следующую команду: ./chrome

Несколько примеров

Если же WebGL работает, то все настроено правильно! К сожалению, последние изменения в WebGL поломали многие примеры, но есть несколько обновленных:

• Один из моих собственных примеров — Отскакивающие кубы Мандельброта
• Реальный пример использования WebGL: ChemDoodle 3D отображает молекулы на веб-страницах
• Много примеров есть в репозитории Khronos и в разделе Wiki Добавленные пользователями . «Эксперименты Chrome» также содержат раздел WebGL . Большая часть примеров работает и в других браузерах.
• И, наконец, если вы хотите видеть лучшие примеры WebGL каждую неделю, подпишитесь на мой блог ! Каждый четверг я публикую сводку новостей WebGL, которые мне удалось найти за прошедшие семь дней и обычно в них входит несколько новых примеров.

На этом и остановимся, достаточно для моего первого поста о начале работы с WebGL. Если вы хотите продолжить и научиться создавать собственные страницы WebGL, взгляните на мой первый урок .

Устранение неполадок Mac

У меня нет полезных советов и подсказок для настройки WebGL на Mac, потому что никто никогда не просил меня о помощи и я никогда не видел вопросов на форумах. Я могу предположить, что это означает, что на OS X все работает хорошо…

Windows

Самая распространенная проблема на Windows — не установлена исполняемая библиотека DirectX — ее можно бесплатно скачать с сайта Microsoft , поэтому стоит попробовать это сделать. Также стоит проверить, не появилось ли новых драйверов для видеокарты — проверьте в обновлениях Windows или на веб-сайте производителя видеокарты. Если это не сработало, возможно драйвер видеокарты находится в «черном списке». На Windows это случается реже, чем на Linux, но все-таки бывает. Посмотрите для подробностей.

Linux

Чаще всего WebGL не работает на Linux из-за проблем с драйверами видеокарты. Все текущие реализации WebGL в браузерах основаны на OpenGL, которая в свою очередь работает благодаря драйверам видеокарты. Для работы WebGL нужен как минимум OpenGL 2.0. В частности, обладатели видеокарт Intel испытывают проблемы, потому что Intel не выпускает драйвера для большинства своих видеокарт с этой поддержкой. Если у вас видеокарт Intel, попробуйте использовать . Если и это не помогает, то оставьте комментарий и я попробую помочь.

Если у вас видеокарта ATI или Nvidia, первым делом проверьте свою версию OpenGL. Для этого запустите glxinfo и посмотрите на строку с заголовком «OpenGL version string». Если версия, которую вы видите, меньше 2.0, вам необходимо обновить ваши драйвера. Проверьте веб-сайт производителя видеокарты/компьютера и загляните в менеджер пакетов.

Если у вас по-прежнему не работает, возможно производители браузеров занесли в черный список ваш драйвер. Это случается из-за того, что некоторые из них достаточно нестабильны, чтобы привести к аварийному отказу компьютера, что по понятным причинам не является поведением, которое люди ждут от браузера.

По состоянию на 6 октября 2011 года, как выяснил пользователь Nardon , «Google занес в черный список все драйвера Linux, кроме официальных драйверов nVidia … Firefox 6 и выше разрешил большинство последних драйверов ATI, поэтому WebGL должно работать в этом браузере».

Если вы не боитесь аварийных завершений работы и используете драйвер из черного списка, вы можете запустить Chrome с параметром командной строки –ignore-gpu-blacklist и посмотреть, что случится (спасибо Jonas Antunes da Silva за подсказку). Если это не исправит положение вещей, возможно для вашей видеокарты просто нет приличных драйверов для работы OpenGL. Возможно, лучшим выбором для вас будет использование программного рендеринга. Снова оставлю .

Последнее обновление: 1.11.2015

Сейчас мы напишем первую программу с использованием технологии WebGL. Фактически это будет не одна программа, а два примера, которые покажут в действии механизм WebGL.

Первый пример

Создадим какую-нибудь веб-страничку со следующим содержимым:

Привет WebGL! Ваш браузер не поддерживает элемент canvas void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } attribute vec3 aVertexPosition; void main(void) { gl_Position = vec4(aVertexPosition, 1.0); } var gl; var shaderProgram; var vertexBuffer; // установка шейдеров function initShaders() { // получаем шейдеры var fragmentShader = getShader(gl.FRAGMENT_SHADER, "shader-fs"); var vertexShader = getShader(gl.VERTEX_SHADER, "shader-vs"); //создаем объект программы шейдеров shaderProgram = gl.createProgram(); // прикрепляем к ней шейдеры gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); // связываем программу с контекстом webgl gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { alert("Не удалсь установить шейдеры"); } gl.useProgram(shaderProgram); // установка атрибута программы shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); // делаем доступным атрибут для использования gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); } // Функция создания шейдера по типу и id источника в структуре DOM function getShader(type,id) { var source = document.getElementById(id).innerHTML; // создаем шейдер по типу var shader = gl.createShader(type); // установка источника шейдера gl.shaderSource(shader, source); // компилируем шейдер gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { alert("Ошибка компиляции шейдера: " + gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; } // установка буфера вершин function initBuffers() { // установка буфера вершин vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); // массив координат вершин объекта var triangleVertices = [ 0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW); // указываем кол-во точек vertexBuffer.itemSize = 3; vertexBuffer.numberOfItems = 3; } // отрисовка function draw() { // установка области отрисовки gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT); // указываем, что каждая вершина имеет по три координаты (x, y, z) gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0); // отрисовка примитивов - треугольников gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numberOfItems); } window.onload=function(){ // получаем элемент canvas var canvas = document.getElementById("canvas3D"); try { // Сначала пытаемся получить стандартный контекст WegGL // Если не получится, обращаемся к экспериментальному контексту gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); } catch(e) {} // Если контекст не удалось получить, выводим сообщение if (!gl) { alert("Ваш браузер не поддерживает WebGL"); } if(gl){ // установка размеров области рисования gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height; // установка шейдеров initShaders(); // установка буфера вершин initBuffers(); // покрасим фон в бледно-розовый цвет gl.clearColor(1.0, 0.0, 0.0, 0.5); // отрисовка сцены draw(); } }

Я не буду останавливаться на этом коде - основные моменты подробнее мы рассмотрим детально позднее, но, я думаю, комментарии помогут разобраться. Но если вкратце: у нас есть элемент canvas , который представляет полотно для отрисовки сцены WebGL. Далее в виде скриптов javascript объявляются две мини-программы - фрагментный и вершинный шейдер.

Весь код программы находится в обработчике функции window.onload . Вначале нам надо получить контекст gl , через который и буду вестись все основные действия. Далее программа содержит три основные части: установка шейдеров, установка буфера вершин и сама отрисовка.

А пока можно запустить веб-страничку в браузере. И браузер явит нам белый треугольник на красном фоне.

Всего лишь? Это только начало. Позже мы подробнее поговорим о шейдерах, вершинах, геометрических примитивах и т.д. А теперь перейдем ко второму примеру.

Пример 2

Второй пример представляет собой хрестоматийный пример вращающегося куба. Вначале загрузим специальную библиотеку Three.js . Ее минимизированную версию можно найти по адресу Three.js . Перейдем по этому адресу и сохраним весь код на жесткий диск в файл под названием three.min.js . Эта библиотека не является необходимой для работы с WebGL, однако она упрощает работу.

В одном каталоге с загруженной библиотекой создадим файл index.html со следующим содержанием:

Привет WebGL! window.onload=function(){ var camera, scene, renderer; var geometry, material, mesh; init(); animate(); // инициализация начальных значений function init() { // создаем камеру - перспективная проекция camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); // установка z-координаты камеры camera.position.z = 600; // настройка сцены scene = new THREE.Scene(); // настройка геометрии - в качестве геометрии будет куб // настроим его ширину, высоту и длину по оси z geometry = new THREE.CubeGeometry(200, 200, 200); // настройка материала - установка цвета material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true}); // настраиваем меш, который будет отображать куб mesh = new THREE.Mesh(geometry, material); scene.add(mesh); // создаем объект для рендеринга сцены renderer = new THREE.WebGLRenderer(); // установка размеров renderer.setSize(window.innerWidth, window.innerHeight); // встраиваем в DOM-структуру страницы document.body.appendChild(renderer.domElement); } // функция анимации function animate() { requestAnimationFrame(animate); // вращение меша вокруг осей mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; // рендеринг сцены - метод, производящий по сути отрисовку renderer.render(scene, camera); } }

Все уже выглядит гораздо круче, а кода гораздо меньше. Да, Three.js, а также другие библиотеки и фреймворки по работе с WebGL значительно упрощают работу с графикой. Но в то же время даже минимизированнные их версии весят очень не мало. Какой способ стоит выбрать - это дело разработчика. В дальнейшем мы будем рассматривать преимущественно работу с чистым WebGL, но также и затронем работу с библиотеками, например, с той же Three.js. А теперь можно переходить уже непосредственно к особенностям технологии.

Здравствуйте, уважаемые читатели!

В продолжении статей про Canvas сегодня хотел бы вам рассказать про WebGL .

Чтобы лучше понимать, как мы работаем с WebGL , рекомендую освежить знания по Canvas:

WebGL позволяет web-контенту использовать API , основанный на OpenGLES 2.0 , для визуализации 3D графики в HTML элементе canvas в браузерах.

WebGL программы состоят из кода управления (JS ) и шейдерного кода для эффектов, который выполняется на графическом процессоре.

Сразу пример интересных возможностей WebGL : ссылка

Кроссбраузерность WebGL

На момент написания статьи (12.08.16) статистика поддержки браузерами следующая:

Как видно из таблицы современные браузеры уже поддерживают WebGL , поэтому можно смело разрабатывать свои крутые приложения 🙂

Принцип работы WebGL

Принцип работы в общих чертах хорошо иллюстрирует схема ниже:

Небольшое пояснение:

Процесс начинается с создания массива вершин. Этот массив содержит атрибуты вершин: расположение в 3D пространстве, информацию о текстуре, цвете или нормалей (освещение). Данная информация создается в JavaScript из файлах описания 3D моделей (.obj файлы) или из библиотеки, которая описывает массив вершин геометрических фигур

Затем вершины отправляются на GPU. Вместе с этим мы должны так же передать массив индексов вершин для контроля преобразования вершин в треугольники

GPU читает каждую вершину из буфера вершин и прогоняет ее через вершинные шейдеры. Вершинные шейдеры вычисляют положение вершины на экране, цвет, текстурные координаты

GPU соединяет по 3 вершины в треугольники используя массив индексов

Затем происходит растеризация, приведение изображения к пиксельном фрагментам

Сформированные пиксели проходят через пиксельные шейдеры. Пиксельный шейдер рассчитывает цвет и глубину каждого пикселя. Там же на этом этапе происходит наложение текстуры и расчет освещения. Рассчитанные пиксели помещаются в буфер фреймов (кадров).

Буфер кадров — последняя стадия отрисовки. Результатом его работы является 2D изображение на экране с эффектами глубины

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

WebGL API очень низкоуровневый. Писать довольно сложно. Рекомендуется использовать библиотеки, которые написали умельцы с разных уголков земли.

Ниже приведены несколько популярных библиотек:

• Three.js (Github) – рассмотрим данную библиотеку
• PhiloGL (Github) — фокус на лучших практиках JavaScript
• GLGE (Github) — имеет некоторые свои особенности, например, скелетную анимацию
• J3D (Github) — позволяет экспортировать сцены из Unity в WebGL

Рассмотрим подробнее Three.js и попробуем воспроизвести простой пример

Three.js

Для того, чтобы начать работать с three.js нужно подключить библиотеку:

Var scene, camera, renderer; var geometry, material, mesh; init(); animate();

Определим наши функции:

Function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000); camera.position.z = 1000; geometry = new THREE.BoxGeometry(200, 200, 200); material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }); mesh = new THREE.Mesh(geometry, material); scene.add(mesh); renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } function animate() { requestAnimationFrame(animate); mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render(scene, camera); }

Результат отработки скрипта: