Mastodon on ZHub

0 posts0 participants0 posts today

Habr[Перевод] Изучаем программирование шейдеров с Риком и МортиЭта анимация Рика состоит из 240 строк кода. Никаких библиотек и изображений. В статье я покажу, как использовать шейдеры GPU и поля расстояний со знаком для создания подобных анимаций для видео, видеоигр и просто для развлечения! В оригинале статьи даже есть интерактивный редактор кода, благодаря которому вы сможете поэкспериментировать с примерами.<a href="https://habr.com/ru/articles/880352/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/articles/880352/</a><a href="https://zhub.link/tags/glsl" class="mention hashtag" rel="tag">#glsl</a> <a href="https://zhub.link/tags/%D1%88%D0%B5%D0%B9%D0%B4%D0%B5%D1%80%D1%8B" class="mention hashtag" rel="tag">#шейдеры</a> <a href="https://zhub.link/tags/shaders" class="mention hashtag" rel="tag">#shaders</a> <a href="https://zhub.link/tags/%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%88%D0%B5%D0%B9%D0%B4%D0%B5%D1%80%D0%BE%D0%B2" class="mention hashtag" rel="tag">#программирование_шейдеров</a>

Alexey Rodionovimage-palette-webgpu is a tiny zero-dependency browser JS library by Ivan Ludvig Tereshko and me that extracts dominant colors from images with various algorithms using WebGPU API.NPM: <a href="https://npmjs.com/package/image-palette-webgpu" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://npmjs.com/package/image-palette-webgpu</a>GitHub: <a href="https://github.com/IvanLudvig/image-palette-webgpu" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/IvanLudvig/image-palette-webgpu</a>Live demo: <a href="https://ivanludvig.dev/image-palette-webgpu/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ivanludvig.dev/image-palette-webgpu/</a>There are plans to add tests and benchmarks as well.<a href="https://mastodon.social/tags/webgpu" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webgpu</a> <a href="https://mastodon.social/tags/wgpu" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#wgpu</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/gpu" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gpu</a> <a href="https://mastodon.social/tags/wgsl" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#wgsl</a> <a href="https://mastodon.social/tags/shader" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shader</a> <a href="https://mastodon.social/tags/shaders" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shaders</a>

Steven DollinsShade between the lines<a href="https://genart.social/tags/AlgorithmicArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#AlgorithmicArt</a> <a href="https://genart.social/tags/CreativeCoding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CreativeCoding</a> <a href="https://genart.social/tags/maze" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#maze</a> <a href="https://genart.social/tags/Processing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Processing</a> <a href="https://genart.social/tags/glsl" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#glsl</a> <a href="https://genart.social/tags/shaders" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shaders</a>

Steven DollinsA loop of circles<a href="https://genart.social/tags/genuary" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#genuary</a> <a href="https://genart.social/tags/genuary2025" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#genuary2025</a> <a href="https://genart.social/tags/genuary24" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#genuary24</a> <a href="https://genart.social/tags/AlgorithmicArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#AlgorithmicArt</a> <a href="https://genart.social/tags/CreativeCoding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CreativeCoding</a> <a href="https://genart.social/tags/simulation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#simulation</a> <a href="https://genart.social/tags/Processing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Processing</a> <a href="https://genart.social/tags/glsl" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#glsl</a> <a href="https://genart.social/tags/shaders" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shaders</a>

HabrРазбор рендеринга в Unity, часть первая: Built-in renderingНаверное, все игровые разработчики знают, как происходит рендеринг. Ну там вертексы, треугольники, растеризация, буфер экрана... Но детали процесса для многих внезапно являются сюрпризом. Например, сколько раз рендерится объект в Unity (да и в других движках) в обычном случае? Один?... Если разработчик отключит все что можно, то да. Но как правило - минимум 2. А может быть и 8 раз. Как так? Добро пожаловать в удивительный мир рендеринга...<a href="https://habr.com/ru/articles/873050/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/articles/873050/</a><a href="https://zhub.link/tags/Unity" class="mention hashtag" rel="tag">#Unity</a> <a href="https://zhub.link/tags/Shaders" class="mention hashtag" rel="tag">#Shaders</a> <a href="https://zhub.link/tags/cg" class="mention hashtag" rel="tag">#cg</a> <a href="https://zhub.link/tags/%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0_%D0%B8%D0%B3%D1%80" class="mention hashtag" rel="tag">#разработка_игр</a>

HabrМорфинг геометрических фигур с SDF в фрагментных шейдерах GLSL и визуализацией на Jetpack ComposeСоздание динамичных визуальных эффектов для мобильных приложений требует от разработчиков не только творческого подхода, но и соблюдения требований к производительности. Одной из наиболее эффективных техник для реализации плавных переходов и трансформаций объектов является использование шейдеров, которые позволяют выполнять сложные параллельные вычисления на GPU. Это не только обеспечивает плавность анимаций, но также может снизить нагрузку на CPU, делегируя ресурсоемкие задачи графическому процессору в определенных сценариях, что особенно важно для мобильных устройств с ограниченными ресурсами. В данной статье будет рассмотрен пример реализации плавной анимации морфинга геометрических фигур с использованием SDF (Signed Distance Functions) и GLSL для графического рендеринга.<a href="https://habr.com/ru/articles/872728/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/articles/872728/</a><a href="https://zhub.link/tags/glsl" class="mention hashtag" rel="tag">#glsl</a> <a href="https://zhub.link/tags/shaders" class="mention hashtag" rel="tag">#shaders</a> <a href="https://zhub.link/tags/opengl" class="mention hashtag" rel="tag">#opengl</a> <a href="https://zhub.link/tags/opengl_es_20" class="mention hashtag" rel="tag">#opengl_es_20</a> <a href="https://zhub.link/tags/shader" class="mention hashtag" rel="tag">#shader</a> <a href="https://zhub.link/tags/signed_distance_fields" class="mention hashtag" rel="tag">#signed_distance_fields</a> <a href="https://zhub.link/tags/andorid" class="mention hashtag" rel="tag">#andorid</a> <a href="https://zhub.link/tags/android_development" class="mention hashtag" rel="tag">#android_development</a> <a href="https://zhub.link/tags/jetpack_compose" class="mention hashtag" rel="tag">#jetpack_compose</a>

HabrОблачные Котики и Эффектные светлячкиПривет, друзья! Мяу! 🐾✨ Делаю игру "Cloud Cats` Land", и хочу поделиться с вами увлекательным процессом создания. Работала недавно над милыми цветочками-светлячочками:<a href="https://habr.com/ru/articles/865562/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/articles/865562/</a><a href="https://zhub.link/tags/indie" class="mention hashtag" rel="tag">#indie</a> <a href="https://zhub.link/tags/shader" class="mention hashtag" rel="tag">#shader</a> <a href="https://zhub.link/tags/shaders" class="mention hashtag" rel="tag">#shaders</a> <a href="https://zhub.link/tags/indiedev" class="mention hashtag" rel="tag">#indiedev</a> <a href="https://zhub.link/tags/gamedev" class="mention hashtag" rel="tag">#gamedev</a> <a href="https://zhub.link/tags/%D0%B8%D0%B3%D1%80%D1%8B" class="mention hashtag" rel="tag">#игры</a> <a href="https://zhub.link/tags/gamedesign" class="mention hashtag" rel="tag">#gamedesign</a>

HabrО трёхмерной графике в GMS2. Часть 2 из 2Что такое вершинный буфер? Как создать трёхмерный объект и отрисовать его на экран? Для чего нужен формат вершин и как с ним работает вертексный шейдер? Как работает буфер глубины и что такое борьба за глубину? Как это влияет на полупрозрачность и почему важен порядок отрисовки объектов на экран? Как посчитать координаты камеры и задать перспективу? Для чего нужны матрицы и как ими пользоваться? Что такое отсечение и зачем оно нужно?<a href="https://habr.com/ru/articles/842626/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/articles/842626/</a><a href="https://zhub.link/tags/gms2" class="mention hashtag" rel="tag">#gms2</a> <a href="https://zhub.link/tags/game_maker_studio" class="mention hashtag" rel="tag">#game_maker_studio</a> <a href="https://zhub.link/tags/shaders" class="mention hashtag" rel="tag">#shaders</a> <a href="https://zhub.link/tags/%D1%88%D0%B5%D0%B9%D0%B4%D0%B5%D1%80%D1%8B" class="mention hashtag" rel="tag">#шейдеры</a> <a href="https://zhub.link/tags/game_maker" class="mention hashtag" rel="tag">#game_maker</a> <a href="https://zhub.link/tags/gms" class="mention hashtag" rel="tag">#gms</a> <a href="https://zhub.link/tags/gamedev" class="mention hashtag" rel="tag">#gamedev</a> <a href="https://zhub.link/tags/%D0%B3%D0%B5%D0%B9%D0%BC%D0%B4%D0%B5%D0%B2" class="mention hashtag" rel="tag">#геймдев</a> <a href="https://zhub.link/tags/vertex_shader" class="mention hashtag" rel="tag">#vertex_shader</a> <a href="https://zhub.link/tags/gamedevelopment" class="mention hashtag" rel="tag">#gamedevelopment</a>

HabrО трёхмерной графике в GMS2. Часть 1 из 2Что такое вершинный буфер? Как создать трехмерный объект и отрисовать его на экран? Для чего нужен формат вершин и как с ним работает вертексный шейдер? Как работает буфер глубины и что такое борьба за глубину? Как это влияет на полупрозрачность и почему важен порядок отрисовки объектов на экран? Как посчитать координаты камеры и задать перспективу? Для чего нужны матрицы и как ими пользоваться? Что такое отсечение и зачем оно нужно?<a href="https://habr.com/ru/articles/840298/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/articles/840298/</a><a href="https://zhub.link/tags/gms2" class="mention hashtag" rel="tag">#gms2</a> <a href="https://zhub.link/tags/game_maker_studio" class="mention hashtag" rel="tag">#game_maker_studio</a> <a href="https://zhub.link/tags/shaders" class="mention hashtag" rel="tag">#shaders</a> <a href="https://zhub.link/tags/%D1%88%D0%B5%D0%B9%D0%B4%D0%B5%D1%80%D1%8B" class="mention hashtag" rel="tag">#шейдеры</a> <a href="https://zhub.link/tags/game_maker" class="mention hashtag" rel="tag">#game_maker</a> <a href="https://zhub.link/tags/gms" class="mention hashtag" rel="tag">#gms</a> <a href="https://zhub.link/tags/gamedev" class="mention hashtag" rel="tag">#gamedev</a> <a href="https://zhub.link/tags/%D0%B3%D0%B5%D0%B9%D0%BC%D0%B4%D0%B5%D0%B2" class="mention hashtag" rel="tag">#геймдев</a> <a href="https://zhub.link/tags/vertex_shader" class="mention hashtag" rel="tag">#vertex_shader</a> <a href="https://zhub.link/tags/gamedevelopment" class="mention hashtag" rel="tag">#gamedevelopment</a>

HabrО шейдерах в Game Maker Studio 2Как работают шейдеры в GMS2? Как их писать и использовать? Что означают термины attribute , varying и uniform ? Какой тип шейдера выбрать? Почему шейдер всегда состоит из двух файлов? Чем отличается вершинный шейдер от фрагментного? И причём здесь треугольники?<a href="https://habr.com/ru/articles/839906/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/articles/839906/</a><a href="https://zhub.link/tags/gms2" class="mention hashtag" rel="tag">#gms2</a> <a href="https://zhub.link/tags/game_maker_studio" class="mention hashtag" rel="tag">#game_maker_studio</a> <a href="https://zhub.link/tags/shaders" class="mention hashtag" rel="tag">#shaders</a> <a href="https://zhub.link/tags/%D1%88%D0%B5%D0%B9%D0%B4%D0%B5%D1%80%D1%8B" class="mention hashtag" rel="tag">#шейдеры</a> <a href="https://zhub.link/tags/game_maker" class="mention hashtag" rel="tag">#game_maker</a> <a href="https://zhub.link/tags/gms" class="mention hashtag" rel="tag">#gms</a> <a href="https://zhub.link/tags/%D0%B3%D0%B5%D0%B9%D0%BC%D0%B4%D0%B5%D0%B2" class="mention hashtag" rel="tag">#геймдев</a> <a href="https://zhub.link/tags/gamedev" class="mention hashtag" rel="tag">#gamedev</a> <a href="https://zhub.link/tags/vertex_shaders" class="mention hashtag" rel="tag">#vertex_shaders</a> <a href="https://zhub.link/tags/gamedevelopment" class="mention hashtag" rel="tag">#gamedevelopment</a>

HabrМифы об Unreal Engine 5 — NaniteДоброго времени суток, Успех новой версии Unreal Engine не оставил без внимания профессионалов всех мастей. Попытки поддать происходящую революцию рациональному объяснению - затмило умы самых упрямых юнити-делов. Журналисты проводят сравнения со всем подряд что только подвернётся, чтобы попытаться перевести технологии из мира идей в любое доступное пространство. Ходят слухи, что пара кодеров поступила в психиатрическое отделение, они лишь запинаясь повторяли о mesh-шейдерах. А те кто видел исходники, поговаривают о необычайном цвете кода, явно, не из нашего мира, возможно тема была, даже - светлой. Всё это безумие породило мифы и целые культы, рей-трейсер пошёл на рей-трейсера, рей-кастера размазало между кадрами, Z-брашер, с диким хохотом, скопипастил два мазка кистью по фотоскану непристойных моделей прямо в игру, даже Чат-GPT назвала демонстрацию - deep-fake’ом, а новости - вбросом. Кролл съел дракона, собаки и кошки.. а да, о чём это я.. В общем, я не могу вам сказать, чем является на самом деле этот ваш Nanite, но я могу вам сказать, чем он точно не является. И так.. Свет. Занавес. Nanite<a href="https://habr.com/ru/articles/778708/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://habr.com/ru/articles/778708/</a><a href="https://zhub.link/tags/Unreal_Engine" class="mention hashtag" rel="tag">#Unreal_Engine</a> <a href="https://zhub.link/tags/gamedev" class="mention hashtag" rel="tag">#gamedev</a> <a href="https://zhub.link/tags/game_development" class="mention hashtag" rel="tag">#game_development</a> <a href="https://zhub.link/tags/%D0%B8%D0%B3%D1%80%D1%8B" class="mention hashtag" rel="tag">#игры</a> <a href="https://zhub.link/tags/shaders" class="mention hashtag" rel="tag">#shaders</a>

Recent searches

Search options

Administered by:

Server stats:

#shaders