Render Catalogue

My engineering thesis at Collegium da Vinci, and the reason this site has a /render-catalogue section rather than a screenshot.

The brief was to author a set of tiling materials in Adobe Substance Designer and then present them honestly — which meant rendering them in real time rather than shipping turntable videos, so that the maps could be inspected under changing light and changing parameters.

The renderer is a single-pass PBR shader written directly in GLSL rather than assembled from a material graph: it builds a tangent frame per fragment, displaces the surface along the height map in the vertex shader and rebuilds the normal from four height taps, remaps roughness into the window each material was authored for, and samples a cube map for reflections at a mip level derived from that roughness. The Three.js MeshStandardMaterial sat next to it throughout as the reference to be measured against, and the viewer here still lets you switch between the two.

Around the renderer was a small CMS — a Node HTTP server, a MongoDB collection of texture sets and an admin panel that uploaded the six maps and tuned the shader uniforms per material. That half has been folded into this site's own CMS, so the catalogue is still editable rather than frozen at whatever the thesis defended with.