🥒 Rendering so fresh, it's zucchini crisp!

index.js

@@ -1,5 +1,3 @@
-// index.js
-
 import { mat4 } from 'https://webgpufundamentals.org/3rdparty/wgpu-matrix.module.js';
 import { initializeWebGPU } from './wgpu-device.js';
 import { createState } from './wgpu-state.js';
@@ -13,7 +11,13 @@ import { config } from './wgpu-config.js';
 import { CANVAS, CTX, COLORS, RENDER_PASS_DESCRIPTOR } from './wgpu-constants.js';
 import { CreateBuffers } from './wgpu-buffer.js';
 
+const canvas = document.createElement('canvas');
+canvas.width = config.canvas.width;
+canvas.height = config.canvas.height;
+document.body.appendChild(canvas);
+
 const state = createState(config);
+state.canvas = canvas;
 
 async function Main() {
     const adapter = await navigator.gpu?.requestAdapter();

style.css

@@ -7,6 +7,12 @@ body {
     font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 
+canvas {
+    display: block;
+    width: 100vw;
+    height: 100vh;
+}
+
 h1 {
     font-size: 10em;
     margin-top: 0;

wgpu-config.js

@@ -1,5 +1,3 @@
-// wgpu-config.js
-
 export const config = {
     glyphsAcrossTexture: 16,
     glyphWidth: 32,
@@ -8,6 +6,8 @@ export const config = {
     vertsPerGlyph: 6,
     floatsPerVertex: 8,
     uniformBufferSize: 64,
+    floatsInUniformBuffer: 16,
+    matrixSize: 16,
     canvas: {
         width: 512,
         height: 256

wgpu-state.js

@@ -14,15 +14,15 @@ export function createState(config) {
             shaderCode: null,
         },
         matrices: {
-            uniformValues: new Float32Array(config.uniformBufferSize / 4),
-            matrix: new Float32Array(16),
+            uniformValues: new Float32Array(config.floatsInUniformBuffer),
+            matrix: new Float32Array(config.matrixSize),
         },
         glyphs: {
             numGlyphs: 0,
             width: 0,
             height: 0,
         },
-        canvas: document.querySelector('canvas'),
+        canvas: document.querySelector('canvas') || document.body.appendChild(document.createElement('canvas')),
         timing: {
             time: 0,
             fixedDeltaTime: 0,