スキル shader-programming-glsl
📦

shader-programming-glsl

安全

Escreva Shaders de GPU com GLSL

Crie efeitos visuais deslumbrantes e otimize a renderização de gráficos com shaders de GPU. Este guia ensina sintaxe GLSL, shaders de vértice e fragmento, e matemática de shaders para gráficos em tempo real.

対応: Claude Codex Code(CC)
📊 70 十分
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「shader-programming-glsl」を使用しています。 Crie um shader que faz um efeito de brilho pulsante centralizado na tela

期待される結果:

Um fragment shader usando smoothstep e funções sin baseadas em tempo para criar animação de gradiente radial com interpolação de cor do centro para as bordas

「shader-programming-glsl」を使用しています。 Como otimizo este loop de shader que executa 100 iterações?

期待される結果:

Recomendações para reduzir a contagem de iterações, usar terminação antecipada, pré-calcular constantes na CPU e substituir branching por funções step/mix para melhor desempenho de 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
仕様準拠

作れるもの

Desenvolvedor Web Criando Visuais Interativos

Construa shaders personalizados para projetos Three.js, incluindo fundos animados, sistemas de partículas e efeitos de pós-processamento para sites.

Desenvolvedor de Jogos Implementando Efeitos Personalizados

Escreva shaders para Unity ou Unreal Engine para criar estilos visuais únicos, geração de terreno e efeitos de iluminação em tempo real.

Creative Coder Explorando Arte Generativa

Experimente geração procedimental usando SDFs, raymarching e técnicas de fragment shaders para instalações de arte digital.

これらのプロンプトを試す

Configuração Básica de Fragment Shader 
Ajude-me a escrever um fragment shader GLSL básico que cria um gradiente de cor baseado em coordenadas UV para uso no Three.js.
Vertex Shader com Transformação 
Gere um vertex shader que aplica uma deformação de onda a uma malha usando um uniform de tempo e funções sin/cos.
Cena Raymarching SDF 
Crie um fragment shader raymarching com múltiplas formas SDF (esfera e caixa) combinadas usando operações de união suave.
Efeito de Pós-Processamento 
Escreva um shader de pós-processamento bloom que extrai pixels brilhantes, aplica desfoque gaussiano e compõe de volta sobre a imagem original.

ベストプラクティス

  • Use mix() para interpolação e step()/smoothstep() para limites em vez de branching if-else
  • Pré-calcule valores constantes na CPU e passe como uniforms em vez de calcular no shader
  • Empacote dados relacionados em vec4 para minimizar largura de banda de memória e aproveitar unidades vetoriais da GPU

回避

  • Branching condicional pesado dentro de loops reduz paralelismo da GPU e causa divergência de threads
  • Calcular valores estáticos por fragmento em vez de passar uniforms pré-calculados da CPU
  • Precis��o desnecessária (usar highp quando mediump basta) desperdiça largura de banda e energia em dispositivos móveis

よくある質問

Qual é a diferença entre vertex e fragment shaders?
Vertex shaders transformam posições de vértices 3D em coordenadas de tela 2D. Fragment shaders determinam a cor final de cada pixel. Vertex shaders executam uma vez por vértice; fragment shaders executam uma vez por pixel.
Por que meu shader está mostrando uma tela preta?
Verifique se gl_Position.w é igual a 1.0, verifique se os uniforms estão definidos no seu aplicativo host, certifique-se de que as coordenadas UV estão no intervalo 0-1 e confirme que seu shader compilou sem erros.
O que swizzling significa em GLSL?
Swizzling permite reordenar ou selecionar componentes vetoriais usando sufixos como .xyzw, .rgba ou .stpq. Por exemplo, color.zyx inverte os canais RGB de um vec3.
Como passo dados do vertex shader para o fragment shader?
Use a palavra-chave varying. Declare um varying em ambos os shaders, atribua-o no vertex shader e leia-o no fragment shader. Os valores são interpolados através da primitiva.
O que é raymarching e quando devo usá-lo?
Raymarching renderiza cenas 3D avançando ao longo de raios usando funções de distância com sinal. Use-o para geometria procedimental, formas orgânicas e efeitos difíceis com rasterização tradicional.
Como posso melhorar o desempenho de shaders em dispositivos móveis?
Use precisão mediump quando possível, minimize buscas de textura, reduza iterações de loop, evite branching dinâmico e pré-calcula cálculos complexos na CPU.

開発者の詳細

作成者

sickn33

ライセンス

MIT

リポジトリ

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

参照

main

ファイル構成

📄 SKILL.md