Рубрика «WebGL» - 3

Предыстория

До начала работы с Алисой мне уже приходилось сталкиваться с разработкой чат-ботов для telegram, viber, вконтакте.

Чат-бот с расписаниями автобусов без Алисы

Чат-бот был разработан как дополнительный сервис к информационному порталу.

Продвигался через существующее мобильное приложение с расписанием.
Статистика использования была очень скучной: 1-20 чел. в день, при активныx ~2000 в моб. приложении. Как минимум? был один человек, для которого бот был нужен.

Читать полностью »

При использовании для отображения в браузере библиотеки ThreeJS в качестве первого примера обычно выступает куб или какой-либо другой простейший объект, и он создается при помощи предустановленных специальных классов BoxGeometry или SphereGeometry. Затем обычно рассматривается использование импортируемых готовых моделей и работа с ними.

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

Читать полностью »

Описание алгоритма логики, и разбор рабочего примера в виде техно-демки-игры

WebGL2 версия этой демки https://danilw.itch.io/flat-maze-web остальные ссылки смотрите в статье.

Статья разбита на две части, сначала про логику, и вторая часть про применение в игре, первая часть:

  • Ключевые особенности.
  • Ссылки и краткое описание.
  • Алгоритм работы логики.
  • Ограничения логики. Баги/особенности, и баги Angle.
  • Доступ к данным по индексу.

Дальше описание игровой-демки, вторая часть:

  • Используемые возможности этой логики. И быстрый рендеринг миллиона частиц-пикселей.
  • Реализация, немного комментариев к коду, описание работы коллизии в две стороны. И взаимодействие с игроком.
  • Ссылки на используемую графику с opengameart, и шейдер теней.

Читать полностью »

В первой части я рассказал о проблемах, с которыми я столкнулся в процессе создания 3D игры под браузер c использованием Three.js. Теперь я хотел бы подробно остановиться на решении некоторых важных задач при написании игры, типа конструирования уровней, определения столкновений и адаптации изображения под любые пропорции окна браузера.

Новая игра со старой атмосферой на Three.js. Часть 2 - 1

Схемы уровней

Собственно, сами уровни создаются в 3D редакторе, а именно, их геометрия, наложение текстур, запекание теней и т.д. Все это я описал в первой части. Зачем нужны еще какие-то схемы? Дело в том, что Three,js не предлагает какого-то физического движка, и я использую схемы уровней для определения препятствий.
Читать полностью »

Введение

Имитационное обучение с использованием мультимедийных образовательных ресурсов является одним из перспективных направлений информатизации современного образования. Под имитационным обучением мы будем понимать такую модель обучения, в которой посредством программного обеспечения виртуально воспроизводятся физические процессы и условия, аналогичные реальным, но имеющие ряд идеализированных качеств. Возможность интерактивного взаимодействия с виртуальной моделью того или иного физического процесса позволяет существенно понизить уровень абстракции знаний о данном процессе, в результате чего повышается эффективность получения и усвоения этих знаний человеком [1].

Объект изучения и постановка задачи

В качестве объекта изучения рассмотрим один из наиболее важных разделов общей физики – классическую термодинамику. В контексте образовательной деятельности знания по данной дисциплине преподаются в нескольких формах, Читать полностью »

Существует множество поклонников старых игр. И они не прочь пустить скупую ностальгическую слезу и нет-нет, да сыграть в «Арканоид», «Пакмана» или «Принца Персии», как двадцать, тридцать, сорок или — подставьте нужное число — лет назад. DOS-box и эмуляторы — им в помощь. Да, что там, я недавно смотрел стрим самого первого 2D «Принца Персии» на Ютьюбе, где довольно молодой «стример» после прохождения очередного смертельного препятствия, смахнув со лба пот рукой, изрек: «Мне еще никогда не было так страшно в компьютерной игре». То есть, даже молодежь способна оценить хардкорность и крутизну старых игр.

Новая игра со старой атмосферой на Three.js - 1

Я подумал, а почему бы не создать новую игру в подобном стиле? Да, существуют различные ремейки и клоны. Также, радуют современные игры в стиле пиксель-арт. Однако, все они, как правило, повторяют квесты, механики и иногда вообще полностью левел-дизайн старых игр, по мотивам которых они сделаны. Ну либо, наоборот, предлагают совершенно новый сюжет и локации, являя собой просто визуальную стилизацию «под старину». А что, если представить, какой была бы новая часть старой игры, выйди она следом за последней из серии? Я решил такую создать.
Читать полностью »

Однажды фронтендеру позвонил дизайнер и попросил сделать «паутинку» за запотевшим стеклом. Но потом оказалось, что это не «паутинка», а гексагональная сетка, и не за стеклом, а она уходит вдаль, и с WebGL фронтендер не знаком, а всей анимации пришлось учиться в процессе рисования. Тем фронтендером был Юрий Артюх (akella).

История одной анимации - 1

Юрий давно занимается версткой, а по воскресеньям записывает стримы с разбором реальных проектов. Он не профи в WebGL, не делает на нем карты, не пишет на Web-ассемблере, но ему нравится учиться чему-то новому. На FrontendConf РИТ++ Юрий рассказал, как провести одну анимацию от макета до сдачи клиенту так, чтобы все были довольны, и по дороге изучить WebGL. История идет от первого лица и включает в себя: Three.js, GLSL, Canvas 2D, графы и немного математики.
Читать полностью »

Статья в основном про GLSL-шейдеры, и как я их использовал в этой мини-демке-игре.

Статья разбита по такой очередности:

  • Ссылки и краткое описание.
  • Очень краткое описание игровой логики, и используемых возможностей Godot.
  • Про используемые шейдеры.
  • Еще немного про Godot, и его особенности.
  • WebGL2 работает
  • Мультиплеер

Читать полностью »

Привет!

У нас иногда спрашивают, почему мы проводим свои митапы по большей части в Москве, но не в Питере, например. Исправляемся, через 10 дней будет Alfa JS MeetUP SPb, который пройдёт в Санкт-Петербурге.

22 августа — Alfa JS MeetUP SPb - 1

Коротко о главном:

  • вход бесплатный;
  • надо зарегистрироваться на этой странице;
  • будет и онлайн-трансляция (ссылку выложим в этом посте);
  • Санкт-Петербург, ул. Льва Толстого, д. 1-3 (Коворкинг «Ясная Поляна»);
  • Cypress, JavaScript, UI-тесты, WebGL, Docker и пицца.

Под катом — темы докладов наших спикеров.
Читать полностью »

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

JS1k — ежегодное соревнование, где надо вместить демо, игру или все что угодно, в 1024 символа на JavaScript. В этом году мое демо заняло четвертое место (до третьего не хватило каких-то два балла). Посмотреть демо можно на сайте JS1k. У кого не открывается или не работает, выглядеть должно так:

Минифицированный и полный исходный код лежит на github. А под катом разбор того, как сейчас минифицируют JavaScript для таких конкурсов.

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js