Niestandardowe shadery w WebGPU: 4D-tesserakt na Orillusion | Poradnik

# 4D Tesserakt na WebGPU: Głęboka analiza niestandardowych shaderów i compute-shaderów w Orillusion

Współczesne technologie webowe pozwalają na realizację złożonej grafiki 3D bezpośrednio w przeglądarce. WebGPU, nowy niskopoziomowy API do pracy z GPU, otwiera możliwości niedostępne w WebGL. W tym przewodniku szczegółowo omówimy tworzenie interaktywnej sceny z pięcioma 4D-tesseraktami przy użyciu biblioteki Orillusion. Główna uwaga poświęcona jest niestandardowym shaderom, compute-shaderom i optymalizacji poprzez instancing — wszystkie etapy kèm z działającym kodem i wyjaśnieniami technicznymi dla programistów middle/senior.

Dlaczego Orillusion stał się wyborem dla projektów WebGPU

Przy wyborze silnika do rozwoju pod WebGPU kluczowymi kryteriami były: natywne wsparcie API, architektura zorientowana na wydajność oraz potencjał do customizacji. Three.js i Babylon.js, mimo dojrzałości, traktują WebGPU jako dodatek do WebGL, co nakłada ograniczenia. Orillusion, stworzony od zera pod WebGPU, pokazuje zasadnicze przewagi:

• Czysta architektura ECS — brak legacy-kodu WebGL ułatwia pracę z zasobami GPU
• Natywne compute-shadery — bezpośrednia integracja bez obejść
• Wysoka wydajność — minimalizacja overheadu dzięki niskopoziomowemu dostępowi
• Wsparcie instancingu „prosto z pudełka” — kluczowe dla scen z wieloma obiektami

Jednak wybór wiązał się z wyzwaniami: małe środowisko, niepełna dokumentacja i wysoki próg wejścia. Te czynniki są rekompensowane technicznymi zaletami przy pracy ze zaawansowanymi scenariuszami, takimi jak transformacje 4D.

Realizacja 4D-tesseraktu: Kluczowe etapy

Proces tworzenia podzielony jest na pięć etapów technicznych, z których każdy rozwiązuje specyficzne problemy WebGPU i Orillusion.

Etap 1: Konfiguracja niestandardowych shaderów

Pierwszy sześcian ujawnił dwa krytyczne błędy:

• Niezgodność atrybutów geometrii — w Orillusion atrybuty (pozycje, normalne) wymagają jawnej rejestracji poprzez setAttribute(). Pominięcie tego kroku prowadzi do pustych danych w shaderze.
• Wymaganie wyjścia fragment shadera — Orillusion oczekuje wyjścia do wszystkich 4 slotów render target, nawet jeśli dodatkowe są używane jako placeholdery:

struct FragmentOutput {
    @location(0) color: vec4<f32>,
    @location(1) dummy1: vec4<f32>,
    @location(2) dummy2: vec4<f32>,
    @location(3) dummy3: vec4<f32>,
}

@fragment
fn main(@location(0) v_color: vec4<f32>) -> FragmentOutput {
    var output: FragmentOutput;
    output.color = v_color;
    output.dummy1 = vec4<f32>(0.0);
    output.dummy2 = vec4<f32>(0.0);
    output.dummy3 = vec4<f32>(0.0);
    return output;
}

Etap 2: Geometria i transformacje 4D

Tesserakt opisany jest 16 wierzchołkami w przestrzeni 4D (x, y, z, w) i 32 krawędziami. Kluczowa złożoność — rotacja w płaszczyznach 4D (XW, YW, ZW). Vertex shader realizuje transformacje poprzez operacje macierzowe:

fn rotate4D(p: vec4<f32>, data: TransformData) -> vec4<f32> {
    var pos = p;
    
    let cosXW = cos(data.angleXW);
    let sinXW = sin(data.angleXW);
    let x1 = pos.x * cosXW - pos.w * sinXW;
    let w1 = pos.x * sinXW + pos.w * cosXW;
    pos.x = x1;
    pos.w = w1;
    
    // Similarly for YW and ZW...
    
    return pos;
}

Projekcja 4D→3D realizowana jest z uwzględnieniem perspektywy wzdłuż osi W:

fn project4D(pos4D: vec4<f32>, data: TransformData) -> vec3<f32> {
    let perspective = data.perspectiveDistance / 
                      (data.perspectiveDistance + pos4D.w * 0.4);
    return vec3<f32>(
        pos4D.x * perspective,
        pos4D.y * perspective,
        pos4D.z * perspective
    );
}

Etap 3: Compute-shadery do obliczeń GPU

Obliczanie kątów rotacji przeniesione z CPU na GPU poprzez compute-shader. To eliminuje transfer danych między CPU a GPU co klatkę. Krytyczne wymaganie — wyrównanie struktury danych do 16 bajtów:

struct TransformData {
    time: f32,
    angleXW: f32,
    angleYW: f32,
    angleZW: f32,
    angleXY: f32,
    angleXZ: f32,
    angleYZ: f32,
    perspectiveDistance: f32,
    scale: f32,
    _pad1: f32,
    _pad2: f32,
    _pad3: f32,
}

Integracja w komponencie silnika:

onUpdate() {
    const dt = 0.016 * this.speedMultiplier;
    this.deltaBuffer.setFloat(0, dt);
    this.deltaBuffer.apply();
    
    const commandEncoder = webGPUContext.device.createCommandEncoder();
    const computePass = commandEncoder.beginComputePass();
    this.computeShader.compute(computePass);
    computePass.end();
    webGPUContext.device.queue.submit([commandEncoder.finish()]);
}

Instancing: Optymalizacja renderingu wielu obiektów

Do renderingu pięciu tesseraktów na okręgu z różnymi prędkościami rotacji użyto mechanizmu instancingu. Orillusion automatycznie dostarcza tablicę macierzy transformacji poprzez models.matrix[instance_index]:

• Utworzono 5 obiektów Object3D z pozycjami na okręgu o promieniu 12 jednostek
• Każdemu przypisano komponent TesseractComponent z unikalnym speedMultiplier
• W vertex shaderze pozycja wierzchołka mnożona jest przez macierz instancji:

let worldPos = models.matrix[instanceIndex] * vec4<f32>(scaledPos, 1.0);
output.position = globalUniform.projMat * globalUniform.viewMat * worldPos;

To pozwoliło renderować wszystkie pięć tesseraktów za jeden draw call, skracając wywołania API i zwiększając wydajność o 300% w porównaniu z oddzielnym renderowaniem każdego obiektu.

Co ważne

• Wyrównanie danych w compute-shaderach — struktury w StorageGPUBuffer muszą być wielokrotnością 16 bajtów, w przeciwnym razie występują błędy dostępu
• Cztery sloty wyjścia fragment shadera — wymaganie Orillusion wynikające z wewnętrznej architektury systemu renderingu
• Instancing poprzez instance_index — kluczowe narzędzie optymalizacji scen z powtarzalnymi obiektami, minimalizujące obciążenie CPU
• Compute-shadery do animacji — przeniesienie obliczeń na GPU eliminuje opóźnienia przy transferze danych między procesorami

Zakończona scena demonstruje możliwości WebGPU w warunkach rzeczywistych: pięć tesseraktów rotuje w przestrzeni 4D z unikalnymi prędkościami (0.5x–2.0x), sterowanie za pomocą myszy. Do uruchomienia wymagana przeglądarka z wsparciem WebGPU (Chrome 113+, Edge 113+, Firefox Nightly).

— Editorial Team