How would you build something like Conway's Game of Life with this?

[alexlamb]

This looks like a terrific project, but I'm confused. If setting output to graphical doesn't yield a valid return type, but simulation state needs to be retained and updated between rounds, how would GPU.js handle that. Surely for that kind of application, don't you need an updated array and graphical output? Any pointers would be awesome. Thanks in advance.

[fuzzie360]

Hi @alexlamb for GOL, you would need to separate the next generation logic and put it in a kernel.

Something like this:

state = [[0,1,...], [1,0,..], ...]
state = nextGeneration(state)   // gpu.js kernel function
render(state)                   // any kind of renderer

Then you can use your own renderer for the view. It could be just plain text, DOM or even another kernel which is graphical. (To minimize latency, you can set outputTexture paramater to true in the nextGeneration kernel. If render is a gpu.js kernel, you would not need to do toArray on the state)

If you want a detailed explaination how it works, you can read this old blog post made using the same concepts that gpu.js was built upon: https://fazli.sapuan.org/blog/gpgpu-3d-game-of-life-in-html5/

But to tell you the truth, this is not the best way to do it. There is another way but it is not implemented yet. If we could somehow use the canvas as an input for the kernel, it will solve the issue of having a separate renderer for GOL, but more excitingly, I can see more potential applications for this feature, like applying multiple graphical filters on an image. If anybody would like to work on canvas inputs to the kernel, we will gladly welcome it.

[alexlamb]

Awesome! Thank you fuzzie360! I am relatively new to GPU coding, though I've been doing simulation science for years. I'm hoping to implement some nice artificial life using GPU.js if I can get things up and running. I'll try that first, and then maybe take a closer look at your project source to see if I can help.

[Nthalk]

@fuzzie360 I've implemented this filter video with the rc.10. It was a pain, because I had to use a blitting canvas to extract video (as the GPU instance only has the webl context), then use the blitCanvas to extract the image data, then import it into a textureImport kernel, and using outputToTexture, then I send it through a filter and render chain:

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Pipeline options
        var height = 150;
        var width = 200;

        // Video element for capturing the video
        var video = document.createElement('video');
        document.body.appendChild(video);
        video.setAttribute('playsinline', '');
        video.setAttribute('autoplay', '');
        video.setAttribute('muted', '');
        video.style.height = height;
        video.style.width = width;

        // We need this 2d context to extract image data from the video element
        var blitCanvasContext = document.createElement("canvas").getContext("2d");

        var gpu = new GPU();

        // We need something to convert the linear rgba array to a more sensible format
        var importTexture = gpu.createKernel(function (input, width, height) {
            return input[((height - this.thread.y) * width * 4) + (this.thread.x * 4) + this.thread.z] / 255.0
        })
            .setOutputToTexture(true)
            .setOutput([width, height, 4]);

        // All channel filter
        var filterTexture = gpu.createKernel(function (input) {
            // Remove all greens!
            if (this.thread.z === 1) return 0;
            // Half the blues
            if (this.thread.z === 2) return input[this.thread.z][this.thread.y][this.thread.x] / 2.0;
            // Unaffected
            return input[this.thread.z][this.thread.y][this.thread.x];
        })
            .setOutputToTexture(true)
            .setOutput([width, height, 4]);

        var renderTexture = gpu.createKernel(function (input) {
            var r = input[0][this.thread.y][this.thread.x];
            var g = input[1][this.thread.y][this.thread.x];
            var b = input[2][this.thread.y][this.thread.x];
            var a = input[3][this.thread.y][this.thread.x];
            this.color(r, g, b, a);
        })
            .setOutput([width, height])
            .setGraphical(true);

        // This is our output canvas, so we can render the result
        var renderCanvas = renderTexture.getCanvas();
        document.body.appendChild(renderCanvas);

        function animate() {
            // Input via image
            blitCanvasContext.drawImage(video, 0, 0, width, height);

            // Convert image to array data
            var data = blitCanvasContext.getImageData(0, 0, width, height).data;

            // Convert array to texture
            var texture = importTexture(data, width, height);

            // Apply filters
            texture = filterTexture(texture);

            // Render the texture to screen
            renderTexture(texture);

            // The multi-kernels f-up the canvas dimensions
            renderCanvas.width = width;
            renderCanvas.height = height;

            // Loop when we should animate
            requestAnimationFrame(animate);
        }

        // Request stream from video object
        navigator.mediaDevices.getUserMedia({
            audio: false,
            video: {
                facingMode: "user"
            }
        }).then(function success(stream) {
            video.srcObject = stream;
            requestAnimationFrame(animate);
        });
    });
</script>

[pirate]

There's also this: https://github.com/railsagainstignorance/gpujs-experiment-conways-game-of-life