Recently, I took part in Arm’s Shadertoy hackathon, where my team won the only Professional Award out of 11 teams. Here, I’ll document the projects I created and experimented with on Shadertoy.

Drawing Chinese Characters with Bézier Curves

By utilizing the signed distance field (SDF) of Bézier curves—which include start and end points, start and end thickness, and curvature—we can create smooth, intricate lines. This technique is ideal for drawing the complex strokes of Chinese characters.

For a closer look at this shader, check out the demo on Shadertoy: Shadertoy Demo.

Fireworks Forming Chinese Characters

The initial idea was to generate fireworks that form Chinese characters by sampling from the sdfCurvedLine function to define basic shapes. However, two main challenges arose: slow rendering, which impacted real-time performance, and rough character shapes, leading to poor visual quality.

To address these issues, I implemented importance sampling to distribute points more evenly across the strokes.

Key Steps:

1. Segment Assignment: Assign points to each curve segment based on its relative length.
2. Time Parameter (t): Calculate the interpolation parameter t within each segment.
3. Position Calculation: Use the start point, end point, curvature, and t to compute the exact position of each point.

The result is a more accurate and efficient rendering of characters formed by fireworks.

For a detailed demonstration, see the shader on Shadertoy: Shadertoy Demo.

Mid-Autumn Fireworks

For a detailed view of this shader implementation, check out the demo on Shadertoy: Shadertoy Demo, or watch the video.

Resources for Learning Shadertoy

1. InspirNathan’s Shader Topics: A fantastic starting point for ShaderToy.

2. Inigo Quilez’s Dist Function Articles: A deep dive into signed distance functions (SDF), which are essential for creating smooth shapes and curves. Check out Dist Functions 2D and Dist Functions.

3. Inigo Quilez’s Shadertoy Page: A collection of impressive shader examples that demonstrate the power and versatility of Shadertoy. Explore Inigo’s Shadertoy.

4. The Book of Shaders: An excellent online resource for learning the fundamentals of shaders. Visit The Book of Shaders.

Guide for Shadertoy

This guide covers the parts of GLSL ES relevant for Shadertoy. For the complete specification, refer to the GLSL ES Specification.

Arithmetic Operators

• () + - ! * / %

Logical/Relational Operators

• ~ < > <= >= == != && ||

Bit Operators

• & ^ | << >>

Comments

• // for single-line
• /* */ for multi-line

Types

• void
• bool
• int
• uint
• float
• vec2, vec3, vec4
• bvec2, bvec3, bvec4
• ivec2, ivec3, ivec4
• uvec2, uvec3, uvec4
• mat2, mat3, mat4
• sampler2D, sampler3D, samplerCube

Format

• float a = 1.0;
• int b = 1;
• uint i = 1U;
• int i = 0x1;

Function Parameter Qualifiers

• in, out, inout

Global Variable Qualifiers

• const

Vector Components

• .xyzw, .rgba, .stpq

Flow Control

• if, else, for, return, break, continue, switch/case

Output

• vec4 fragColor

Input

• vec2 fragCoord

Preprocessor Directives

• #
• #define
• #undef
• #if
• #ifdef
• #ifndef
• #else
• #elif
• #endif
• #error
• #pragma
• #line

Built-in Functions

Here’s the formatted version for the conversions and Shadertoy inputs/outputs in Markdown:

Conversions

• Int to Float: int(uv.x * 3.0)

How to

Use structs:

struct myDataType { 
    float occlusion; 
    vec3 color; 
}; 
myDataType myData = myDataType(0.7, vec3(1.0, 2.0, 3.0));  

Initialize arrays:

float[] x = float[](0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6);  

Do conversions:

int a = 3; 
float b = float(a);  

Do component swizzling:

vec4 a = vec4(1.0, 2.0, 3.0, 4.0); 
vec4 b = a.zyyw;  

Access matrix components:

mat4 m; 
m[1] = vec4(2.0); 
m[0][0] = 1.0; 
m[2][3] = 2.0;  

Be careful!

• The f suffix for floating point numbers: 1.0f is illegal in GLSL. Use 1.0.
• saturate(): saturate(x) doesn’t exist in GLSL. Use clamp(x, 0.0, 1.0) instead.
• pow/sqrt: Please don’t feed sqrt() and pow() with negative numbers. Add abs() or max(0.0, x) to the argument.
• mod: Please don’t do mod(x, 0.0). This is undefined on some platforms.
• Variables: Initialize your variables! Don’t assume they’ll be set to zero by default.
• Functions: Don’t name your functions the same as some of your variables.

Shadertoy Inputs

Shadertoy Outputs

Image shaders:

fragColor is used as output channel. It is not mandatory, but recommended to leave the alpha channel to 1.0.

Sound shaders:

The mainSound() function returns a vec2 containing the left and right (stereo) sound channel wave data.