Keyboard input support (#145)

Fixes #144

Author: Devon7925

src/components/Help.vue

@@ -72,6 +72,9 @@ defineExpose({
           <li><code>sign(mouze.z)</code>: button is down</br></li>
           <li><code>sign(mouze.w)</code>: button is clicked</br></li>
         </ul>
+        <h4 class="doc-header"><code>[playground::KEY("KeyA")]</code></h4>
+        Sets a scalar uniform to <code>1</code> if the specified key
+        is pressed, <code>0</code> otherwise. Key name comes from either javascript <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code"><code>event.code</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key"><code>event.key</code></a>.
         <h4 class="doc-header"><code>[playground::SLIDER(0.3, 0.0, 1.0)]</code></h4>
         Control a <code>float</code> uniform with a provided default, minimum, and maximum.
         <h4 class="doc-header"><code>[playground::COLOR_PICK(0.5, 0.5, 0.5)]</code></h4>

src/components/RenderCanvas.vue

@@ -31,6 +31,8 @@ let canvasCurrentMousePos = { x: 0, y: 0 };
 let canvasIsMouseDown = false;
 let canvasMouseClicked = false;
 
+const pressedKeys = new Set<string>();
+
 const canvas = useTemplateRef("canvas");
 const frameTime = ref(0);
 
@@ -63,8 +65,21 @@ onMounted(() => {
     // therefore, we have to set the resolution same as the container size.
     const observer = new ResizeObserver((entries) => { resizeCanvasHandler(entries); });
     observer.observe(canvas.value);
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
 })
 
+function handleKeyDown(event: KeyboardEvent) {
+    pressedKeys.add(event.key);
+    pressedKeys.add(event.code);
+}
+
+function handleKeyUp(event: KeyboardEvent) {
+    pressedKeys.delete(event.key);
+    pressedKeys.delete(event.code);
+}
+
 function resizeCanvas(entries: ResizeObserverEntry[]) {
     const canvas = entries[0].target;
 
@@ -318,6 +333,28 @@ async function execFrame(timeMS: number, currentDisplayMode: ShaderType, playgro
             uniformBufferView.setFloat32(offset + 4, canvasCurrentMousePos.y, true);
             uniformBufferView.setFloat32(offset + 8, canvasLastMouseDownPos.x * (canvasIsMouseDown ? -1 : 1), true);
             uniformBufferView.setFloat32(offset + 12, canvasLastMouseDownPos.y * (canvasMouseClicked ? -1 : 1), true);
+        } else if (uniformComponent.type == "KEY") {
+            // Set 1 or 0 depending on key state, using correct type
+            const isPressed = pressedKeys.has(uniformComponent.key);
+            if (uniformComponent.scalarType == "float32") {
+                uniformBufferView.setFloat32(offset, isPressed ? 1.0 : 0.0, true);
+            } else if (uniformComponent.scalarType == "float64") {
+                uniformBufferView.setFloat64(offset, isPressed ? 1.0 : 0.0, true);
+            } else if (uniformComponent.scalarType == "int8") {
+                uniformBufferView.setInt8(offset, isPressed ? 1 : 0);
+            } else if (uniformComponent.scalarType == "int16") {
+                uniformBufferView.setInt16(offset, isPressed ? 1 : 0, true);
+            } else if (uniformComponent.scalarType == "int32") {
+                uniformBufferView.setInt32(offset, isPressed ? 1 : 0, true);
+            } else if (uniformComponent.scalarType == "uint8") {
+                uniformBufferView.setUint8(offset, isPressed ? 1 : 0);
+            } else if (uniformComponent.scalarType == "uint16") {
+                uniformBufferView.setUint16(offset, isPressed ? 1 : 0, true);
+            } else if (uniformComponent.scalarType == "uint32") {
+                uniformBufferView.setUint32(offset, isPressed ? 1 : 0, true);
+            } else {
+                throw new Error("KEY_INPUT only scalar type not supported");
+            }
         } else {
             let _: never = uniformComponent;
             throw new Error("Invalid state");
@@ -749,6 +786,12 @@ async function processResourceCommands(resourceBindings: Bindings, resourceComma
             // Initialize the buffer with zeros.
             let bufferDefault: BufferSource = new Float32Array([0, 0, 0, 0]);
             device.queue.writeBuffer(buffer, parsedCommand.offset, bufferDefault);
+        } else if (parsedCommand.type == "KEY") {
+            const buffer = allocatedResources.get("uniformInput") as GPUBuffer
+
+            // Initialize the buffer with zeros.
+            let bufferDefault: BufferSource = new Float32Array([0]);
+            device.queue.writeBuffer(buffer, parsedCommand.offset, bufferDefault);
         } else {
             // exhaustiveness check
             let x: never = parsedCommand;

src/slang/playground.slang

@@ -140,6 +140,13 @@ public struct playground_MOUSE_POSITIONAttribute
 {
 };
 
+// Checks if a given key is down. `1.0` if key is down, `0.0` otherwise. Key name comes from either javascript `event.code` or `event.key`.
+[__AttributeUsage(_AttributeTargets.Var)]
+public struct playground_KEYAttribute
+{
+    string keyName;
+};
+
 // Control a \`float\` uniform with a provided default, minimum, and maximum.
 [__AttributeUsage(_AttributeTargets.Var)]
 public struct playground_SLIDERAttribute

src/util.ts

@@ -257,6 +257,11 @@ export type ParsedCommand = {
 } | {
     "type": "MOUSE_POSITION",
     "offset": number,
+} | {
+    "type": "KEY",
+    key: string,
+    offset: number,
+    scalarType: ScalarType,
 } | {
     "type": "SAMPLER"
 };
@@ -394,6 +399,20 @@ export function getResourceCommandsFromAttributes(reflection: ReflectionJSON): R
                     elementSize: parseInt(parameter.type.elementType.scalarType.slice(5)) / 8,
                     offset: parameter.binding.offset,
                 };
+            } else if (playground_attribute_name == "KEY") {
+                // Only allow on scalar uniforms (float or int)
+                if (parameter.type.kind != "scalar" || parameter.binding.kind != "uniform") {
+                    throw new Error(`${playground_attribute_name} attribute can only be applied to scalar uniforms`);
+                }
+                if (!attribute.arguments || attribute.arguments.length !== 1 || typeof attribute.arguments[0] !== "string") {
+                    throw new Error(`${playground_attribute_name} attribute requires a single string argument (the key name)`);
+                }
+                command = {
+                    type: playground_attribute_name,
+                    key: attribute.arguments[0] as string,
+                    offset: parameter.binding.offset,
+                    scalarType: parameter.type.scalarType,
+                };
             }
 
             if (command != null) {
@@ -433,6 +452,10 @@ export type UniformController = { buffer_offset: number } & ({
     type: "TIME",
 } | {
     type: "MOUSE_POSITION",
+} | {
+    type: "KEY",
+    key: string,
+    scalarType: ScalarType,
 })
 
 export function isControllerRendered(controller: UniformController) {
@@ -468,6 +491,13 @@ export function getUniformControllers(resourceCommands: ResourceCommand[]): Unif
                 type: resourceCommand.parsedCommand.type,
                 buffer_offset: resourceCommand.parsedCommand.offset,
             })
+        } else if (resourceCommand.parsedCommand.type == 'KEY') {
+            controllers.push({
+                type: resourceCommand.parsedCommand.type,
+                buffer_offset: resourceCommand.parsedCommand.offset,
+                key: resourceCommand.parsedCommand.key,
+                scalarType: resourceCommand.parsedCommand.scalarType,
+            })
         }
     }
     return controllers;