triSDF: Two-Dimensional Triangle Distance Field

Planar Triangular Geometry

The triSDF function computes the signed distance from any 2D point to an equilateral triangle. This primitive provides the foundation for triangular patterns, tessellations, and geometric compositions in 2D space.

Mathematical Foundation

The triangular SDF uses geometric constraints based on the equilateral triangle properties:

$$d_{\text{tri}} = \max(|x| \cdot \frac{\sqrt{3}}{2} + y \cdot 0.5, -y \cdot 0.5)$$

where the coefficient $\frac{\sqrt{3}}{2} \approx 0.866025$ represents the geometric relationship for an equilateral triangle's sides.

The coordinate transformation centers the triangle and scales it:

$$\vec{p}_{\text{centered}} = (\vec{st} - 0.5) \cdot 5$$

Function Variants

Function	Parameters	Description
triSDF	st	Triangle centered at (0.5, 0.5)
triSDFCenter	st, center	Triangle at custom position

Function Signature

Parameter	Type	Description
st	vec2	Sample point in 2D space
center	vec2	Triangle center position (triSDFCenter only)

Implementation Demonstrations

Live Editor

const fragment = () => {
      const pos = uv.mul(2).sub(1)
      const dist = triSDF(uv).step(0.5)
      return vec4(vec3(dist), 1)
}

Result

Loading...