Иногда я считаю себя первопроходцем, открывающим новые страницы использования Blend4Web. Это молодой движок, с энергичной командой разработчиков, богатыми возможностями и множеством не очень хорошо документированных функций. Что-то я черпаю из исходников большого количества демо, дергаю разработчиков по всяким вопросам, а чаще всего действую методом “научного тыка”. В этой статье я хочу поделиться своими наработками по созданию пользовательского интерфейса для приложения. И что важно, с помощью Blend4Web и HTML5 можно сделать вполне приличный игровой GUI.
Рубрика «WebGL» - 12
Создание пользовательского интерфейса для Blend4Web (ч.1)
2016-02-19 в 6:02, admin, рубрики: Blend4Web, blender, game development, javascript, WebGL, веб-дизайн, Веб-разработка, разработка игр
Многопользовательский онлайн-шутер на WebGL и asyncio, часть вторая
2016-02-16 в 8:06, admin, рубрики: aiohttp, asyncio, babylon.js, game development, Gamedev, html, javascript, mongodb, nginx, nosql, python, python3, WebGL, игры 
В этом материале постарался описать создание браузерного 3D-шутера, начиная от импорта симпатичных моделей танков на сцену и заканчивая синхронизацией игроков и ботов между собой с помощью websocket и asyncio и балансировкой их по комнатам.
Введение
1. Структура игры
2. Импорт моделей и blender
3. Подгрузка моделей в игре с babylon.js и сами модели
4. Передвижения, миникарта и звуки игры в babylon.js
5. Вебсокеты и синхронизация игры
6. Игроки и их координация
7. Балансировка игроков по комнатам и объектный питон
8. Asyncio и генерация поведения бота
9. Nginx и проксирование сокетов
10. Асинхронное кэширование через memcache
11. Послесловие и RoadMap
Всех кому интересна тема асинхронных приложений в Python3, WebGL и просто игр, прошу под кат.
Читать полностью »
Самые яркие тенденции веб-дизайна в 2016
2016-02-10 в 15:26, admin, рубрики: javascript, WebGL, браузеры, веб-дизайн, Интересное, Научно-популярное, СофтМир веб-дизайна ярок и многообразен. Большие изменения происходят здесь не каждый год. Подтверждает это и стремительный рост технологий, который за последние несколько лет показал, что важные тенденции в веб-дизайне недалекого будущего будут сосредоточены на улучшении имеющихся разработок.
Плоский дизайн станет более текстурированным, “кинематографические опыты” будут более распространенными, а использование библиотек JavaScript позволит больше экспериментировать. Мы уверены, что растущая популярность WebGL и виртуальной реальности позволит изменить вебсайты, которые мы знаем, в нечто новое с интересными интерактивными возможностями.
В этой статье мы рассмотрим 11 крупнейших ожидаемых тенденций веб-дизайна этого года. Так что устраивайтесь поудобней и начинайте читать!
Читать полностью »
Визуализация concurrency в Go с WebGL
2016-01-31 в 12:19, admin, рубрики: concurrency, Go, parallelism, WebGL, визуализация данных, параллельное программирование, ПрограммированиеОдной из самых сильных сторон языка программирования Go является встроенная поддержка concurrency, основанная на труде Тони Хоара «Communicating Sequential Processes». Go создан для удобной работы с многопоточным программированием и позволяет очень легко строить довольно сложные concurrent-программы. Но задумывались ли вы когда-нибудь, как выглядят различные паттерны concurrency визуально?
Конечно, задумывались. Все мы, так или иначе, мыслим визуальными образами. Если я попрошу вас о чём-то, что включает числа «от 1 до 100», вы мгновенно их «увидите» в своей голове в той или иной форме, вероятно даже не отдавая себе в этом отчёт. Я, к примеру, ряд от 1 до 100 вижу как линия с числами уходящая от меня, поворачивающая на 90 градусов вправо на числе 20 и продолжающая до 1000+. И, покопавшись в памяти, я вспоминаю, что в самом первом детском саду в раздевалке вдоль стены были написаны номерки, и число 20 было как-раз в углу. У вас же, вероятно, какое-то свое представление. Или вот, другой частый пример — представьте круглый год и 4 сезона года — кто-то их видит как квадрат, каждая грань которого принадлежит сезону, кто-то — как круг, кто-то ещё как-то.
Так или иначе, позвольте мне показать мою попытку визуализировать основные паттерны concurrency с помощью Go и WebGL. Эти интерактивные визуализации более-менее отражают то, как я вижу это в своей голове. Интересно будет услышать, насколько это отличается от визуализаций читателей.
Читать полностью »
Полгода работы с Blend4Web. А стоит ли оно этого?
2016-01-29 в 7:35, admin, рубрики: Blend4Web, framework, game development, javascript, open source, WebGL, Веб-разработка 
В августе прошлого года я обратил внимание на интересный WebGL-движок для разработки своих браузерных проектов. Меня подкупила его тесная интеграция с Blender и русская команда разработчиков. И вот совсем недавно на официальном сайте появился своеобразный отчет о прошедшем годе и планах на будущее. Я подумал, а почему бы и мне не высказаться на это тему, но с точки зрения своего опыта и времени работы с этим фреймворком. На хабре уже есть немало обучающих статей написанных мною о Blend4Web. Помимо всего прочего я рассказывал и о текущих проблемах. Теперь я хочу суммировать накопленные положительные и отрицательные оценки в нечто целое. Учтите, что это только личное мнение.
Читать полностью »
ЗаПулить по простому. Менеджер пула на JavaScript
2016-01-18 в 6:39, admin, рубрики: Blend4Web, game development, javascript, WebGL, разработка игр, метки: blend4webРазрабатывая игру, приходится идти на всевозможные ухищрения для повышения производительности. В самом деле, если сцена будет притормаживать при каждом выстреле или генерации врагов, то пользователь может махнуть рукой и найти более шуструю игру (благо рынок ими сейчас перегружен). «Узких мест» в игровом приложении немало, но я хотел бы рассказать про оптимизацию именно со стороны кода.
Тестируя одну из своих мобильных игр, я был неприятно поражен тормозами системы при выстрелах или взрывах. Понятное дело, что на стационарном компьютере эта же игра работала без проблем. Путем определенных ухищрений был найдет виновник — скрипт, ответственный за генерацию взрывов. Тогда-то и пришлось найти пул-менеджер на C#, который в дальнейшем перекочёвывал из проекта в проект. Однако для JavaScript такового у меня не было.
Читать полностью »
WebGL для всех
2015-12-23 в 7:32, admin, рубрики: 2GIS, javascript, WebGL, Блог компании 2ГИС, Веб-разработка, всё просто, всё сложно, Работа с анимацией и 3D-графикой 
Идея данной статьи родилась после нескольких мучительных недель изучения WebGL. На личном примере выяснилось, что люди, не сталкивающиеся до этого с 3D-графикой, имеют в основном ошибочные представления о работе данной технологии. К тому же была проблема с поиском информации в интернете.
WebGL, в отличие от Javascript, имеет высокий порог вхождения, его до сих пор мало кто использует, а ещё меньше тех, кто об этом пишет. Большинство руководств или статей перепрыгивают сразу на использование какой-нибудь библиотеки. Но мы-то с вами знаем, что большие универсальные инструменты не всегда пригодны для наших задач или, возможно, делают это на неприемлемом уровне: проигрывают в скорости, поставляются с ненужным багажом и т.д.
Этой статьёй хочется облегчить порог вхождения в чистый WebGL, дать начальное представление и подсказать, куда двигаться дальше.
Читать полностью »
Автомобильные конфигураторы как зеркало революции веб-технологий
2015-12-15 в 9:08, admin, рубрики: WebGL, авто, браузеры, Научно-популярное, СофтВ своей недавней статье я рассматривал интересные проекты WebGL. Среди них была презентация автомобиля Porsche 911. Красивое, технически грамотное приложение, конечно, привлекает покупателей, но насколько оно эффективное?
Производители авто очень рациональны. Традиционно их официальные сайты служат главному — увеличению продаж. Неудивительно, что такие автомобильные ресурсы держат нос “по ветру” и очень быстро реагируют на любые технологические веяния в области сайтостроения. Наиболее чувствительная к этому часть — это, так называемый, конфигуратор. Он присутствует на сайтах всех известных брендов и позволяет выбрать машину под свои требования: определиться с серией, цветом кузова, обивкой салона, мощностью двигательной установки, типом колес и т.п. Таким образом, потенциальный покупатель “видит” то, что ему нужно, а также получает информацию о конечной стоимости собранного авто и даже предложения о кредитовании. Понятно, что автомобильный конфигуратор должен быть быстрым, удобным, наглядным, максимально полезным и современным. Это своего рода “зеркало” нынешних веб-технологий.
Читать полностью »
CG Event 2015 Тусовка виртуальщиков. Свой взгляд
2015-12-09 в 17:21, admin, рубрики: 3d, blender, CG EVENT, inkscape, WebGL, Видео-техника, дополненная реальность, композитинг, Мероприятия, Научно-популярное, рендеринг, метки: cg eventСотни посетителей, десятки компаний и студий, многочисленные, поражающие взгляд стенды и мониторы, первоклассные доклады. Да, это CG Event — место встреч всех тех, кто причастен к виртуальному миру графики. Художники, моделлеры, визуализаторы, аниматоры и прочий творческий люд на протяжении двух дней делились опытом, да и просто общались.
И я там был, мед-пиво пил… Тьфу ты… Впитывал всеми порами серого вещества массу информации, тот неповторимый дух профессионализма и множества интересных идей. Об этом дальше речь и пойдет.
Пять презентаций WebGL, которые поражают
2015-10-29 в 12:19, admin, рубрики: WebGL, браузеры, будущее здесь, СофтБраузер в компьютере, браузер в телефоне или умных часах, а может даже у кого-то в чайнике? Веб-технологии окружают нас со всех сторон и по мере развития железной начинки, становятся все более зрелищными и совершенными. Всего несколько лет назад о WebGL говорили, как о забавной игрушке с туманными перспективами. Но многое изменилось и на смену ранее популярному flash приходят более продвинутые технологии HTML5/WebGL.
Прошло время, когда демонстрации WebGL представляли собой примитивные, кустарные поделки или показательные демо от разработчиков софта. Сейчас многие известные бренды, используют эту технологию для презентаций и многие из них выглядят очень убедительными.
