Coding a Brick Tower [video]

TL;DR: The author uses mathematical SDF in Shader Toy to construct a tower made of bricks and mortar, achieving repetition in both circular and vertical directions, and adds randomization for a more natural appearance. ## Project Origin The author received an email requesting help in creating a 3D model of a tower stacked with bricks—using only math, no Blender or polygons. So the author decided to record the entire exploration process, starting from a basic cube, gradually implementing circular repetition, vertical repetition, randomization, and finally handling the fusion of mortar and bricks. ## Basic Cube SDF In Shader Toy, there was already code for rendering a sphere (based on signed distance fields). The author rewrote an SDF function for a cube: for a point `P` in space and a cube size `B` (a 3D vector), take the absolute value of each coordinate, subtract `B`, then take the maximum. If the maximum is negative, the point is inside the cube, and we directly return that value (the distance to the nearest face); otherwise, the distance from the external point to the cube is obtained via clamping. During verification, the size was set to 0.5 meters, then adjusted to brick dimensions: height 10 cm, width 20 cm, length 30 cm. ## Circular Repetition (Ring Domain) Using the angle in cylindrical coordinates, the circle is divided into 12 sectors (each sector angle `2π/12`). For any point `P` in space, calculate its sector ID (angle divided by sector size), then rotate the point back to the first sector (via a rotation matrix). This way, only one brick needs to be defined in the first sector, and the other sectors are automatically duplicated. The author chose 12 sectors, which worked well; 16 or 11 could also be used. ## Vertical Repetition (Layers) Similarly, use the vertical coordinate `y` divided by the layer spacing (set to 30 cm) to get the layer ID. Translate any vertical position to the first layer (up/down by layer spacing times layer ID). A limit is also added so that the layer ID ranges between -10 and 3, allowing observation of the interior. A fillet radius of 5 cm is added between bricks, and the spacing is appropriately increased. ## Randomization To break up the neat stacking, a random rotation angle is generated based on the layer ID, causing each layer of bricks to be offset. Furthermore, for each brick (identified by a combination of sector ID and layer ID), a random hash `R1` is generated to vary how far the brick protrudes from the mortar (0–10 cm); another random hash `R2` changes the brick width (floating ±5 cm around 30 cm). Care is taken to ensure the bricks only protrude outward, not inward. ## Adding Mortar (Tubular Geometry) The mortar is designed as a hollow cylinder (pipe). The author temporarily creates a 2D box SDF (similar to 3D but with only two coordinates), then uses cylindrical coordinates to convert the 3D point into 2D: take `x` and `z` length as the radial distance, `y` remains vertical. Offset the radial distance to the pipe radius (1.5 meters), call the 2D box SDF to get the pipe distance. The pipe wall thickness is set to 10 cm, and the height is adjusted appropriately (bottom shifted down 1 meter, total height about 2.5 meters). Note that the pipe evaluation must use the original, untransformed point coordinates `OP`, otherwise it will be affected by rotation and translation. ## Fusing Bricks and Mortar The signed distance of the final scene geometry is the **minimum** of the brick distance and the pipe distance (i.e., the nearest surface). However, at the end of the video, the author noticed an artifact (brick ID discontinuity), likely related to the rounding function, but it is ignored for now. The core problem (fusing bricks and mortar) is not fully solved, but the idea is clear: combine the two SDFs using a min operation. ## Source Video: Coding a Brick Tower (https://www.youtube.com/watch?v=DAMiS2PGTEE)