murattunalı.

Effekte, die wir gelöscht haben: WebGL bleibt, Körnung nicht.

Murat Tunalı VERÖFFENTLICHT: LESEZEIT: 6′ REMOVED Prozess

Diese Website läuft mit WebGL, WebGPU und einem reduzierten Three.js; die Frage war nie, ob es Effekte gibt, sondern ob jeder einzelne seinen Preis in einer Messung zurückzahlt.

Die einfachste Form eines Portfolio-Beitrags zählt die Effekte auf, die gebaut wurden. Dieser macht das Gegenteil: er zählt die gelöschten. Zuerst muss ein Missverständnis ausgeräumt werden — diese Website trägt drei echte berechnete Ebenen. Der Himmel der Startseite wird mit Three.js gezeichnet, der Seitenübergang und das Signaturfeld laufen auf WebGPU-Compute-Pipelines, und wo ein Gerät kein WebGPU hat, übernimmt WebGL. Effekte wurden also nicht abgelehnt. Einige Effekte wurden gelöscht, nachdem sie gemessen worden waren, und jede Löschung hatte eine Zahl.

Die Körnung wurde zweimal abgelehnt, kam einmal zurück und wurde dann gelöscht

Die körnige Texturebene wurde zuerst in einer Mikrodetail-Runde abgelehnt, mit der Begründung, dass die Reinheit des Papiers Teil der Identität ist. Dann brachte ein Gestaltungsvertrag sie zurück. Dann löschte eine spätere Runde sie — aber die Löschung kam nicht mit weniger Wachen: fünf Wachen blieben, in gleicher Zahl, alle in die Gegenrichtung gedreht. Gemessen wird jetzt nicht „gibt es Körnung“, sondern „gibt es noch Textur“ — denn die Textur kommt nun von der berechneten Oberfläche selbst.

  1. berechnetes Feld sichtbar → Luminanz sigma 7,03
  2. Feld verborgen → Luminanz sigma 2,48 (verbleibendes Poster)
  3. reduzierte Bewegung → Luminanz sigma 1,93 (Poster)
  4. nacktes Porzellan → Luminanz sigma 0,58 (nur Papierlicht)

Die Messung führte zweimal in die Irre, und beide Fälle sind festgehalten: eine feste Papierregion zu wählen traf eine Stelle, die heute Text trägt, und zu fragen, welches Element unter dem Zeiger liegt, sah die nicht anklickbaren Dekorationen überhaupt nicht. Papier wird nun mit verborgenem Inhalt gemessen; die Frage ist, ob das Papier eine Textur trägt, nicht wo etwas sitzt.

Das Löschen eines Effekts legte den echten Fehler dahinter frei

Die teuerste Lehre der Runde kam, nachdem die Körnung weg war. Eine Wache stand seit zwei Runden auf Grün, und der Grund dafür hatte nichts mit dem zu tun, was sie messen sollte: der „Unterschied“, den sie zwischen zwei Bildschirmaufnahmen sah, kam nicht von der Leinwand, sondern von der eigenen Verschiebung der Körnung über 0,7 Sekunden. Mit gelöschter Körnung fiel der Unterschied auf null, und die Wache sprang auf Rot. Dahinter lag ein echter Fehler.

Der Fehler war dieser: die Mischung auf der Leinwand multiplizierte Farbe und Alpha getrennt, und der Compositor zeigte das Ergebnis gegen das Quadrat des Alphas. Ein Band mit einem Alpha unter 0,05 und eine Rasterlinie bei 0,012 waren überhaupt nicht auf dem Bildschirm — sichtbar waren nur die Anführungszeichen mit Alpha 0,3. Diese Ebene zeichnete seit dem 28. August nicht mehr, und niemand hatte es bemerkt. Die Mischung wurde getrennt; die Messung ging auf dem alten Streifen von 0 auf 1,23 und über die ganze Szene auf 2,10. Das Löschen eines Effekts brachte auch eine Wache zum Vorschein, die zwei Runden lang gelogen hatte.

Eine Schaltfläche zu entfernen reparierte die eigene Behauptung der Website

Die Website hatte einen Ton-Schalter: freiwillig, standardmäßig aus, mit drei Symbolen. Er wurde entfernt. Der bei der Entfernung gemessene Nebengewinn erwies sich als größer als die Entscheidung selbst — der Schalter schrieb seine Einstellung in den Browser-Speicher, und der Datenschutztext der Website sagt, dass lokaler Speicher nicht verwendet wird. Für jeden Besucher, der den Ton einschaltete, war die eigene Behauptung der Seite also verletzt. Die Prüfsuite konnte das nicht sehen, weil die Wache maß, ohne den Ton je einzuschalten. Die Schaltfläche zu entfernen schloss die Widersprüchlichkeit an der Wurzel; die genehmigten Zeichenketten bleiben im Wörterbuch.

Code, der seinen Treiber verliert, wird gelöscht

Der Himmel der Startseite hatte eine Randnavigation: sobald der Zeiger in ein Band am Bildschirmrand kam, drehte sich der Blick dorthin. Die erste Fassung drehte mit 28 Grad pro Sekunde, es kam die Rückmeldung, das sei viel zu schnell, und sie wurde um das Vierfache verlangsamt. Dann wurde die ganze Bewegung gestrichen. Mit ihr ging die Kameraneigung, denn ihr einziger Treiber war die Schwenkgeschwindigkeit — Code, der seinen Treiber verliert, ist toter Code. Die Wache wurde nicht gelöscht, sondern in eine Abwesenheits-Wache verwandelt, und sie misst auch die Gegenrichtung: am Rand darf keine Verschiebung mehr bleiben, die Zeiger-Parallaxe muss aber weiterleben.

Eine Messung kann eine Idee auch nach dem Bau ablehnen

Statt die Sterne einzeln zu zeichnen, erschien der Wechsel zu einem vorgerechneten Textur-Atlas sinnvoll. Der Atlas wurde geschrieben und gemessen: 310,3 Millisekunden gegen 311,0. Gewinn: null. Das Profil erklärte, warum — die Kosten lagen nicht bei den Sternen, sondern in der Rauschfunktion des Nebels. Der Code wurde gelöscht.

In derselben Phase wurde auch die Bibliothek für weiches Scrollen in Rente geschickt. Der Grund war nicht nur ihre Größe: das Projekt nutzte die Unterscheidung für grobe Zeiger an vierzehn verschiedenen Stellen, und diese Bibliothek war nicht darunter; eine festgehaltene bewusste Entscheidung ließ sich nicht finden. Das Vendor-Bündel ging von 51,1 Kilobyte auf 33,5, und das Scrollen am Schreibtisch fiel an den Browser selbst zurück.

Zwei Ideen, die vor dem Bau ausgeschieden sind

Für die Methodenseite war eine Höhepunkt-Szene geplant: der Besucher solle eine der Wachen der Seite absichtlich brechen und das Ergebnis sehen. Die Idee wurde vor der Umsetzung ausgeschieden, denn der ethische Kern dieser Seite ist, dass der Verstoß freiwillig bleibt. Ein nicht angeforderter, dauerhaft kaputter Zustand ist etwas, dem die Kriterien der Barrierefreiheit ausdrücklich widersprechen.

Die zweite Idee wurde gebaut und zurückgenommen: die maschinelle Lesung der Signaturszene über die ganze Seite auszubreiten. Sie wurde gebaut, gezeigt und abgelehnt — die Platzierung zerstörte die Lesbarkeit. Eine Rücknahme ist kein Protokoll des Scheiterns, sondern das Protokoll einer Runde; beim nächsten Versuch wurde aus der Szene eine Atlas-Platte.

Auch eine Wache, die ihre Nachbarin bricht, wird gelöscht

Gelöscht werden nicht nur Effekte. Eine Performance-Wache wurde geschrieben, sie maß korrekt, und sie wurde entfernt: weil sie mit vierfach gebremstem Prozessor lief, band sie ihr eigenes Urteil an die momentane Last der Maschine und sie brach eine benachbarte Wache. Die Nachbarin war über sechs Läufe grün und in den zwei Läufen mit der neuen Wache rot, und die Korrelation wurde eins zu eins geprüft. Eine Wache, die eine andere bricht, ist ein klarer Verlust; der Gewinn, den sie bot, steht im Entscheidungsregister, der Code nicht.

Three.js wurde nicht gelöscht, sondern reduziert

Das Gegenbeispiel gehört ebenfalls festgehalten, denn dort wird die eigentliche Regel sichtbar. Die dreidimensionale Welt der Startseite brauchte eine teure Abhängigkeit, und diese Abhängigkeit wurde genommen — aber nicht, wie sie kam. Die Bibliothek wurde auf die tatsächlich genutzten Module reduziert, und ihre komprimierte Größe ist unter einer Budget-Obergrenze verriegelt — wird sie überschritten, springt die Prüfsuite auf Rot. Sie lädt nur auf der Startseite, und auch dort erst, nachdem die Seite geladen und der Hauptthread frei ist. Bei reduzierter Bewegung, auf Geräten mit wenig Speicher und bei aktiviertem Datensparen lädt sie gar nicht.

Diese Liste ist also kein Argument gegen Effekte. Was die gelöschten gemeinsam hatten: die Messung zahlte ihren Preis nie zurück. Was die verbliebenen gemeinsam haben: sie tun es.

Der stärkste Effekt war am Ende der, den wir entfernt haben.

Murat Tunalı

Gründer. Zwanzig Jahre Enterprise-IT-Infrastruktur + Webentwicklung.

Nächster Beitrag

SCHEMA: BLOGPOSTING + PERSON + BREADCRUMBLIST — AUTOR, DATUM UND LESEZEIT SPEISEN DAS SCHEMA