feat: byegl.getWgslSource() hook (#7)

Author: iwoplaza

apps/docs/src/content/getting-started.mdx

@@ -19,7 +19,7 @@ const gl = canvas.getContext('webgl');
 Enabling byegl will intercept calls to `.getContext('webgl' | 'webgl2' | 'experimental-webgl')` on all canvases and return
 a virtualized WebGL context.
 
-## Basic usage
+## Importing WebGPU resources
 
 Once your WebGL app is running on byegl, you can can hook into the underlying WebGPU API directly.
 
@@ -33,15 +33,41 @@ const wgpuVertexBuffer = device.createBuffer({
 // Create a two-way binding between both resources, allowing
 // you to populate the buffer using a WGSL compute shader, and
 // use it in a WebGL pipeline 🪄
-const vertexBuffer = byegl.importWebGPUBuffer(wgpuVertexBuffer);
+const vertexBuffer = byegl.importWebGPUBuffer(gl, wgpuVertexBuffer);
 //    ^? WebGLBuffer
 ```
 
 The [Hooks: Water Surface](/byegl/examples#hooks/water-surface) example demonstrates this functionality in practice.
 
+## Retrieving WebGPU resources
+
+If you need to access the underlying WebGPU resources, you can use the `byegl.getWebGPUBuffer()` function.
+
+```ts
+const wgpuVertexBuffer = byegl.getWebGPUBuffer(gl, vertexBuffer);
+//    ^? GPUBuffer
+```
+
+Note that byegl may need to reallocate the buffer (in case the size of the data changes), so make sure to
+call `.getWebGPUBuffer()` each time you need to access the buffer, don't store it off into a variable.
+
+## Retriving generated WGSL code
+
+If you need to access the generated WGSL code, you can use the `byegl.getWGSLSource()` function, passing
+the WebGL program. Note that since in WebGPU, both the vertex and fragment shaders are colocated.
+
+```ts
+const program = gl.createProgram();
+
+// ...
+
+const wgsl = byegl.getWGSLSource(gl, program);
+//    ^? string | undefined
+```
+
 ## Disabling byegl
 
-If you want more granular control over when `byegl` intercepts contexts, `byegl.enable()` returns a disabling function.
+If you want more granular control over when `byegl` intercepts contexts, `byegl.enable()` returns a function to disable it.
 
 ```ts
 const disable = await byegl.enable();
@@ -51,3 +77,4 @@ const disable = await byegl.enable();
 //
 
 disable(); // Bye byegl 👋
+```

apps/docs/src/examples/glcompat/white-triangle/index.ts

@@ -26,15 +26,30 @@ export default function whiteTriangle({ canvas }: ExampleContext) {
   gl.shaderSource(vertexShader, vertexShaderSource);
   gl.compileShader(vertexShader);
 
+  if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+    console.error('Failed to compile vertex shader');
+    console.error(gl.getShaderInfoLog(vertexShader));
+  }
+
   const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER) as WebGLShader;
   gl.shaderSource(fragmentShader, fragmentShaderSource);
   gl.compileShader(fragmentShader);
 
+  if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+    console.error('Failed to compile fragment shader');
+    console.error(gl.getShaderInfoLog(fragmentShader));
+  }
+
   const program = gl.createProgram();
   gl.attachShader(program, vertexShader);
   gl.attachShader(program, fragmentShader);
   gl.linkProgram(program);
 
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.error('Failed to link program');
+    console.error(gl.getProgramInfoLog(program));
+  }
+
   const positionLocation = gl.getAttribLocation(program, 'a_position');
   const positionBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

packages/byegl/src/index.ts

@@ -2,8 +2,8 @@ import tgpu from 'typegpu';
 import { ByeGLBuffer } from './buffer.ts';
 import { ByeGLContext } from './byegl-context.ts';
 import { $internal } from './types.ts';
-import { MockWGSLGenerator } from './wgsl/mock-wgsl-generator.ts';
 import { ShaderkitWGSLGenerator } from './wgsl/shaderkit-wgsl-generator.ts';
+import { ByeGLProgram } from './program.ts';
 
 export async function enable() {
   const originalGetContext = HTMLCanvasElement.prototype.getContext as any;
@@ -22,7 +22,6 @@ export async function enable() {
       contextId === 'experimental-webgl'
     ) {
       const wgslGen = new ShaderkitWGSLGenerator();
-      // const wgslGen = new MockWGSLGenerator();
       return new ByeGLContext(
         contextId === 'webgl2' ? 2 : 1,
         root,
@@ -43,7 +42,7 @@ export function getDevice(
   gl: WebGLRenderingContext | WebGL2RenderingContext,
 ): GPUDevice {
   if (!(gl instanceof ByeGLContext)) {
-    throw new Error('Cannot use ByeGL hooks on a vanilla WebGPU context');
+    throw new Error('Cannot use byegl hooks on a vanilla WebGPU context');
   }
 
   return gl[$internal].device;
@@ -62,6 +61,15 @@ export function importWebGPUBuffer(
   return glBuffer;
 }
 
+/**
+ * Returns the WebGPU buffer associated with the given WebGL buffer.
+ * Since byegl might reallocate the buffer if the size of the data changes,
+ * call this function each time you need access. Don't store it off in a variable.
+ *
+ * @param gl The WebGL (actually byegl) context.
+ * @param glBuffer
+ * @returns The WebGPU buffer associated with `glBuffer`.
+ */
 export function getWebGPUBuffer(
   gl: WebGLRenderingContext | WebGL2RenderingContext,
   glBuffer: WebGLBuffer,
@@ -72,3 +80,14 @@ export function getWebGPUBuffer(
 
   return (glBuffer as ByeGLBuffer)[$internal].gpuBuffer;
 }
+
+export function getWGSLSource(
+  gl: WebGLRenderingContext | WebGL2RenderingContext,
+  glProgram: WebGLProgram,
+): string | undefined {
+  if (!(gl instanceof ByeGLContext)) {
+    throw new Error('Cannot use byegl hooks on a vanilla WebGL context');
+  }
+
+  return (glProgram as ByeGLProgram)[$internal].compiled?.wgsl;
+}

packages/byegl/src/wgsl/shaderkit-wgsl-generator.ts

@@ -1082,8 +1082,6 @@ ${[...state.varyings.values()].map((varying) => `  ${varying.id} = input.${varyi
         ]),
       });
 
-    console.log('Generated:\n', resolvedWgsl);
-
     return {
       wgsl: resolvedWgsl,
       attributes: [...state.attributes.values()],