Load GPU.js in HTML Using a CDN Script Tag

This guide demonstrates how to quickly load and execute GPU.js directly in a web browser using a Content Delivery Network (CDN) script tag. By leveraging a CDN, you can harness client-side GPU acceleration for complex mathematical computations via WebGL without needing Node.js, npm, or build bundlers like Webpack.

Adding the CDN Script Tag

To include GPU.js in an HTML document, place a <script> tag linking to a reliable CDN provider such as CDNJS, unpkg, or jsDelivr within the <head> or just before the closing </body> tag.

Using jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/gpu.js@latest/dist/gpu-browser.min.js"></script>

Using unpkg:

<script src="https://unpkg.com/gpu.js@latest/dist/gpu-browser.min.js"></script>

Complete HTML Example

Below is a complete, standalone HTML page that loads GPU.js, defines a computing kernel, and performs a matrix-style calculation directly on the user's graphics processor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPU.js CDN Example</title>
    <!-- Load GPU.js via CDN -->
    <script src="https://cdn.jsdelivr.net/npm/gpu.js@latest/dist/gpu-browser.min.js"></script>
</head>
<body>
    <h1>GPU.js Browser Demo</h1>
    <p>Check the developer console to view the result.</p>

    <script>
        // Initialize the GPU instance
        const gpu = new GPU.GPU();

        // Create a kernel to multiply numbers across an array of length 5
        const multiplyKernel = gpu.createKernel(function(a, b) {
            return a[this.thread.x] * b[this.thread.x];
        }).setOutput([5]);

        // Input arrays
        const arrayA = [1, 2, 3, 4, 5];
        const arrayB = [10, 20, 30, 40, 50];

        // Execute computation on the GPU
        const results = multiplyKernel(arrayA, arrayB);

        console.log('Calculation Output:', results);
    </script>
</body>
</html>

Key Considerations