Обновить
5.8

WebGL *

Программная библиотека для JavaScript

Сначала показывать
Порог рейтинга
Уровень сложности

Генерируем G-code прямо в браузере: как я написал карманную CAM-систему на JS+WebGL, чтобы не запускать тяжелый CAD

Уровень сложностиСредний
Время на прочтение3 мин
Охват и читатели11K

Зачем запускать тяжелый Fusion 360 или ArtCAM, чтобы просто вырезать фланец или прокладку? Я написал свой CAM-процессор на чистом JavaScript и Three.js, который готовит G-code из DXF за пару секунд прямо в браузере.

В статье разбираем архитектуру легковесного инженерного софта: парсинг DXF, визуализацию траекторий на WebGL, алгоритмы оффсетов и опыт парного программирования с нейросетью.

Заглянуть под капот

Новости

SVG, Canvas, WebGL, WebGPU — кто здесь вообще главный? Большой тест 2D-графики в браузере

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели6.8K

В последние годы спрос на 2D/3D-инструменты в веб-сервисах растет довольно стремительно, технологии развиваются, появляются новые подходы и библиотеки — а вместе с ними растёт и путаница: что где использовать, где грань между похожими решениями и почему у разработчиков часто возникают противоположные мнения?

Так что я решила устроить небольшой тест 2D-решений: посмотреть, на что они реально способны, понять, почему результаты местами вызывают большое удивление, и ответить себе (и вам) на вопрос: а WebGPU вообще зачем?

Спойлер: всё далеко не так очевидно, как кажется.

Читать далее

Отображение четырехмерного пространства на двухмерную плоскость

Время на прочтение5 мин
Охват и читатели8.1K

Так как я не сильно разбираюсь в математике и в геометрии, буду использовать подход графического 3D-программирования, потому что подход, применяющийся там, хорошо подходит и для проецирования четырёхмерных пространств. Поэтому для чтения этого материала рекомендую иметь хотя бы базовые знания о том, как работают матрицы преобразования и как с их помощью точка из трёхмерного пространства преобразуется в точку на экране. Код будем писать на JavaScript с использованием WebGL и библиотеки matrix-gl.

Читать далее

3dfx в браузере (Glide -> WebGL)

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели1.9K

Технологии 3dfx Interactive навсегда остались в истории как символ золотой эпохи компьютерных игр. Их графические ускорители Voodoo открыли эру аппаратного ускорения 3D-графики, а API Glide стал неотъемлемой частью многих культовых игр конца 90-х. 

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

Читать далее

Большие данные для карт в реальном времени. Inception

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели1.6K

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

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

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

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

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

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

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

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

Прокачать перформанс

МояДоска: как один разработчик написал, переписал и запустил онлайн-доску

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели5.9K

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

Читать далее

Нанопланета | Вёб-движок PlayCanvas

Время на прочтение3 мин
Охват и читатели1.7K

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

Читать далее

RUINSWORLD: Многопользовательский шутер с открытым миром для браузера на js/ts, Three и Vue. Бета-версия

Уровень сложностиСредний
Время на прочтение23 мин
Охват и читатели2.4K

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

Читать далее

Гексагональная сетка для игр с круглой Землей

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели5.9K

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

Читать далее

Освещение в веб-картах 2ГИС

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели3.5K

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

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

Читать далее

WebP — формат сжатия веб-страниц

Уровень сложностиСредний
Время на прочтение12 мин
Охват и читатели8.3K

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

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

Читать далее

Все дороги ведут в ГТА, на этот раз в мой браузерный вариант

Время на прочтение26 мин
Охват и читатели3.6K

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

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

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

Читать далее

Машинное обучение в браузере

Время на прочтение9 мин
Охват и читатели4.1K

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

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

Читать далее

Ближайшие события

Еще раз про расслоение Хопфа — новый сайт

Уровень сложностиСредний
Время на прочтение2 мин
Охват и читатели1.9K

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

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

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

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

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

Читать далее

Расслоение Хопфа и квантовая механика

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели8.2K

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

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

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

Читать далее

Математика наклона в картах, или как мы сделали небо

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели9.8K

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

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

Читать далее

Оптимизация js/WebGL/Web Assembly

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели4.7K

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

Читать далее

Как я участвовал в геймджеме | Pixel New Year Jam

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели1.6K

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

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

Читать далее

2d движок для игр Javascript Game Engine (JsGE)

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели9.9K

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

Читать далее

Виртуальная камера для WebRTC

Время на прочтение5 мин
Охват и читатели7.9K

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

Читать далее
1
23 ...

Вклад авторов