refactor: allow more data view types

README.md

@@ -363,7 +363,7 @@ A `Geometry` contains an `Attribute` list of vertex or storage buffer data, with
 const geometry = new Geometry({
   position: { size: 2, data: new Float32Array([-1, -1, 3, -1, -1, 3]) },
   uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) },
-  index: { size: 1, data: new Uint32Array([0, 1, 2]) },
+  index: { size: 1, data: new Uint16Array([0, 1, 2]) },
 })
 ```
 

examples/webgl-cube.ts

@@ -39,7 +39,7 @@ const geometry = new Geometry({
   },
   index: {
     size: 1,
-    data: new Uint32Array([
+    data: new Uint16Array([
       0, 2, 1, 2, 3, 1, 4, 6, 5, 6, 7, 5, 8, 10, 9, 10, 11, 9, 12, 14, 13, 14, 15, 13, 16, 18, 17, 18, 19, 17, 20, 22,
       21, 22, 23, 21,
     ]),

examples/webgpu-cube.ts

@@ -39,7 +39,7 @@ const geometry = new Geometry({
   },
   index: {
     size: 1,
-    data: new Uint32Array([
+    data: new Uint16Array([
       0, 2, 1, 2, 3, 1, 4, 6, 5, 6, 7, 5, 8, 10, 9, 10, 11, 9, 12, 14, 13, 14, 15, 13, 16, 18, 17, 18, 19, 17, 20, 22,
       21, 22, 23, 21,
     ]),

src/Geometry.ts

@@ -1,7 +1,15 @@
 /**
  * Represents an attribute data view.
  */
-export type AttributeData = Float32Array | Uint32Array
+export type AttributeData =
+  | Float32Array
+  | Int8Array
+  | Int16Array
+  | Int32Array
+  | Uint8Array
+  | Uint8ClampedArray
+  | Uint16Array
+  | Uint32Array
 
 /**
  * Represents a geometry attribute.

src/WebGLRenderer.ts

@@ -17,7 +17,6 @@ const GL_TEXTURE_MIN_FILTER = 0x2801
 const GL_TEXTURE_WRAP_S = 0x2802
 const GL_TEXTURE_WRAP_T = 0x2803
 const GL_RGBA = 0x1908
-const GL_UNSIGNED_BYTE = 0x1401
 const GL_DEPTH_TEST = 0x0b71
 const GL_CULL_FACE = 0x0b44
 const GL_BLEND = 0x0be2
@@ -27,12 +26,10 @@ const GL_FRAGMENT_SHADER = 0x8b30
 const GL_ELEMENT_ARRAY_BUFFER = 0x8893
 const GL_ARRAY_BUFFER = 0x8892
 const GL_STATIC_DRAW = 0x88e4
-const GL_FLOAT = 0x1406
 const GL_DYNAMIC_DRAW = 0x88e8
 const GL_COLOR_BUFFER_BIT = 0x00004000
 const GL_DEPTH_BUFFER_BIT = 0x00000100
 const GL_STENCIL_BUFFER_BIT = 0x00000400
-const GL_UNSIGNED_INT = 0x1405
 const GL_LESS = 0x0201
 const GL_FRONT = 0x0404
 const GL_BACK = 0x0405
@@ -105,6 +102,39 @@ const GL_BLEND_OPERATIONS: Record<BlendOperation, number> = {
   max: GL_MAX,
 } as const
 
+const GL_FLOAT = 0x1406
+const GL_BYTE = 0x1400
+const GL_SHORT = 0x1402
+const GL_INT = 0x1404
+const GL_UNSIGNED_BYTE = 0x1401
+const GL_UNSIGNED_SHORT = 0x1403
+const GL_UNSIGNED_INT = 0x1405
+
+/**
+ * Gets the appropriate WebGL data type for a data view.
+ */
+const getDataType = (data: ArrayBufferView): number | null => {
+  switch (data.constructor) {
+    case Float32Array:
+      return GL_FLOAT
+    case Int8Array:
+      return GL_BYTE
+    case Int16Array:
+      return GL_SHORT
+    case Int32Array:
+      return GL_INT
+    case Uint8Array:
+    case Uint8ClampedArray:
+      return GL_UNSIGNED_BYTE
+    case Uint16Array:
+      return GL_UNSIGNED_SHORT
+    case Uint32Array:
+      return GL_UNSIGNED_INT
+    default:
+      return null
+  }
+}
+
 /**
  * Matches against GLSL shader outputs.
  */
@@ -477,14 +507,14 @@ export class WebGLRenderer {
 
           for (let i = 0; i < slots; i++) {
             this.gl.enableVertexAttribArray(location + i)
-            this.gl.vertexAttribPointer(
-              location + i,
-              attribute.size / slots,
-              GL_FLOAT,
-              false,
-              4 * attribute.size,
-              i * attribute.size,
-            )
+            const type = getDataType(attribute.data)!
+            const stride = attribute.size * attribute.data.BYTES_PER_ELEMENT
+            const offset = attribute.size * i
+            if (type === GL_FLOAT) {
+              this.gl.vertexAttribPointer(location, attribute.size, type, false, stride, offset)
+            } else {
+              this.gl.vertexAttribIPointer(location, attribute.size, type, stride, offset)
+            }
             if (attribute.divisor) this.gl.vertexAttribDivisor(location + i, attribute.divisor)
           }
         }
@@ -575,7 +605,8 @@ export class WebGLRenderer {
 
       const mode = this.gl[node.mode.toUpperCase() as Uppercase<Mode>]
       const { index, position } = node.geometry.attributes
-      if (index) this.gl.drawElementsInstanced(mode, index.data.length / index.size, GL_UNSIGNED_INT, 0, node.instances)
+      if (index)
+        this.gl.drawElementsInstanced(mode, index.data.length / index.size, getDataType(index.data)!, 0, node.instances)
       else if (position) this.gl.drawArraysInstanced(mode, 0, position.data.length / position.size, node.instances)
       else this.gl.drawArraysInstanced(mode, 0, 3, node.instances)
     }

src/WebGPURenderer.ts

@@ -346,13 +346,17 @@ export class WebGPURenderer {
       const attribute = mesh.geometry.attributes[key]
       if (key === 'index') continue
 
+      const formatType = attribute.data instanceof Float32Array ? 'float' : 'uint'
+      const formatBits = attribute.data.BYTES_PER_ELEMENT * 8
+      const formatName = formatType + formatBits
+
       buffers.push({
         arrayStride: attribute.size * attribute.data.BYTES_PER_ELEMENT,
         attributes: [
           {
             shaderLocation: shaderLocation++,
             offset: 0,
-            format: `float32x${Math.min(attribute.size, 4)}`,
+            format: `${formatName}x${Math.min(attribute.size, 4)}`,
           },
         ] as Iterable<GPUVertexAttribute>,
       })
@@ -441,7 +445,8 @@ export class WebGPURenderer {
       attribute.needsUpdate = false
 
       if (this._passEncoder instanceof GPURenderPassEncoder) {
-        if (isIndex) this._passEncoder.setIndexBuffer(buffer, 'uint32')
+        if (isIndex)
+          this._passEncoder.setIndexBuffer(buffer, `uint${attribute.data.BYTES_PER_ELEMENT * 8}` as GPUIndexFormat)
         else this._passEncoder.setVertexBuffer(slot++, buffer)
       }
     }