Add resizing

src/utils/delta-time-calculator.ts

@@ -14,6 +14,7 @@ export class DeltaTimeCalculator {
 
     const delta = currentTime - this.previousTime;
     this.previousTime = currentTime;
+    return 1 / 60;
     return Math.min(delta / 1000, this.maxDeltaTimeInSeconds);
   }
 

src/utils/graphics/fbm-noise/fbm-noise.ts

@@ -36,7 +36,7 @@ export const generateFbmNoise = ({
   const cacheKey = `${width}x${height}x${JSON.stringify(constants)}`;
   if (!textureCache.has(cacheKey)) {
     const { buffer, vertex } = setUpFullScreenQuad(device);
-    const quadVertexBuffer = buffer;
+    const vertexBuffer = buffer;
 
     const pipeline = device.createRenderPipeline({
       layout: 'auto',
@@ -81,7 +81,7 @@ export const generateFbmNoise = ({
 
     const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
     passEncoder.setPipeline(pipeline);
-    passEncoder.setVertexBuffer(0, quadVertexBuffer);
+    passEncoder.setVertexBuffer(0, vertexBuffer);
     passEncoder.draw(4, 1);
     passEncoder.end();
 

src/utils/graphics/full-screen-quad/full-screen-quad.ts

@@ -8,7 +8,7 @@ export const setUpFullScreenQuad = (
   vertex: GPUVertexState;
 } => {
   const buffer = device.createBuffer({
-    size: 4 * 4 * 4, // 4x vec4<f32>
+    size: 4 * 4 * Float32Array.BYTES_PER_ELEMENT, // 4 x vec4<f32>
     usage: GPUBufferUsage.VERTEX,
     mappedAtCreation: true,
   });
@@ -30,7 +30,7 @@ export const setUpFullScreenQuad = (
       entryPoint: 'vertex',
       buffers: [
         {
-          arrayStride: 4 * 4,
+          arrayStride: 4 * Float32Array.BYTES_PER_ELEMENT,
           stepMode: 'vertex',
           attributes: [
             {

src/utils/graphics/noise/noise.ts

@@ -16,7 +16,7 @@ export const generateNoise = ({
   const cacheKey = `${width}x${height}`;
   if (!textureCache.has(cacheKey)) {
     const { buffer, vertex } = setUpFullScreenQuad(device);
-    const quadVertexBuffer = buffer;
+    const vertexBuffer = buffer;
 
     const pipeline = device.createRenderPipeline({
       layout: 'auto',
@@ -73,7 +73,7 @@ export const generateNoise = ({
 
     const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
     passEncoder.setPipeline(pipeline);
-    passEncoder.setVertexBuffer(0, quadVertexBuffer);
+    passEncoder.setVertexBuffer(0, vertexBuffer);
     passEncoder.draw(4, 1);
     passEncoder.end();
 

src/utils/graphics/resizable-texture.ts

@@ -0,0 +1,63 @@
+import { CopyPipeline } from '../../pipelines/copy/copy-pipeline';
+
+import { vec2 } from 'gl-matrix';
+
+export class ResizableTexture {
+  private texture: GPUTexture;
+  private textureView: GPUTextureView;
+  private readonly copyPipeline: CopyPipeline;
+  private size: vec2 | null = null;
+
+  public constructor(private readonly device: GPUDevice, size: vec2) {
+    this.copyPipeline = new CopyPipeline(this.device);
+    this.resize(size);
+  }
+
+  public resize(size: vec2): void {
+    if (this.size !== null && vec2.equals(this.size, size)) {
+      return;
+    }
+
+    const newTexture = this.device.createTexture({
+      format: 'rgba16float',
+      dimension: '2d',
+      mipLevelCount: 1,
+      size: {
+        width: size.x,
+        height: size.y,
+        depthOrArrayLayers: 1,
+      },
+      usage:
+        GPUTextureUsage.STORAGE_BINDING |
+        GPUTextureUsage.TEXTURE_BINDING |
+        GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+
+    const newTextureView = newTexture.createView();
+
+    if (this.textureView) {
+      const commandEncoder = this.device.createCommandEncoder();
+      this.copyPipeline.execute(
+        commandEncoder,
+        this.textureView,
+        newTextureView,
+        vec2.div(vec2.create(), this.size, size)
+      );
+      this.device.queue.submit([commandEncoder.finish()]);
+      this.texture.destroy();
+    }
+
+    this.size = size;
+    this.texture = newTexture;
+    this.textureView = newTextureView;
+  }
+
+  public getTextureView(): GPUTextureView {
+    return this.textureView;
+  }
+
+  public destroy(): void {
+    this.texture.destroy();
+    this.copyPipeline.destroy();
+  }
+}