31:T442,{ let rules_b = createRules(3); // let rules_s = createRules(2, 3); let rules_s = createRules(0, 1, 4, 5, 6, 7, 8); let computeProgram = createProgram(gl, vs, fs_compute); createQuad(gl); let renderProgram = createProgram(gl, vs, fs_render); createQuad(gl); let oldState = createTexture(gl, initialState()); let newState = createTexture(gl, new ImageData(W, H)); let oldFb = createFramebuffer(gl, oldState); let newFb = createFramebuffer(gl, newState); while (true) { gl.useProgram(computeProgram); gl.uniform1i(gl.getUniformLocation(computeProgram, "rules_b"), rules_b); gl.uniform1i(gl.getUniformLocation(computeProgram, "rules_s"), rules_s); gl.bindTexture(gl.TEXTURE_2D, oldState); gl.bindFramebuffer(gl.FRAMEBUFFER, newFb); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); gl.useProgram(renderProgram); gl.bindTexture(gl.TEXTURE_2D, newState); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); [oldState, oldFb, newState, newFb] = [newState, newFb, oldState, oldFb]; yield; } }32:T44e,fs_compute = ` #version 300 es precision mediump float; uniform sampler2D image; uniform int rules_b; uniform int rules_s; out vec4 fragColor; int unpack(vec4 val) { // return (val.r > 0.0 ? 1 : 0); return int(round((1.0 - val.r) * 255.0)); } vec4 pack(int val) { // return vec4(val > 0 ? 1 : 0, 0, 0, 0); return vec4(1.0 - float(val)/255.0, 0, 0, 0); } int fetch(ivec2 px) { ivec2 size = textureSize(image, 0); // texelFetch does not support wrapping, must be done manually vec4 color = texelFetch(image, (px+size)%size, 0); return unpack(color); } int neighbors(ivec2 px) { int n = 0; for (int dx = -1; dx <= 1; dx++) { for (int dy = -1; dy <= 1; dy++) { if (dx == 0 && dy == 0) { continue; } if (fetch(px + ivec2(dx, dy)) == 255) { n++; } } } return n; } void main() { ivec2 px = ivec2(gl_FragCoord.xy); int alive = fetch(px); int n = neighbors(px); int mask = 1 << n; if (alive == 255) { alive = (rules_s & mask) > 0 ? alive-1 : 255; } else { alive = (rules_b & mask) > 0 ? 255 : alive-1; } fragColor = pack(alive); }`.trim()33:[] 2f:{"title":"WebGL Game of Life","cells":[{"id":0,"value":"md`# WebGL Game of Life`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"W = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"H = W","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"canvas = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"function initialState() {\n const array = new Uint8ClampedArray(4 * W * H);\n const CX = W/2, CY = H/2;\n for (let y = 0; y < H; ++y) {\n for (let x = 0; x < W; ++x) {\n let idx = W * y + x << 2;\n// array[idx] = Math.random() > 0.5 ? 255 : 0;\n \t\tlet dx = (x-CX)/Math.min(CX, CY); \n\t\t\tlet dy = (y-CY)/Math.min(CX, CY);\n\t\t\tlet dist = Math.sqrt(dx*dx + dy*dy); // 0 - center, 1 - distant\n array[idx] = x === W/2 || y === H/2 ? 0 : 255;\n }\n }\n return new ImageData(array, W, H);\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { createProgram, createTexture, createQuad, createFramebuffer } from \"@ondras/webgl-utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"gl = canvas.getContext(\"webgl2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"function createRules(...args) {\n let rules = 0;\n args.forEach(num => rules += 1< 0.0 ? 0 : 1);\n float col = value;\n fragColor = vec4(col, col, col, 1);\n}\n`.trim()","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}