Making shape materials look close to the actual design, dark inner shadows and lite fill colors

[tfoller]

When it comes to gradient fill, you can check the code for contour gradient here:

Edit fiddle - JSFiddle - Code Playground

the solution is based on passing the info about the lines the shape is made of into the shader and colorize depending on the pixel distance from the shape border.

Also, you could use edge highlighting to achieve this effect, here is an example:

Edge finding and highlighting

A vanilla JS code for finding 3D geometry edges and visualizing them via custom shader. Live example with UI: [edge_03] Github repo: Usage: // import THREE.js library import { init } from 'edge_finder.js' const config = { width: 0.2, // border width, range [0, 1] alpha: true, // solid mesh background invert: false, // swap border/background style mode: 0, // border style: 0 - solid, 1 - smooth, 2 - neon wave: 0, // repeating border, 0 - disabled, recomm…