2e:null 2f:["$","title",null,{"children":"WebGL2 PRNG in GLSL | Zihou Ng | Observable"}] 34:T64a,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" } }) })35:[] 32:{"id":"272f66dd4867d922","slug":"webgl2-prng-in-glsl","title":"WebGL2 PRNG in GLSL","thumbnail":"0b91ddf0c32ebac5bf2785f6db7b5e5f78ae48cb16b073dd43df479ba7433f44","access_level":"public","create_time":"$D2020-04-01T12:03:21.094Z","update_time":"$D2020-07-31T02:02:32.159Z","view_time":null,"first_public_time":"$D2020-04-02T04:07:33.785Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":"starter_2024"},"version":210,"publish_version":210,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null}],"members":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"9bd8b2489631aa82","slug":"webgl","title":"WebGL","owner":{"id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng"}},"type":"notebook","body":{"title":"WebGL2 PRNG in GLSL","cells":[{"id":0,"value":"md`# WebGL2 PRNG in GLSL`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`Generating random float in glsl, a technique by [Lee C](http://amindforeverprogramming.blogspot.com/2013/07/random-floats-in-glsl-330.html) or [Spatial@stackoverflow](https://stackoverflow.com/questions/4200224/random-noise-functions-for-glsl/17479300#17479300).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof gl = {\n const canvas = DOM.canvas(width, 400);\n canvas.value = canvas.getContext('webgl2');\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"render = {\n gl.clearColor(0, 0, 0, 1);\n gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n model.uniforms.time = now % 1e6 * 1e-3;\n webgl.draw(model);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"webgl = require('https://bundle.run/@thi.ng/webgl@1.0.5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"