skills.rest
haidonglethqb
haidonglethqbCOMMUNITY
Explore all skills by this author →
GitHub

ck:shader

Write GLSL fragment shaders for procedural graphics in WebGL/Three.js pipelines.

Updated Feb 27, 2026
Search Tags:#glsl#webgl#generative-art#shader#noise#procedural-textures#fbm
One-click install
npx skills add https://github.com/haidonglethqb/CloudSchool --skill ck-shader-haidonglethqb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:shader
Source: https://github.com/haidonglethqb/CloudSchool/tree/main/.qwen/skills/shader
Command: npx skills add https://github.com/haidonglethqb/CloudSchool --skill ck-shader-haidonglethqb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

GLSL shader authorship and experimentation for procedural graphics, textures, and visual effects in WebGL/Three.js pipelines.

Core Features & Use Cases

  • Learn and apply fragment shader concepts including shapes, patterns, noise, and color spaces.
  • Build procedural textures and visual effects for interactive graphics and generative art.
  • Use as a reference hub with a curated set of GLSL examples and notes.

Quick Start

Open a shader editor, paste a fragment shader, and run to render a basic procedural visualization.

Frequently Asked Questions about ck:shader

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

FAQPage Schema
How do I write GLSL fragment shaders for procedural textures in WebGL?▼

To write GLSL fragment shaders for procedural textures in WebGL, you define core uniforms like u_time and u_resolution, then implement noise and fbm functions to generate patterns. This Skill provides curated references for shapes, colors, and SDF fundamentals.

What are the fundamentals of generating fbm noise for generative art?▼

Generating fbm noise for generative art involves layering multiple octaves of base noise functions to create complex procedural textures. This Skill supports learning these noise fundamentals and applying them to produce interactive visual effects in shader pipelines.

Can I use this to create procedural graphics for Three.js pipelines?▼

Yes, you can use this to create procedural graphics for Three.js pipelines. It writes GLSL fragment shaders designed for consistent integration with WebGL environments, defining standard utilities and uniforms to ensure extensibility across interactive graphics projects.

What is the best way to start experimenting with generative shader patterns?▼

The best way to start experimenting with generative shader patterns is to open a shader editor, paste a fragment shader, and run it to render a basic procedural visualization. The Skill serves as a reference hub for GLSL examples.

Does this Skill provide reference examples for SDF and color spaces?▼

Yes, this Skill provides reference examples for SDF and color spaces. It includes a references directory containing curated GLSL examples and notes covering shapes, patterns, textures, and color spaces to support both learning and production visuals.

Related Skills

Explore More Software Engineering Skills→
mmdonohuemmdonohue
1

threejs-shaders

Implement custom GLSL shaders in Three.js with ShaderMaterial or RawShaderMaterial.

Community
Intermediate
duc01226duc01226

shader

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

Community
Intermediate
code-review-benchmarkcode-review-benchmark

forge-first-triangle

Build an SDL3 GPU pipeline with vertex buffers and shaders to draw colored triangles.

Official
Intermediate
quanganh208quanganh208

ck:shader

Generate GLSL fragment shaders for procedural graphics with SDF shapes and noise.

Community
Intermediate