Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generate normals for car paint base layer
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta charset=utf-8>
</head>
<body>
<canvas width=2048 height=2048 style="width: 800px; height: 800px"></canvas>
</body>
<script language="javascript" src="https://npmcdn.com/regl/dist/regl.js"></script>
<script language="javascript">
var regl = createREGL({canvas: document.getElementsByTagName('canvas')[0]})
const setupQuad = regl({
frag: `
precision highp float;
varying vec2 uv;
const float Scale = 200.0;
vec2 hash( vec2 p )
{
p = mod(p, Scale); // tile
p = vec2(dot(p,vec2(127.1,311.7)),
dot(p,vec2(269.5,183.3)));
return fract(sin(p)*18.5453);
}
// return distance, and cell id
vec2 voronoi( in vec2 x )
{
vec2 n = floor( x );
vec2 f = fract( x );
vec3 m = vec3( 8.0 );
for( int j=-1; j<=1; j++ )
for( int i=-1; i<=1; i++ )
{
vec2 g = vec2( float(i), float(j) );
vec2 o = hash( n + g );
vec2 r = g - f + o;
float d = dot( r, r );
if( d<m.x )
m = vec3( d, o );
}
return vec2( sqrt(m.x), m.y+m.z );
}
const float PHI = 1.61803398874989484820459;
float gold_noise(in vec2 xy, in float seed)
{
return fract(tan(distance(xy*PHI, xy)*seed)*xy.x);
}
vec3 gold_noise3(in vec2 xy, in float seed)
{
return vec3 (gold_noise(xy, seed+1.0),
gold_noise(xy, seed+2.0),
gold_noise(xy, seed+3.0));
}
// -----------------------------------------------
void main() {
vec2 p = uv;
// compute voronoi patterm
vec2 c = voronoi( p * Scale );
// colorize
//vec3 col = 0.5 + 0.5*cos( c.y*6.2831 + vec3(0.0,1.0,2.0) );
vec3 rnd_normal = gold_noise3(vec2(c.y, c.y), 42.0) * 2.0 - 1.0;
vec3 normal = normalize (mix (vec3 (0.0, 0.0, 1.0), rnd_normal, 0.2));
normal.xy = normal.xy * 0.5 + 0.5;
gl_FragColor = vec4( normal, 1.0 );
}
`,
vert: `
precision highp float;
attribute vec2 position;
varying vec2 uv;
void main() {
uv = 0.5 * (position + 1.0);
gl_Position = vec4(position, 0, 1);
}`,
attributes: {
position: [ -4, -4, 4, -4, 0, 4 ]
},
depth: { enable: false },
count: 3
})
regl.frame(function () {
setupQuad(() => {
regl.draw()
})
})
</script>
</html>
@hb3p8
Copy link
Author

hb3p8 commented Mar 31, 2021

Open html in a browser and save the image from canvas with via right click menu

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment