WebGL *

Через серию статей попробую разобрать движок на webgl.

Основным требованием будет минимальный ввод данных. Ведь, грубо говоря, движок — это модель, созданная для упрощения задачи. Материал рассчитан на начинающий уровень, для тех, кто прочитал основы webgl и хочет попробовать начать работать. Таких как я.

Первое. Описание задачи на пальцах

Необходимо создать классы объектов (примитивы), которые из себя представляют набор точек. При этом примитивы должны быть независимы друг от друга. Каждый примитив можно перемещать, поворачивать вокруг центра или вокруг произвольной точки.
Необходимо создать механизм обрисовки этих объектов.
И напоследок необходимо создать что то вроде карты на которой можно установить наши объекты и по которой можно свободно перемещаться.

Всем привет!
В предыдущей главе мы познакомились с основами бибилиотекиThree.js. Увидели несколько примеров и создали свою первую полноценную Three.js сцену. В этой главе мы немного глубже углубимся в эту библиотеку и попробуем более подробно объяснить основные компоненты, составляющие Three.js сцену. В этой главе вы узнаете о следующем:

1. какие компоненты используются в Three.js сцене
2. что можно делать с объектом THREE.Scene()
3. какая разница между ортогональной и перспективной камерами

Начнем мы с того, что посмотрим, как же можно создать сцену и добавить на нее объекты.

Всем привет!
Хочу начать вольный перевод замечательной книги «Learning Three.js- The JavaScript 3D Library for WebGL». Я уверен, что эта книга будет интересна не только новичкам, но и профессионалам своего дела. Ну не буду долго затягивать вступление, только приведу пример того, что мы совсем скоро сможем делать:

В этой статье я хочу продолжить рассказ о моих экспериментах с 3D монитором.В первой статье было описано как выводить стерео изображение из видео потока (в VLC виде плеере) сейчас я расскажу как получить стерео картинку прямо в вашем браузере. Для демо я взял замечательную библиотеку Three.js об ней уже много писали на Хабре, она позволяет быстро и просто создавать красивые web приложения на WebGL. Ниже я покажу как сделать так чтобы пользователь увидел глубокую 3D картинку а не плоскую проекцию.

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

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

http://ewclid.headfire.ru/

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

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

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



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

Обновление: Теперь можно запускать и без логина в Google Analytics.

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

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.

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

Доброго времени дня или ночи. В свободное время я занимаюсь разработкой игры на космическую тематику на Three.js/WebGL и задумал написать небольшую серию статей по некоторым компонентам игры, в этой статье мы поговорим о карте галактики. Рассказ пойдет уже привычным мне способом — по шагам.

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

Pixi.js позволяет использовать мощь WebGL для рендеринга 2D-сцен, совершенно не вникая в подробности реализации, более того, он умеет самостоятельно определять наличие поддержки WebGL и переключаться между способами рендеринга. В отсутствие WebGL рендеринг осуществляется средствами canvas. Кроме того в Pixi.js реализован граф сцены, поддержка текстур и спрайтов, чуть больше недели назад в нём появилась поддержка интерактивности — на спрайты можно повесить обработчики событий мыши и тачскрина.

В субботу у меня ближе к полуночи появилось свободное время и жгучее желание сделать игрушку под браузер, забавы ради и увеличения опыта для. С жанром определился довольно быстро: т.к. на MMORPG в этот раз у меня точно не хватило бы времени, я решил делать просто мясорубку. Минут 20 ушло на написание базового кода для управления игроком и его противниками. И тут встал вопрос — 2D или 3D (вернее так: Canvas/SVG или все же полноценный WebGL)?

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

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

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

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

Попробовать можно тут.

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

Three.js

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

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

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


WebGL это стандарт разработанный группой Khronos, где Опера является активным членом, участвующем в процессе стандартизации. Мы работаем на реализацией WebGL с начала 2009 года, когда начался процесс стандартизации. Спецификация менялась довольно часто за эти несколько лет, однако теперь она начала стабилизироваться, что делает это время идеальным для выпуска публичной сборки с нашей текущей реализацией WebGL.

Введение

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

Схема работы:

1. Получаем WebGL контекст из canvas'а.
2. Загружаем программу шейдеров. А именно:
   
   • создаем программу шейдоров;
   • получаем исходный код отдельно для вершинного и фрагментного шейдеров;
   • компилируем коды шейдеров;
   • присоединяем к программе;
   • активируем программу.
   
   
3. Устанавливаем две матрицы: model-view и projection.
4. Размещаем, заполняем, активируем буферы данных вершин.
5. Рисуем.