Привет, Хабр! Сегодня хочу предложить вашему вниманию перевод на русский язык статьи моего коллеги и хорошего приятеля Dunfan Lu. Он создал taichi.js - open-source фреймворк для программирования графики на WebGPU, и написал подробный туториал как его использовать на примере знаменитой "Игры жизни". Уверен, эта сложная и красивая работа на стыке технологий рендеринга и компиляции не оставит вас равнодушными. - пр. переводчика.
В физике часто оперируют волновыми функциями с ярко выраженными свойствами частиц. Давно стали обыденными понятия частиц с положительным и отрицательным зарядами и с соответствующим взаимодействием. Широко используют Лоренц-преобразования, когда при увеличении скорости волна-частица сжимается, с соответствующим увеличением полной энергии при приближении к скорости света.
Но можно ли представить простейшую и наглядную модель, из которой выводятся все эти свойства разом?
Одной из таких моделей является модель Френкеля-Конторовой, которую мы рассмотрим в рамках истории теории солитонов.
Я продолжаю работу над своей браузерной игрой про пиратов на Three.js. Пришло время добавить торговлю. Я подумал, раз у нас тут век пиратов, то и в политическом смысле обстановка должна быть весьма фривольной, то есть, без всякой богомерзкой демократии. А чего стесняться? Заходим в порт, а там нам, пиратам, сразу же предлагают приобрести пушечные ядра и выполнить заказы на транспортировку трупов оппозиционеров и доставку рабов. Еще можно отвезти ром на Тортугу или подбросить губернаторскую дочь на вечеринку на Райский остров. Или тайно эвакуировать беглого губернатора за хорошую плату. Действительно, для подобных дел правительству идеально использовать пиратов. В конце концов, рабы сами себе билет на регулярный рейс не купят, а оппозиционеры сами себя не похоронят. А проблему решать надо... Короче говоря, перевозить древесину и шелк, как в обычных играх - это скучно. Пусть будут этакие «девяностые», но в эпоху пиратов. Пираты выполняют не совсем законные задания правительства, а последнее закрывает глаза на их не совсем законные методы обогащения.
В настоящее время в интернете можно найти сайты с визуализацией некоторых квантовых процессов. Я решил сделать свой сайт с визуализацией квантового спина. Расскажу, как появилось желание сделать этот сайт и что на нем находится.
В этой статье мы рассмотрим способ как дать пользователю возможность загружать какие-либо файлы, к примеру текстуры. И немного затронем тему запуска JS функций из C# в рамках Unity. В результате мы сможем открывать окно выбора файлов всего одним вызовом функции.
Рассмотрев компоненты в общем виде, можно приступить к построению полноценного приложения на их основе. Первым делом нам нужно реализовать смену экранов и показ диалогов. Потом мы добавим возможность конфигурировать приложение и легко подставлять измененные реализации классов с помощью инверсии управления (IoC). Используя IoC-контейнер как контекст приложения создадим возможность запускать параллельно несколько игр в одном приложении, что позволит проводить сеансы одновременной игры, как это делается, например, в шахматах или в онлайн-покере. Под конец мы добавим централизованный доступ к ресурсам, локализации и управлению звуками, а также сделаем свою реализацию для логов и сигналов как более экономичную замену событиям.
Все вместе уже можно будет считать вполне оформившимся игровым фреймворком.
«Йо-хо-хо!» - невольно приходит на ум при любом взаимодействии с морем, передвигаешься ли на речном трамвайчике или же сидишь в баре круизного корабля. В последнем случае еще можно приобрести бутылку рому. Море привлекает своими волнами, закатами и рассветами. А особенно прикольно, когда на море завелись злые пираты. Ну... если это мы, конечно же.
Возьмем шейдер неба и шейдер воды - атмосфера готова! Что может быть проще. И да, я буду писать игру под браузер на Javascript с использованием библиотек Three.js и Cannon.js. Первую я использую для отображения 3D графики, а вторую - в качестве легковесного скриптового физического движка.
Я заставил небесную сферу и плоскость воды двигаться вместе с кораблем. Это обеспечивает практически бесконечный мир - только по мере движения будут подгружаться разные острова. Волны привязаны к началу координат, а сама плоскость воды передвигается. В этом примере уменьшен размер плоскости, чтобы было видно, как это работает.
Привет, я увлекаюсь программированием шейдеров. Сегодня это мини-футбол, которым я хочу поделиться.
Вангеры в 2022 году продолжают удивлять, прежде всего людьми которые когда-то полюбили эту игру, но сегодня не забывают и вкладывают много сил, делая её лучше, современнее. Оригинальная игра получила обновление с поддержкой полноценного 3D, да не абы какого, а кросс платформенного - работающего на всех системах и даже в браузере. Статья о том, как нетипичная связка технологий помогла запустить обновление в браузере.
Экспериментируя с фрактальными функциями, я визуализировал 2д изображение, которое внешне мне очень напоминало мне обычный спальный район или строительные леса. Для glsl это будет примерно такая функция:
Вангеры одна из самых почитаемых и технологичных игр своего времени, продолжает жить и развиваться. Благодаря сплоченному сообществу игра получила множество усовершенствований: HD, 60 FPS, новые сетевые режимы и много другое. Vange-rs один из интереснейших проектов по Вангерам. Это rust версия игры, основной изюминкой которой является 3D рендер основанный на wgpu.
В этот раз речь пойдет о немного более сложных вещах, таких, как управление состоянием, компоненты высшего порядка и Gamepad API.
Как вообще-то передвигать персонажа (который есть набор отдельных 3D-объектов) в пространстве? Я уже рассказывал ранее в 4 шаге о том, об объединении объектов в группу. Еще раз: вы можете перемещать группу с линейной скоростью; в сумме с подходящей анимацией это будет выглядеть как ходьба или бег, в зависимости от вашей задумки.
Как я спарсил WebGL карту с Федерального сайта. Написал эту статью для тех, у кого похожая задача.
Игра в браузере на React и Three.js!
Я занимаюсь фронтендом уже очень давно, порядка 10 лет. И как любой уважающий себя фронтендер, я люблю тащить javascript туда, где обычно его не используют: на сервер, в мобильные приложения, в геймдев. С тех пор как я увидел первые WebGL демосцены в 2013-м, я мечтал сделать что-то похожее, скажем, на это.
Так что я провел немало времени экспериментируя и читая документацию, и вот что у меня получилось.
Дисклеймер: я не претендую на абсолютные знания того, как делают игры, я всего лишь описываю свой наивный подход к поиску ответа на вопрос, который задает заголовок. Поэтому это будет не совсем игра, а скорее концепт, интерактивная демо-сцена.
Один из организаторов митапов для креативных разработчиков в Бельгии Creative Front-end Belgium в двух постах на CodePen рассказывает и показывает, как шаг за шагом сделать туннель из частиц с эффектом движения в нём. К старту курса по Frontend-разработке делимся сокращённым переводом этих статей об анимации, которая, по словам автора, нравится ему больше всего; вы увидите эксперименты с параметрами анимации, поэтому легко поймёте, как адаптировать код для своих нужд, например, для эффекта на сайте или в вашей игре.
Третья часть серии статей о том как фронт писал свой микродвижок для рендера моделей, ради экономии байтов. Ссылка на прошлую.
Пишем свой парсер и погружаемся в некоторые функции webGL для красивых линий.
Вторая часть серии статей о том как фронт писал свой микродвижок для рендера моделей, ради экономии байтов. Ссылка на прошлую.
Тут я приступил к попыткам отрендерить красиво яблоко.
