WebGL *

Возникла необходимость зафиксировать опыт с последнего проекта по прокачке производительности картографического сервиса. Так сказать, чтобы 2 раза не вставать при передаче опыта. И начнём с постановки, чтобы сразу определиться с аудиторией, кому мимо, а кому больше узнать как "прожевывать" и отображать на UI от 100К объектов в секунду и не лагать. Ну а кто-то вообще не в танке про картографические сервисы и хочет "на борт".

Что вас ждёт по катом.

1. MapTiler/Maplibre - картографический провайдер и UI фрэймворк для работы с ним.

2. Создание своих слоёв данных на карте.

3. Рендеринг большого объёма данных на WebGL/WebGPU. Начнём от 100К.

4. Оптимизация рендеринга с ручной подготовкой буферов для GPU.

5. Обновление данных слоя в realtime. Начнём молотить от 1M объектов.

6. Сериализация данных в ArrayBuffer для передачи напрямую в GPU.

Привет! Меня зовут Владимир и я создатель МояДоска. Сегодня я поделюсь историей о том почему я решил создать доску, как я ее написал... и переписал, а потом выпустил ее в свет, взял первое место на ProductRadar, набрал тысячи пользователей, и вошел в реестр Российского ПО, а потом...

Хотя я немного разочаровался в web-движке PlayCanvas, после того как его апгрейды поломали мне первый диаблоид - для каких-то очень маленьких легковесных игр он остаётся достаточно хорош. Поэтому для разнообразия реанимировал аккаунт и немного погрузился в программирование на js, написав аркаду (с механикой что-то вроде специфического урезанного BattleCity, но на сфере), где инопланетный космический кораблик летает над некоей планеткой.

Этой статьей я хочу представить сообществу разработку www.ruinsworld.ru, которой, по сути, посвятил пять последних лет жизни. Все начиналось с браузерного сингл‑шутера, потом была не очень удачная и быстро наскучившая попытка в стратегию, после чего я поставил себе, казалось бы, невозможную задачу. Реально ли, используя все эти наработки, построить многопользовательский шутер в браузере, да еще не просто «стрелялку внутри небольшой коробки», а с большим открытым миром и огромным количеством неписей в нем? Чтобы можно было «идти куда хочешь во все стороны и делать что заблагорассудится», как в самых лучших постапокалиптических РПГ?

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

Мы делаем карты 2ГИС реалистичными, чтобы приложение максимально детально отражало город вокруг: чтобы у зданий были не гладкие стены, а настоящий фасад, в парках росли деревья и стояли лавочки, а скульптуры выглядели точно так же, как и в реальности. Такая реалистичность помогает в навигации: гораздо проще сравнивать то, что ты видишь в реальности, с моделью этого здания, а не с гладкой коробкой. Поддержка освещения объектов, которую мы добавили на 2gis.ru — ещё один шаг к реалистичности.

Расскажу, чего мы добились на сегодня, на какие компромиссы пришлось пойти и чуть-чуть о том, что под капотом движка освещения и теней.

Я хочу, чтобы посетители моего сайта наслаждались им, так что я забочусь об accessibility и проверяю, что даже без JavaScript тут есть, на что смотреть. Я забочусь о том, насколько быстро грузятся страницы, ведь на некоторых из них есть большие иллюстрации, поэтому я минифицирую HTML.

Вот только есть один нюанс, который ставит мне палки в колёса и не даёт сделать блог лёгким как пёрышко.

Какую игру ни делай, а в итоге все равно получится ГТА. Каждый школьник мечтает создать свой клон ГТА. ГТА всему голова. Без труда не пройдешь и ГТА. Ой, что это я? Короче говоря, я делал игры и в какой-то момент осознал, что достиг дзена, и теперь настала пора и мне тоже написать свой вариант той самой исходной игры, игры-прародительницы всех игр, игры-протовселенной, канонической игры, а именно игры про езду на тачке в открытом мире. Каждый мужчина должен посадить дом, родить дерево и создать свой клон ГТА. Э-э... Ладно. Нет, конечно, GTA - это не только про тачку. Позже добавим и ходьбу, и копов, и плоские шуточки, хотя, последнее я, кажется - уже. Похоже, что сейчас моя игра, скорее, ближе к Need For Speed: в ней уже можно гонять по городу, но еще нельзя выходить из машины, да и пешеходов пока нет. Зато есть открытый мир. Ничего, скоро доведем этот NFS до состояния полного GTA. Тут мне подумалось, что все игры - это одна и та же игра, но с разными урезанными возможностями. Это как в случае со скульптором, который просто отсекает все лишнее... Короче, вы поняли, я философ.

Я расскажу вам о том, как я создал довольно большую локацию, содержащую более 20 000 объектов (это еще не предел), с физической моделью, при этом сохраняющую неплохую производительность в браузерах, в том числе мобильных. Будет интересно, не переключайтесь.

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

Меня зовут Алексей, сегодня мы с вами поговорим, как можно ускорить вычисления машинного обучения веб приложения с помощью WASM, WebGL или WebGPU.

Когда фронтенд‑разработчик слышит о машинном обучении в браузере, первое, что приходит ему на ум, это вопрос: «Как это может быть применено? Мы же работаем в браузере на JS, который, как известно, медленный (по сравнению с компилируемыми языками)».

В данной статье представляю читателям мой новый сайт и интерактивную веб-программу на нем.

Примерно полтора месяца тому назад я опубликовал на хабре статью. рассказывающую о расслоении Хопфа и его визуализации на экране компьютера. Напомню, что расслоение Хопфа позволяет, в некотором смысле, визуализировать трехмерную сферу при помощи обычных окружностей называемых "окружностями Хопфа".

Вскоре после публикации этой статьи я обнаружил в интернете материал, в котором вместо окружностей Хопфа использовались прямые линии. Весь этот материал представляет собой всего один рисунок (даже не скриншот программы), на котором можно увидеть двойственность между окружностями и прямыми. На сайте можно увидеть данный рисунок и ссылку на этот материал. Никаких других материалов, сайтов или визуализаций на эту тему найти больше не удалось.

Поэтому я решил дополнить свою программу визулизации расслоения Хопфа новыми возможностями связанными с заменой окружностей Хопфа на прямые линии (и не только). Сразу скажу, что при использовании прямых в этом расслоении получается не тор, а гиперболоид. Это само по себе, на мой взгляд, является весьма нетривиальным фактом.

Обращу внимание еще на один интересный момент. На всех сайтах и статьях, которые мне удалось найти, программа визуализации расслоения Хопфа создается хотя и с привлечением комплексного пространства и сферы Римана, но без явного использования элементов квантовой механики, понятия спина электрона и квантовых вращений. Обычно для этой визуализации используются кватернионы. Но кватернионы при их практическом применении требуют хороших соответствующих знаний и навыков.

В математике существует очень интересная тема, которая носит название "расслоение Хопфа". В 1931 году Хайнц Хопф опубликовал свою работу об открытой им в топологии конструкции, получившей в истории название "Hopf fibration" - расслоение Хопфа. Суть этой конструкции, была основана на геометрических разработках Уильяма Кингдона Клиффорда.

В поле зрение физиков-теоретиков, однако, она впервые попала лишь сорок с лишним лет спустя, в 1970-е годы, из-за прямых и непосредственных математических взаимосвязей между расслоением Хопфа и калибровочными симметриями в квантовой теории поля.

В данной небольшой статье рассмотрены некоторые основные моменты связанные с моим сайтом на котором рассматривается визуализация расслоения Хопфа.

Недавно в карте 2ГИС появились небо и туман, которые можно увидеть, увеличив масштаб и наклон. 

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

Не так давно я писал про свой 2d движок jsge. При написании рендера, делал оптимизацию кода, а также экспериментировал с web assembly. Как и обещал, написал отдельную статью про результаты.

Если тебе удобнее смотреть видео, то вот.

А это то же видео, только в текстовом формате, что кому-то может быть удобнее.

Привет всем. Меня зовут Артурас, я пишу на Javascript. Полтора года назад я уволился из оффшорной компании и решил написать свой движок для браузерных 2d игр. Сегодня - делюсь результатами.

Технология работы персонифицированной виртуальной вебкамеры для WebRTC: анимирование 3D модели пользователя в браузере для создания видеотрека, заменяющего камеру пользователя и синхронного с аудио от микрофона.

C 2018 года карта веб-версии 2ГИС рендерится при помощи WebGL — API для рисования трехмерной графики. Сначала мы в команде веб-карт использовали эту технологию просто как очень быструю рисовалку двухмерных данных с небольшими исключениями в виде 3D-домов и моделей.

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

В 1921 году Отто Штерн приехал в город Франкфурт, где познакомился в уроженцем этого города и сотрудником местного университета Вальтером Герлахом, вместе с которым они в том же году и провели прославивший их опыт. Впоследствии выяснилось, что почти всю математику описывающую, спин отдельного электрона, можно вывести из этого эксперимента. Читая описание эксперимента, такой вывод совершенно не кажется очевидным. Хотя бы, например, с какой стати в математике спина электрона появляются комплексные числа?

Чтобы прояснить связь математики спина с экспериментом Штерна‑Герлаха (Ш‑Г) мной была сделана его программная модель. При описании спина электрона очень часто используется сфера Блоха. В программной модели эксперимент Ш‑Г, можно сказать, был совмещен со сферой Блоха. При таком подходе можно визуально увидеть геометрию некоторых соотношений описывающих спин электрона. Увидеть несколько интерактивных программ можно в браузере на сайте Bloch sphere online.

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

Как производится возведение числа в степень, когда в качестве показателя степени выступает матрица, рассматривается непосредственно в тексте на сайте.

При рассмотрении примеров из четвертой части требуется понимание того, чем являются собственные числа и собственные векторы. Но четвертая часть фактически является факультативным дополнением к первым трем частям и читать ее необязательно.

Привет, коллеги.

На самом деле ещё несколько месяцев назад я ненавидел Rust и задавался лишь одним вопросом: какого чёрта я вообще с ним связался? Но сегодня - сегодня всё иначе. И про это я хочу предложить немного доводов разобрать с ним.

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

Он безопасный. Это, правда, не совсем так, но если взять условного новичка, который напишет программу на C и условного новичка, который напишет программу на Rust - шанс, что вторая выйдет более безопасной окажется существенно выше. По крайней мере, атака через переполнение буфера, почти гарантировано, провалится (не станем отрицать наличие дарований, которые даже там, где это почти невозможно, смогут заложить уязвимость).

Он необычный. Уверен, вы сталкивались со странными языками программирования. Такими, которые ломают привычную парадигму и заставляют мыслить иначе. Например, люди, всю жизнь работающие с объектно-ориентированным подходом, нередко, теряются, когда сталкиваются с функциональным программированием, т.к. там иной подход. Да даже далеко ходить не надо; столкновение с попыткой воспользоваться OpenGL из привычного C++, в какой-то момент, рвёт все шаблоны и в воздухе повисает лишь два вопроса: "какого..." и "зачем вы так со мной". Это, разумеется, проходит, но не сразу.

Привет, Хабр! Сегодня хочу предложить вашему вниманию перевод на русский язык статьи моего коллеги и хорошего приятеля Dunfan Lu. Он создал taichi.js - open-source фреймворк для программирования графики на WebGPU, и написал подробный туториал как его использовать на примере знаменитой "Игры жизни". Уверен, эта сложная и красивая работа на стыке технологий рендеринга и компиляции не оставит вас равнодушными. - пр. переводчика.