From e3e3191405e7e77910dc5dffefcc9bd40b767fad Mon Sep 17 00:00:00 2001
From: Dzmitry Malyshau <kvark@fastmail.com>
Date: Tue, 7 Dec 2021 16:30:47 -0500
Subject: [PATCH 1/2] Port cube to WGSL

---
 cube.html | 68 +++++++++++++++++++++++++++----------------------------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/cube.html b/cube.html
index b4ddd61..1f56a0f 100644
--- a/cube.html
+++ b/cube.html
@@ -63,7 +63,7 @@
     const presentationFormat = context.getPreferredFormat(adapter);
     context.configure({
         device,
-        format: presentationFormat
+        format: presentationFormat,
     });
 
     ////////////////////////////////////////
@@ -134,43 +134,42 @@
     // Create render pipeline
     ///////////////////////////
 
-    const vs = `
-    #version 450
-
-    layout(location=0) in vec4 position;
-    layout(location=1) in vec3 normal;
-
-    layout(set=0, binding=0) uniform SceneUniforms {
-        mat4 mvpMatrix;
+    const shader = `
+    [[block]]
+    struct SceneUniforms {
+        mvpMatrix: mat4x4<f32>;
     };
+    [[group(0), binding(0)]] var<uniform> uniforms: SceneUniforms;
 
-    layout(location=0) out vec3 vNormal;
-    
-    void main() {
-        vNormal = normal;
-        gl_Position = mvpMatrix * position;
-    } 
-    `.trim();
-
-    const fs = `
-    #version 450
+    struct Varyings {
+        [[builtin(position)]] pos: vec4<f32>;
+        [[location(0)]] normal: vec3<f32>;
+    };
     
-    layout(location=0) in vec3 vNormal;
-
-    layout(location=0) out vec4 fragColor;
-
-    void main() {
-        fragColor = vec4(abs(vNormal), 1.0);
-    } 
+    [[stage(vertex)]]
+    fn main_vs(
+        [[location(0)]] position: vec4<f32>,
+        [[location(1)]] normal: vec3<f32>,
+    ) -> Varyings {
+        return Varyings(uniforms.mvpMatrix * position, normal);
+    }
+
+    [[stage(fragment)]]
+    fn main_fs(
+        in: Varyings
+    ) -> [[location(0)]] vec4<f32> {
+        return vec4<f32>(abs(in.normal), 1.0);
+    }
     `.trim();
 
+    const shader_module = device.createShaderModule({
+        code: shader,
+    });
     const pipeline = device.createRenderPipeline({
         layout: device.createPipelineLayout({bindGroupLayouts: [sceneUniformBindGroupLayout]}),
         vertex: {
-            module: device.createShaderModule({
-                code: glslang.compileGLSL(vs, "vertex")
-            }),
-            entryPoint: "main",
+            module: shader_module,
+            entryPoint: "main_vs",
             buffers: [
                 {
                     arrayStride: 12,
@@ -191,10 +190,8 @@
             ]
         },
         fragment: {
-            module: device.createShaderModule({
-                code: glslang.compileGLSL(fs, "fragment")
-            }),
-            entryPoint: "main",
+            module: shader_module,
+            entryPoint: "main_fs",
             targets: [{
                 format: presentationFormat
             }]
@@ -222,7 +219,8 @@
     const renderPassDescription = {
         colorAttachments: [{
             view: context.getCurrentTexture().createView(),
-            loadValue: [0, 0, 0, 1]
+            loadValue: [0, 0, 0, 1],
+            storeOp: "store",
         }],
         depthStencilAttachment: {
             view: depthTexture.createView(),

From f984f454826bf0ad06125aa6b67512b6c1c7a48c Mon Sep 17 00:00:00 2001
From: Dzmitry Malyshau <kvark@fastmail.com>
Date: Thu, 16 Dec 2021 19:40:06 -0500
Subject: [PATCH 2/2] Port blank and triangle

---
 blank.html    |  3 ++-
 cube.html     |  1 -
 triangle.html | 61 +++++++++++++++++++++++----------------------------
 3 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/blank.html b/blank.html
index 71155e3..d8b00d5 100644
--- a/blank.html
+++ b/blank.html
@@ -66,7 +66,8 @@
     const renderPass = commandEncoder.beginRenderPass({
         colorAttachments: [{
             view: textureView,
-            loadValue: [0, 0, 0, 1]
+            loadValue: [0, 0, 0, 1],
+            storeOp: "store",
         }]
     });
     renderPass.endPass();
diff --git a/cube.html b/cube.html
index 1f56a0f..e9343a5 100644
--- a/cube.html
+++ b/cube.html
@@ -135,7 +135,6 @@
     ///////////////////////////
 
     const shader = `
-    [[block]]
     struct SceneUniforms {
         mvpMatrix: mat4x4<f32>;
     };
diff --git a/triangle.html b/triangle.html
index ab4ed6d..52dd515 100644
--- a/triangle.html
+++ b/triangle.html
@@ -97,38 +97,32 @@
     // Create render pipeline
     ///////////////////////////
 
-    const vs = `
-    #version 450
-
-    layout(location=0) in vec4 position;
-    layout(location=1) in vec4 color;
-
-    layout(location=0) out vec4 vColor;
-    
-    void main() {
-        vColor = color;
-        gl_Position = position;
-    } 
-    `.trim();
-
-    const fs = `
-    #version 450
-    
-    layout(location=0) in vec4 vColor;
-
-    layout(location=0) out vec4 fragColor;
-
-    void main() {
-        fragColor = vColor;
-    } 
-    `.trim();
+    const shader = device.createShaderModule({
+        code: `
+            struct Varyings {
+                [[builtin(position)]] position: vec4<f32>;
+                [[location(0)]] color: vec4<f32>;
+            };
+            
+            [[stage(vertex)]]
+            fn main_vs(
+                [[location(0)]] position: vec4<f32>,
+                [[location(1)]] color: vec4<f32>,
+            ) -> Varyings {
+                return Varyings(position, color);
+            }
+
+            [[stage(fragment)]]
+            fn main_fs(in: Varyings) -> [[location(0)]] vec4<f32> {
+                return in.color;
+            } 
+            `.trim(),
+    });
 
     const pipeline = device.createRenderPipeline({
         vertex: {
-            module: device.createShaderModule({
-                code: glslang.compileGLSL(vs, "vertex")
-            }),
-            entryPoint: "main",
+            module: shader,
+            entryPoint: "main_vs",
             buffers: [
                 {
                     arrayStride: 8,
@@ -149,10 +143,8 @@
             ]
         },
         fragment: {
-            module: device.createShaderModule({
-                code: glslang.compileGLSL(fs, "fragment")
-            }),
-            entryPoint: "main",
+            module: shader,
+            entryPoint: "main_fs",
             targets: [{
                 format: presentationFormat
             }]
@@ -172,7 +164,8 @@
     const renderPass = commandEncoder.beginRenderPass({
         colorAttachments: [{
             view: textureView,
-            loadValue: [0, 0, 0, 1]
+            loadValue: [0, 0, 0, 1],
+            storeOp: "store",
         }]
     });
     renderPass.setPipeline(pipeline);