feat: @typegpu/gl

Motivation

While WebGPU is the future of graphics programming on the web, there are many areas where WebGL2 is more widely available, or has better platform support. By implementing a WebGL/GLSL fallback for TypeGPU, we could:

• Extend @typegpu/three to work on the WebGL backend, in addition to the currently supported WebGPU backend.
• Giving WebGL devs access to a powerful syntax for defining type-safe shader functions in TypeScript, with a fallback to GLSL-implemented functions (just like in core TypeGPU).
• Aiding in incremental migration for established WebGL projects towards WebGPU, without requiring a major rewrite. This would complement and work with the new byegl project.

Roadmap

• 11th of August - Experimental release as @typegpu/gl@0.12.0 (full-screen shaders, simple uniforms, basic GLSL generation)
• TBD - Full standard library (std.*) coverage

API

The @typegpu/gl package would export:

• initWithGL for initializing a WebGL implementation of TgpuRoot (equivalent of tgpu.init)
• initWithGLFallback which would first try a WebGPU backend, then fallback to the WebGL implementation
• glOptions, which passed into tgpu.resolve would generate GLSL for more fine-grained use.

initWithGL / initWithGLFallback

import tgpu, { d, std } from 'typegpu';
import { initWithGLFallback } from '@typegpu/gl';

const pos = tgpu.const(d.arrayOf(d.vec2f, 3), [
  d.vec2f(0.0, 0.5),
  d.vec2f(-0.5, -0.5),
  d.vec2f(0.5, -0.5),
]);

// Render pipeline

const root = await initWithGLFallback();
const pipeline = root.createRenderPipeline({
  vertex: ({ $vertexIndex: vid }) => {
    'use gpu';
    return {
      $position: d.vec4f(pos.$[vid], 0, 1),
    };
  },
  fragment: () => {
    'use gpu';
    return d.vec4f(1, 0, 0, 1);
  },
});

// Setting up the canvas and drawing to it

const context = root.configureContext({
  canvas: document.querySelector('canvas') as HTMLCanvasElement,
  alphaMode: 'premultiplied',
});

pipeline.withColorAttachment({ view: context }).draw(3);

GLSL struct alignment

To generate TypeGPU structs that follow GLSL rules, we could export glslStruct:

import { glslStruct } from '@typegpu/gl';

const Boid = glslStruct({
  pos: d.vec3f,
  vel: d.vec3f,
});

We could also align all structs automatically, but that seems more magical. To be prototyped and discussed.

The issue names the entry points initWithGL, initWithGLFallback, and glOptions, with tgpu.init as the existing API to compare against. Start by mapping those entry points to TypeGPU's current initialization and pipeline behavior, then validate the roadmap scope: full-screen shaders, simple uniforms, and basic GLSL generation. Done means an experimental @typegpu/gl release meeting that scope; no files or tests are named.