hello_triangle.cssl — annotated

This page is the full annotated walkthrough of hello_triangle.cssl. For the quick version, see §A.3 Hello Triangle.

The §A.3 page covers the complete code listing and line-by-line annotation. This page adds context on:

Why triangle

The GPU “Hello World” is a triangle because it’s the simplest primitive that exercises the full vertex→fragment pipeline:

1. Vertex shader — transforms per-vertex data
2. Rasterization — the GPU interpolates values across the triangle’s surface
3. Fragment shader — writes the final pixel color

Any GPU program that draws geometry goes through this pipeline. The triangle is the minimal proof that all three stages are working.

The type-safe parts

The hello triangle in Sigil demonstrates three things that a C++/HLSL equivalent would not:

1. Clip space is a type. Vec4<Clip> is not vec4. The return type of the vertex shader names the space. Passing the wrong space is a compile error.

2. The shader interface is type-checked. Pipeline::new(vs_main, fs_main) checks that the output type of vs_main matches the input type of fs_main. In HLSL/GLSL, this is checked by the driver at runtime.

3. The GPU/CPU boundary is explicit. vs_main and fs_main have the !gpu effect and cannot be called from main. The Pipeline is the only crossing point.

What to modify next

After the hello triangle runs, the natural experiments are:

1. Change the vertex positions — understand clip space (range -1..1 on each axis)
2. Change the fragment shader — return a constant color, or use uv coordinates
3. Add a transform — pass a Mat4x4 uniform and apply it in the vertex shader
4. Add a second shape — understand index buffers and draw calls

Each of these exercises one more piece of the pipeline while keeping everything else static.

See also

• §A.3 Hello Triangle — the full annotated code
• §I.2 SDF Shader — next step: distance fields
• §B.2 Type System — phantom types in depth