Как стать автором
Обновить
7.33

WebGL *

Программная библиотека для JavaScript

Сначала показывать
Порог рейтинга
Уровень сложности

Создание 3D-иллюстраций — прототип системы

Время на прочтение6 мин
Количество просмотров13K


Привет, Хабр! В институте у нас был курс 'Начертательная геометрия' из которого мы узнали, какие интересные вещи можно делать обычным циркулем и линейкой. С тех пор не покидала идея сделать что-нибудь на компьютере в духе объемных чертежных построений.

Не так давно с удивлением обнаружил, что мой ноутбук (далеко не самый новый и мощный) поддерживает стандарт WebGL. В результате некоторых усилий получился прототип системы создания и публикации 3D-иллюстраций.

http://ewclid.headfire.ru/

Интересная возможность, которую удалось реализовать — просмотр иллюстраций на 3D-телевизорах в стереорежиме без каких-либо драйверов и плагинов. Вывод осуществляется прямо из браузера в формате Side-By-Side.

Вполне возможно, что увидеть систему в работе удастся совсем немногим. Прошу простить за возможные хабра-эффекты и торчащие уши – это лишь прототип. Кто хочет узнать о системе подробнее – прошу читать статью.

Читать дальше →
Всего голосов 29: ↑24 и ↓5+19
Комментарии14

WebGL Эксперимент + Google Analytics + Leap Motion

Время на прочтение1 мин
Количество просмотров11K
Добрый день! В течение некоторого времени изучал замечательную библиотеку three.js, кроме того приобрел Leap Motion, в результате получилась следующая вещь:



Попробовать можно здесь: http://cerebro.maxmert.com
Для написания использовал библиотеки three.js, sparks.js и dancer.js. Для управления веселее всего использовать Leap Motion, но можно и мышкой. К сожалению с webgl хорошо дружит только Google Chrome, так что лучше использовать его.

Обновление: Теперь можно запускать и без логина в Google Analytics.
Всего голосов 28: ↑24 и ↓4+20
Комментарии6

Карта звездной системы на Three.js/WebGL

Время на прочтение6 мин
Количество просмотров13K

Доброго времени дня или ночи, Хабр!
В наших краях как всегда зима пришла неожиданно, но в космосе времен года нет, так что снова поговорим о различных космических штуках на webgl. Предыдущую статью о карте галактики можно прочитать здесь. Сегодня же речь пойдет про карта звездной системы.
Как всегда, рассказ пойдет по шагам. Итак…
Читать дальше →
Всего голосов 19: ↑19 и ↓0+19
Комментарии6

Создание игр для Windows Store c использованием WebGL

Время на прочтение11 мин
Количество просмотров14K
Windows Store на текущий момент, возможно, самая открытая платформа для игровых студий. Для создания приложений вы можете использовать DirectX 11, HTML5 2d-Canvas, Cocos2D-X, Unity3D и с выходом Windows 8.1 даже для WebGL!
Если у вас есть интерес к некоторым из этих технологий, вы можете посмотреть статью How to develop a game for Windows 8 modern UI в которой перечислены ссылки на ресурсы по технологиям DirectX, HTML5 canvas 2d и MonoGame.
Так же хотелось бы отметить что аддон для Unity который позволяет публиковать приложения в Windows Store бесплатен: http://unity3d.com/pages/windows: So any Unity developers can port their 2D and 3D content to Windows Store and Windows Phone 8 for free. Начать изучение разработки Unity для Windows Store можно с цикла видео Building Windows Games with Unity.
В дополнение к этому, так же хотелось бы отметить что Cocos2D-X был недавно обновлен для более лучшей поддержки Windows 8 и Windows Phone 8: Easily port your Cocos2D-X game to Windows 8 and Windows Phone 8.
Читать дальше →
Всего голосов 29: ↑21 и ↓8+13
Комментарии7

Истории

Редактирование шейдеров WebGL на лету с помощью Firefox Developer Tools

Время на прочтение3 мин
Количество просмотров11K
В Firefox 27 появился новый инструмент — редактор шейдеров — который значительно упрощает их разработку. Редактор показывает все запущенные в контексте WebGL программы, даёт возможность редактировать их и сразу же видеть изменения без единого обрыва анимаций или потери состояния.


Читать дальше →
Всего голосов 39: ↑39 и ↓0+39
Комментарии4

Карта галактики на Three.js/WebGL

Время на прочтение5 мин
Количество просмотров19K

Доброго времени дня или ночи. В свободное время я занимаюсь разработкой игры на космическую тематику на Three.js/WebGL и задумал написать небольшую серию статей по некоторым компонентам игры, в этой статье мы поговорим о карте галактики. Рассказ пойдет уже привычным мне способом — по шагам.
Читать дальше →
Всего голосов 18: ↑16 и ↓2+14
Комментарии11

100.000 Stars, или карта галактики от Google

Время на прочтение2 мин
Количество просмотров52K
Доброго времени суток.
Знаете ли вы, в чем разница между вашим компьютером и космическим кораблем?
Правильный ответ: во всем, но не в этот раз.

Читать дальше →
Всего голосов 73: ↑57 и ↓16+41
Комментарии33

Pixi.js — 2D движок с прозрачной поддержкой WebGL

Время на прочтение1 мин
Количество просмотров81K
Pixi.js позволяет использовать мощь WebGL для рендеринга 2D-сцен, совершенно не вникая в подробности реализации, более того, он умеет самостоятельно определять наличие поддержки WebGL и переключаться между способами рендеринга. В отсутствие WebGL рендеринг осуществляется средствами canvas. Кроме того в Pixi.js реализован граф сцены, поддержка текстур и спрайтов, чуть больше недели назад в нём появилась поддержка интерактивности — на спрайты можно повесить обработчики событий мыши и тачскрина.
Читать дальше →
Всего голосов 64: ↑61 и ↓3+58
Комментарии48

Как сделать 3D шутер на JavaScript за пару дней

Время на прочтение3 мин
Количество просмотров84K
imageВ субботу у меня ближе к полуночи появилось свободное время и жгучее желание сделать игрушку под браузер, забавы ради и увеличения опыта для. С жанром определился довольно быстро: т.к. на MMORPG в этот раз у меня точно не хватило бы времени, я решил делать просто мясорубку. Минут 20 ушло на написание базового кода для управления игроком и его противниками. И тут встал вопрос — 2D или 3D (вернее так: Canvas/SVG или все же полноценный WebGL)?
Читать дальше →
Всего голосов 102: ↑98 и ↓4+94
Комментарии65

Платформа для экспериментов на Three.JS и WebGL

Время на прочтение6 мин
Количество просмотров15K
Если не играть и не рассматривать фотографии знакомых девушек в контакте, то программирование является моим любимым занятием за компьютером. Особенно мне нравится «быстрое» программирование. Это такое программирование, когда проект небольшой и когда мы не занимаемся фундаментальными изысканиями, а планирование не нуждается в документации. К слову, на работе все проекты не такие, да ещё и ориентированы на закрытую аудиторию. В основном поэтому вы сейчас читаете мою статью, а ещё я желаю попасть на Хабр.

Хочу поделиться с вами результатами проекта моих выходных. Это чисто клиентское javascript/html приложение, которое состоит из редактора исходных кодов на языке Javascript и GLSL-шейдеров, мини-линкера, окна с Three.JS/WebGL и небольшого рантайм-интерфейса. Всё это склеено на jquery, а поверх прикручена галерея с видео. В галерее представлено несколько демонстраций. Можно выбрать понравившуюся демонстрацию и поиграть с её кодом, а также экспортировать и импортировать целые проекты из нескольких файлов через JSON.
Читать дальше →
Всего голосов 22: ↑20 и ↓2+18
Комментарии9

Quake 3 beta на WebGL

Время на прочтение1 мин
Количество просмотров1.4K


Брэндон Джонс, являющийся активным WebGL-разработчиком, выпустил новую beta-версию игры Quake 3 для браузеров. По заявлением разработчика, в релизе сделано несколько изменений, которые ускорили работу игры: обновлен glMatrix, полностью убран jQuery из проекта, началась работа над полноэкранном режимом. И действительно, игрушка показывает отличный показатель fps. Но главным отличием Брендон называет появившуюся поддержку геймпада. Хоть разработчик и не уверен, что побегать можно будет с любым устройством, однако проделанная работа впечатляет.

Конечно, проект еще находится в ранней стадии, ведь даже пострелять нельзя, но зато можно в полной мере насладиться возможностями WebGL.

Попробовать можно тут.
Всего голосов 91: ↑80 и ↓11+69
Комментарии82

Three.js — 3d движок на Javascript

Время на прочтение1 мин
Количество просмотров89K

Есть javascript-гурру, mr.doob, даже на Хабре уже всплывали его работы.
В общем, у него есть очень мощный Javascript 3d-фреймворк с названием

Three.js


Примеры, откровенно говоря, впечатляющие. В последних версиях современных браузеров работает плавно и красиво.

Меня особо затянул полет между шариков и порадовал панорамный движок.
А у кого работает WebGL — так вообще не нарадуется — там вам и Minecraft и всё, что хотите)

Читать дальше →
Всего голосов 82: ↑79 и ↓3+76
Комментарии34

Опера, WebGL и аппаратное ускорение

Время на прочтение3 мин
Количество просмотров15K
Много лет назад, в одном далёком-далёком офисе. Опера представила отдельную сборку с реализацией отрисовки 3D. Теперь, больше трёх лет спустя, мы представляем первую публичую сборку с реализацией 3D ускорения соответствующего стандарту используемого для WebGL в Windows.

image
WebGL это стандарт разработанный группой Khronos, где Опера является активным членом, участвующем в процессе стандартизации. Мы работаем на реализацией WebGL с начала 2009 года, когда начался процесс стандартизации. Спецификация менялась довольно часто за эти несколько лет, однако теперь она начала стабилизироваться, что делает это время идеальным для выпуска публичной сборки с нашей текущей реализацией WebGL.
Читать дальше →
Всего голосов 44: ↑41 и ↓3+38
Комментарии21

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн

Знакомство с WebGL

Время на прочтение6 мин
Количество просмотров44K

Введение


Статья создана с целью показать основные действия, необходимые для отображения 3d в современном браузере, используя технологию WebGL. Для достижения цели рассмотрим задачу построения нескольких линий в трехмерном пространстве.

Схема работы:
  1. Получаем WebGL контекст из canvas'а.
  2. Загружаем программу шейдеров. А именно:
    • создаем программу шейдоров;
    • получаем исходный код отдельно для вершинного и фрагментного шейдеров;
    • компилируем коды шейдеров;
    • присоединяем к программе;
    • активируем программу.

  3. Устанавливаем две матрицы: model-view и projection.
  4. Размещаем, заполняем, активируем буферы данных вершин.
  5. Рисуем.

Читать дальше →
Всего голосов 68: ↑67 и ↓1+66
Комментарии15
12 ...
10
Изменить настройки темы

Вклад авторов