three.js

An example of an interactive Three.js implementation.

By dragging across the window with your mouse or finger, you can bend the dragon.
Give it a try!

Implementation details

This was a short project aimed at learning and experimenting with Three.js and WebGL. It serves as a simple testbed, showcasing example JavaScript and GLSL code to demonstrate the Disney BRDF.

The material supports the standard metallic and roughness PBR workflows, but also includes Sheen, Clearcoat, and simple Subsurface Scattering.

To make the scene a bit more visually engaging, I added orbiting point lights in red, green, and blue, along with an ambient light, a hemisphere light, and a directional light. This combination helps clearly illustrate what the BRDF is capable of.

The model transitions through five different parameter sets:
  - Jade
  - Shiny Copper
  - Pink Cloth
  - Pottery with a Clearcoat
  - Matte Gold

Additionally, bending and deformation are handled in the vertex shader to maintain smooth performance throughout.