flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/shapecraft.
flo-bit.dev/shapecraft/
2.2 kB
88 lines
1# Color
2
3## Vertex coloring
4
5```ts
6mesh.vertexColor('#ff0000') // flat color (hex string)
7mesh.vertexColor(0xff0000) // hex number
8mesh.vertexColor([1, 0, 0]) // RGB tuple, 0-1
9
10mesh.vertexColor((pos, normal, i) => { // per-vertex function
11 return [pos[1], 0.5, 0.2]
12})
13```
14
15## Face coloring
16
17Colors each face independently (un-indexes geometry automatically). Better for low-poly look.
18
19```ts
20mesh.faceColor((centroid, normal, faceIndex) => {
21 return normal[1] > 0.5 ? '#00ff00' : '#888888'
22})
23```
24
25## Gradients
26
27```ts
28import { gradient, heightGradient, normalGradient } from 'shapecraft'
29
30// Value → color mapping
31const colorize = gradient([
32 [0, '#228B22'],
33 [0.5, '#8B4513'],
34 [1, '#FFFFFF'],
35])
36colorize(0.3) // returns [r, g, b]
37
38// Map Y position to gradient
39mesh.vertexColor(heightGradient([
40 [0, [0.2, 0.5, 0.1]],
41 [2, [0.6, 0.6, 0.6]],
42]))
43
44// Map normal direction to color (up vs down)
45mesh.vertexColor(normalGradient(
46 [0.15, 0.48, 0.08], // up-facing color
47 [0.08, 0.28, 0.04], // down-facing color
48))
49```
50
51## Palette utilities (culori-based)
52
53Interpolation happens in oklch for perceptually smooth results.
54
55```ts
56import { paletteGradient, axisGradient, noiseColor, pickRandom, varyColor } from 'shapecraft'
57
58// Smooth gradient through colors
59const grad = paletteGradient(['#3d6b35', '#8B4513', '#fff'])
60grad(0.5) // → [r, g, b] at midpoint
61
62// Map palette along a mesh axis
63mesh.vertexColor(axisGradient(
64 ['#5C3A1E', '#8B6B4A'],
65 { axis: 'y', min: 0, max: 2 },
66))
67
68// Map palette via noise
69mesh.vertexColor(noiseColor(['#3a6b2a', '#5a8a4a'], noise, { scale: 2 }))
70
71// Pick a random color from a palette
72const color = pickRandom(['#4a7c3f', '#5a8a4a', '#3d6b35'], rand)
73
74// Generate varied shades (oklch space)
75const shade = varyColor('#4a7c3f', 0.1, rand)
76shade() // slightly different green each call
77```
78
79## Basic utilities
80
81```ts
82import { lerpColor, parseColorToRgb, hexToRgb, rgbToHex } from 'shapecraft'
83
84lerpColor('#ff0000', '#0000ff', 0.5) // → [r, g, b]
85parseColorToRgb('#ff0000') // → [1, 0, 0]
86hexToRgb('#ff0000') // → [1, 0, 0]
87rgbToHex(1, 0, 0) // → '#ff0000'
88```