Open code, practice, and notes →
Download source with English comments · for reading
GLSL · 10 Tiling and Repeating Coordinates
Series contents · Technology map
Stage: Coordinates, Textures, and Time · Editable example · Storage ID: glsl-step-10
Goals and learning outcomes
- Build repeating coordinates.
- Separate per-cell information from local patterns.
Prerequisites
Continue using the output and records from Unit 9. Before experimenting with Tiling and Repeating Coordinates, preserve the previous inputs and reference outputs.
Key concepts and explanations
Repetition
fract creates repeating tiles from the fractional part of coordinates. Changing the tile count also changes the coordinate rate of change and boundary frequency.
Identification
Cell numbers obtained with floor can determine different values for each tile. Separating local cell coordinates from cell ids makes patterns easier to combine.
Practice setup
First check the execution scope guidance on the example screen. The following describes the environment needed to extend the assignment in a separate project. This document-guided exercise requires your own implementation using WebGL2 and GLSL ES 3.00 in a separate localhost project. First check the GLSL version of existing examples and avoid mixing in 1.00 syntax.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- Separate floor(uvcount) and fract(uvcount) in tiles.glsl.
- Output a circle inside each cell and alternating colors based on the cell id.
- Record boundary continuity and flickering when the display shrinks at count=4 and 16.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Tile count | 4 | 16 | Expect denser repetition that may increase aliasing on a small screen. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Output cell ids and local coordinates in separate debug modes.
- Compare both tile counts at the same screen size.
Self-check
- Are fract and integer truncation equivalent for negative coordinates?
- How should distortion connect across tile boundaries?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
Runs WebGL ShaderMaterial in the browser. Comparisons use a fixed 640×360 size; frame intervals are different from GPU time.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: Step and Smoothstep Masks · Next: Texture Sampling