Merge pull request #5 from kaizhangNV/main

Add 'compile' button and port a new demo
shader-slang · Oct 21, 2024 · 4bc2a75 · 4bc2a75
2 parents 47b00a3 + 329c90c
commit 4bc2a75
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 24 deletions.
diff --git a/build.mk b/build.mk
@@ -43,6 +43,7 @@ website_runtime: $(TRY_SLANG_TARGET_DIRECTORY_PATH)/try-slang.js
 website_runtime: $(TRY_SLANG_TARGET_DIRECTORY_PATH)/util.js
 website_runtime: $(TRY_SLANG_TARGET_DIRECTORY_PATH)/pass_through.js
 website_runtime: $(TRY_SLANG_TARGET_DIRECTORY_PATH)/compute.js
+website_runtime: $(TRY_SLANG_TARGET_DIRECTORY_PATH)/water_demo.js
 
 .PHONY: $(TRY_SLANG_SLANG_SOURCE_DIRECTORY_PATH)/build.em/Release/bin/slang-wasm.js
 $(TRY_SLANG_SLANG_SOURCE_DIRECTORY_PATH)/build.em/Release/bin/slang-wasm.js $(TRY_SLANG_SLANG_SOURCE_DIRECTORY_PATH)/build.em/Release/bin/slang-wasm.wasm &:
@@ -72,5 +73,8 @@ $(TRY_SLANG_TARGET_DIRECTORY_PATH)/pass_through.js: $(TRY_SLANG_SOURCE_DIRECTORY
 	$(COPY) $(TRY_SLANG_SOURCE_DIRECTORY_PATH)/pass_through.js $@
 
 $(TRY_SLANG_TARGET_DIRECTORY_PATH)/compute.js: $(TRY_SLANG_SOURCE_DIRECTORY_PATH)/compute.js
-	cp $(TRY_SLANG_SOURCE_DIRECTORY_PATH)/compute.js $@
+	$(COPY) $(TRY_SLANG_SOURCE_DIRECTORY_PATH)/compute.js $@
+
+$(TRY_SLANG_TARGET_DIRECTORY_PATH)/water_demo.js: $(TRY_SLANG_SOURCE_DIRECTORY_PATH)/water_demo.js
+	$(COPY) $^ $@
 
diff --git a/index.html b/index.html
@@ -144,6 +144,7 @@
           `], { type: 'text/javascript' }));
   </script>
   <script src="util.js"></script>
+  <script src="water_demo.js"></script>
   <script src="pass_through.js"></script>
   <script src="compute.js"></script>
   <script src="try-slang.js"></script>
@@ -159,7 +160,8 @@
 
 <!-- Navigation Bar -->
 <div class="navbar">
-  <button style="background-color: orange" id="run-btn" onclick="onRunCompile()" disabled>Run</button>
+  <button style="background-color: orange" id="run-btn" onclick="onRun()" disabled>Run</button>
+  <button style="background-color: orange" id="compile-btn" onclick="onCompile()" disabled>Compile</button>
   <a href="#">Link</a>
   <a href="#">Link</a>
   <a href="#">Link</a>

diff --git a/pass_through.js b/pass_through.js
@@ -50,7 +50,7 @@ var passThroughshaderCode = `
           let g = ((value & 0x00FF0000) >> 16);
           let b = ((value & 0x0000FF00) >> 8);
 
-          return vec4f(f32(r)/255.0f, f32(b)/255.0f, f32(g)/255.0f, 1.0f);
+          return vec4f(f32(r)/255.0f, f32(g)/255.0f, f32(b)/255.0f, 1.0f);
       }
 `;
 

diff --git a/try-slang.js b/try-slang.js
@@ -17,7 +17,9 @@ const SLANG_STAGE_FRAGMENT = 5;
 const SLANG_STAGE_COMPUTE = 6;
 
 var sourceCodeChange = true;
-var g_needResize = false;
+
+var webGPUAvailable = false;
+var stopRender = true;
 
 // TODO: Question?
 // When we generate the shader code to wgsl, the uniform variable (float time) will have 16 bytes alignment, which is not shown in the slang
@@ -68,12 +70,10 @@ async function webgpuInit()
         return;
     }
 
-    const requiredFeatures = [];
-
     // This feature is not necessary if we can support write-only texture in slang.
-    if (adapter.features.has('bgra8unorm-storage')) {
-        requiredFeatures.push('float32-filterable')
-    }
+    const requiredFeatures = [];
+    requiredFeatures.push('bgra8unorm-storage');
+    requiredFeatures.push('float32-filterable');
 
     device = await adapter?.requestDevice({requiredFeatures});
     if (!device)
@@ -132,6 +132,9 @@ function resizeCanvasHandler(entries)
 
 async function render(timeMS)
 {
+    if (stopRender)
+      return;
+
     // we only need to re-create the pipeline when the source code is changed and recompiled.
     if (sourceCodeChange)
     {
@@ -141,7 +144,6 @@ async function render(timeMS)
         sourceCodeChange = false;
     }
 
-
     computePipeline.updateUniformBuffer(timeMS * 0.01);
     // Encode commands to do the computation
     const encoder = device.createCommandEncoder({ label: 'compute builtin encoder' });
@@ -266,8 +268,7 @@ var TrySlang = {
     },
 };
 
-
-var onRunCompile = () => {
+var onRun = () => {
     if (!device)
         return;
 
@@ -286,22 +287,47 @@ var onRunCompile = () => {
         passThroughPipeline.createPipeline(shaderModule, inputTexture);
     }
 
-    // compile the compute shader code from input text area
-    var shaderSource = monacoEditor.getValue();
-    var wgslCode = TrySlang.compile(shaderSource, "computeMain", SLANG_STAGE_COMPUTE);
-    if (!wgslCode)
-        return;
-
-    codeGenArea.setValue(wgslCode);
-
     render(0);
     // TODO: This function is used to read the output buffer from GPU, and print out.
     // We will add an option to select render Mode and print mode. Once print mode is selected,
     // we will not enable the animation, and will call this function to print results on screen.
     // waitForComplete(computePipeline.outputBufferRead);
+}
+
+function disableRendering(reason)
+{
+    stopRender = true;
+    document.getElementById("run-btn").disabled = true;
+}
+
+function enableRendering(reason)
+{
+    stopRender = false;
+    document.getElementById("run-btn").disabled = false;
+}
 
-    var code=monacoEditor.getValue();
-    console.log(code);
+var onCompile = () => {
+    // compile the compute shader code from input text area
+    var slangSource = monacoEditor.getValue();
+    var compiledCode = TrySlang.compile(slangSource, "computeMain", SLANG_STAGE_COMPUTE);
+    if (!compiledCode)
+    {
+        disableRendering(0);
+        return;
+    }
+
+    codeGenArea.setValue(compiledCode);
+
+    // TODO: Add condition that this is a wgsl shader code.
+    // We only make "Run" button available when the browser supports WebGPU and the compile target is wgsl
+    if (webGPUAvailable)
+    {
+        enableRendering(0);
+    }
+    else
+    {
+        disableRendering(0);
+    }
 }
 
 function onSourceCodeChange()
@@ -340,11 +366,16 @@ var Module = {
         Slang = Module;
         try {
             globalSlangSession = Slang.createGlobalSession();
-            if(!globalSlangSession) {
+            if(!globalSlangSession)
+            {
                 var error = Slang.getLastError();
                 console.error(error.type + " error: " + error.message);
                 return;
             }
+            else
+            {
+                document.getElementById("compile-btn").disabled = false;
+            }
         } catch (e) {
             console.log(e);
             document.getElementById("WebGPU-status-bar").innerHTML = "Failed to initialize Slang Compiler";
@@ -356,7 +387,7 @@ var Module = {
         promise.then(() => {
             if (device)
             {
-                document.getElementById("run-btn").disabled = false;
+                webGPUAvailable = true;
             }
             else
             {