impr: Expand the API to make Three.js example working (#22)

Author: reczkok

apps/docs/src/examples/glcompat/textured-cube/index.ts

@@ -39,7 +39,6 @@ export default async function ({ canvas }: ExampleContext) {
 
   // Load texture
   const texture = await loadTexture(gl, crateUrl.src);
-  console.log('Texture loaded:', texture);
 
   const vertexShader = gl.createShader(gl.VERTEX_SHADER) as WebGLShader;
   gl.shaderSource(vertexShader, vertexShaderSource);

apps/docs/src/examples/three/webgl_geometry_cube/index.ts

@@ -17,8 +17,7 @@ export default function ({ canvas }: ExampleContext) {
   texture.colorSpace = THREE.SRGBColorSpace;
 
   const geometry = new THREE.BoxGeometry();
-  // TODO: Fix texture bug in order to show the crate texture
-  const material = new THREE.MeshBasicMaterial({ color: 0xff0055 });
+  const material = new THREE.MeshBasicMaterial({ map: texture });
 
   const cube = new THREE.Mesh(geometry, material);
   scene.add(cube);

packages/byegl/src/byegl-context.ts

@@ -22,6 +22,10 @@ import { ByeGLFramebuffer } from './framebuffer.ts';
 import { ByeGLProgram, ByeGLShader } from './program.ts';
 import { Remapper } from './remap.ts';
 import { ByeGLTexture } from './texture.ts';
+import {
+  convertRGBToRGBA,
+  getTextureFormat,
+} from './texture-format-mapping.ts';
 import { $internal } from './types.ts';
 import { ByeGLUniformLocation, UniformBufferCache } from './uniform.ts';
 import type { UniformInfo, WgslGenerator } from './wgsl/wgsl-generator.ts';
@@ -105,6 +109,10 @@ export class ByeGLContext {
     [gl.BLEND_DST_RGB, gl.ZERO],
     [gl.BLEND_SRC_ALPHA, gl.ONE],
     [gl.BLEND_DST_ALPHA, gl.ZERO],
+    [gl.UNPACK_FLIP_Y_WEBGL, 0],
+    [gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0],
+    [gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.BROWSER_DEFAULT_WEBGL],
+    [gl.UNPACK_ALIGNMENT, 4],
   ]);
 
   #globalAttributeState: AttributeState = {
@@ -277,7 +285,19 @@ export class ByeGLContext {
     if (!texture) {
       textureMap.delete(target);
     } else {
-      textureMap.set(target, texture);
+      if (target === gl.TEXTURE_CUBE_MAP) {
+        textureMap.set(gl.TEXTURE_CUBE_MAP_NEGATIVE_X, texture);
+        textureMap.set(gl.TEXTURE_CUBE_MAP_POSITIVE_X, texture);
+        textureMap.set(gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, texture);
+        textureMap.set(gl.TEXTURE_CUBE_MAP_POSITIVE_Y, texture);
+        textureMap.set(gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, texture);
+        textureMap.set(gl.TEXTURE_CUBE_MAP_POSITIVE_Z, texture);
+        textureMap.set(gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, texture);
+        textureMap.set(gl.TEXTURE_CUBE_MAP_POSITIVE_Z, texture);
+        textureMap.set(target, texture);
+      } else {
+        textureMap.set(target, texture);
+      }
     }
   }
 
@@ -1228,8 +1248,7 @@ export class ByeGLContext {
   }
 
   pixelStorei(pname: GLenum, param: GLint): void {
-    // TODO: Implement
-    throw new NotImplementedYetError('gl.pixelStorei');
+    this.#parameters.set(pname, param);
   }
 
   polygonOffset(factor: GLfloat, units: GLfloat): void {
@@ -1331,54 +1350,80 @@ export class ByeGLContext {
     let width = 0;
     let height = 0;
     let format: number = gl.RGBA;
-    // TODO: Not sure what to do with 'internalformat' just yet.
+    let type: number = gl.UNSIGNED_BYTE;
 
     const textureMap = this.#boundTexturesMap.get(this.#activeTextureUnit);
+
     const texture = textureMap?.get(target)?.[$internal];
     if (!texture) {
       // TODO: Generate a WebGL appropriate error
       return;
     }
 
     if (rest.length === 6) {
-      const [width_, height_, border, format_, type, pixels] = rest;
+      const [width_, height_, border, format_, type_, pixels] = rest;
       width = width_;
       height = height_;
       format = format_;
+      type = type_;
+
+      const formatInfo = getTextureFormat(format, type, internalformat);
+      texture.setFormatInfo(formatInfo);
 
       const size = [width, height] as const;
       texture.size = size;
 
       if (pixels) {
-        // For now, assume RGBA/UNSIGNED_BYTE format
-        // TODO: Handle different format/type combinations
-        if (format === gl.RGBA && type === gl.UNSIGNED_BYTE) {
-          this.#root.device.queue.writeTexture(
-            { texture: texture.gpuTexture },
-            pixels as ArrayBufferView<ArrayBuffer>,
-            { bytesPerRow: width * 4, rowsPerImage: height },
-            { width, height }
-          );
-        } else {
-          throw new NotImplementedYetError(`gl.texImage2D with format=${format}, type=${type}`);
+        let dataToUpload = pixels as ArrayBufferView;
+        let bytesPerRow = width * formatInfo.bytesPerPixel;
+
+        if (format === gl.RGB && (type === gl.UNSIGNED_BYTE || type === gl.UNSIGNED_SHORT_5_6_5)) {
+          if (type === gl.UNSIGNED_BYTE) {
+            const rgbaData = convertRGBToRGBA(pixels, width, height);
+            dataToUpload = rgbaData;
+            bytesPerRow = width * 4;
+          }
         }
+
+        const flipY = !!this.#parameters.get(gl.UNPACK_FLIP_Y_WEBGL);
+
+        if (flipY && type === gl.UNSIGNED_BYTE) {
+          dataToUpload = this.#flipImageVertically(dataToUpload as Uint8Array, width, height, formatInfo.bytesPerPixel);
+        }
+
+        this.#root.device.queue.writeTexture(
+          { texture: texture.gpuTexture },
+          dataToUpload as ArrayBufferView<ArrayBuffer>,
+          { bytesPerRow, rowsPerImage: height },
+          { width, height }
+        );
       }
     } else {
-      const [_format, type, source] = rest;
+      const [_format, _type, source] = rest;
       format = _format;
+      type = _type;
+
+      const formatInfo = getTextureFormat(format, type, internalformat);
+      texture.setFormatInfo(formatInfo);
+
       if ('width' in source) {
         width = source.width;
         height = source.height;
       } else {
         width = source.displayWidth;
         height = source.displayHeight;
       }
-      // TODO: Do something with 'type'
+
       const size = [width, height] as const;
       texture.size = size;
-      this.#root.device.queue.copyExternalImageToTexture({ source }, {
-        texture: texture.gpuTexture,
-      }, size);
+
+      const flipY = !!this.#parameters.get(gl.UNPACK_FLIP_Y_WEBGL);
+
+      this.#root.device.queue.copyExternalImageToTexture(
+        { source, flipY },
+        { texture: texture.gpuTexture },
+        size
+      );
     }
 
     // TODO: Implement mip-mapping
@@ -1438,19 +1483,100 @@ export class ByeGLContext {
     texture.setParameter(pname, param);
   }
 
-  texSubImage2D(
+  texStorage2D(
     target: GLenum,
-    level: GLint,
-    xoffset: GLint,
-    yoffset: GLint,
+    levels: GLsizei,
+    internalformat: GLenum,
     width: GLsizei,
     height: GLsizei,
-    format: GLenum,
-    type: GLenum,
-    pixels: ArrayBufferView | null,
   ): void {
-    // TODO: Implement
-    throw new NotImplementedYetError('gl.texSubImage2D');
+    const textureMap = this.#boundTexturesMap.get(this.#activeTextureUnit);
+    const texture = textureMap?.get(target)?.[$internal];
+    if (!texture) {
+      return;
+    }
+
+    const formatInfo = getTextureFormat(
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      internalformat,
+    );
+    texture.setFormatInfo(formatInfo);
+
+    texture.size = [width, height];
+  }
+
+  // biome-ignore format: Easier to read
+  texSubImage2D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, pixels: ArrayBufferView | null): void;
+  // biome-ignore format: Easier to read
+  texSubImage2D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, format: GLenum, type: GLenum, source: TexImageSource): void;
+  // biome-ignore format: Easier to read
+  texSubImage2D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, ...rest: [width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, pixels: ArrayBufferView | null] | [format: GLenum, type: GLenum, source: TexImageSource]): void {
+    const textureMap = this.#boundTexturesMap.get(this.#activeTextureUnit);
+    const texture = textureMap?.get(target)?.[$internal];
+    if (!texture) {
+      return;
+    }
+
+    if (rest.length === 5) {
+      // ArrayBufferView version
+      const [width, height, format, type, pixels] = rest;
+
+      if (!pixels) {
+        return;
+      }
+
+      const flipY = !!this.#parameters.get(gl.UNPACK_FLIP_Y_WEBGL);
+      let dataToUpload = pixels as ArrayBufferView;
+
+      if (format === gl.RGB && type === gl.UNSIGNED_BYTE) {
+        dataToUpload = convertRGBToRGBA(pixels, width, height);
+      }
+
+      if (flipY && type === gl.UNSIGNED_BYTE) {
+        const bytesPerPixel = format === gl.RGBA ? 4 : format === gl.RGB ? 3 : 1;
+        dataToUpload = this.#flipImageVertically(dataToUpload as Uint8Array, width, height, bytesPerPixel);
+      }
+      if ((format === gl.RGBA || format === gl.RGB) && type === gl.UNSIGNED_BYTE) {
+        this.#root.device.queue.writeTexture(
+          {
+            texture: texture.gpuTexture,
+            origin: { x: xoffset, y: yoffset, z: 0 },
+            mipLevel: level,
+          },
+          dataToUpload as ArrayBufferView<ArrayBuffer>,
+          {
+            bytesPerRow: width * 4,
+            rowsPerImage: height,
+          },
+          { width, height, depthOrArrayLayers: 1 }
+        );
+      } else {
+        throw new NotImplementedYetError(`gl.texSubImage2D with format=${format}, type=${type}`);
+      }
+    } else {
+      const [format, type, source] = rest;
+      const flipY = !!this.#parameters.get(gl.UNPACK_FLIP_Y_WEBGL);
+
+      let width: number, height: number;
+      if ('width' in source) {
+        width = source.width;
+        height = source.height;
+      } else {
+        width = source.displayWidth;
+        height = source.displayHeight;
+      }
+
+      this.#root.device.queue.copyExternalImageToTexture(
+        { source, flipY },
+        {
+          texture: texture.gpuTexture,
+          origin: { x: xoffset, y: yoffset, z: 0 },
+          mipLevel: level,
+        },
+        [width, height]
+      );
+    }
   }
 
   uniform1f(location: ByeGLUniformLocation | null, value: GLfloat) {
@@ -1601,6 +1727,28 @@ export class ByeGLContext {
     }
   }
 
+  #flipImageVertically(
+    data: Uint8Array,
+    width: number,
+    height: number,
+    bytesPerPixel: number,
+  ): Uint8Array {
+    const rowBytes = width * bytesPerPixel;
+    const flipped = new Uint8Array(data.length);
+
+    for (let row = 0; row < height; row++) {
+      const sourceRow = height - 1 - row;
+      const sourceStart = sourceRow * rowBytes;
+      const destStart = row * rowBytes;
+
+      for (let col = 0; col < rowBytes; col++) {
+        flipped[destStart + col] = data[sourceStart + col];
+      }
+    }
+
+    return flipped;
+  }
+
   uniformMatrix2fv(
     location: ByeGLUniformLocation | null,
     transpose: GLboolean,
@@ -1727,8 +1875,21 @@ export class ByeGLContext {
       gl.TEXTURE0 + (this.#uniformBufferCache.getValue(uniform.id) as number);
 
     const textureMap = this.#boundTexturesMap.get(textureUnit);
-    // TODO: Always getting the TEXTURE_2D binding, but make it depend on the texture type
-    const texture = textureMap?.get(gl.TEXTURE_2D);
+    const typeToTextureBinding = {
+      'texture_2d<f32>': gl.TEXTURE_2D,
+      'texture_2d_array<f32>': gl.TEXTURE_2D_ARRAY,
+      'texture_cube<f32>': gl.TEXTURE_CUBE_MAP,
+      'texture_3d<f32>': gl.TEXTURE_3D,
+      'texture_2d<u32>': gl.TEXTURE_2D,
+    };
+    const textureBinding =
+      typeToTextureBinding[
+        uniform.type.type as keyof typeof typeToTextureBinding
+      ];
+    if (!textureBinding) {
+      throw new Error(`Unsupported texture type: ${uniform.type.type}`);
+    }
+    const texture = textureMap?.get(textureBinding);
 
     if (!texture) {
       throw new Error(`Texture not found for unit ${textureUnit}`);

packages/byegl/src/constants.ts

@@ -157,12 +157,12 @@ export const wgslTypeToEnumCatalog = {
   mat2x2f: gl.FLOAT_MAT2,
   mat3x3f: gl.FLOAT_MAT3,
   mat4x4f: gl.FLOAT_MAT4,
-  // TODO: Not sure if UNSIGNED_INT, or INT
-  'texture_1d<f32>': gl.UNSIGNED_INT,
-  'texture_2d<f32>': gl.UNSIGNED_INT,
-  'texture_2d_array<f32>': gl.UNSIGNED_INT,
-  'texture_3d<f32>': gl.UNSIGNED_INT,
-  'texture_cube<f32>': gl.UNSIGNED_INT,
-  'texture_2d<u32>': gl.UNSIGNED_INT,
+  // TODO: Not sure what to do with texture1d
+  'texture_1d<f32>': gl.SAMPLER_2D,
+  'texture_2d<f32>': gl.SAMPLER_2D,
+  'texture_2d_array<f32>': gl.SAMPLER_2D_ARRAY,
+  'texture_3d<f32>': gl.SAMPLER_3D,
+  'texture_cube<f32>': gl.SAMPLER_CUBE,
+  'texture_2d<u32>': gl.SAMPLER_2D,
   sampler: gl.UNSIGNED_INT,
 };