WebGL without a GPU

• Our servers have no GPU. WebGL still has to render somewhere.
• Chrome's default software path (SwiftShader) took ~24s per 3D page.
• Pointing ANGLE at Mesa llvmpipe (--use-angle=gl) dropped it to ~6s.
• The one-line flag is the easy part. The display, the from-source Mesa, and proving it stays on the fast path are the rest of the story.

No GPU, on purpose

Chrome doesn't render WebGL. ANGLE does.

Why the gap is 4×

• It JITs to native code. LLVM compiles the live shader and GL state into real x86-64. No interpreter loop.
• It is tiled and multi-threaded. It actually uses every core.

The change: One line

- '--use-angle=swiftshader',
+ '--use-angle=gl',

• --disable-gpu silently forces SwiftShader on again. It is the most-copied flag in every headless tutorial.
• --in-process-gpu kills the GL surface ANGLE needs.

The catch: You need a display

Why Mesa is built from source

meson setup build \
  -Dbuildtype=release -Dgallium-drivers=llvmpipe -Dvulkan-drivers= \
  -Dllvm=enabled -Dshared-llvm=enabled

Proving it: browserless.report()

const browserless = require('browserless')
const report = await browserless.report()
console.log(report)

• type is software / llvmpipe here. swiftshader would mean we fell back; hardware would mean a GPU appeared.
• mesa is read from the loaded libgallium-<ver>.so, not dpkg, which reports the stale package version under our side-load.
• simdWidth: 256 means llvmpipe is using AVX2, which is most of why it's fast.

That report is also the CI gate

Most of the work was benchmarking, not coding

• Dev machines lie. A real GPU renders pages that come back black on prod. Every number had to come from prod-shaped hardware.
• Single runs lie. Cold JIT, first-paint races, shared cores. The fastest-looking result was sometimes the wrong one: the flat fallback shipped ~1s quicker.

The numbers

microlink https://threejs.org/examples/webgl_animation_skinning_blending&screenshot.animated

curl -G "https://api.microlink.io" \
  -d "url=https://threejs.org/examples/webgl_animation_skinning_blending" \
  -d "screenshot.animated=true"

import mql from '@microlink/mql'

const { data } = await mql('https://threejs.org/examples/webgl_animation_skinning_blending', {
  screenshot: {
    animated: true
  }
})

import requests

url = "https://api.microlink.io/"

querystring = {
    "url": "https://threejs.org/examples/webgl_animation_skinning_blending",
    "screenshot.animated": "true"
}

response = requests.get(url, params=querystring)

print(response.json())

require 'uri'
require 'net/http'

base_url = "https://api.microlink.io/"

params = {
  url: "https://threejs.org/examples/webgl_animation_skinning_blending",
  screenshot.animated: "true"
}

uri = URI(base_url)
uri.query = URI.encode_www_form(params)

http = Net::HTTP.new(uri.host, uri.port)
http.use_ssl = true

request = Net::HTTP::Get.new(uri)
response = http.request(request)

puts response.body

<?php

$baseUrl = "https://api.microlink.io/";

$params = [
    "url" => "https://threejs.org/examples/webgl_animation_skinning_blending",
    "screenshot.animated" => "true"
];

$query = http_build_query($params);
$url = $baseUrl . '?' . $query;

$curl = curl_init();

curl_setopt_array($curl, [
    CURLOPT_URL => $url,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "GET"
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
    echo "cURL Error #: " . $err;
} else {
    echo $response;
}

package main

import (
    "fmt"
    "net/http"
    "net/url"
    "io"
)

func main() {
    baseURL := "https://api.microlink.io"

    u, err := url.Parse(baseURL)
    if err != nil {
        panic(err)
    }
    q := u.Query()
    q.Set("url", "https://threejs.org/examples/webgl_animation_skinning_blending")
    q.Set("screenshot.animated", "true")
    u.RawQuery = q.Encode()

    req, err := http.NewRequest("GET", u.String(), nil)
    if err != nil {
        panic(err)
    }

    client := &http.Client{}
    resp, err := client.Do(req)
    if err != nil {
        panic(err)
    }
    defer resp.Body.Close()

    body, err := io.ReadAll(resp.Body)
    if err != nil {
        panic(err)
    }

    fmt.Println(string(body))
}

import mql from '@microlink/mql'

const { data } = await mql('https://threejs.org/examples/webgl_animation_skinning_blending', {
  screenshot: {
    animated: true
  }
})

The honest limit