skills.rest
hotriluan
hotriluanCOMMUNITY
Explore all skills by this author →
GitHub

shader

Generate GLSL fragment shaders for procedural graphics and real-time effects.

2|Updated Dec 24, 2025
Search Tags:#glsl#webgl#generative-art#shader#noise#procedural
One-click install
npx skills add https://github.com/hotriluan/alkana-dashboard --skill shader-hotriluan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shader
Source: https://github.com/hotriluan/alkana-dashboard/tree/main/.opencode/skills/shader
Command: npx skills add https://github.com/hotriluan/alkana-dashboard --skill shader-hotriluan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Writing and testing GLSL fragment shaders can be tedious, requiring real-time iteration across platforms to achieve procedural visuals; this skill provides guidance and examples to accelerate the creation of shader-based graphics.

Core Features & Use Cases

  • Learn core GLSL fragment shader concepts (gl_FragCoord, u_time, u_resolution) and implement shapes, patterns, and noise.
  • Build reusable shader patterns for WebGL, Three.js, ShaderToy, and live-coding art projects.
  • Use cases include procedural textures, animated visuals, and shader experiments for interactive art and UI effects.

Quick Start

Paste a minimal fragment shader into your editor to render a simple color gradient.

Frequently Asked Questions about shader

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write a GLSL fragment shader for procedural graphics?▼

You create procedural graphics by generating a complete GLSL fragment shader body with standard uniforms like u_time and u_resolution, implementing shapes and noise functions without external dependencies.

What is fBm noise and how does it work in GLSL shaders?▼

fBm noise in GLSL shaders combines multiple octaves of Perlin, Simplex, or Cellular noise to generate complex procedural textures and natural-looking patterns in real-time graphics.

Can I use generated GLSL shaders with Three.js and ShaderToy?▼

Yes, generated GLSL shaders are compatible with Three.js and ShaderToy, providing reusable shader functions and patterns for WebGL, live-coding art projects, and interactive UI effects.

What's the best way to create SDF shapes in a WebGL fragment shader?▼

The best way to create SDF shapes in a WebGL fragment shader is by generating signed distance field functions directly in the shader body, allowing real-time procedural rendering and animation.

Why do my procedural shader animations not update in real-time?▼

Procedural shader animations fail to update when the u_time uniform is not continuously updated in the render loop, preventing the GLSL fragment shader from calculating frame-by-frame visual changes.

Related Skills

Explore More Design & Creative Skills→
Thanh-aperoThanh-apero
1

ck:shader

Develop custom GLSL fragment shaders for procedural graphics in WebGL and Three.js.

Community
Advanced
soeiroosoeiroo

threejs-shaders

Craft custom GLSL shaders for Three.js ShaderMaterial scenes.

Community
Advanced
CarlosDoersCarlosDoers

threejs-shaders

Integrate custom GLSL shaders into Three.js scenes via ShaderMaterial or RawShaderMaterial.

Community
Intermediate
CesarG503CesarG503

threejs-shaders

Create custom GLSL shaders for Three.js ShaderMaterial and RawShaderMaterial.

Community
Advanced