skills.rest
quanganh208
quanganh208COMMUNITY
Explore all skills by this author →
GitHub

ck:shader

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

1|Updated Mar 6, 2026
Search Tags:#glsl#shadertoy#webgl#sdf#shader#noise#procedural
One-click install
npx skills add https://github.com/quanganh208/cookmate --skill ck-shader-quanganh208
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:shader
Source: https://github.com/quanganh208/cookmate/tree/main/.opencode/skills/shader
Command: npx skills add https://github.com/quanganh208/cookmate --skill ck-shader-quanganh208

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides concise, ready-to-use guidance and building blocks to quickly author GPU-accelerated GLSL fragment shaders for procedural graphics, saving time when designing textures, patterns, and animated visual effects.

Core Features & Use Cases

  • Author signed distance fields (SDF) for crisp shape rendering and boolean SDF operations for combining geometry.
  • Generate and compose noise functions (value, gradient/Perlin-like, simplex, cellular/Voronoi) and layered fBm/turbulence for natural textures like clouds, marble, wood, and terrain.
  • Create tiling, symmetry, Truchet, and domain-warping patterns, plus color utilities (RGB ↔ HSB) and gradient techniques for visually rich shaders.
  • Integration guidance for WebGL, ShaderToy, glslViewer, and Three.js with standard uniforms and performance-aware practices.

Quick Start

Write a GLSL fragment shader that renders a seamless animated Voronoi marble texture at 1920x1080 using u_time and u_resolution.

Frequently Asked Questions about ck: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 noise textures?▼

You generate ready-to-run GLSL fragment shader code that implements reusable noise functions like Perlin, simplex, or cellular, and layers them using fBm to produce natural textures such as clouds, wood, and marble.

How do I create SDF shapes in a WebGL fragment shader?▼

You create SDF shapes in a WebGL fragment shader by authoring signed distance fields for crisp shape rendering and applying boolean SDF operations to combine, subtract, or intersect geometry directly in the fragment code.

Does this shader generation approach work with Three.js and ShaderToy?▼

Yes, this approach works with Three.js and ShaderToy by producing fragment shader code that uses standard u_time, u_resolution, and u_mouse uniforms, complete with integration guidance and performance-aware practices for both platforms.

What is the best way to generate tiling patterns and domain warping in GLSL?▼

The best way to generate tiling patterns and domain warping in GLSL is to use procedural techniques that create Truchet tiles, symmetry operations, and domain-warping effects, alongside RGB to HSB color utilities for rich gradients.

Why do my procedural shaders run slowly, and how can I optimize GLSL performance?▼

Your procedural shaders may run slowly due to complex nested loops or heavy fBm iterations; you can optimize GLSL performance by using performance-conscious patterns and integration notes provided for WebGL and ShaderToy workflows.

Related Skills

Explore More Design & Creative Skills→
tanepipertanepiper
27

shader-noise

Generate multiple procedural noise types for GLSL shader textures.

Community
Intermediate
duc01226duc01226

shader

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

Community
Intermediate
chef0111chef0111
1

threejs

Develop 3D web applications with Three.js scenes, assets, and materials.

Community
Advanced
EdgeHuntEdgeHunt

ck:shader

Generate GLSL fragment shaders for procedural textures and SDF shapes.

Official
Advanced