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

JavaScript Shader Language или JSSL

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

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

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

JavaScript Shader Language или JSSL

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

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

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

JavaScript Shader Language или JSSL

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

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

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

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 #обводка #разработка_игр

Идеальный 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 #обводка #разработка_игр

Идеальный 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 #обводка #разработка_игр

Идеальный 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

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

Я был одержим процедурными картами с ещё детства, когда кидал кубики на таблицы случайных подземелий из 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

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

Я был одержим процедурными картами с ещё детства, когда кидал кубики на таблицы случайных подземелий из 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

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

Я был одержим процедурными картами с ещё детства, когда кидал кубики на таблицы случайных подземелий из 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/

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

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

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

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

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

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

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

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

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

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

Скорее всего, вам доводилось слышать о градиентном шуме , вернее, о той его версии, которая называется шум Перлина и описывает одну конкретную реализацию, сопряжённую с различными оптимизациями на уровне ЦП. Поскольку это невероятно мощный инструмент для творческой работы, он используется практически везде: при создании визуальных эффектов, видеоигр, процедурно-математического искусства и т.д. Да, как следует настроить его — порой тонкая работа, и неисправная реализация на первый взгляд всё равно может выглядеть хорошо или интересно. В конце концов, «смотрится неплохо, а я художник, я так вижу». Чтобы глубже и результативнее понять градиентный шум, мы сначала изучим его одномерную версию (в литературе этот случай обычно не рассматривается), а затем медленно пойдём вверх по лестнице измерений в сторону усложнения задачи. Эту тему мы будем рассматривать с точки зрения графического процессора (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_ускорение #Шейдеры

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

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

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

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

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

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

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

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

[Перевод] 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 #шейдеры

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

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

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

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

О графике в 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 #программирование #компьютерная_графика #геометрия #шейдеры

[Перевод] Как мы уложили компьютерный мультик в 8 кБ

В ноябре 2022 года мы задали себе задачку: можно ли запрограммировать анимацию, воспроизводимую в режиме реального времени как обычный короткий мультик, но с условием, что файл должен быть не больше 8 килобайт. При этом цель считалась бы достигнутой, если бы у нас получилась нормальная графика, анимация, режиссёрская и операторская работа, а ещё подходящая музыка. Да, 8 килобайт – на секундочку, в два с лишним раза меньше этого поста. Мы не представляли, насколько это вообще возможно, так что оставалось только попробовать. В апреле 2023 года, спустя несколько месяцев работы, мы, наконец, выкатили ленту Барашек и цветок . Можете сами скачать его или проследить на YouTube ход выполнения программы: Нас многие спрашивали, как нам удалось создать нечто подобное. В статье будут объяснены технические детали и те ограничения, которые пришлось учитывать при проектировании перед выводом этого проекта в продакшен. Кроме того, мы выложили весь исходный код на GitHub .

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

#шейдеры #3D #оптимизация #занимательные_задачи #компьютерная_графика