Gear World

WebGL, TypeScript

Fragment Shader only

Live Demo here (PC required, might take a while to load)

This is a purely fragment shader based SDF animation scene I created for my procedural graphic class. I was inspired by some steampunk drawing with a lot of cogs, and I was thinking about generating a scene like them procedurally. Then I found Truchet tiles interesting and implement a cubic pattern consisting of two kinds of tile as below.(Geometry outside the wireframe is not in the tile. Half gears enables the connectivity since teeth could overlap same area at boundary.) For the infinite repitition, the gears are not symmetric along all axes so I have to manually calculate how to flip them. Thus I divide the world into 1x1x1 grids and use two checkerboard-like parameter. Full explanation on Github.

Github: https://github.com/seiseiko/gear_world

Full Shader Code: https://github.com/seiseiko/gear_world/blob/master/src/shaders/flat-frag.glsl