Accelerating Conway’s Game of Life with WebGL: A Browser-Based Approach to Parallel Computation

5 min readOct 29, 2024

Introduction

Conway’s Game of Life is a cellular automaton devised by mathematician John Conway in 1970. It consists of a grid of cells that evolve over discrete time steps based on simple rules. Despite its simplicity, the Game of Life can produce astonishingly complex patterns and emergent behaviors, making it an intriguing subject for exploring computational techniques.

However, traditional CPU-based implementations often struggle to handle large grids in real time due to their sequential nature. To address this, I set out to implement a browser-based solution leveraging WebGL, a technology designed to execute parallel computations on a GPU. The goal was to harness the GPU’s power to perform massively parallel updates on the Game of Life grid, enabling smoother visualizations and larger simulations in real time. You can find the project on GitHub and try a demo at https://wgol-demo.clems4ever.com.

Motivation

The appeal of implementing Conway’s Game of Life using WebGL lies in its ability to harness parallel computation directly within a web browser. By offloading the processing of thousands (or even millions) of cells to the GPU, significant performance improvements can be achieved over traditional single-threaded CPU implementations. This approach not only supports more complex and dynamic simulations but also makes the experience accessible to anyone with a modern web browser and GPU.

A browser-based solution offers additional advantages, including cross-platform compatibility, simplified deployment, and easy accessibility for users without requiring specialized software installations. This project aims to create an engaging, educational, and highly interactive experience for users interested in cellular automata and parallel computing.

If you’re eager to learn WebGL hands-on, I highly recommend exploring WebGL Fundamentals. It provides comprehensive resources to help you master the basics and dive into more advanced concepts.

Technical Overview

Architecture

This project leverages WebGL to perform computations for Conway’s Game of Life. WebGL is a JavaScript API that enables GPU-accelerated rendering and parallel computations within web browsers. In this implementation, each cell in the grid is represented as a pixel in a texture. By using fragment shaders, the state of the entire grid can be updated simultaneously, taking advantage of the GPU’s parallel processing capabilities.

A key advantage of using a texture-based representation is that fragment shaders can access the state of neighboring cells directly through texture coordinates. This enables efficient random access to grid data, which would be challenging with traditional buffers optimized for sequential memory access.

Using Shaders for Computation

WebGL uses shaders — small, C-like programs that run on the GPU — to handle rendering and parallel computation tasks. For this project, a fragment shader determines the next state of each cell. Since a fragment shader executes for each pixel in a texture, it is ideal for processing all cells in parallel.

The shader reads the state of each cell’s eight neighboring pixels (representing its eight adjacent cells) and applies Conway’s rules to determine the next state based on the number of living neighbors. This parallel approach allows simultaneous updates across the entire grid.

Here is the actual code of the Fragment shader that you can find here in the Github project:

int next() {
    int neighbours_alive = get(-1, -1) +
              get(-1,  0) +
              get(-1,  1) +
              get( 0, -1) +
              get( 0,  1) +
              get( 1, -1) +
              get( 1,  0) +
              get( 1,  1);
    int current = get(0, 0);
    bool live = current == 1;

    // Below are the rules:
    // - Any live cell with fewer than two live neighbours dies, as if by underpopulation.
    // - Any live cell with two or three live neighbours lives on to the next generation.
    // - Any live cell with more than three live neighbours dies, as if by overpopulation.
    // - Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.
    if (live && neighbours_alive < 2) {
        return 0;
    } else if (live && (neighbours_alive == 2 || neighbours_alive == 3)) {
        return current;
    } else if (live && neighbours_alive > 3) {
        return 0;
    } else if (!live && neighbours_alive == 3) {
        return 1;
    }
    return 0;
}
 
void main() {
    float current = float(next());
    gl_FragColor = vec4(current, current, current, 1.0);
}

Computation stages

At each iteration, the current state of the grid is read from a texture, while the new state is stored in a separate texture via a framebuffer. This setup allows for efficient texture swapping between iterations, ensuring that the output texture from iteration N becomes the input texture for iteration N+1. This mechanism prevents overwriting the current state prematurely and maintains the simulation’s integrity.

The computation pipeline for each iteration consists of two main stages:

State Update Stage: Reads the current state from the input texture and calculates the updated state using a fragment shader, storing the results in the output texture.
Rendering Stage: Projects the updated texture onto the viewport, displaying the current state of the simulation to the user.

The code can be found here.

Applications and Future Work

The approach described here extends beyond the Game of Life. The principles of GPU-accelerated cellular automata can be applied to various areas, such as fluid simulations, reaction-diffusion systems, and more complex rule-based systems. By providing a platform for real-time, interactive simulations, this project opens up new avenues for exploring and visualizing complex dynamical systems like the continuous-domain variant called Lenia, which demands significantly higher computational power.

Conclusion

This project demonstrates the potential of leveraging WebGL for massively parallel computations directly in the browser. By offloading the task of updating the Game of Life grid to the GPU, we achieve real-time performance even with large grid sizes. This showcases the power of parallel computation while providing an accessible and engaging experience for users interested in cellular automata.

Using WebGL for browser-based simulations offers a promising approach to achieving significant performance gains. It allows developers and enthusiasts alike to experiment with complex systems and visualize their behavior in an interactive and accessible manner. I encourage readers to explore the project and discover the exciting possibilities of combining parallel computation with browser-based technologies.

Code and Demos

To explore the code behind this project or try out a live demo, visit the GitHub repository and the live demo link. The codebase includes detailed comments and documentation to help readers understand the implementation and experiment with custom modifications.

Acknowledgments

I would like to extend my sincere gratitude to greggman, the author behind WebGL Fundamentals, for creating an invaluable resource that helped me deepen my understanding of WebGL. His clear and comprehensive tutorials provided the foundation for this project and inspired me to explore the possibilities of GPU-accelerated computing in the browser.