SubscriberSkillEngineer kit

ak-shader: write GLSL fragment shaders that run in your real app

ak-shader checks how your project runs shaders, then writes a GLSL fragment shader for that exact environment: procedural textures, SDF shapes, repeating patterns, animated backgrounds, verified by a real render.

v1.0.0 · Updated 22/10/2026

Checked against ak 3.0.0 (29/10/2026), skill 1.0.1. The skill last changed in ak 3.0.0-beta.35. Check the version you run with ak --version.

VI · ak-shader: viết fragment shader GLSL chạy được trong app thật · Read in Vietnamese

In short: ak-shader writes GLSL fragment shaders for GPU-drawn effects: marble veins, clouds, repeating patterns, soft-edged SDF shapes, backgrounds that move with the mouse. It checks the project's renderer, GLSL version and uniforms before writing, and only counts the work done when the shader runs and shows up in the real target. It does not change how the project creates and updates uniforms.

Disclosure: I maintain AgentKit and have an affiliate relationship with it: the AgentKit link in this post is an affiliate link; buying through it gets you 30% off.

Summary

Use it when you need a GPU-drawn effect in WebGL, Three.js or Processing, or to try out on ShaderToy or glslViewer: procedural textures, shapes that stay sharp at any size, repeating or animated backgrounds.

mermaid

flowchart LR
    A["Describe the effect or pattern"] --> B["ak-shader"]
    B --> C["GLSL shader rendered in the real target"]
    C --> D["Use in WebGL, Three.js, Processing"]
    C --> E["Quick try on ShaderToy or glslViewer"]

It rests on 4 ideas:

Idea	Question	Example
Each pixel computes its own color	How does a shader think?	To draw a circle, each pixel measures its distance to the center and picks a color
Uniforms: data from outside	Where does the shader get time, frame size and mouse?	The template uses `u_time`, `u_resolution`, `u_mouse`; ShaderToy calls them `iTime`, `iResolution`, `iMouse`
The real target	Where does the shader run, and by which rules?	Check the renderer, WebGL and GLSL versions, precision, uniforms; GLSL ES 3 does not use `gl_FragColor`
Done means you see it	What evidence shows the shader is right?	Compile, render in the real app, look at the result, measure performance

The skill carries knowledge by area: SDF, shaping functions like smoothstep, repeating grids and rotation matrices, Truchet, noise (value, Perlin, simplex, Voronoi, Worley), fBm, RGB and HSB color, and texture recipes like clouds, stone, wood, fire and water. It opens only the part needed for your effect.

Sample prompt for a procedural texture:

text

/ak-shader A white and grey marble background for the <page name> page, the WebGL canvas already exists.
Constraints: keep the existing uniforms, run smoothly on an ordinary laptop.
Done when: the marble shows on the running page with no compile errors.

This skill has no flags. After /ak-shader you describe the effect or pattern, with the environment (WebGL, Three.js, ShaderToy) and any performance constraints.

Below is the detailed version: the run flow, 5 situations with prompts, how to write the input, the change history by ak release, and common pitfalls. The detailed version and the interactive page are for subscribers. Your agent can also search them through the portal's MCP.

Opens when your account has subscriber access

This guide is for subscribers

Once your account has access, the full piece, the interactive visual and the agent call all open.

Sign in or create a modernEngineer accountReading access belongs to your account email.
Choose a plan on the pricing page1, 3 or 12 months, paid by VietQR bank transfer. Access opens about a minute after the money arrives.
Or redeem a Facebook subscriber codePeople supporting the page on Facebook get an activation code by message each month.

See the Subscriber plan Enter a Facebook code Sign in

Already a subscriber? Sign in to read.

Use this piece in your agent

Get an API key

Copy the text below and paste it into Claude Code, Codex or whichever agent you use. The agent reads the piece and checks it against the repo you have open.

Paste into your agent

Read "ak-shader: write GLSL fragment shaders that run in your real app" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ak-shader". If the modernengineer MCP server is not connected, stop and walk me through connecting it from https://modernengineer.dev/en/mcp.
2. Summarize the main steps of the piece and point out which apply to this repo.
3. Propose concrete changes and ask me before editing any file.

Connect MCP in Claude Code (once)

terminal

claude mcp add --transport http modernengineer \
  https://api.modernengineer.dev/mcp \
  --header "Authorization: Bearer <API key>"

How to connect Codex, Cursor and other clients

Reading the full piece over MCP needs an API key from a subscriber account or one that bought this guide. Without access, the agent only gets the opening.

Version: v1.0.0
Updated: 22/10/2026
Slug: ak-shader

Summary

This guide is for subscribers

Use this piece in your agent

On the same topic

ak-dogfood: turn a session's stumbles into skill fixes

ak-agentkit: pick skills, chain the work, run ak commands safely

ak-skill-creator: create, update, audit and optimize agent skills