В электронной музыке есть интересное направление — музыка для осциллоскопов, которая рисует интересные картинки, если выход аудиокарты подключить к осциллоскопу в режиме XY.
К примеру, Youscope, Oscillofun и Khrậng.

Все красивые видео, генерируемые такой музыкой созданы с помощью записи работы настоящего осциллоскопа на видеокамеру. Когда я поискал в сети эмуляторы осциллоскопов, мне не удалось найти такие, которые рисуют мягкие линии, как в настоящем осциллоскопе.

Это сподвигло меня на создацие своего эмулятора осциллоскопа на WebGL: woscope.

В этом посте я расскажу о том как именно происходит рисование линий осциллоскопа в woscope.

Допустим, я создал браузерную игру, а что дальше? Если для мобильных — есть магазины Google Play, App Store, Windows Store и куча всяких альтернативных. Можно найти площадки для распространения сборок standalone — Desura, Steam, Itch.io. Но когда задумываешься о судьбе браузерки, то невольно впадаешь в ступор. И куда ее?

Думать о судьбе своего детища необходимо еще на начальном этапе разработки. Так, в случае с Dangerous Insects, я уже знал, где и как буду размещаться, хотя от игры в лучшем случае был только диздок. Вот и с HTML5 захотелось заранее прощупать почву.

Привет, Хабр. Хочу рассказать об одной своей разработке в области 3D-графики, которую назвал Z-Desk.

Предыстория

Мои родители – инженеры. У нас дома была чертежная доска. Было что-то волшебное, когда на нее закреплялась бумага, а на бумаге с помощью нехитрых инструментов создавался чертеж. Школьное черчение стало моим любимым предметом. В институте появилась вообще срывающая голову дисциплина — начертательная геометрия. С помощью простых правил можно было делать сложнейшие пространственные построения.

“Ты совсем рехнулся с этим WebGL!”, как-то заявил мне знакомый разработчик: “Изучаешь новый движок ради одной платформы?!”

А ведь и, правда, работая с Unity, я получаю доступ ко многим платформам. Работая с Blend4Web — только к одной. Крупные компании могут позволить себе использовать несколько технологий для качественного портирования игры, в случае инди — это большая проблема.

И что, разрабатывая браузерный проект не с Unity, я ставлю крест на остальных платформах? Честно, этот разговор сильно поколебал мою решимость. Но недавно я услышал о фреймворках, с помощью которых можно чудесным образом портировать HTML5 на множество мобильных платформ.

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

То, что не поддаётся измерению, не поддаётся и улучшению.
— Лорд Кельвин

Чтобы ускорить игры, написанные при помощи HTML5, для начала нужно определить их узкие места. Подсчёт FPS – это неплохой метод, но чтобы увидеть полную информацию, необходимо разобраться в нюансах поведения Chrome.

Инструмент about:tracing позволяет избежать лишней работы, связанной с увеличением быстродействия, и основанной большей частью на догадках. Вы сэкономите энергию и деньги, если чётко проследите работу браузера при помощи этого инструмента.

Он показывает вам всё, что делает Chrome, причём настолько детально, что сперва это даже может ошеломить. Многие функции Chrome изначально предназначены для трассировки, поэтому прямо из коробки для оценки производительности можно использовать about:tracing.

Для этого просто напишите about:tracing в адресной строке.



Инструмент трассировки позволяет включить запись, запустить игру на несколько секунд и посмотреть данные трассировки. Пример того, как они могут выглядеть:



Да, сначала выглядит запутанно.

Совсем недавно был опубликован пресс-релиз на сайте NASA, где говорилось об уникальной возможности «прогуляться» по Марсу. Я не утерпел и перешел по ссылке — открылась потрясающая интерактивная сцена, где можно «прокатиться» с марсоходом, просмотреть видео с «камеры» и даже узнать технические параметры агрегата. Но самой шокирующей была новость, что все это сделано с помощью движка Blend4Web… А где же Unity?

В своей первой статье на Хабре, посвященной разработке браузерной игры, я показал основные этапы создания базовой сцены для Blend4Web. Пара примитивов, несколько текстур плюс встроенные возможности платформы позволили с легкостью воплотить задуманную идею — воду с рефракцией и каустикой.

Можно сколько угодно любоваться переливами на морском дне. Пришло время реальной работы. Прежде всего нужно разобраться с программированием и сделать первые шаги в написании кода.

В наше время первопроходцем быть трудно, ибо совсем мало осталось областей деятельности для пытливого ума. «Эка, загнул», — скажете вы и, возможно, подумаете о скромности автора. Что ж, отрину философские, занудные тексты и начну повествование на нормальном языке.

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

«Совсем?»
«Увы, совсем».

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

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

Я знаю Blender много лет, использую Unity для своих игр, но полный новичок в WebGL. Однако, будущее именно за этой технологией, и неплохо было бы разобраться с ее использованием. К сожалению, экспортер Unity для WebGL пока не рабочий и нужен иной инструмент.

Я не люблю изобретать велосипед и предпочитаю готовые решения. Найденный ранее Blend4Web выглядит очень заманчиво (интеграция с Blender, качественный экспортер и т.д.), но ведь существует немало других библиотек и платформ для работы с WebGL.

Извечный вопрос: что выбрать новичку? Я поработал с платформами Blend4Web и Three.js. Что из этого вышло — читайте дальше.

Недавно команда разработчиков babylon.js выпустила новую версию одноименной библиотеки (v2.1) с множеством усовершенствований, а также новых инструментов для создания 3D в браузере, уже имея опыт создания таких игр как Flight Arcade и Assassin’s Creed Pirates . В этой статье будет рассказано о некоторых из основных обновлений, а также будут даны ссылки на демки и песочницу, чтобы можно было самостоятельно попробовать.

Когда друзья меня спросили, почему я заинтересовался Blend4Web и стал изучать его, однозначного ответа не получилось. Да, я использую Unity и это мой основной инструмент. Его возможностей с головой хватает для реализации любых задумок. Но я люблю и Blender, так как работаю с ним уже много лет. Все модели, анимации, кинематографические сцены я делаю исключительно в нем. A Blend4Web выглядит очень достойным движком реального времени для WebGL.

И в один прекрасный момент я задумался, а может ли Blend4Web конкурировать со столь популярным Unity, и если да, то в каких сферах…

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

Отдыхая от Unity и лениво просматривая очередной урок от мастеров 3D, я наткнулся на ролик, любезно предложенный ютубом. Простой куб изрезанный рисунками постепенно заполнялся некой энергией. Glow-эффект в стилистике Sci-Fi — всего 6 секунд видео и незамысловатое название о релизе какого-то Blend4Web. Ассоциация с моим любимым Blender’ом возникла мгновенно, равно как и желание узнать этого «зверя» поближе.

В посте на своем блоге «gdal_translate и gdalwarp для перепроицирования изображений» описывался процесс получения картинок под разные проекции с помощью утилит GDAL. Полученные изображения я использовал как подложки для карт в примерах проекта dbCartajs. Позже, работая над портированием канвасной версии своего планетария на WebGL, описанной в статье «Звездное небо на WebGL с использованием Three.js» на Хабре, у меня возникла мысль со временем перенести не только глобус, но и плоские на карты на WebGL, используя вместо фона текстуры. То есть для создания карты обойтись только использованием браузера и JavaScript без использования серверных компонентов.

Повод, чтобы начать

Я хочу рассказать про хакатон, который проводила компания Microsoft и Intel в Нижнем Новгороде в рамках Технологической экспедиции Microsoft Developer Tour. Так сказать из первых уст. Как участник. Думаю, так будет наиболее интересно.

Тема хакатона, который должен был проходить в Нижнем Новгороде, IoT — Internet of Things (интернет вещей). Честно говоря, для меня этот термин был в новинку и пришлось погуглить, чтобы понять основные принципы. Оказалось всё достаточно просто, есть устройство, которое собирает информацию с некоторых датчиков и отправляет ее в интернет для доступа и обработки.

Не прошло и двух лет с тех пор, как в Firefox появилась возможность редактировать шейдеры на любом сайте, использующем WebGL. И вот теперь такая возможность появилась и в Chrome. Однако, за эту возможность следует поблагодарить не сотрудников Google, а независимого разработчика, которому надоело ждать у моря погоды.

Когда я начинал писать свою первую игрушку на three.js я и не думал, что на самом деле three.js это верхушка айсберга в мире WebGL и что есть десятки разнообразных фреймворков и у каждого из них свой специфический уклон, а three.js просто один из них.

Введение
1. Базовые элементы
2. Группировка
3. Движение
4. Частицы
5. Анимация — 1
6. Анимация — 2
7. Простой ландшафт
8. Статические коллизии
9. Динамические коллизии
10. Импорт моделей
11. Встраивание физических движков
12. Тени, туман
Продолжение — многопользовательский шутер

В посте про «Звездное небо на Canvas» я уже описывал свой проект, где при помощи JavaScript на канвасе 2d формируется изображение глобуса Земли на фоне звезд, планет и орбит космических аппаратов. Для создания трехмерной картины звездного неба на плоскости я использовал формулы перевода трехмерных координат X, Y, Z отображаемых объектов: звезд, планет, космических аппаратов (КА), — в плоские декартовые координаты X, Y. Основную часть этих формул я взял из проекта Marble из состава KDE. Портированный с C++ на JavaScript код я сохранил в файле starry.js.

Все началось минувшим летом, когда нам с товарищем «по оружию» немного взгрустнулось, и мы решили, что примем участие в значимых и интересных нам «развлекательно развивающих соревнованиях с элементами программирования», или, как их называют треклятые буржуи, хакатонах. Не долго думая, мы остановили наш взор на Долине из Кремния, так как событий подобной тематики тут много и есть высокий шанс найти интересные нам. С тех пор мы поучаствовали в ни много ни мало 3 хакатонах, тем самым лишившись порядка 40 часов сна. Сей сказ повествует о наших впечатлениях, сделанных нами проектах и атмосфере вокруг описываемых событий.

В четверг, 30 октября, Ciklum порадует днепропетровских разработчиков мероприятием в рамках Ciklum Speakers’ Corner с докладом на тему “Intro to WebGL with THREE.js (based on Source's «Leaderboard in Reception»)”

Ниже изложено содержание обзорной статьи о платформе Blend4Web, написанной мной для ресурса Mozilla Hacks, с изменениями и дополнениями.

В марте 2014 года командой российских разработчиков был представлен первый публичный релиз Blend4Web, открытой платформы для создания трехмерных веб-приложений. В этой статье рассматривается история развития платформы и перспективы ее применения.