Skip to content

canonical_graphics — lesson index

For agents

This index is reference material for agents writing box-level graphics code: it maps lesson names and API symbols to the uid-named files in this folder. To learn Field's graphics yourself, start with Graphics on the GPU, then work through Field 4 Graphics.

This directory is a snapshot of a real Field document: the Field 4 graphics curriculum, worked lesson by lesson against the live renderer. Every file is named by box uid, so this index exists to make the corpus reachable by name and by API. The prose walkthrough, with captured native-window images, is Field 4 Graphics.

Boxes here are read-only reference. To run one, copy its Kotlin and shader properties into a box of your own beneath a renderer parent — see the graphics topology rule in dev_docs/agents/transcripts/README.md.

The renderer parent

window — 611072da-1af6-4d2d-85bf-07a9ba191aca_code_.kt. Opens the Window, builds the Renderer and pumps the frame loop. Every lesson below runs as its child, directly or through another lesson.

Lessons

Lesson Runs under Kotlin Shaders
0. traditional triangle window cc81ab4e-6c43-4908-bfff-7c8f827c927c_code_.kt cc81ab4e-6c43-4908-bfff-7c8f827c927c_vertex_.glsl
cc81ab4e-6c43-4908-bfff-7c8f827c927c_fragment_.glsl
1. hello triangle window af0946dd-f25d-4355-984d-f0d24a43ee12_code_.kt af0946dd-f25d-4355-984d-f0d24a43ee12_vertex_.glsl
af0946dd-f25d-4355-984d-f0d24a43ee12_fragment_.glsl
1b. hello triangle (UBO) window 85e8478b-529b-406e-b835-7c00912848f2_code_.kt 85e8478b-529b-406e-b835-7c00912848f2_vertex_.glsl
85e8478b-529b-406e-b835-7c00912848f2_fragment_.glsl
2. hello camera window b2ba23e8-18e5-4f07-a709-2b89116a83b3_code_.kt b2ba23e8-18e5-4f07-a709-2b89116a83b3_vertex_.glsl
b2ba23e8-18e5-4f07-a709-2b89116a83b3_fragment_.glsl
2. hello keyboard camera window 954d64d5-ee3f-4cb7-8ac7-1e2cce8a9073_code_.kt 954d64d5-ee3f-4cb7-8ac7-1e2cce8a9073_vertex_.glsl
954d64d5-ee3f-4cb7-8ac7-1e2cce8a9073_fragment_.glsl
3. compute shader window 8b8d3306-5c31-49aa-ab27-659a992ebd09_code_.kt 8b8d3306-5c31-49aa-ab27-659a992ebd09_compute_.glsl
3b. compute particles window ad857eaa-362e-45ea-bdc8-472af40f1ed2_code_.kt ad857eaa-362e-45ea-bdc8-472af40f1ed2_compute_.glsl
3b. draw particles window → 3b. compute particles 262e80f5-d991-453d-9af8-8d181ff0eb0b_code_.kt 262e80f5-d991-453d-9af8-8d181ff0eb0b_vertex_.glsl
262e80f5-d991-453d-9af8-8d181ff0eb0b_fragment_.glsl
4. gltf loading window 0e01f4b0-4b65-40db-a8b0-cd6cde4048d6_code_.kt 0e01f4b0-4b65-40db-a8b0-cd6cde4048d6_vertex_.glsl
0e01f4b0-4b65-40db-a8b0-cd6cde4048d6_fragment_.glsl
4. multi-textureing from a gltf window f1d2cbea-b20d-4794-b9f7-37b847dcdeb6_code_.kt f1d2cbea-b20d-4794-b9f7-37b847dcdeb6_vertex_.glsl
f1d2cbea-b20d-4794-b9f7-37b847dcdeb6_fragment_.glsl
4. texturing window 55bc1784-bc44-40eb-bc01-d02eca463445_code_.kt 55bc1784-bc44-40eb-bc01-d02eca463445_vertex_.glsl
55bc1784-bc44-40eb-bc01-d02eca463445_fragment_.glsl
4b. multi-texture window 3cbcadc0-b279-470d-9a5f-afc120518829_code_.kt 3cbcadc0-b279-470d-9a5f-afc120518829_vertex_.glsl
3cbcadc0-b279-470d-9a5f-afc120518829_fragment_.glsl
5. Bluring window 9a1f9aea-5940-4d4c-976f-85b650a9c2d7_code_.kt 9a1f9aea-5940-4d4c-976f-85b650a9c2d7_vertex_.glsl
9a1f9aea-5940-4d4c-976f-85b650a9c2d7_fragment_.glsl
5. PingPongTT window a8dfc9a7-3062-4eca-ab7e-a243ff8e7bde_code_.kt a8dfc9a7-3062-4eca-ab7e-a243ff8e7bde_vertex_.glsl
a8dfc9a7-3062-4eca-ab7e-a243ff8e7bde_fragment_.glsl
5. RTT window 818be776-a391-4703-9e6e-c6259440e2f1_code_.kt 818be776-a391-4703-9e6e-c6259440e2f1_vertex_.glsl
818be776-a391-4703-9e6e-c6259440e2f1_fragment_.glsl
5. draw blur window → 5. Bluring → 5. kernel d9733b9a-73a8-4045-a756-2a6e28e08c21_code_.kt d9733b9a-73a8-4045-a756-2a6e28e08c21_vertex_.glsl
d9733b9a-73a8-4045-a756-2a6e28e08c21_fragment_.glsl
5. draw pingpoing window → 5. PingPongTT 459b9c54-6363-4c27-a033-2f145e017022_code_.kt 459b9c54-6363-4c27-a033-2f145e017022_vertex_.glsl
459b9c54-6363-4c27-a033-2f145e017022_fragment_.glsl
5. draw rtt window → 5. RTT 715eae62-197d-49a1-a202-464ae4465cd5_code_.kt 715eae62-197d-49a1-a202-464ae4465cd5_vertex_.glsl
715eae62-197d-49a1-a202-464ae4465cd5_fragment_.glsl
5. included window 30f2cf70-58c1-4691-a97a-d9cac5149f9c_code_.kt 30f2cf70-58c1-4691-a97a-d9cac5149f9c_vertex_.glsl
30f2cf70-58c1-4691-a97a-d9cac5149f9c_fragment_.glsl
5. kernel window → 5. Bluring d1aa12a9-740c-4c2b-a05b-0e9a3aeed51c_code_.kt d1aa12a9-740c-4c2b-a05b-0e9a3aeed51c_vertex_.glsl
d1aa12a9-740c-4c2b-a05b-0e9a3aeed51c_fragment_.glsl
5. lygia window fd8503ec-e5e2-4fa9-86fe-3d65ad96911f_code_.kt fd8503ec-e5e2-4fa9-86fe-3d65ad96911f_vertex_.glsl
fd8503ec-e5e2-4fa9-86fe-3d65ad96911f_fragment_.glsl
5b. some templating window 1103f132-7484-4440-8102-5bd159a29fbf_code_.kt 1103f132-7484-4440-8102-5bd159a29fbf_vertex_.glsl
1103f132-7484-4440-8102-5bd159a29fbf_fragment_.glsl
5c. some more templating window 42056e8d-ec8b-4bf8-b84a-1cd1d8524510_code_.kt 42056e8d-ec8b-4bf8-b84a-1cd1d8524510_vertex_.glsl
42056e8d-ec8b-4bf8-b84a-1cd1d8524510_fragment_.glsl
5d. GPU schema window b42d7b13-680e-4f9b-b789-8e6e7d8c4a21_code_.kt b42d7b13-680e-4f9b-b789-8e6e7d8c4a21_vertex_.glsl
b42d7b13-680e-4f9b-b789-8e6e7d8c4a21_fragment_.glsl
5e. Slug filled paths window 628f3f96-42d0-48dd-93ea-ea4d9f03b865_code_.kt 628f3f96-42d0-48dd-93ea-ea4d9f03b865_vertex_.glsl
628f3f96-42d0-48dd-93ea-ea4d9f03b865_fragment_.glsl
6. RTT - sending window 8323570b-87db-4623-95a2-bd61c7d0f6f7_code_.kt 8323570b-87db-4623-95a2-bd61c7d0f6f7_vertex_.glsl
8323570b-87db-4623-95a2-bd61c7d0f6f7_fragment_.glsl
6. RTT- draw rtt window → 6. RTT - sending 1ae1daed-12d3-4629-8f81-66194c5b924c_code_.kt 1ae1daed-12d3-4629-8f81-66194c5b924c_vertex_.glsl
1ae1daed-12d3-4629-8f81-66194c5b924c_fragment_.glsl
6. debugging - Texture probe example window e1d6dd17-1ebd-40e7-a0ef-309779c562ff_code_.kt e1d6dd17-1ebd-40e7-a0ef-309779c562ff_vertex_.glsl
e1d6dd17-1ebd-40e7-a0ef-309779c562ff_fragment_.glsl
6. debugging — printf window 81f27655-7d32-4a4d-b73d-1b5d368efaa7_code_.kt 81f27655-7d32-4a4d-b73d-1b5d368efaa7_vertex_.glsl
81f27655-7d32-4a4d-b73d-1b5d368efaa7_fragment_.glsl
6. radix sort window cd63d465-dbe0-4e55-bccf-14c6a7f5e54a_code_.kt —
6b. debugging / mapping - Texture probe example window 57eb613c-90e0-46e1-b075-8e1578bc4934_code_.kt 57eb613c-90e0-46e1-b075-8e1578bc4934_vertex_.glsl
57eb613c-90e0-46e1-b075-8e1578bc4934_fragment_.glsl
7. slang — hello triangle window 65bd0587-dbfa-451a-8f6a-e003ff3d1abf_code_.kt 65bd0587-dbfa-451a-8f6a-e003ff3d1abf_vertex_fragment_.slang
7b. slang — Texture window 92e4a943-1cc2-433c-9953-18e0107f3854_code_.kt 92e4a943-1cc2-433c-9953-18e0107f3854_vertex_.glsl
92e4a943-1cc2-433c-9953-18e0107f3854_fragment_.glsl
92e4a943-1cc2-433c-9953-18e0107f3854_vertex_fragment_.slang
8. dla window e39270ec-8faf-4d26-8f4e-ce4d23ec4af1_code_.kt e39270ec-8faf-4d26-8f4e-ce4d23ec4af1_vertex_.glsl
e39270ec-8faf-4d26-8f4e-ce4d23ec4af1_fragment_.glsl
9. bml traffic window 1b0f6eb5-b860-401d-913a-6469b4285774_code_.kt 1b0f6eb5-b860-401d-913a-6469b4285774_vertex_.glsl
1b0f6eb5-b860-401d-913a-6469b4285774_fragment_.glsl
9b. bml probe window 176b09bd-6e1c-4cb4-9c8a-b046d54c6dde_code_.kt 176b09bd-6e1c-4cb4-9c8a-b046d54c6dde_vertex_.glsl
176b09bd-6e1c-4cb4-9c8a-b046d54c6dde_fragment_.glsl
10. lattice boltzmann window b09e32ea-79a6-40a7-bb7a-99e6723081ad_code_.kt b09e32ea-79a6-40a7-bb7a-99e6723081ad_vertex_.glsl
b09e32ea-79a6-40a7-bb7a-99e6723081ad_fragment_.glsl
10b. lbm cylinder window → 10. lattice boltzmann 72b68fa7-a8c3-4d4a-964d-2f66306692e3_code_.kt 72b68fa7-a8c3-4d4a-964d-2f66306692e3_vertex_.glsl
72b68fa7-a8c3-4d4a-964d-2f66306692e3_fragment_.glsl
11. forest fire window 0f95328a-7214-44a2-acb6-f22c01261e96_code_.kt 0f95328a-7214-44a2-acb6-f22c01261e96_vertex_.glsl
0f95328a-7214-44a2-acb6-f22c01261e96_fragment_.glsl
11b. fire starter window → 11. forest fire 9df25333-3cb1-4bba-b628-b34c7ba61909_code_.kt 9df25333-3cb1-4bba-b628-b34c7ba61909_vertex_.glsl
9df25333-3cb1-4bba-b628-b34c7ba61909_fragment_.glsl

What each lesson uses

Field API names and GLSL features scanned out of the sources above — the reverse index, for when you know the call you need but not the lesson that demonstrates it.

  • #include — 5. lygia
  • AdaptiveQuantileWarp — 6b. debugging / mapping - Texture probe example
  • buffer_reference — 1. hello triangle, 3b. compute particles, 3b. draw particles, 4. gltf loading, 4. multi-textureing from a gltf, 5e. Slug filled paths, 6. debugging — printf, 8. dla
  • Camera — 1b. hello triangle (UBO), 2. hello camera, 2. hello keyboard camera, 4. gltf loading, 4. multi-textureing from a gltf, 4. texturing, 4b. multi-texture, 5. Bluring, 5. RTT, 5. draw blur, 5. draw pingpoing, 5. draw rtt, 5. included, 5. lygia, 5e. Slug filled paths, 6. RTT - sending, 6. RTT- draw rtt, 6. debugging - Texture probe example, 6b. debugging / mapping - Texture probe example, 7b. slang — Texture
  • ComputeMesh — 3. compute shader, 3b. compute particles
  • computeModuleHere — 3. compute shader, 3b. compute particles
  • debugPrintfEXT — 6. debugging — printf
  • defaultBuffer — 1. hello triangle, 3b. compute particles, 5d. GPU schema, 6. debugging — printf, 7. slang — hello triangle
  • FieldRTTStreamer — 6. RTT - sending
  • FLine — 5e. Slug filled paths
  • FrameBufferGroup — 3b. compute particles
  • GpuRadixSort — 6. radix sort
  • HasImageView — 5. PingPongTT, 5. draw blur, 5. draw pingpoing
  • KeyCamera — 4. gltf loading, 4. multi-textureing from a gltf, 5. included
  • keyCamera — 2. hello keyboard camera, 4. texturing, 4b. multi-texture, 5. Bluring, 5. RTT, 5. draw blur, 5. draw pingpoing, 5. draw rtt, 5. lygia, 5e. Slug filled paths, 6. RTT - sending, 6. RTT- draw rtt, 6. debugging - Texture probe example, 6b. debugging / mapping - Texture probe example, 7b. slang — Texture
  • LoadedTexture — 4. texturing, 4b. multi-texture, 6. debugging - Texture probe example, 6b. debugging / mapping - Texture probe example, 7b. slang — Texture
  • mapAndRead — 3. compute shader
  • mapAndWrite — 3. compute shader
  • Matrix4f — 4. gltf loading, 4. multi-textureing from a gltf, 5e. Slug filled paths
  • Mesh — 0. traditional triangle, 1. hello triangle, 1b. hello triangle (UBO), 2. hello camera, 2. hello keyboard camera, 3b. draw particles, 4. gltf loading, 4. multi-textureing from a gltf, 4. texturing, 4b. multi-texture, 5. Bluring, 5. PingPongTT, 5. RTT, 5. draw blur, 5. draw pingpoing, 5. draw rtt, 5. included, 5. kernel, 5. lygia, 5b. some templating, 5c. some more templating, 5d. GPU schema, 5e. Slug filled paths, 6. RTT - sending, 6. RTT- draw rtt, 6. debugging - Texture probe example, 6. debugging — printf, 6b. debugging / mapping - Texture probe example, 7. slang — hello triangle, 7b. slang — Texture
  • moduleHere — 0. traditional triangle, 1. hello triangle, 1b. hello triangle (UBO), 2. hello camera, 2. hello keyboard camera, 3b. draw particles, 4. texturing, 4b. multi-texture, 5. Bluring, 5. PingPongTT, 5. RTT, 5. draw blur, 5. draw pingpoing, 5. draw rtt, 5. included, 5. kernel, 5. lygia, 5b. some templating, 5c. some more templating, 5d. GPU schema, 5e. Slug filled paths, 6. RTT - sending, 6. RTT- draw rtt, 6. debugging - Texture probe example, 6. debugging — printf, 6b. debugging / mapping - Texture probe example, 7. slang — hello triangle, 7b. slang — Texture, 10b. lbm cylinder, 11b. fire starter
  • MyPC — 5c. some more templating
  • PingPongRenderToTexture — 5. PingPongTT
  • push_constant — 1. hello triangle, 2. hello camera, 2. hello keyboard camera, 3b. compute particles, 3b. draw particles, 4. gltf loading, 4. multi-textureing from a gltf, 4. texturing, 4b. multi-texture, 5. Bluring, 5. PingPongTT, 5. RTT, 5. draw blur, 5. draw pingpoing, 5. draw rtt, 5. kernel, 5. lygia, 5b. some templating, 5c. some more templating, 5d. GPU schema, 5e. Slug filled paths, 6. RTT - sending, 6. RTT- draw rtt, 6. debugging - Texture probe example, 6. debugging — printf, 6b. debugging / mapping - Texture probe example, 7b. slang — Texture, 8. dla, 9. bml traffic, 9b. bml probe, 10. lattice boltzmann, 10b. lbm cylinder, 11. forest fire, 11b. fire starter
  • PushConstants — 5c. some more templating
  • QuantileWarpConfig — 6b. debugging / mapping - Texture probe example
  • registerLygiaIncludeRoot — 5. lygia
  • RenderToTexture — 5. Bluring, 5. RTT, 5. draw blur, 5. draw rtt, 5. kernel, 6. RTT - sending, 6. RTT- draw rtt
  • Resolver — 5b. some templating, 5c. some more templating
  • ShaderBmlSystem — 9. bml traffic, 9b. bml probe
  • ShaderDlaSystem — 8. dla
  • ShaderForestFireSystem — 11. forest fire
  • ShaderLatticeBoltzmannSystem — 10. lattice boltzmann
  • ShaderProbeQuantileWarpConfig — 6b. debugging / mapping - Texture probe example
  • SlugBuffer — 5e. Slug filled paths
  • Target — 6. radix sort
  • transferNow — 4. texturing, 4b. multi-texture, 6. debugging - Texture probe example, 6b. debugging / mapping - Texture probe example, 7b. slang — Texture
  • Vector2f — 10. lattice boltzmann
  • Vertex — 5d. GPU schema