Навыки shader-programming-glsl
📦

shader-programming-glsl

Безопасно

Пишите GPU-шейдеры на GLSL

Создавайте потрясающие визуальные эффекты и оптимизируйте рендеринг графики с помощью GPU-шейдеров. Это руководство учит синтаксису GLSL, вершинным и фрагментным шейдерам, а также математике шейдеров для графики в реальном времени.

Поддерживает: Claude Codex Code(CC)
📊 70 Адекватно
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «shader-programming-glsl». Создай шейдер с эффектом пульсирующего свечения по центру экрана

Ожидаемый результат:

Фрагментный шейдер с использованием smoothstep и sin-функций на основе времени для создания анимации радиального градиента с интерполяцией цвета от центра к краям

Использование «shader-programming-glsl». Как оптимизировать этот цикл шейдера, который выполняет 100 итераций?

Ожидаемый результат:

Рекомендации: уменьшить количество итераций, использовать ранний выход, предварительно вычислять константы на CPU и заменить ветвление на функции step/mix для лучшей производительности GPU

Аудит безопасности

Безопасно
v1 • 2/25/2026

All 33 static analysis findings are false positives. The SKILL.md file is educational documentation about GLSL shader programming. Backtick-quoted text represents GLSL code examples in markdown format, not shell command execution. C2 keywords and system reconnaissance patterns are GLSL built-in variables (gl_Position, gl_FragColor, varying) and shader language syntax. No actual security risks detected.

1
Просканировано файлов
122
Проанализировано строк
0
находки
1
Всего аудитов
Проблем безопасности не найдено
Проверено: claude

Оценка качества

38
Архитектура
100
Сопровождаемость
87
Контент
31
Сообщество
100
Безопасность
83
Соответствие спецификации

Что вы можете построить

Веб-разработчик создаёт интерактивную визуализацию

Написание кастомных шейдеров для проектов Three.js: анимированные фоны, системы частиц и эффекты постобработки для сайтов.

Игровой разработчик внедряет кастомные эффекты

Написание шейдеров для Unity или Unreal Engine для создания уникальных визуальных стилей, генерации ландшафтов и эффектов освещения в реальном времени.

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

Эксперименты с процедурной генерацией с использованием SDF, raymarching и техник фрагментных шейдеров для цифровых арт-инсталляций.

Попробуйте эти промпты

Базовая настройка фрагментного шейдера 
Помоги написать базовый фрагментный шейдер GLSL, который создаёт градиент цвета на основе UV-координат для использования в Three.js.
Вершинный шейдер с трансформацией 
Создай вершинный шейдер, который применяет волновую деформацию к мешу используя uniform time и функции sin/cos.
Raymarching SDF сцен�� 
Создай фрагментный шейдер с raymarching и несколькими SDF-формами (сфера и коробка), объединёнными с помощью операций плавного объединения.
Эффект постобработки 
Напиши шейдер постобработки bloom, который извлекает яркие пиксели, применяет гауссово размытие и композирует поверх исходного изображения.

Лучшие практики

  • Используйте mix() для интерполяции и step()/smoothstep() для пороговых значений вместо условного ветвления if-else
  • Предварительно вычисляйте константы на CPU и передавайте их как uniforms вместо вычисления в шейдере
  • Упа��овывайте связанные данные в vec4 для минимизации пропускной способности памяти и использования векторных блоков GPU

Избегать

  • Массивное условное ветвление внутри циклов снижает параллелизм GPU и вызывает расхождение потоков
  • Вычисление статических значений для каждого фрагмента вместо передачи предварительно вычисленных uniforms с CPU
  • Избыточная точность (использование highp, когда достаточно mediump) увеличивает расход пропускной способности и энергии на мобильных устройствах

Часто задаваемые вопросы

В чём разница между вершинными и фрагментными шейдерами?
Вершинные шейдеры преобразуют 3D-позиции вершин в 2D-экранные координаты. Фрагментные шейдеры определяют итоговый цвет каждого пикселя. Вершинные шейдеры выполняются один раз на вершину; фрагментные шейдеры — один раз на пиксель.
Почему мой шейдер показывает чёрный экран?
Проверьте, что gl_Position.w равно 1.0, убедитесь, что uniforms установлены из вашего хост-приложения, проверьте, что UV-координаты находятся в диапазоне 0-1, и подтвердите, что шейдер скомпилировался без ошибок.
Что означает swizzling в GLSL?
Swizzling позволяет менять порядок или выбирать компоненты вектора с помощью суффиксов .xyzw, .rgba или .stpq. Например, color.zyx переворачивает каналы RGB vec3.
Как передать данные из вершинного шейдера во фрагментный?
Используйте ключевое слово varying. Объявите varying в обоих шейдерах, присвойте его в вершинном шейдере и читайте во фрагментном. Значения интерполируются по примитиву.
Что такое raymarching и когда его следует использовать?
Raymarching рендерит 3D-сцены, шагая вдоль лучей с использованием signed distance functions. Используйте его для процедурной геометрии, органических форм и эффектов, сложных для традиционной растеризации.
Как улучшить производительность шейдеров на мобильных устройствах?
Используйте точность mediump, когда это возможно, минимизируйте обращения к текстурам, уменьшайте количество итераций цикла, избегайте динамического ветвления и предварительно вычисляйте сложные вычисления на CPU.

Сведения для разработчиков

Автор

sickn33

Лицензия

MIT

Репозиторий

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/shader-programming-glsl

Ссылка

main

Структура файлов

📄 SKILL.md