Cложность Web меняется ежедневно, и его возможности растут так же быстро, особенно с 3D-рендерингом. Кто только начинает вливаться в тему 3D — добро пожаловать под кат.

Введение

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

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

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

Доброго времени суток всем хаброжителям. Хочу рассказать вам о том, как я вернулся в любительский геймдев спустя 3+ года, кардинально сменив инструмент (а попутно — и свое мировоззрение), и что из этого вышло. Под катом вас:

1. Краткая диспозиция всех фактов в начале пути. Как картинка «ДО» в дешёвой интернет-рекламе «ДО» и «ПОСЛЕ».
2. Добровольный нырок в современный frontend в стиле «Где деньги, Лебовски?!»
3. Легкий зуд в интимной точке, переходящий в жгучее желание изучить что-то новое, сделав что-нибудь старое.
4. Осознание собственной беспомощности
5. Преодоление
6. Приятное окончание, ну совсем как в этих ваших фильмах.

Когда вы визуализируете 3D-объект, вам всегда нужно добавлять к нему какой-то материал, чтобы он был виден, и выглядел так, как вы хотите; неважно, делаете вы это в специальных программах или в режиме реального времени через WebGL.

Большую часть материалов можно имитировать с помощью встроенных средств библиотек вроде Three.js, но в этом уроке я покажу вам, как заставить объекты выглядеть, как стекло за три шага с помощью — вы угадали — Three.js.

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

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

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

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

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

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

Этот урок является логическим продолжением двух предыдущих статей (часть 1, часть 2) про создание трёхмерных конфигураторов без использования программирования и вёрстки.

В прошлой части мы рассматривали вопрос интеграции трёхмерной части с использованием штатной системы заказов, входящей в плагин Verge3D для WordPress. Однако такой вариант подходит далеко не всем, поскольку возможности этого плагина существенно ограничены. С его помощью невозможно получить доступ к популярным платёжным системам, типа PayPal или 2Checkout, невозможно оперировать со скидками, купонами, запасами и прочими вещами, которые все привыкли видеть в популярных системах электронной коммерции.



В этой статье мы покажем, как обойти эти ограничения и интегрировать трёхмерную визуализацию непосредственно в интернет магазин на WooCommerce. К слову, на сегодняшний день это самая популярная система электронной коммерции — согласно статистике она используется в 28% всех интернет-магазинов.

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

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

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

Введение

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

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

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

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


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

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

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

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

Существуют ли среди читателей люди, которые хотя бы краем уха слышали, что есть некий 3D движок для разработки WebGL приложений с редактором, похожим на Unity, только в браузере? Тема крайне непопулярная, но я стал одним из таких людей почти 2 года назад. И теперь мне захотелось поделиться накопленным опытом, скорее даже моими разочарованиями. В статье пойдёт речь о проблемах, с которыми Вам придётся столкнуться, если начнёте пользоваться этим редактором. Сразу оговорюсь, что не буду сравнивать с другими существующими 3D движками вроде Three.js или Babylon.js, коснусь только самого редактора и скриптового API.

Привет!

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



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

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

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

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

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

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

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

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

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

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

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

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

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


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

Недавно я участвовал соревнованиях демосцены Revision 2019 в категории «PC 4k intro», и моё интро выиграло первое место. Я занимался кодингом и графикой, а dixan сочинял музыку. Основное правило соревнования — необходимо создать исполняемый файл или веб-сайт, имеющий размер всего 4096 байта. Это означает, что всё приходится генерировать с помощью математики и алгоритмов; никаким другим способом не получится ужать изображения, видео и аудио в такой крошечный объём памяти. В этой статье я расскажу о конвейере рендеринга своего интро Newton Protocol. Ниже можно посмотреть готовый результат, или нажать сюда, чтобы посмотреть как оно выглядело вживую на Revision, или зайти на pouet, чтобы прокомментировать и скачать участвовавшее в конкурсе интро. О работах конкурентов и об исправлениях можно прочитать здесь.

В этом руководстве я расскажу как с помощью OffscreenCanvas мне удалось вынести весь код работы с WebGL и Three.js в отдельный поток веб-воркера. Это ускорило работу сайта и на слабых устройствах исчезли фризы во время загрузки страницы.

Статья основана на личном опыте, когда я добавил вращающуюся 3D-землю на свой сайт и это забрало 5 очков производительности в Google Lighthouse — слишком много для лёгких понтов.