Toen de HUD ineens op zijn kop stond in de browser 🙃

7 november 2026

Met versie 2026.10.10 zetten we twee grote stappen onder de motorkap: het spel draait nu op Unity 6.6, en de browserversie start op WebGPU overal waar de browser dat aanbiedt, bijvoorbeeld in actuele versies van Chrome en Edge. Anders draait hij zoals voorheen op WebGL 2. Het zijn allebei manieren waarop een website met de videokaart praat. WebGL bestaat al vele jaren, WebGPU is de opvolger en sluit beter aan bij hoe videokaarten tegenwoordig werken. Kort daarna stond mijn HUD op zijn kop. 🙃

Eén keer gezien, daarna nooit meer. Ik had het spel op mijn laptop in Chrome geopend en de HUD stond ondersteboven. We probeerden het na te maken en dat lukte niet. Ook ik zelf zag het niet meer. Dus sloten we de zaak voorlopig.

Toen kwam het terug, met fotografisch bewijs. Op 19 oktober gebeurde het weer, in een gloednieuwe wereld. Dit keer stuurde ik meteen een bugmelding met een screenshot. Alleen het screenshot zelf was kapot: drie kopieën naast elkaar, vol strepen. De speurtocht daarachter: een plaatje bestaat uit pixels, en elke pixel heeft normaal drie waarden voor rood, groen en blauw. Het spel verwachtte drie waarden per pixel, maar WebGPU leverde er vier, met een extra waarde voor doorzichtigheid. Lees je dezelfde gegevens met vier waarden per pixel, dan wordt het plaatje leesbaar. De wereld staat rechtop, maar de hele HUD is gespiegeld: de hotbar plakt aan de bovenkant en de vraag van VEGA “Zal ik je de basis laten zien?” staat ondersteboven. Onderweg bleek dat elk screenshot uit de browser kapot was sinds de overstap naar WebGPU. Niemand had het gemerkt, omdat er tot dan toe geen enkele melding uit de browser met een screenshot was gekomen. 🔍

Waarom alleen de HUD? Vanaf het grafische niveau “Middel”, met het vizier-effect aan, schildert een aparte camera de HUD in een eigen plaatje in het grafische geheugen. Experts noemen dat een render texture. Het spel legt dit plaatje daarna met het vizier-effect en de gloed over de wereld. Het lastige: grafische systemen zijn het er niet over eens waar “boven” in zo'n plaatje is. Sommige tellen de rijen van boven, andere van onder. Normaal egaliseert de game-engine dat. In de browser op WebGPU ging dit bij het HUD-plaatje soms mis. Waarom alleen soms, weten we nog steeds niet zeker.

Nabootsen? Geen geluk. Om browserbugs zelf te vinden, bouwden we een klein testparcours. We downloaden het kant-en-klare spelpakket van een versie en starten dat op onze eigen computer. Dan klikt een op afstand bestuurde browser met WebGPU zich door het menu, start een wereld en maakt screenshots waar onze AI naar kijkt. Zo probeerden we het drie keer, met precies mijn link en op dezelfde grafische chip, en drie keer stond de HUD rechtop. Alleen in mijn echte Chrome zat de bug.

Als je de bug niet kunt afdwingen, moet je hem opsporen. Daarom schildert de HUD-camera nu een piepklein magenta puntje van vier pixels in de linkerbovenhoek van zijn plaatje. Voordat de HUD over de wereld wordt gelegd, kijkt de vizier-shader in beide linkerhoeken waar het puntje terecht is gekomen. (Een shader is een klein programma dat rechtstreeks op de videokaart draait.) Staat het puntje onderaan, dan draait de shader de HUD om. Hij maskeert daarbij de hoeken, dus je ziet het puntje nooit. Maar zolang de bug zich verstopt, is zo'n reparatie moeilijk te testen. Daarom is er een testschakelaar die het puntje bewust in de verkeerde hoek zet. Dan moet de HUD op zijn kop staan, en dat deed hij precies zo als op mijn screenshot. Dat bewees dat de detectie werkt. ✅

De voor de hand liggende oplossing was een bug geweest. “Draai hem dan gewoon altijd om op WebGPU!” Dat probeerden we op het testparcours voordat we het inbouwden. Het had de HUD voor iedereen kapotgemaakt, want meestal stond hij rechtop.

Drie valkuilen onderweg. WebGPU speelde ons nog een paar streken. Ten eerste kan een simpele kopieerstap een plaatje op WebGPU helemaal uit zichzelf spiegelen. De bug nabootsen met een gespiegelde kopie werkte dus niet. Ten tweede kwam een nieuwe schakelaar die we aan de shader wilden doorgeven in de browser gewoon nooit aan. Ten derde lazen we pixels terug om de volgorde van de rijen te controleren en kregen we tegenstrijdige antwoorden. Daarom schrijft de shader zijn oordeel nu in één enkele pixel, en die lezen wij uit. Een enkele pixel heeft geen boven en geen onder. 😄

Wat je eraan hebt. Sinds versie 2026.10.24 staat de HUD in de browser weer de goede kant op en zijn screenshots uit de browser weer echte plaatjes. Bugmeldingen bevatten nu ook een grafisch gedeelte waarin onder meer staat welke kant de HUD op stond. Zo weten we het de volgende keer ook zonder plaatje. In hetzelfde pakket hebben we ook een bug uit de meldingen van Lyxette opgelost: een dier zweeft niet meer boven een sloot die je hebt gegraven. 🐾

Als je de HUD ooit toch nog ondersteboven ziet: in de browser opent F2 de bugmelding. We kijken ernaar. 🙏