ui: Enable webgl rendering by default

[stevegolton]

This PR simply flips the WebGL rendering flag on by default. If WebGL is not supported, we silently fallback to the canvas renderer, which is what's used when the flag is off anyway.

[LalitMaganti]

Really great job on this! Excited for this to be a headline feature for the next release :)

[github-actions]

🎨 Perfetto UI Builds

• 44af911 (2026-02-10): https://storage.googleapis.com/perfetto-ci-artifacts/gh-21873622126-1-ui/ui/index.html
• 93e41e5 (2026-02-10): https://storage.googleapis.com/perfetto-ci-artifacts/gh-21877394959-1-ui/ui/index.html
• 1658da2 (2026-02-10): https://storage.googleapis.com/perfetto-ci-artifacts/gh-21880452469-1-ui/ui/index.html
• d06853e (2026-02-11): https://storage.googleapis.com/perfetto-ci-artifacts/gh-21918420167-1-ui/ui/index.html
• fd1c00e (2026-02-11): https://storage.googleapis.com/perfetto-ci-artifacts/gh-21919012014-1-ui/ui/index.html
• fbbfdcd (2026-02-12): https://storage.googleapis.com/perfetto-ci-artifacts/gh-21939885862-1-ui/ui/index.html
• 8f994aa (2026-02-12): https://storage.googleapis.com/perfetto-ci-artifacts/gh-21940271805-1-ui/ui/index.html
• 307660b (2026-02-12): https://storage.googleapis.com/perfetto-ci-artifacts/gh-21941371273-1-ui/ui/index.html
• 7d0479f (2026-02-12): https://storage.googleapis.com/perfetto-ci-artifacts/gh-21942205687-1-ui/ui/index.html
• c7d6862 (2026-02-12): https://storage.googleapis.com/perfetto-ci-artifacts/gh-21942364495-1-ui/ui/index.html
• 09de7f2 (2026-02-12): https://storage.googleapis.com/perfetto-ci-artifacts/gh-21942662855-1-ui/ui/index.html
• 68ee136 (2026-02-12): https://storage.googleapis.com/perfetto-ci-artifacts/gh-21944227303-1-ui/ui/index.html
• 5b1493b (2026-02-12): https://storage.googleapis.com/perfetto-ci-artifacts/gh-21944866060-1-ui/ui/index.html
• 9682bc3 (2026-02-16): https://storage.googleapis.com/perfetto-ci-artifacts/gh-22060397296-1-ui/ui/index.html
• b9ac71e (2026-02-16): https://storage.googleapis.com/perfetto-ci-artifacts/gh-22068229333-1-ui/ui/index.html
• fed882b (2026-02-16): https://storage.googleapis.com/perfetto-ci-artifacts/gh-22069275011-1-ui/ui/index.html
• a773f9a (2026-02-16): https://storage.googleapis.com/perfetto-ci-artifacts/gh-22072647290-1-ui/ui/index.html

[stevegolton]

CI Testing Notes

• Chrome on the CI seems to want to run using Swiftshader as a WebGL fallback.
• Swiftshader is a software rasterizer built into Chrome that's designed to be used for compositing and as a WebGL fallback when no hardware GPU is present.

# Testing Swiftshader on cloudtop
/opt/google/chrome/chrome --enable-unsafe-swiftshader --use-gl=angle --use-angle=swiftshader-webgl

• It seems Swiftshader does not support the fragment shader we use for rendering chevrons properly, as we end up with artifacts around the edges that are supposed to be discarded or transparent. It also seems to be very very slow when testing on my cloudtop at least, and really is not a practical solution. We really don't want users to end up falling back to this. CI results.

Rendering artifacts around chevrons

Half finished lines

• The artifacts seem to be a Swiftshader issue rather than an issue with our fragment shader, as the latter works just fine with AMD, Intel, and Apple drivers.
• Thankfully, swiftshader has now been deprecated as a WebGL fallback due to security issues and poor performance. This started being rolled out in Chrome 139 released August 5th, 2025 source source. Thus, I don't think we need to do anything special here.
• We were using Chrome 138 version in the CI up until yesterday when I happened to update it to 145 for unrelated reasons source. This is why there was a discrepancy between cloudtop and the CI. Now, the CI runs with our canvas2d fallback by default.

Options for testing WebGL path in the CI

1. Run swiftshader, make our fragment shaders compatible with it.
   a. It might actually be too slow to even run on the CI - we still end up with half rendered frames when the screenshot is taken.
   b. Optimizing for a rasterizer that no one is going to be running.
2. Run a VM with a real hardware GPU.
   a. Expensive, impractical.
3. Run an external software implementation (e.g. llvmpipe).
   a. Tests WebGL render path, not too slow, representative of real hardware.

LLVMPipe

LLVMPipe is a software rasterizer, that actually performs better than our canvas2d fallback, and more importantly, seems to be much more compliant and works with our fragment shaders without artifacts. We can use this in headless mode on our CI using EGL, but we need to install a few more packages in the container. Chrome typically blocklists LLVMPipe as a GPU driver, so we must pass --ignore-gpu-blocklist.

# Testing LLVMPipe on cloudtop: 
/opt/google/chrome/chrome --ignore-gpu-blocklist

[LalitMaganti]

So what's the plan in that case? Do we want to enable llvmpipe on the CI and then land this?

[stevegolton]

So what's the plan in that case? Do we want to enable llvmpipe on the CI and then land this?

I think that makes the most sense. I'm attempting to update the CI container now.