model = webgl.compileModel(gl, {
...webgl.defQuadModel(),
shader: webgl.defShader(gl, {
...webgl.FX_SHADER_SPEC_UV,
fs: `
uint hash( uint x ) {
x += ( x << 10u );
x ^= ( x >> 6u );
x += ( x << 3u );
x ^= ( x >> 11u );
x += ( x << 15u );
return x;
}
uint hash( uvec2 v ) {
return hash( v.x ^ hash(v.y) );
}
uint hash( uvec3 v ) {
return hash( v.x ^ hash(v.y) ^ hash(v.z) );
}
uint hash( uvec4 v ) {
return hash( v.x ^ hash(v.y) ^ hash(v.z) ^ hash(v.w) );
}
uint hashInt( uint x )
{
x += x >> 11;
x ^= x << 7;
x += x >> 15;
x ^= x << 5;
x += x >> 12;
x ^= x << 9;
return x;
}
uint hashInt( uvec2 v )
{
uint x = v.x, y = v.y;
x += x >> 11;
x ^= x << 7;
x += y;
x ^= x << 6;
x += x >> 15;
x ^= x << 5;
x += x >> 12;
x ^= x << 9;
return x;
}
uint hashInt( uvec3 v )
{
uint x = v.x, y = v.y, z = v.z;
x += x >> 11;
x ^= x << 7;
x += y;
x ^= x << 3;
x += z ^ ( x >> 14 );
x ^= x << 6;
x += x >> 15;
x ^= x << 5;
x += x >> 12;
x ^= x << 9;
return x;
}
float rand(uint h) {
const uint mantissaMask = 0x007FFFFFu;
const uint one = 0x3F800000u;
h &= mantissaMask;
h |= one;
float r2 = uintBitsToFloat( h );
return r2 - 1.0;
}
float random( float f ) {
return rand(hashInt(floatBitsToUint(f)));
}
float random( vec2 f ) {
return rand(hashInt(floatBitsToUint(f)));
}
float random( vec3 f ) {
return rand(hashInt(floatBitsToUint(f)));
}
void main() {
float r = random(vec3(gl_FragCoord.xy, time));
fragColor = vec4( vec3(r), 1.0 );
}`,
uniforms: {
time: "float"
}
})
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
