Add Play/Pause, Reset, Step Fwd / Bwd and Fullscreen to UI (#151)

* adding a pause/resume toggle

* moving frame controls to bar under render canvas

* ci related changes

* small change to circle demo to demonstrate frame ID behavior

* some cleanup

* fixing bug where canvas resize wasn't updating text

* migrating control bar code into RenderCanvas.vue, fixing mistake in circle.slang example

* Update src/components/RenderCanvas.vue

Co-authored-by: Devon <[email protected]>

* moving ms down to control bar

* Update src/components/RenderCanvas.vue

Co-authored-by: Devon <[email protected]>

* reverting a couple unnecessary changes

* removing duplicate / redundant fields. Messing with control bar behavior on resize

* small cleanup

* testing font variant emoji text

* attempt #2 at getting ios to not show emoji

---------

Co-authored-by: Devon <[email protected]>

Author: natevm

index.html

@@ -13,8 +13,8 @@
   <link rel="shortcut icon" href="/images/favicon.ico" />
   <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
   <link href="src/assets/styles.css" rel="stylesheet" />
-  <link rel="stylesheet" href="jsontree/jsontree.js.css">
-  <script src="jsontree/jsontree.min.js"></script>
+  <link rel="stylesheet" href="/jsontree/jsontree.js.css">
+  <script type="module" src="/jsontree/jsontree.min.js"></script>
   <script type="module" src="src/main.ts"></script>
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-TMTZVLLMBP"></script>
   <script>

public/demos/circle.slang

@@ -7,6 +7,9 @@ import playground;
 [playground::TIME]
 uniform float time;
 
+[playground::FRAME_ID]
+uniform float frame;
+
 typealias vec2 = float2;
 typealias vec3 = float3;
 typealias vec4 = float4;
@@ -17,10 +20,11 @@ float4 imageMain(uint2 dispatchThreadID, int2 screenSize)
     float tau = float.getPi() * 2.0;
     float a = atan2(p.x,p.y);
     float r = length(p)*0.75;
-    vec2 uv = vec2(a/tau,r);
+    vec2 uv = vec2(a / tau, r);
+    float t = frame / 60.f;
 
 	//get the color
-	float xCol = (uv.x - time/3) * 3.0;
+	float xCol = (uv.x - t/3) * 3.0;
 	xCol = fmod(abs(xCol), 3.0f);
 	vec3 horColour = vec3(0.25, 0.25, 0.25);
 
@@ -45,7 +49,7 @@ float4 imageMain(uint2 dispatchThreadID, int2 screenSize)
 	// draw color beam
 	uv = (2.0 * uv) - 1.0;
 	float beamWidth = (0.7 + 
-        0.5 * cos(uv.x * 10.0 * tau * 0.15 * clamp(floor(5.0 + 10.0 * cos(time)), 0.0, 10.0)))
+        0.5 * cos(uv.x * 10.0 * tau * 0.15 * clamp(floor(5.0 + 10.0 * cos(t)), 0.0, 10.0)))
         * abs(1.0 / (30.0 * uv.y));
 	vec3 horBeam = vec3(beamWidth);
 	return vec4(((horBeam) * horColour), 1.0);

src/components/Help.vue

@@ -64,6 +64,8 @@ defineExpose({
         Initialize a <code>float</code> buffer with uniform random floats between 0 and 1.
         <h4 class="doc-header"><code>[playground::TIME]</code></h4>
         Gives a <code>float</code> uniform the current time in milliseconds.
+        <h4 class="doc-header"><code>[playground::FRAME_ID]</code></h4>
+        Gives a <code>float</code> uniform the current frame index (starting from 0).
         <h4 class="doc-header"><code>[playground::MOUSE_POSITION]</code></h4>
         Gives a <code>float4</code> uniform mouse data.
         <ul>

src/components/RenderCanvas.vue

@@ -19,6 +19,7 @@ let randFloatResources: Map<string, GPUObjectBase>;
 
 let renderThread: Promise<void> | null = null;
 let abortRender = false;
+const pauseRender = ref(false);
 let onRenderAborted: (() => void) | null = null;
 
 const printfBufferElementSize = 12;
@@ -35,6 +36,8 @@ const pressedKeys = new Set<string>();
 
 const canvas = useTemplateRef("canvas");
 const frameTime = ref(0);
+const frameID = ref(0);
+const fps = ref(0);
 
 const { device } = defineProps<{
     device: GPUDevice;
@@ -46,9 +49,22 @@ let emit = defineEmits<{
 }>();
 
 defineExpose({
-    onRun,
+    onRun
 });
 
+/**
+ * Toggle full screen on the canvas container.
+ */
+function toggleFullscreen() {
+    const container = canvas.value?.parentElement as HTMLElement | null;
+    if (!container) return;
+    if (!document.fullscreenElement) {
+        container.requestFullscreen();
+    } else if (document.exitFullscreen) {
+        document.exitFullscreen();
+    }
+}
+
 onMounted(() => {
     if (canvas.value == null) {
         throw new Error("Could not get canvas element");
@@ -70,6 +86,24 @@ onMounted(() => {
     window.addEventListener('keyup', handleKeyUp);
 })
 
+/**
+ * Go to the specified frame index and render exactly that frame.
+ */
+function setFrame(targetFrame: number) {
+    if (!compiledCode || !compiler) return;
+    // Clamp to non-negative
+    const t = Math.max(0, Math.floor(targetFrame));
+    // Prepare for single frame rendering
+    pauseRender.value = true;
+    // Set internal counter so execFrame's increment brings us to t
+    frameID.value = t - 1;
+    execFrame(performance.now(), compiler.shaderType || null, compiledCode, t === 0)
+        .catch(err => {
+            if (err instanceof Error) emit('logError', `Error rendering frame ${t}: ${err.message}`);
+            else               emit('logError', `Error rendering frame ${t}: ${err}`);
+        });
+}
+
 function handleKeyDown(event: KeyboardEvent) {
     pressedKeys.add(event.key);
     pressedKeys.add(event.code);
@@ -328,6 +362,9 @@ async function execFrame(timeMS: number, currentDisplayMode: ShaderType, playgro
             });
         } else if (uniformComponent.type == "TIME") {
             uniformBufferView.setFloat32(offset, timeMS * 0.001, true);
+        } else if (uniformComponent.type == "FRAME_ID") {
+            // provide current frame index as float
+            uniformBufferView.setFloat32(offset, frameID.value, true);
         } else if (uniformComponent.type == "MOUSE_POSITION") {
             uniformBufferView.setFloat32(offset, canvasCurrentMousePos.x, true);
             uniformBufferView.setFloat32(offset + 4, canvasCurrentMousePos.y, true);
@@ -486,12 +523,14 @@ async function execFrame(timeMS: number, currentDisplayMode: ShaderType, playgro
 
     const timeElapsed = performance.now() - startTime;
 
+    frameID.value++;
     // Update performance info.
     timeAggregate += timeElapsed;
     frameCount++;
     if (frameCount == 20) {
-        let avgTime = (timeAggregate / frameCount);
+        let avgTime = timeAggregate / frameCount;
         frameTime.value = avgTime;
+        fps.value = Math.round(1000 / avgTime);
         timeAggregate = 0;
         frameCount = 0;
     }
@@ -777,6 +816,12 @@ async function processResourceCommands(resourceBindings: Bindings, resourceComma
         } else if (parsedCommand.type == "TIME") {
             const buffer = allocatedResources.get("uniformInput") as GPUBuffer
 
+            // Initialize the buffer with zeros.
+            let bufferDefault: BufferSource = new Float32Array([0.0]);
+            device.queue.writeBuffer(buffer, parsedCommand.offset, bufferDefault);
+        } else if (parsedCommand.type == "FRAME_ID") {
+            const buffer = allocatedResources.get("uniformInput") as GPUBuffer
+
             // Initialize the buffer with zeros.
             let bufferDefault: BufferSource = new Float32Array([0.0]);
             device.queue.writeBuffer(buffer, parsedCommand.offset, bufferDefault);
@@ -816,10 +861,15 @@ async function processResourceCommands(resourceBindings: Bindings, resourceComma
 }
 
 function onRun(runCompiledCode: CompiledPlayground) {
-    if (!device)
-        return;
-    if (!compiler)
-        return;
+    if (!device) return;
+    if (!compiler) return;
+
+    // reset frame counter and performance stats on (re)start
+    frameID.value = 0;
+    fps.value = 0;
+    frameTime.value = 0;
+    timeAggregate = 0;
+    frameCount = 0;
 
     resetMouse();
 
@@ -873,22 +923,38 @@ function onRun(runCompiledCode: CompiledPlayground) {
             if (compiler == null) {
                 throw new Error("Could not get compiler");
             }
-            if (compiler.shaderType !== null && !abortRender) {
-                const keepRendering = await execFrame(timeMS, compiler?.shaderType || null, compiledCode, firstFrame);
-                firstFrame = false;
-                return keepRendering;
+            if (abortRender) return false;
+            if (pauseRender.value) return true;
+
+            if (compiler.shaderType === null) {
+                // handle this case
             }
-            return false;
+            const keepRendering = await execFrame(timeMS, compiler?.shaderType || null, compiledCode, firstFrame);
+            firstFrame = false;
+            return keepRendering;
         });
 }
 </script>
 
 <template>
-    <div class="renderOverlay">
-        <div id="performanceInfo">{{ `${frameTime.toFixed(1)} ms` }}</div>
-    </div>
     <canvas v-bind="$attrs" class="renderCanvas" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup"
         ref="canvas"></canvas>
+    <div class="control-bar">
+        <div class="controls-left">
+            <button @click="setFrame(0)"           title="Reset frame to 0">&#x23EE;&#xFE0E;</button>
+            <button @click="setFrame(frameID - 1)" title="Step backward">&#x23F4;&#xFE0E;</button>
+            <button @click="setFrame(frameID + 1)" title="Step forward">&#x23F5;&#xFE0E;</button>
+            <button @click="pauseRender = !pauseRender"
+                    :title="pauseRender ? 'Resume' : 'Pause'">⏯︎</button>
+            <span class="frame-counter">{{ String(frameID).padStart(5, '0') }}</span>
+        </div>
+        <div class="controls-right">
+            <span>{{ frameTime.toFixed(1) }} ms</span>
+            <span>{{ Math.min(Math.round(1000 / frameTime), 60) }} fps</span>
+            <span>{{ canvas?.width }}x{{ canvas?.height }}</span>
+            <button @click="toggleFullscreen" title="Toggle full screen">&#x26F6;&#xFE0E;</button>
+        </div>
+    </div>
 </template>
 
 <style scoped>
@@ -898,21 +964,39 @@ function onRun(runCompiledCode: CompiledPlayground) {
     height: 100%;
 }
 
-.renderOverlay {
+
+.control-bar {
     position: absolute;
-    padding: 8px;
-    border-radius: 5px;
-    width: fit-content;
-    background: rgba(0, 0, 0, 0.3);
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 36px;
+    padding: 4px 8px;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: white;
+    font-size: 14px;
+    overflow: hidden;
+    white-space: nowrap; 
+    width: 100%;
 }
-
-#performanceInfo {
+.control-bar .controls-left > * {
+    margin-right: 8px;
+}
+.control-bar .controls-right > * {
+    margin-left: 8px;
+}
+.control-bar button {
+    background: none;
+    border: none;
     color: white;
-    width: fit-content;
-    -moz-user-select: -moz-none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+    cursor: pointer;
+    font-variant-emoji: text;
+}
+.control-bar button:disabled {
+    cursor: default;
+    opacity: 0.5;
 }
 </style>

src/slang/playground.slang

@@ -130,6 +130,12 @@ public struct playground_TIMEAttribute
 {
 };
 
+// Gives the current shader playback frame index.
+[__AttributeUsage(_AttributeTargets.Var)]
+public struct playground_FRAME_IDAttribute
+{
+};
+
 // Gives mouse position info.
 // \`xy\`: mouse position (in pixels) during last button down.
 // \`abs(zw)\`: mouse position during last button click.

src/util.ts

@@ -254,6 +254,9 @@ export type ParsedCommand = {
 } | {
     "type": "TIME",
     "offset": number,
+} | {
+    "type": "FRAME_ID",
+    "offset": number,
 } | {
     "type": "MOUSE_POSITION",
     "offset": number,
@@ -369,6 +372,14 @@ export function getResourceCommandsFromAttributes(reflection: ReflectionJSON): R
                     type: playground_attribute_name,
                     offset: parameter.binding.offset,
                 };
+            } else if (playground_attribute_name == "FRAME_ID") {
+                if (parameter.type.kind != "scalar" || !parameter.type.scalarType.startsWith("float") || parameter.binding.kind != "uniform") {
+                    throw new Error(`${playground_attribute_name} attribute cannot be applied to ${parameter.name}, it only supports floats`)
+                }
+                command = {
+                    type: playground_attribute_name,
+                    offset: parameter.binding.offset,
+                };
             } else if (playground_attribute_name == "MOUSE_POSITION") {
                 if (parameter.type.kind != "vector" || parameter.type.elementCount <= 3 || parameter.type.elementType.kind != "scalar" || !parameter.type.elementType.scalarType.startsWith("float") || parameter.binding.kind != "uniform") {
                     throw new Error(`${playground_attribute_name} attribute cannot be applied to ${parameter.name}, it only supports float vectors`)
@@ -450,6 +461,8 @@ export type UniformController = { buffer_offset: number } & ({
     value: [number, number, number],
 } | {
     type: "TIME",
+} | {
+    type: "FRAME_ID",
 } | {
     type: "MOUSE_POSITION",
 } | {
@@ -486,6 +499,11 @@ export function getUniformControllers(resourceCommands: ResourceCommand[]): Unif
                 type: resourceCommand.parsedCommand.type,
                 buffer_offset: resourceCommand.parsedCommand.offset,
             })
+        } else if (resourceCommand.parsedCommand.type == 'FRAME_ID') {
+            controllers.push({
+                type: resourceCommand.parsedCommand.type,
+                buffer_offset: resourceCommand.parsedCommand.offset,
+            })
         } else if (resourceCommand.parsedCommand.type == 'MOUSE_POSITION') {
             controllers.push({
                 type: resourceCommand.parsedCommand.type,