Welcome to the Shader Blog

This blog combines the power of MDX with interactive shader editors. You can write about graphics programming concepts and embed live, editable shader examples right in your posts.

What are Fragment Shaders?

Fragment shaders are small programs that run on the GPU for every pixel on the screen. They're incredibly powerful for creating visual effects, from simple gradients to complex animations.

Try It Out

Below is a simple WebGL example that creates an animated, colorful gradient. Try editing the fragment shader to see the changes in real-time!

How It Works

The shader editor has three tabs:

• Vertex Shader: Processes each vertex position. The default creates a full-screen quad.
• Fragment Shader: Runs for every pixel, determining its color. This is where most visual effects happen.
• JavaScript: Sets up WebGL context, compiles shaders, creates geometry, and manages the render loop.

Key uniforms available in shaders:

• u_resolution: Canvas size (width and height)
• u_time: Time in seconds since the shader started
• gl_FragCoord: The current pixel coordinate

The basic formula 0.5 + 0.5 * cos(...) creates a smooth oscillation between 0 and 1, perfect for RGB color values.

Customize It

Here are some things to try:

1. In the Fragment shader: Change the color offsets in the vec3(0, 2, 4) part
2. In the Fragment shader: Multiply u_time by different values to change animation speed
3. In the Vertex shader: Try different transformation matrices
4. In the JavaScript tab: Modify the geometry or add custom uniforms
5. Experiment with different mathematical operations across all three files

A Different Pattern

Here's a circular pattern that creates ripples from the center. This example uses a rotating vertex shader to add motion:

Tweakable Parameters

This example shows how to use constants in your fragment shader that you can easily adjust. Try changing the values in the // TWEAK THESE section to see how they affect the visual output:

Notice how the constants at the top make it easy to experiment! The shader creates a grid pattern that oscillates between two colors. Try adjusting the parameters to create completely different effects.

3D Rotating Cube

Now let's step into the third dimension with a classic rotating cube. This example includes proper 3D transformations with perspective projection:

This example demonstrates essential 3D rendering concepts: vertex positions, per-vertex colors, 3D transformations, and perspective projection. Each face of the cube has a different color, making the rotation easy to see.

Keep Exploring

Fragment shaders open up a world of creative possibilities. Experiment with the examples above and see what you can create!

Some concepts to explore next:

• Noise functions for organic patterns
• Domain repetition for tiling effects
• Ray marching for 3D scenes
• Signed distance functions for shapes

Happy shader coding!