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

Введение

Имитационное обучение с использованием мультимедийных образовательных ресурсов является одним из перспективных направлений информатизации современного образования. Под имитационным обучением мы будем понимать такую модель обучения, в которой посредством программного обеспечения виртуально воспроизводятся физические процессы и условия, аналогичные реальным, но имеющие ряд идеализированных качеств. Возможность интерактивного взаимодействия с виртуальной моделью того или иного физического процесса позволяет существенно понизить уровень абстракции знаний о данном процессе, в результате чего повышается эффективность получения и усвоения этих знаний человеком [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 для таких конкурсов.

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

Хотели посмотреть на мир глазами существа живущего в компактной замкнутой вселенной со сферической геометрией? Посмотреть на мир без ночи? Мир, где на небе виден другой полюс планеты? Мир, где нет разницы между солнечным и лунным затмением? Добро пожаловать под кат!

Мир трехмерной гиперсферы. Геодезическая трассировка лучей в замкнутой вселенной со сферической геометрией - 1
Читать полностью »

Калейдоскоп как в детстве - 1

Иногда отражение в зеркале более реально, чем сам объект…
— Льюис Кэрролл (Алиса в зазеркалье)

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

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

Приглашаю и Вас окунуться со мной в мир отражений.
Читать полностью »

Так часто бывает, что техники оптимизации, хорошо работающие для обычной десктопной или мобильной графики, не всегда дают нужный эффект в случае WebGL. В этой статье я собрал (а точнее перевёл на русский язык и изложил в текстовом виде нашу презентацию с Verge3Day) те методы повышения производительности, которые хорошо себя зарекомендовали при создании интерактивных веб-приложений.

Оптимизируем ассеты для WebGL правильно - 1
Читать полностью »

Я решил выпустить новую версию своей старой браузерной игры, которая на протяжении пары лет пользовалась успехом в качестве приложения в социальных сетях. На этот раз я задался целью оформить ее также и в виде приложения под Windows (7-8-10) и разместить в различных магазинах. Конечно, в дальнейшем можно сделать сборки и под MacOS и Linux.

3D игра на three.js, nw.js - 1

Код игры написан полностью на чистом javascript. Для отображения 3D графики в качестве связующего звена между скриптом и WebGL используется библиотека three.js. Однако, так было и в старой, браузерной версии. Самым главным в этом проекте для меня стал повод параллельно с игрой дописать собственную библиотеку, призванную дополнить three.js средствами удобной работы с объектами сцены, их анимацией и многими другими возможностями. Я тогда забросил ее на длительное время. Пришла пора к ней вернуться.
Читать полностью »


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