update to constants

config.js

@@ -7,5 +7,12 @@ export const config = {
     maxGlyphs: 100,
     vertsPerGlyph: 6,
     floatsPerVertex: 8,
-    uniformBufferSize: 64
+    uniformBufferSize: 64,
+    render: {
+        zNear: 0.001,
+        zFar: 50
+    },
+    time: {
+        phase: 0.001
+    }
 };

constants.js

@@ -7,3 +7,12 @@ export const COLORS = [
     [1, 0, 0, 1],
     [0, 0.5, 1, 1]
 ];
+
+export const RENDER_PASS_DESCRIPTOR = {
+    label: 'canvas render pass',
+    colorAttachments: [{
+        clearValue: [0.3, 0.3, 0.3, 1],
+        loadOp: 'clear',
+        storeOp: 'store',
+    }],
+};

index.html

@@ -13,7 +13,7 @@
         import { mat4 } from 'https://webgpufundamentals.org/3rdparty/wgpu-matrix.module.js';
         import { fetchShaderCode } from './utility.js';
         import { config } from './config.js';
-        import { COLORS } from './constants.js';
+        import { COLORS, RENDER_PASS_DESCRIPTOR } from './constants.js';
 
         function generateGlyphTextureAtlas() {
             const canvas = document.createElement('canvas');
@@ -187,27 +187,16 @@
                 ],
             });
 
-            const renderPassDescriptor = {
-                label: 'canvas render pass',
-                colorAttachments: [{
-                    clearValue: [0.3, 0.3, 0.3, 1],
-                    loadOp: 'clear',
-                    storeOp: 'store',
-                }],
-            };
-
             function render(time) {
-                time *= 0.001;
+                time *= config.time.phase;
                 const fov = 60 * Math.PI / 180;
                 const aspect = canvas.clientWidth / canvas.clientHeight;
-                const zNear = 0.001, zFar = 50;
-                const projectionMatrix = mat4.perspective(fov, aspect, zNear, zFar);
+                const projectionMatrix = mat4.perspective(fov, aspect, config.render.zNear, config.render.zFar);
                 const viewMatrix = mat4.lookAt([0, 0, 5], [0, 0, 0], [0, 1, 0]);
                 const viewProjectionMatrix = mat4.multiply(projectionMatrix, viewMatrix);
-
-                renderPassDescriptor.colorAttachments[0].view = context.getCurrentTexture().createView();
+                RENDER_PASS_DESCRIPTOR.colorAttachments[0].view = context.getCurrentTexture().createView();
                 const encoder = device.createCommandEncoder();
-                const pass = encoder.beginRenderPass(renderPassDescriptor);
+                const pass = encoder.beginRenderPass(RENDER_PASS_DESCRIPTOR);
                 pass.setPipeline(pipeline);
                 mat4.rotateY(viewProjectionMatrix, time, matrix);
                 mat4.translate(matrix, [-width / 2, -height / 2, 0], matrix);