Your image
Each pixel arrives with a color and a position.
Shader guide · zero coding required
Turn an idea into moving light.
You do not need to know GLSL to make a shader. Learn what to describe, how to guide the AI one decision at a time, and what to do when the code gets confused.
Read time · 8 minutes
01ShaderA tiny program for pixels
02GLSLThe language a graphics card reads
03InputsYour image, position, size, and time
04OutputA new picture, redrawn live
First things first
What is a GLSL shader?
Imagine giving every pixel on the screen the same tiny instruction: “look at the original image, check where you are, check the time, then choose a color.” The graphics card repeats that instruction for thousands of pixels at once, many times per second. That instruction is a shader.
GLSL is simply the language used to write it. Mapshroom connects the image, clock, controls, and screen for you, so you can focus on the visual idea.
The shader
It moves, mixes, masks, colors, and reacts to time.
Moving light
The result is redrawn live on your subject.
uvWhere am I?
The position of a pixel: left, right, top, or bottom.
timeWhat moment is it?
A clock that makes waves, pulses, and motion possible.
resolutionHow large is the screen?
Width and height, used to keep shapes in proportion.
uniformWhat can I control?
A named value Mapshroom can turn into a slider or color control.
The prompting recipe
Prompt the picture,
not the program.
A useful prompt reads like art direction. Describe what should remain, what should change, how it moves, and what you want to adjust later. Let Mapshroom handle the GLSL structure.
Protect the starting point
Say what must stay visible. This prevents the AI from replacing your image with an unrelated full-screen pattern.
“Keep the original subject recognizable and preserve transparency.”Name one visual effect
Start with one clear transformation: outlines, ripples, pixels, glow, displacement, trails, or color bands.
“Add soft contour lines around the brightest edges.”Describe movement with a verb
Use words such as drift, pulse, rotate, crawl, expand, flicker, or follow. Add a direction and a pace.
“Make the lines drift upward slowly, like warm air.”Choose color and mood
Give the AI a small palette and an atmosphere. Two colors are often easier to control than “make it colorful.”
“Use mint green lines with a subtle coral glow.”Ask for the controls
Controls let you art-direct the result after generation, without rewriting the shader.
“Add sliders for speed, line width, glow, and color.”SUBJECT + EFFECT + MOTION + COLOR + CONTROLS
A strong first prompt
Keep the original subject recognizable and preserve its transparency.
Add soft contour lines around the brightest edges.
Make the lines drift upward slowly, like warm air.
Use mint green for the lines and a subtle coral glow.
Add controls for speed, line width, glow, and color.
Keep the shader smooth and lightweight.Why this works: every sentence makes one decision. If the result is close, change only the sentence that is wrong.
Inside Mapshroom
From sentence to shader, step by step.
Mapshroom includes the current shader and the required code format when it asks the AI. Your job is to describe the look and judge the result.
- 01Load an image
Choose the subject you want the effect to react to.
- 02Open Shader
Start from a preset or the current shader in the code panel.
- 03Write what you want
Use the five-part recipe above, then press Generate.
- 04Judge one thing at a time
Check the subject, effect, motion, color, and controls in that order.
- 05Refine with follow-ups
Ask for one specific change while keeping everything else.
- 06Save the good version
Keep a working version before a large mix or experiment.
VAGUE FOLLOW-UP
→“Make it better and faster.”
DIRECTABLE FOLLOW-UP
“Keep the composition and colors. Double only the upward drift speed. Do not change the transparency.”
Mixing shaders
Yes, you can paste other code inside.
GLSL from another shader can be used as material for a new one. Paste it into Mapshroom’s code editor, or include it in your AI conversation, then explain which part you want to keep: its movement, colors, mask, texture, or shape.
Do not simply place two complete shaders one after another. They may define the same names or use different structures. Ask the AI to integrate them and return one complete replacement shader.
- Choose which shader is the base.
- Name the exact feature to borrow from the other.
- Say where or when the two effects should blend.
- Ask it to keep useful controls and rename conflicts.
Prompt for mixing two shaders
Use my current shader as the base.
Integrate the pasted shader as a second effect — do not place two complete shaders one after another.
Keep the base shader's colors and transparency.
Use the new shader only to add its ripple movement.
Blend the ripple into bright image areas, rename any conflicting uniforms, and return one complete Mapshroom shader.
PASTED SHADER:
[paste the other GLSL code here]When generation goes wrong
An error is feedback,
not a dead end.
AI writes code by prediction, so a missing bracket, unsupported function, or conflicting name can happen. Mapshroom keeps the last valid render, retries generated GLSL once, and shows Fix Error when the compiler still needs help.
Do not paraphrase the compiler message.
The AI needs to see what produced it.
WebGL 2 with GLSL ES 3.00, one complete Mapshroom shader.
Preserve the look instead of redesigning it.
Repair prompt for any chat LLM
Fix this shader with the smallest possible change.
Preserve its current look, colors, controls, and transparency.
It must use GLSL ES 3.00 for WebGL 2, texture(), and one processColor(sampler2D tex, vec2 uv, float time, vec2 resolution) function.
Do not add void main() or gl_FragColor.
Return one complete replacement shader.
COMPILER ERROR:
[paste the exact error here]
BROKEN GLSL:
[paste the complete shader here]Reframe the output
“Sample the original texture, preserve its alpha, and keep the subject visible before adding the effect.”
Simplify the work
“Keep one effect, remove expensive loops, and make the motion smooth and lightweight.”
Describe what you observe
“The glow covers the whole image. Restrict it to bright edges and keep dark areas unchanged.”
Repeat the contract
“Return one complete WebGL 2 / GLSL ES 3.00 shader body with processColor(), texture(), no #version, and no main().”
One workflow, any AI
Use it inside the app or in any chat LLM.
The shortest path
Pick an AI option in the Shader panel and press Generate. Mapshroom automatically adds the current GLSL, its required structure, and the technical contract.
The guided hand-off
Choose either chat in Mapshroom. It prepares the full request, opens the chat, and lets you paste the returned shader back into the app.
The same conversation
Paste your current shader, your visual request, and the Mapshroom shader rules. Ask for one complete GLSL code block, then paste that code into Mapshroom.
YOU ALREADY KNOW ENOUGH TO BEGIN