I was learning about Physically Based Rendering (PBR) on a recent project and decided to make a fun hack out of it using some period noise generators for vertex displacements.

This is basically a debug visualiser for all the material properties of MeshPhysicalMaterial in Three.js with some nice looking examples that you can remix.

The key ingredient for most of these blobs is to re-calculate normals after displacing the vertices in the vertex shader.

I had to use normal React state changes instead of transient updates to sync material properties with the debug GUI. This caused significant scroll jank in the gallery carousel at first. The solution was to use react@experimental with concurrent mode - it really made a huge difference with almost no frame drops while scrolling through the gallery.

Built using three, react-three-fiber, react-spring, react-use-gesture, @react-three/drei, troika-three-text, @react-three/xr, react-three-gui, @react-three/postprocessing, r3f-perf, zustand. Environment map photo by Jón Ragnarsson. Thank you all