WebAssembly (WASM) til applikationer med høj ydeevne · Lektion

Integration af WASM med WebGL/WebGPU

Lær at forbinde WASM-logik med høj ydeevne til browserens grafik-API'er som WebGL og det nye WebGPU.

Lektion 1 af 411 trin

Integration af WASM med WebGL/WebGPU er en gratis WebAssembly (WASM) til applikationer med høj ydeevne-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i WebAssembly (WASM) til applikationer med høj ydeevne, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. WebAssembly (WASM) til applikationer med høj ydeevne-kurset indeholder 4 lektioner i alt.

Højtydende grafik

Har du nogensinde spekuleret på, hvordan komplekse 3D-spil eller datavisualiseringer kører problemfrit i din webbrowser? WebAssembly (WASM) spiller en vigtig rolle!

I denne lektion undersøger vi, hvordan WASM arbejder sammen med browserens grafik-API'er som WebGL og WebGPU for at levere imponerende visuelle oplevelser.

Få mere fart på grafikken

Grafikapplikationer kræver ofte intensive beregninger:

Fysiksimuleringer: Beregning af objekters bevægelser og interaktioner.
Transformationer af hjørnepunkter: Manipulation af 3D-modellers punkter i rummet.
Billedbehandling: Anvendelse af filtre eller effekter i realtid.

WASM leverer næsten indbygget hastighed, så disse beregningstunge opgaver udføres meget hurtigere end med traditionel JavaScript alene.

Browserens grafik-API'er

Hvis du vil tegne noget visuelt på en webside, bruger du HTML-elementet <canvas>. Men hvordan tegner du komplekse 3D-scener?

WebGL: Et etableret API til gengivelse af interaktiv 2D- og 3D-grafik i alle kompatible webbrowsere uden plugins. Det er baseret på OpenGL ES.
WebGPU: Et nyere og mere moderne API, der er udviklet til højtydende grafik og databehandling på webben og giver mere direkte adgang til GPU-funktioner.

JavaScripts rolle

Mens WASM håndterer de tunge numeriske beregninger, spiller JavaScript en afgørende rolle som "orkestrator".

JavaScript har ansvaret for at:

Opsætte HTML-elementet <canvas>.
Indlæse WASM-modulet i hukommelsen.
Kalde eksporterede funktioner fra WASM-modulet.
Tage de data, som WASM producerer, og sende dem til WebGL/WebGPU, så de kan gengives.

Hent en WebGL-kontekst

Før du kan tegne noget, skal du hente en reference til elementet <canvas> og derefter anmode om en WebGL-gengivelseskontekst fra det. Denne kontekst er din adgang til tegnekommandoerne.

Prøv at køre dette grundlæggende JavaScript-udsnit:

function setupWebGL() {
  const canvas = document.createElement('canvas');
  canvas.id = 'myCanvas';
  canvas.width = 400;
  canvas.height = 300;
  document.body.appendChild(canvas); // Add to DOM for context

  const gl = canvas.getContext('webgl');

  if (!gl) {
    console.error('WebGL not supported!');
    return null;
  }
  console.log('WebGL context obtained successfully!');
  // You could now start drawing with 'gl'
  return gl;
}

setupWebGL();

WASM genererer data

Forestil dig, at du skal beregne positionerne (hjørnepunkterne) for en kompleks 3D-model eller simulere partikler. Det er perfekte opgaver for WASM.

I stedet for at tegne direkte beregner WASM rå numeriske data, f.eks. lister med koordinater, farver eller normaler, og placerer dem i sin lineære hukommelse. Derefter læser JavaScript disse data.

Eksempel på WASM-data (C)

Her er en konceptuel C-funktion, som efter kompilering til WASM kunne generere et enkelt sæt 2D-koordinater til en trekant. JavaScript ville derefter kalde denne funktion og læse dataene fra WASM's hukommelse.

Bemærk: Denne C-kode er illustrativ og ville blive kompileret til et .wasm-modul ved hjælp af værktøjer som Emscripten.

// This is C code that would be compiled to WASM.
// It defines a function to get triangle vertex data.

// Assume 'memory' is shared with JS
// For simplicity, we'll just return a pointer
// to a static array for this example.

float g_vertices[6]; // 3 vertices * 2 components (x, y)

// Function to fill the array and return its start address
// This function would be exported from the WASM module.
float* getTriangleData() {
    g_vertices[0] = -0.5f; g_vertices[1] = -0.5f; // Vertex 1 (x, y)
    g_vertices[2] =  0.5f; g_vertices[3] = -0.5f; // Vertex 2 (x, y)
    g_vertices[4] =  0.0f; g_vertices[5] =  0.5f; // Vertex 3 (x, y)
    return g_vertices; // Return pointer to start of data
}

JS læser WASM-hukommelse

Efter at WASM har beregnet og gemt data i sin hukommelse, skal JavaScript have adgang til dem. WASM-hukommelsen eksponeres som en SharedArrayBuffer (eller ArrayBuffer) i JavaScript.

Du kan derefter oprette visninger af typede arrays, f.eks. Float32Array, over denne buffer for at læse de numeriske data effektivt.

Her kan du se, hvordan JS konceptuelt kunne tilgå data fra et indlæst WASM-modul:

// Assume 'wasmInstance' is a loaded WebAssembly instance
// and 'getTriangleData' is an exported WASM function.

function renderWasmData(wasmInstance) {
  // In a real scenario, you'd get these from the WASM instance
  const mockDataPtr = 0; // Simulate pointer to start of data
  const mockMemoryBuffer = new ArrayBuffer(6 * Float32Array.BYTES_PER_ELEMENT);
  const mockWasmExports = {
    getTriangleData: () => mockDataPtr,
    memory: { buffer: mockMemoryBuffer }
  };

  // Simulate filling the WASM memory (e.g., by WASM code)
  new Float32Array(mockMemoryBuffer).set([-0.5, -0.5, 0.5, -0.5, 0.0, 0.5]);

  // Get the pointer (memory address) to the data from WASM
  const dataPtr = mockWasmExports.getTriangleData();

  // Access WASM's linear memory
  const memory = mockWasmExports.memory;

  // Create a Float32Array view over the WASM memory
  // starting at 'dataPtr' for 6 floats (3 vertices * 2 components)
  const vertices = new Float32Array(
    memory.buffer, dataPtr, 6
  );

  console.log('Vertices from WASM:', vertices);
  // Now 'vertices' can be passed to WebGL for drawing!
}

// Call the function with a simulated WASM instance
renderWasmData({});

WASM + WebGL-pipeline

Den fulde pipeline ser sådan ud:

HTML: Definerer elementet <canvas>.
JavaScript: Indlæser WASM og henter WebGL-konteksten.
WASM: Udfører beregningstunge opgaver, f.eks. genererer data om hjørnepunkter.
JavaScript: Læser WASM's output fra den lineære hukommelse.
JavaScript (WebGL): Overfører data til GPU-buffere og udsender tegnekommandoer.
Browser: Gengiver scenen på <canvas>.

Kontrol af grafik-integration

Hvilken komponent er primært ansvarlig for at opsætte HTML-canvas-elementet og sende WASM's outputdata til WebGL, så de kan gengives?

Besvar den i den interaktive lektion

Opsummering: Grafisk ydeevne

Du har lært, hvordan WebAssembly integreres med browserens grafik-API'er for at skabe visuelt indhold med høj ydeevne:

WASM fremskynder beregningstunge opgaver som beregning af hjørnepunkter.
WebGL og WebGPU er browserens API'er til gengivelse af 2D- og 3D-grafik.
JavaScript fungerer som den nødvendige bro: Det indlæser WASM, koordinerer kald og sender data til grafik-API'erne.

Denne stærke kombination åbner mulighed for komplekse spil, simuleringer og datavisualiseringer direkte i browseren!

Gratis at komme i gang

Lær WebAssembly (WASM) til applikationer med høj ydeevne med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Integration af WASM med WebGL/WebGPU” gratis?

Ja — hele teksten til “Integration af WASM med WebGL/WebGPU” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af WebAssembly (WASM) til applikationer med høj ydeevne-kurset, skal du opgradere til CoddyKit PRO. WebAssembly (WASM) til applikationer med høj ydeevne-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Integration af WASM med WebGL/WebGPU”?

Lær at forbinde WASM-logik med høj ydeevne til browserens grafik-API'er som WebGL og det nye WebGPU. Du øver dig i WebAssembly (WASM) til applikationer med høj ydeevne med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på WebAssembly (WASM) til applikationer med høj ydeevne?

Der kræves ingen tidligere erfaring. WebAssembly (WASM) til applikationer med høj ydeevne på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Integration af WASM med WebGL/WebGPU”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne WebAssembly (WASM) til applikationer med høj ydeevne-lektion?

Ja. Alle WebAssembly (WASM) til applikationer med høj ydeevne-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til WebAssembly (WASM) til applikationer med høj ydeevne