#шейдеры — Public Fediverse posts

Космическая игра в одном HTML-файле: процедурная галактика, планеты из шума и звук без единого семпла

Привет. Я делаю одиночную космическую игру VoidVibe: полёт, бой, торговля, станции, морпехи, абордаж. Работает в браузере (WebGL2) и на Android, оффлайн. Вся игра это один index.html. Внутри нет ни одной картинки, ни одного звукового файла, ни одной библиотеки. Для себя я поставил лимит 512 КБ по gzip на весь файл. Сейчас release-сборка весит 193 КБ из 512, а dev-сборка с панелью разработчика 264 КБ. Здесь без воды: как устроен генератор, как лежат модели, что делают шейдеры, как синтезируется звук, как собирается файл и где я набил шишки. Код местами урезан, чтобы влезть в статью. Демо можно потрогать тут: https://void-vibe.com/play (в демо часть режимов отрезана, но галактика, полёт, бой, станции и верфь есть).

https://habr.com/ru/articles/1098838/

#космос #разработка_игр #процедурная_генерация #шейдеры #webaudio #webgl2

Гауссовы сплаты как система частиц: разрушаемые корпуса для рогалика на Godot

Корпус дрона игрока и боссов в нашем рогалике AsterMaster — не меш, а облако из ~6000 гауссиан, выученное по рендерам из Blender и упакованное в полмегабайта. Поэтому его можно мять, дырявить, рвать на куски и собирать обратно — целиком в вершинном шейдере Godot. В статье: зачем Gaussian Splatting в игре, где персонаж занимает сотню пикселей; пайплайн «Blender → gsplat → свой бинарный формат → Godot Compatibility» с тренировкой за 21 секунду; запечённые каналы, энтропийная бинаризация и чистка флоатеров; деструкция — кратеры, «луковица», граф опоры и куски по материалам; и честные пост-мортемы того, что не взлетело — с цифрами.

https://habr.com/ru/articles/1095208/

#gamedev #blender #инди #шейдеры #godot #pytorch #gaussian_splatting #3dgs #gsplat #деструкция

Я строил не 3D‑мир, а базовый слой под ним: три узких места в браузерном 3D

Последние месяцы я делаю 3D‑мир, который работает прямо в браузере — на Three.js: сцена, персонажи, сеть. Самое неприятное в производительности браузерного 3D — не ошибки. Ошибку видно: она в консоли, у неё есть стек и виновник. А есть второй класс проблем: всё работает, ничего не падает, просто тормозит. Консоль чистая, кадры падают, и непонятно, с чего начинать. Ниже — три таких случая из моей практики. У всех трёх общая черта: проблема не в самой отрисовке картинки, а рядом с ней. И у каждого есть конкретные цифры до и после. Речь про Three.js, но большинство выводов переносится на любой WebGL‑стек.

https://habr.com/ru/articles/1095150/

#производительность #оптимизация #javascript #рендеринг #webgl #шейдеры #threejs #браузерный_3d

В каких играх стоит побаловаться DLSS 5

3 сентября 2026 года нейронный рендеринг от NVIDIA вышел официально . Формально пока поддержка есть только в NBA 2K27. Однако энтузиасты среди геймеров с технической подготовкой уже реализовали возможность добавлять DLSS 5 практически в любую 3D-игру. Сначала это делалось вручную через установку ReShade и копирование всех необходимых библиотек в корневую папку. Но потом появились удобные утилиты, позволяющие интегрировать нейронный рендеринг парой кликов.

https://habr.com/ru/companies/ggsel/articles/1080726/

#игры #игры_и_игровые_консоли #игропром #геймдев #DLSS #dlss_5 #шейдеры

#reference "/your/path/to/shaders/CyberLab/MBZ__0__Smooth-Advance_No_Reflections/1080p_Optimized_Presets/Console_Specific_Presets/CyberLab__SNES__ADV.slangp"
HSM_ASPECT_RATIO_ORIENTATION = "1.000000"
HSM_ASPECT_RATIO_MODE = "6.000000"
halation = "0.150000"
g_cntrst = "0.450000"
g_sat = "0.250000"
halation = "0.200000"
gamma_c = "1.150000"

Сложные сайты на вайбкоде: четыре лендинга, два пути к «дорогим» эффектам и 3D-логотип из спрайтов

TL;DR Я собрал в режиме вайбкодинга четыре лендинга — три для программ МФТИ (Школа Техпреда, конференция «Точка сборки», курс «ИИ Продакт-менеджмент» aimipt.ru ) и ещё один свой, личный. Вайбкодинг здесь — это когда код пишет агент под мою постановку задачи, а я ставлю рамки, правлю и проверяю результат. У всех четырёх есть слой «дорогих» визуальных эффектов: интерактивная вода на WebGL-шейдере с освещением, 3D-логотип Физтеха из тысяч частиц-спрайтов, живая 3D-башня из кубов, облако частиц, которое морфит форму по скроллу. К этому слою я пришёл двумя разными путями. На «Точке сборки» эффекты написаны руками на чистом WebGL — ноль анимационных библиотек. На остальных работает свой движок на Three.js: вынесен отдельными файлами, переиспользуется между сайтами и откатывается на 2D-canvas, если CDN не ответит. На личном лендинге я раскачал этот движок сильнее всего. Между «насмотренностью» и кодом стоит цепочка инструментов: сначала дизайн-система в формате DESIGN.md , из неё мокап в Claude Design, из мокапа handoff-бандл и только потом перенос в код. Ниже — оба пути на реальном коде, эта цепочка и грабли, на которые я наступил. Сразу про проверяемость, чтобы не выглядело как имитация пруфов. Репозитории этих лендингов закрытые — они клиентские. Всё, что ниже выглядит как имена файлов, их размеры и счётчики, — это моя рабочая копия, по ссылке вы её не откроете. Снаружи можно проверить живые страницы и чужой референс, который я разбираю. Код в статье — фрагменты из работающих файлов, приведены как есть.

https://habr.com/ru/companies/alpinadigital/articles/1066732/

#вайбкодинг #WebGL #Threejs #шейдеры #лендинг #Claude_Code #фронтенд #GLSL #анимация #AIагенты

Рендеринг миллионов динамических связей: O(1) вместо O(N²) (но это не точно)

Привет, Хабр! В предыдущей публикации про рендеринг космического окружения в игре The 13th Sign, я обещал рассказать про то, как мы рисуем частицами персонажей. Задача уже решена и статья скоро будет, но в процессе разработки я наткнулся на кое-что не менее интересное. Под катом, конечно же, трюк – бесплатных пирожных в математике не бывает.

https://habr.com/ru/articles/1053922/

#шейдеры #gpu #vertex_shader #стохастика #оптимизация #vfx #hlsl #процедурная_графика

Живой космос на Metal: как я переписывал фон мобильной игры и поднимал FPS с 20 до 120

В мобильной разработке мы привыкли, что красивый анимированный фон — это либо видео, либо пара слоёв с CAGradientLayer и медленным параллаксом. Для большинства задач этого хватает. Но иногда хочется большего: настоящий живой космос — туманности, которые медленно перетекают друг в друга, планеты с кольцами, звёзды разных классов и в центре — чёрная дыра с аккреционным диском, как в «Интерстелларе». У меня есть небольшая аркада-раннер про полёт сквозь космос. Фон там — не картинка, а процедурная сцена, которую целиком рисует фрагментный шейдер: каждый пиксель экрана вычисляется математикой из шума. Сначала всё это жило на SpriteKit, а потом я переписал на Metal — и вот тут началось самое интересное, потому что красивая сцена на десктопе и та же сцена на телефоне — это две очень разные истории. Расскажу, как я это делал, на какие грабли наступил, и почему в итоге пришлось рисовать фон… полосками.

https://habr.com/ru/articles/1049396/

#Metal #шейдеры #оптимизация_производительности #iOS #Swift #SpriteKit #GPU #MTKView #fragment_shader #мобильная_графика

[Перевод] Как работает размытие в видеоиграх

Размытие — базовый строительный блок множества эффектов постобработки в видеоиграх , без него не обходятся красивые современные GUI . Оно используется в эффектах Depth of Field , Bloom или панелях с эффектом матового стекла современных пользовательских интерфейсов. Эффект Bloom — один из множества способов применения алгоритмов размытия Концептуально реализовать размытие легко, его принцип сводится к тому или иному способу усреднения цветов в заданном радиусе. Однако для того, чтобы выполнять его в реальном времени , понадобились десятки лет исследований и экспериментов в computer science и математике. В этой статье мы поэтапно разберём их; можно назвать это путешествием во времени в сфере программирования графики. В оригинале статьи техники размытия реализованы в реальном времени благодаря использованию GPU и возможностям WebGL браузера.

https://habr.com/ru/articles/1041710/

#blur #размытие #bloom #размытие_по_гауссу #шейдеры

JavaScript Shader Language или JSSL

Генератор GLSL-кода для WebGL, позволяющий писать шейдеры буквально на JavaScript с некоторыми условностями, используя все удобства IDE, такие как рефакторинг, подсветка синтаксиса, автокомплит и проверка на ошибки, а в математических выражениях использовать обычные JS операторы: + , - , * , / , = , += , -= , *= , /= , ++ , -- .

https://habr.com/ru/articles/1028234/

#javascript #webgl #3dграфика #программирование #шейдеры #генератор #glsl

Маяк в пустыне: Kotlin DSL для Android-шейдеров

Когда я впервые всерьёз сел писать AGSL под Android, ощущение было очень странное. С одной стороны - современный графический конвейер, RuntimeShader , RenderEffect , красивые эффекты и весь этот техно-киберпанк. С другой - шейдерный код живёт внутри строковых литералов, uniform -ы приходится объявлять и привязывать вручную, а отладка периодически начинается с философского вопроса: «в какой именно строке я сейчас всё сломал?» В какой-то момент я поймал очень «кин-дза-дзовское» настроение: вроде перед тобой космическая технология, а инструменты ощущаются так, будто тебе выдали гравицапу без инструкции и сказали: «ну ты это... лети». Можно, конечно. Но хочется, чтобы летели не только самые упорные. Собственно, так и появился RedByteFX . Я сделал его не только ради собственного удобства. Мне хотелось решить ещё одну задачу: сделать AGSL более массовой и понятной технологией для Android-разработчиков. Потому что в нативном виде AGSL мощный, но психологически для многих выглядит как «не трогай, это на Новый год». А мне хотелось, чтобы к шейдерам можно было подойти без дрожи в коленях и без ощущения, что сейчас придётся разговаривать с господином ПЖ на древнем пацакском наречии.

https://habr.com/ru/articles/1022546/

#android #kotlin #agsl #dsl #мобильная_разработка #дизайн_мобильных_приложений #мобильные_игры #шейдеры #opengl #мобильная_графика

Идеальный Outline в Unity 6: Пишем эффект обводки под новый URP Render Graph

Если вы недавно обновились до Unity 6 (или URP 17+) и попытались перенести свои старые пост-эффекты, то наверняка столкнулись с красной консолью и предупреждениями об устаревших методах. Старые туториалы по созданию эффекта обводки (Outline) через ScriptableRendererFeature больше не работают "из коробки". Unity полностью изменила архитектуру рендера, внедрив Render Graph . Старый добрый метод Execute канул в Лету, а fullscreenMesh заменили на Blitter . В этой статье мы не просто перепишем классический эффект Outline под новые реалии Unity 6. Мы решим две главные проблемы подобных шейдеров, о которых часто умалчивают в гайдах.

https://habr.com/ru/articles/1022412/

#unity_6 #urp #render_graph #outline #шейдеры #gamedev #cel_shading #hlsl #обводка #разработка_игр

Как видеокарты изменили игровую индустрию

Совсем недавно вышла Resident Evil: Requiem, которая сейчас вовсю хайпует. Капкомовцы, конечно, молодцы: умеют в сотый раз рассказать то же самое, что было в прошлых играх. К сюжету и контенту в целом есть вопросы. Для номерной части серии игра коротковата и ей не хватает эпичности (особенно в финале). Хотя назвать игру плохой язык все же не повернется. Но вот с точки зрения визуальной части эта игра — просто конфетка. Во время прохождения вы будете наслаждаться графикой, игрой света и поражаться, насколько же красивыми стали игры. Каждую локацию хочется нарезать на скриншоты и детально рассматривать. Естественно, тут пригодится видеокарта помощнее. Мы уже рассказывали о том, как видеокарты изменили киноиндустрию. Пришло время поговорить о них на примере игр.

https://habr.com/ru/companies/selectel/articles/1011218/

#selectel #gpu #cpu #nvidia #видеокарты #игры #графика #шейдеры #рендеринг

[Перевод] Создание процедурной карты шестиугольников при помощи коллапса волновой функции

Я был одержим процедурными картами с ещё детства, когда кидал кубики на таблицы случайных подземелий из AD&D Dungeon Master's Guide. В этом есть что-то волшебное — ты не проектируешь подземелье, а исследуешь его, помещение за помещением, а кубики решают, попадёшь ли ты в сокровищницу или в тупик с кучей крыс. Спустя годы я решил создать собственный генератор карт. Он создаёт маленькие средневековые островные миры с дорогами, реками, побережьями, горами, лесами и деревьями. И всё это полностью процедурным образом. Генератор написан на Three.js WebGPU с TSL-шейдерами, примерно 4100 шестиугольников в 19 сетках генерируются за ~20 секунд.

https://habr.com/ru/articles/1008562/

#wave_function_collapse #wfc #threejs #шейдеры #webgpu #tsl

[Перевод] 3D-шейдер реального времени на Game Boy Color

Я написал игру для Game Boy Color, которая рендерит изображения в реальном времени. Игрок управляет источником света и вращает объект. Поиграть в неё можно здесь: https://blog.otterstack.com/posts/202512-gbshader/data/teapot.html Посмотреть код и скачать ROM можно здесь: https://github.com/nukep/gbshader

https://habr.com/ru/articles/995412/

#blender #game_boy #game_boy_color #шейдеры

[Перевод] Поделюсь с вами всем, что успел изучить о градиентном шуме

Скорее всего, вам доводилось слышать о градиентном шуме , вернее, о той его версии, которая называется шум Перлина и описывает одну конкретную реализацию, сопряжённую с различными оптимизациями на уровне ЦП. Поскольку это невероятно мощный инструмент для творческой работы, он используется практически везде: при создании визуальных эффектов, видеоигр, процедурно-математического искусства и т.д. Да, как следует настроить его — порой тонкая работа, и неисправная реализация на первый взгляд всё равно может выглядеть хорошо или интересно. В конце концов, «смотрится неплохо, а я художник, я так вижу». Чтобы глубже и результативнее понять градиентный шум, мы сначала изучим его одномерную версию (в литературе этот случай обычно не рассматривается), а затем медленно пойдём вверх по лестнице измерений в сторону усложнения задачи. Эту тему мы будем рассматривать с точки зрения графического процессора (GPU), а не с точки зрения обычного ЦП. Все примеры кода и анимации, приведённые в этой статье, реализованы на WebGL2/GLSL (надеюсь, это будет не слишком сильно сказываться на производительности). Примеры должны работать на большинстве современных устройств.

https://habr.com/ru/articles/970358/

#шум #эффекты #математика #шейдеры #программирование

Дитеринг и бандинг в Unity URP: как избавиться от полос и артефактов

Всем привет! Меня зовут Григорий Дядиченко, и я разрабатываю разные проекты на заказ. Сегодня хотелось бы поговорить про дитеринг и бандинг — две стороны одной медали в мире компьютерной графики.

https://habr.com/ru/articles/966886/

#Unity_URP #дитеринг #бандинг #шейдеры #компьютерная_графика #рендеринг #визуальные_артефакты #оптимизация_графики #Alpha_Clipping #Blue_Noise

Oriol Engine: как мы решили проблему кросс-компиляции шейдеров

${habrauser} , Привет! При разработке игрового фреймворка Oriol Engine (которая, к слову, до сих пор ведётся) мы столкнулись с проблемой написания шейдеров для Cross-API рендеринга. В RHI-слой данного фреймворка было запланировано добавить поддержку таких графических API , как DX11/DX12 , OpenGL и Vulkan . И вот тут возникает вопрос: как же писать шейдеры на одном языке и обеспечить их поддержку на других графических API ?

https://habr.com/ru/articles/963306/

#HLSL #glsl #шейдеры #компиляторы

[Перевод] Flutter: Исчерпывающее руководство по высокопроизводительному рендерингу Canvas’а — Часть 1

Когда дело доходит до создания сложных и высокопроизводительных приложений во Flutter, работа с Canvas может стать настоящим вызовом. В этой статье мы погружаемся в тонкости рендеринга динамичных сцен, от оптимизации GPU и пакетирования команд до продвинутых техник работы с пространственными данными. Мы рассмотрим методы, которые позволят вам создавать плавные и визуально насыщенные интерфейсы, даже когда сцены становятся всё сложнее. Обсудим, как правильно выбрать стратегию рендеринга, оптимизировать отрисовку и внедрить систему камеры для масштабируемых приложений. Если вы стремитесь улучшить производительность вашего Flutter-приложения, эта статья поможет вам освоить ключевые техники и подходы.

https://habr.com/ru/companies/otus/articles/935384/

#flutter #Canvas #Рендеринг #Высокая_производительность #Оптимизация_рендеринга #CustomPaint #RenderObject #LeafRenderObjectWidget #GPU_ускорение #Шейдеры

О графике в Unity: Графический конвейер

Всем привет! Меня зовут Григорий Дядиченко , я уже что-то разрабатываю на Unity десять лет. Давно ничего не писал, и тут собрался с силами и решил, что хочу написать про компьютерную графику. А точнее пройтись по её базе в контексте Unity. Если интересуетесь темой — добро пожаловать под кат!

https://habr.com/ru/articles/927304/

#графический_конвейер #рендеринг #unity #unity3d #urp #hdrp #builtin #шейдеры

SRP ч2, Уравнение рендеринга. Функции освещения

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

https://habr.com/ru/articles/923220/

#cgi #rendering #уравнение_рендеринга #шейдеры #освещение #ltc

Разбор полёта: как мы поздравляем с 14 февраля при помощи процедурной анимации

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

https://habr.com/ru/companies/skbkontur/articles/904316/

#shadertoy #шейдер #шейдеры #процедурные_анимации #графика

[Перевод] Карты высот для пиксельной игры с видом сверху

Для «движка», разработанного мной для моей игры , я использую карты высот пиксельной графики, чтобы реализовать различные крутые эффекты: динамическую высоту воды, пересекающуюся геометрию, декали, 3D-освещение и даже z-сортировку сцены.

https://habr.com/ru/articles/894744/

#карта_высот #шейдеры #height_map #пиксельарт

[Перевод] Изучаем программирование шейдеров с Риком и Морти

Эта анимация Рика состоит из 240 строк кода. Никаких библиотек и изображений. В статье я покажу, как использовать шейдеры GPU и поля расстояний со знаком для создания подобных анимаций для видео, видеоигр и просто для развлечения! В оригинале статьи даже есть интерактивный редактор кода, благодаря которому вы сможете поэкспериментировать с примерами.

https://habr.com/ru/articles/880352/

#glsl #шейдеры #shaders #программирование_шейдеров

[Перевод] Шейдер береговой линии для Unity

В своей работе я больше склоняюсь к стилизованной картинке, однако полученный в статье результат можно будет адаптировать и для реалистичного стиля/PBR. В этом посте мы поговорим о шейдере воды, относящемся к береговой линии, не касаясь материала песка и других деталей воды, например, преломления и каустики (о них можно прочитать в Water Shader Breakdown или по другим ссылкам в разделе Water на странице Resources ). Впрочем, шейдер выполняет и смешение прозрачности/альфы, чтобы затенить материал под ним для симуляции мокрого песка. Мы поговорим о двух способах наложения волн в сцене: при помощи текстуры глубин и ручных UV . Ниже я перечислю замечания, плюсы и минусы каждого способа. В последующих разделах мы поработаем над ними по очереди.

https://habr.com/ru/articles/867794/

#unity #шейдеры #blender #процедурная_генерация #shader_graph

[Перевод] Как устроен эффект ядерного взрыва в Fallout 4

Давайте исследуем одну загадку: как Bethesda смогла сделать такие грибообразные облака ядерных взрывов?

https://habr.com/ru/articles/869752/

#fallout_4 #анимация #шейдеры #текстуры

[Перевод] Оптимизация ядра WebGPU для перемножения матриц и достижения производительности свыше 1ТФЛОПС

Пишем Surfgrad, высокопроизводительную библиотеку для автоматического дифференцирования выражений при помощи WebGPU. Я работаю в компании Nomic , и многие из моих коллег заняты созданием больших TSNE -подобных визуализаций, работающих в браузере. При визуализации таких двумерных карт возникает две проблемы: проецировать эти конструкции (напр. TSNE и UMAP ) в 2D-координатную систему протекает медленно и требует больших затрат оперативной памяти, особенно по мере того, как вы увеличиваете датасет и пытаетесь визуализировать в браузере миллионы точек данных, не расплавив при этом ноутбук невзначай. Отобразить в браузере миллионы точек данных, не расплавив компьютер — та ещё задача. Мне доводилось слышать, что многие проблемы с масштабированием удаётся решать при помощи инструмента Deepscatter , разработанного Беном Шмидтом. Но многие из таких разговоров, которые мне известны, вертятся вокруг Typescript и великолепия WebGPU как такового. Готовя эту статью, я не смог найти ни одной библиотеки для автоматического дифференцирования выражений, которая была бы написана с применением WebGPU. Но было бы упущением не назвать здесь два репозитория с функционально схожим наполнением: webGPT (библиотека на основе трансформеров, приспособлена только для логического вывода) и webgpu-blas (ядра для быстрого перемножения матриц под webGPU). Поэтому, в качестве самообразования и желая получше изучить WebGPU и Typescript, я решил написать Surfgrad , высокопроизводительную библиотеку для автоматического дифференцирования выражений под управлением WebGPU. Она обеспечивает тензорные операции в браузере. Как понятно по названию и по принципу работы, она во многом сделана по примеру tinygrad и micrograd .

https://habr.com/ru/articles/864330/

#CUDA #шейдеры #оптимизация #высокая_производительность

О трёхмерной графике в GMS2. Часть 2 из 2

Что такое вершинный буфер? Как создать трёхмерный объект и отрисовать его на экран? Для чего нужен формат вершин и как с ним работает вертексный шейдер? Как работает буфер глубины и что такое борьба за глубину? Как это влияет на полупрозрачность и почему важен порядок отрисовки объектов на экран? Как посчитать координаты камеры и задать перспективу? Для чего нужны матрицы и как ими пользоваться? Что такое отсечение и зачем оно нужно?

https://habr.com/ru/articles/842626/

#gms2 #game_maker_studio #shaders #шейдеры #game_maker #gms #gamedev #геймдев #vertex_shader #gamedevelopment

О трёхмерной графике в GMS2. Часть 1 из 2

Что такое вершинный буфер? Как создать трехмерный объект и отрисовать его на экран? Для чего нужен формат вершин и как с ним работает вертексный шейдер? Как работает буфер глубины и что такое борьба за глубину? Как это влияет на полупрозрачность и почему важен порядок отрисовки объектов на экран? Как посчитать координаты камеры и задать перспективу? Для чего нужны матрицы и как ими пользоваться? Что такое отсечение и зачем оно нужно?

https://habr.com/ru/articles/840298/

#gms2 #game_maker_studio #shaders #шейдеры #game_maker #gms #gamedev #геймдев #vertex_shader #gamedevelopment

О шейдерах в Game Maker Studio 2

Как работают шейдеры в GMS2? Как их писать и использовать? Что означают термины attribute , varying и uniform ? Какой тип шейдера выбрать? Почему шейдер всегда состоит из двух файлов? Чем отличается вершинный шейдер от фрагментного? И причём здесь треугольники?

https://habr.com/ru/articles/839906/

#gms2 #game_maker_studio #shaders #шейдеры #game_maker #gms #геймдев #gamedev #vertex_shaders #gamedevelopment

[Перевод] GPU-вычисления в браузере на скорости нативного приложения: марширующие кубы на WebGPU

WebGPU — это мощный GPU-API для веба, поддерживает продвинутые рендеринговые конвейеры и вычислительные конвейеры GPU. WebGPU ключевым образом отличается от WebGL своей поддержкой вычислительных шейдеров и буферов хранения данных. В WebGL такие возможности отсутствуют, а WebGPU, в свою очередь, позволяет целиком выполнять в браузере мощные приложения, требующие вычислений на GPU. Речь может идти о самых разных приложениях, от GPGPU (напр., симуляции, обработка/анализ данных, машинное обучение, т.д.) до конвейеров рендеринга на основе GPU-вычислений — а также о многих других приложениях в этом спектре. В этой статье мы оценим вычислительную мощность WebGPU, сравнив её с показателями Vulkan. Для этого мы реализуем классический алгоритм «марширующие кубы» (Marching Cubes) для WebGPU. Алгоритм марширующих кубов почти без оговорок относится к чрезвычайно параллельным, в составе этого алгоритма выполняется два глобальных шага редукции, необходимых для синхронизации местоположений рабочих элементов и вывода потоков. Поэтому данное решение — отличный вариант GPU-параллельного алгоритма, который стоит первым делом попробовать на новой платформе. Дело в том, что он достаточно сложен, чтобы API испытал давление сразу по нескольким направлениям сверх элементарных параллельных операций диспетчеризации в ядре. При этом он не столь сложен, чтобы на его реализацию требовалось существенное время, а также он не превращается в узкое место из-за ограничения производительности ЦП.

https://habr.com/ru/articles/811519/

#Vulkan #CUDA #webgpu #программирование #компьютерная_графика #геометрия #шейдеры