3D Shape 2D: Metalness & Roughness Shading Preview

Shape & Material

Silhouette

Base color

Metalness 0.80

Roughness 0.20

Rotation speed 1.0

Computed Shading

Turntable angle

0°

Apparent width

100%

Diffuse level

Specular power

How this 2D model differs from the 3D scene

The 3D scene renders the six primitives with a real WebGL PBR material and lets a GPU rasterize per-pixel lighting. This 2D companion has no depth buffer at all, so instead of rendering an actual rotated mesh it computes the visual cues a turntable + PBR material produces and draws them directly with 2D canvas paths and gradients:

Turntable rotation is faked by squashing the shape horizontally by |cos(θ)| — the classic 2D card-flip trick — so the silhouette narrows and widens exactly like an object spinning about a vertical axis.
Diffuse level is a Lambertian-style term, 0.35 + 0.65·max(0, cos(θ − lightOffset)), so the face turned toward the light reads brighter and the face turned away goes flat — the same cosine law the 3D renderer's shader evaluates per pixel.
Specular highlight is a radial gradient whose radius grows with roughness (a rough surface spreads its highlight) and whose color blends from white toward the base color as metalness rises (a metal tints its reflections; a dielectric's stay white) — the same metalness/roughness split the 3D MeshPhysicalMaterial uses, evaluated as one highlight instead of millions of shaded fragments.
Wireframe swaps the filled, shaded silhouette for its outline/facet edges only, mirroring the 3D wireframe toggle.

Real-world relevance: this squash-plus-gradient approach is exactly how 2D game engines and vector-art tools fake a rotating, lit 3D object without a 3D pipeline — useful whenever a full renderer is too heavy for the target device.

⚠ Couldn't start the canvas2D canvas context failed to initialize. Reload the page.