GLSL Gaussian BlurExploring Fashion MNISTHello DracoHello, Basis Universal GPU TexturesLucyParametric Surface PlotsGLSL Contour LinesJIS Colors In Munsell SpaceAlways Inside Looking CubeMSDF Text LabelsWeighted, Blended Order-independent TransparencyZ-order curve 3D in GLSLRealtime CPPNGLSL Chunk TagScreen Projected LinesX-Ray BunnyHello @thi.ng/webgl
WebGL2 PRNG in GLSL
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"
}
})
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.