Initial

tsherif · Dec 30, 2019 · fccae53 · fccae53
commit fccae53
Show file tree

Hide file tree

Showing 5 changed files with 291 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Tarek Sherif
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+WebGPU Example
+==============
+
+Minimal examples of WebGPU usage.
diff --git a/blank.html b/blank.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>WebGPU Blank</title>
+    <style>
+        html, body {
+            margin: 0;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+<canvas id="webgpu-canvas"></canvas>
+<script>
+(async () => {
+    const adapter = await navigator.gpu.requestAdapter();
+    const device = await adapter.requestDevice();
+
+    const canvas = document.getElementById("webgpu-canvas");
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    const context = canvas.getContext("gpupresent");
+    const swapChainFormat = await context.getSwapChainPreferredFormat(device);
+    const swapChain = context.configureSwapChain({
+        device,
+        format: swapChainFormat
+    });
+
+    const commandEncoder = device.createCommandEncoder();
+    const textureView = swapChain.getCurrentTexture().createView();
+
+    const renderPass = commandEncoder.beginRenderPass({
+        colorAttachments: [{
+            attachment: textureView,
+            loadValue: [0, 0, 0, 1]
+        }]
+    });
+    renderPass.endPass();
+
+    device.defaultQueue.submit([commandEncoder.finish()]);
+})();
+</script>
+</body>
+</html>
diff --git a/point.html b/point.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>WebGPU Point</title>
+    <style>
+        html, body {
+            margin: 0;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+<canvas id="webgpu-canvas"></canvas>
+<script>
+(async () => {
+    const adapter = await navigator.gpu.requestAdapter();
+    const device = await adapter.requestDevice();
+    const glslang = await import("https://unpkg.com/@webgpu/[email protected]/web/glslang.js").then(m => m.default());
+
+    const canvas = document.getElementById("webgpu-canvas");
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    const context = canvas.getContext("gpupresent");
+    const swapChainFormat = await context.getSwapChainPreferredFormat(device);
+    const swapChain = context.configureSwapChain({
+        device,
+        format: swapChainFormat
+    });
+
+    const vs = `
+    #version 450
+    
+    void main() {
+        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+    } 
+    `.trim();
+
+    const fs = `
+    #version 450
+    
+    layout(location=0) out vec4 fragColor;
+
+    void main() {
+        fragColor = vec4(1.0, 0.0, 0.0, 1.0);
+    } 
+    `.trim();
+
+    const pipeline = device.createRenderPipeline({
+        vertexStage: {
+            module: device.createShaderModule({
+                code: glslang.compileGLSL(vs, "vertex")
+            }),
+            entryPoint: "main"
+        },
+        fragmentStage: {
+            module: device.createShaderModule({
+                code: glslang.compileGLSL(fs, "fragment")
+            }),
+            entryPoint: "main"
+        },
+        primitiveTopology: "point-list",
+        colorStates: [{
+            format: swapChainFormat
+        }]
+    });
+
+    const commandEncoder = device.createCommandEncoder();
+    const textureView = swapChain.getCurrentTexture().createView();
+
+    const renderPass = commandEncoder.beginRenderPass({
+        colorAttachments: [{
+            attachment: textureView,
+            loadValue: [0, 0, 0, 1]
+        }]
+    });
+    renderPass.setPipeline(pipeline);
+    renderPass.draw(1, 1, 0, 0);
+    renderPass.endPass();
+
+    device.defaultQueue.submit([commandEncoder.finish()]);
+})();
+</script>
+</body>
+</html>
diff --git a/triangle.html b/triangle.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>WebGPU Triangle</title>
+    <style>
+        html, body {
+            margin: 0;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+<canvas id="webgpu-canvas"></canvas>
+<script>
+(async () => {
+    const adapter = await navigator.gpu.requestAdapter();
+    const device = await adapter.requestDevice();
+    const glslang = await import("https://unpkg.com/@webgpu/[email protected]/web/glslang.js").then(m => m.default());
+
+    const canvas = document.getElementById("webgpu-canvas");
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    const context = canvas.getContext("gpupresent");
+    const swapChainFormat = await context.getSwapChainPreferredFormat(device);
+    const swapChain = context.configureSwapChain({
+        device,
+        format: swapChainFormat
+    });
+
+    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 pipeline = device.createRenderPipeline({
+        vertexStage: {
+            module: device.createShaderModule({
+                code: glslang.compileGLSL(vs, "vertex")
+            }),
+            entryPoint: "main"
+        },
+        fragmentStage: {
+            module: device.createShaderModule({
+                code: glslang.compileGLSL(fs, "fragment")
+            }),
+            entryPoint: "main"
+        },
+        primitiveTopology: "triangle-list",
+        vertexState: {
+            vertexBuffers: [
+                {
+                    arrayStride: 8,
+                    attributes: [{
+                        shaderLocation: 0,
+                        format: "float2",
+                        offset: 0
+                    }]
+                },
+                {
+                    arrayStride: 4,
+                    attributes: [{
+                        shaderLocation: 1,
+                        format: "uchar4norm",
+                        offset: 0
+                    }]
+                }
+            ]
+        },
+        colorStates: [{
+            format: swapChainFormat
+        }]
+    });
+
+    const [positionBuffer, positionBufferMap] = device.createBufferMapped({
+        size: 24,
+        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+    });
+    new Float32Array(positionBufferMap).set([
+        -0.5, -0.5,
+        0.5, -0.5,
+        0.0, 0.5
+    ]);
+    positionBuffer.unmap();
+
+    const [colorBuffer, colorBufferMap] = device.createBufferMapped({
+        size: 12,
+        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+    });
+    new Uint8Array(colorBufferMap).set([
+        255, 0, 0, 255,
+        0, 255, 0, 255,
+        0, 0, 255, 255
+    ]);
+    colorBuffer.unmap();
+
+    const commandEncoder = device.createCommandEncoder();
+    const textureView = swapChain.getCurrentTexture().createView();
+
+    const renderPass = commandEncoder.beginRenderPass({
+        colorAttachments: [{
+            attachment: textureView,
+            loadValue: [0, 0, 0, 1]
+        }]
+    });
+    renderPass.setPipeline(pipeline);
+    renderPass.setVertexBuffer(0, positionBuffer);
+    renderPass.setVertexBuffer(1, colorBuffer);
+    renderPass.draw(3, 1, 0, 0);
+    renderPass.endPass();
+
+    device.defaultQueue.submit([commandEncoder.finish()]);
+})();
+</script>
+</body>
+</html>