Unreviewed. More WebGPU demos.
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 3 Apr 2017 22:47:53 +0000 (22:47 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 3 Apr 2017 22:47:53 +0000 (22:47 +0000)
* demos/webgpu/2d.jpg: Added.
* demos/webgpu/2d.js:
* demos/webgpu/circle.svg: Added.
* demos/webgpu/cubes.jpg: Added.
* demos/webgpu/hello.html: Added.
* demos/webgpu/hello.jpg: Added.
* demos/webgpu/hello.js: Copied from Websites/webkit.org/demos/webgpu/2d.js.
(init):
(render):
* demos/webgpu/index.html: Added.
* demos/webgpu/simple.jpg: Added.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@214849 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/webkit.org/ChangeLog
Websites/webkit.org/demos/webgpu/2d.jpg [new file with mode: 0644]
Websites/webkit.org/demos/webgpu/2d.js
Websites/webkit.org/demos/webgpu/circle.svg [new file with mode: 0644]
Websites/webkit.org/demos/webgpu/cubes.jpg [new file with mode: 0644]
Websites/webkit.org/demos/webgpu/hello.html [new file with mode: 0644]
Websites/webkit.org/demos/webgpu/hello.jpg [new file with mode: 0644]
Websites/webkit.org/demos/webgpu/hello.js [new file with mode: 0644]
Websites/webkit.org/demos/webgpu/index.html [new file with mode: 0644]
Websites/webkit.org/demos/webgpu/simple.jpg [new file with mode: 0644]

index 8b3efac..1dc9122 100644 (file)
@@ -1,3 +1,19 @@
+2017-04-03  Dean Jackson  <dino@apple.com>
+
+        Unreviewed. More WebGPU demos.
+
+        * demos/webgpu/2d.jpg: Added.
+        * demos/webgpu/2d.js:
+        * demos/webgpu/circle.svg: Added.
+        * demos/webgpu/cubes.jpg: Added.
+        * demos/webgpu/hello.html: Added.
+        * demos/webgpu/hello.jpg: Added.
+        * demos/webgpu/hello.js: Copied from Websites/webkit.org/demos/webgpu/2d.js.
+        (init):
+        (render):
+        * demos/webgpu/index.html: Added.
+        * demos/webgpu/simple.jpg: Added.
+
 2017-03-31  Dean Jackson  <dino@apple.com>
 
         Unreviewed. Add some WebGPU examples.
diff --git a/Websites/webkit.org/demos/webgpu/2d.jpg b/Websites/webkit.org/demos/webgpu/2d.jpg
new file mode 100644 (file)
index 0000000..8ae6b42
Binary files /dev/null and b/Websites/webkit.org/demos/webgpu/2d.jpg differ
index 8f3209b..3fb3c8b 100644 (file)
@@ -132,8 +132,6 @@ function render() {
     requestAnimationFrame(render);
 }
 
-var count = 0;
-
 function updateUniformData(index) {
     var now = Date.now() % 100000 / 500;
     let uniform = uniforms[index];
diff --git a/Websites/webkit.org/demos/webgpu/circle.svg b/Websites/webkit.org/demos/webgpu/circle.svg
new file mode 100644 (file)
index 0000000..eb7a0e9
--- /dev/null
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+
+<circle fill="rgb(224, 224, 224)" cx="50" cy="50" r="40"/>
+<circle fill="none" stroke="rgb(224, 224, 224)" stroke-width="0.5" stroke-dasharray="2.5 2" cx="50" cy="50" r="41"/>
+
+</svg>
\ No newline at end of file
diff --git a/Websites/webkit.org/demos/webgpu/cubes.jpg b/Websites/webkit.org/demos/webgpu/cubes.jpg
new file mode 100644 (file)
index 0000000..8a3eb1e
Binary files /dev/null and b/Websites/webkit.org/demos/webgpu/cubes.jpg differ
diff --git a/Websites/webkit.org/demos/webgpu/hello.html b/Websites/webkit.org/demos/webgpu/hello.html
new file mode 100644 (file)
index 0000000..2e0d1d8
--- /dev/null
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=600">
+<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+<title>WebGPU Hello World demo</title>
+<link rel="stylesheet" href="shared.css">
+<link rel="stylesheet" href="https://webkit.org/wp-content/themes/webkit/style.css">
+<link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=Myriad+Set+Pro&amp;v=1">
+<script src="shared.js"></script>
+<script src="hello.js"></script>
+<script id="library" type="x-shader/x-metal">
+#include <metal_stdlib>
+
+using namespace metal;
+
+struct Vertex
+{
+    float4 position [[position]];
+};
+
+vertex Vertex vertex_main(uint vid [[vertex_id]])
+{
+    Vertex v;
+    switch (vid) {
+    case 0:
+        v.position = float4(-.75, -.75, 0, 1);
+        break;
+    case 1:
+        v.position = float4(.75, -.75, 0, 1);
+        break;
+    case 2:
+        v.position = float4(0, .75, 0, 1);
+        break;
+    default:
+        v.position = float4(0, 0, 0, 1);
+    }
+    return v;
+}
+
+fragment float4 fragment_main(Vertex vertexIn [[stage_in]])
+{
+    return float4(1.0, 0.0, 0.0, 1.0);
+}
+</script>
+</head>
+<body>
+<canvas></canvas>
+<div id="error">
+    <h2>WebGPU not available</h2>
+    <p>
+        Make sure you are on a system with WebGPU enabled. In
+        Safari, first make sure the Developer Menu is visible (Preferences →
+        Advanced), then Develop → Experimental Features → Enable WebGPU.
+    </p>
+</div>
+</body>
+</html>
diff --git a/Websites/webkit.org/demos/webgpu/hello.jpg b/Websites/webkit.org/demos/webgpu/hello.jpg
new file mode 100644 (file)
index 0000000..8710039
Binary files /dev/null and b/Websites/webkit.org/demos/webgpu/hello.jpg differ
diff --git a/Websites/webkit.org/demos/webgpu/hello.js b/Websites/webkit.org/demos/webgpu/hello.js
new file mode 100644 (file)
index 0000000..4619b19
--- /dev/null
@@ -0,0 +1,67 @@
+let gpu;
+let commandQueue;
+let renderPassDescriptor;
+let renderPipelineState;
+
+window.addEventListener("load", init, false);
+
+function init() {
+
+    if (!checkForWebGPU()) {
+        return;
+    }
+
+    let canvas = document.querySelector("canvas");
+    let canvasSize = canvas.getBoundingClientRect();
+    canvas.width = canvasSize.width;
+    canvas.height = canvasSize.height;
+
+    gpu = canvas.getContext("webgpu");
+    commandQueue = gpu.createCommandQueue();
+
+    let library = gpu.createLibrary(document.getElementById("library").text);
+    let vertexFunction = library.functionWithName("vertex_main");
+    let fragmentFunction = library.functionWithName("fragment_main");
+
+    if (!library || !fragmentFunction || !vertexFunction) {
+        return;
+    }
+
+    let pipelineDescriptor = new WebGPURenderPipelineDescriptor();
+    pipelineDescriptor.vertexFunction = vertexFunction;
+    pipelineDescriptor.fragmentFunction = fragmentFunction;
+    // NOTE: Our API proposal has these values as enums, not constant numbers.
+    // We haven't got around to implementing the enums yet.
+    pipelineDescriptor.colorAttachments[0].pixelFormat = gpu.PixelFormatBGRA8Unorm;
+
+    renderPipelineState = gpu.createRenderPipelineState(pipelineDescriptor);
+
+    renderPassDescriptor = new WebGPURenderPassDescriptor();
+    // NOTE: Our API proposal has some of these values as enums, not constant numbers.
+    // We haven't got around to implementing the enums yet.
+    renderPassDescriptor.colorAttachments[0].loadAction = gpu.LoadActionClear;
+    renderPassDescriptor.colorAttachments[0].storeAction = gpu.StoreActionStore;
+    renderPassDescriptor.colorAttachments[0].clearColor = [0.35, 0.65, 0.85, 1.0];
+
+    render();
+}
+
+function render() {
+
+    let commandBuffer = commandQueue.createCommandBuffer();
+    let drawable = gpu.nextDrawable();
+    renderPassDescriptor.colorAttachments[0].texture = drawable.texture;
+
+    let commandEncoder = commandBuffer.createRenderCommandEncoderWithDescriptor(renderPassDescriptor);
+    commandEncoder.setRenderPipelineState(renderPipelineState);
+
+    // NOTE: We didn't attach any buffers. We create the geometry in the vertex shader using
+    // the vertex ID.
+
+    // NOTE: Our API proposal uses the enum value "triangle" here. We haven't got around to implementing the enums yet.
+    commandEncoder.drawPrimitives(gpu.PrimitiveTypeTriangle, 0, 3);
+
+    commandEncoder.endEncoding();
+    commandBuffer.presentDrawable(drawable);
+    commandBuffer.commit();
+}
diff --git a/Websites/webkit.org/demos/webgpu/index.html b/Websites/webkit.org/demos/webgpu/index.html
new file mode 100644 (file)
index 0000000..999deec
--- /dev/null
@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width">
+<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+<title>WebGPU demos</title>
+<link rel="stylesheet" href="https://webkit.org/wp-content/themes/webkit/style.css">
+<link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=Myriad+Set+Pro&amp;v=1">
+<style>
+* {
+    --back: rgb(130, 130, 126);
+    --dark: rgb(65, 65, 63);
+    --sub-highlight: rgb(148, 176, 83);
+    --highlight: rgb(189, 235, 7);
+    --body: rgb(224, 224, 224);
+    --body-darker: rgb(204, 204, 204);
+}
+
+body {
+    background-color: var(--body);
+    color: var(--dark);
+    margin: 0;
+    padding: 0;
+    line-height: 1.4;
+}
+
+header {
+    position: relative;
+    height: 20vw;
+    background-color: var(--back);
+    overflow: hidden;
+    border-bottom: none;
+}
+
+header * {
+    position: absolute;
+    top: 0;
+    left: 30vw;
+}
+
+header img {
+    width: 40vw;
+    height: 40vw;
+    animation: spin 60s infinite linear;
+}
+
+@keyframes spin {
+  from {
+      transform: rotate(0deg);
+  }
+  to {
+      transform: rotate(360deg);
+  }
+}
+
+h1 {
+    top: 10vw;
+    width: 40vw;
+    margin: 0 auto;
+    font-size: 5vw;
+    text-align: center;
+    font-weight: bold;
+    color: var(--dark);
+    line-height: 1.0;
+    text-shadow: 0px 2px 0px var(--back);
+}
+
+section.demos {
+    display: grid;
+    margin: 5vw 20vw;
+    grid-template-columns: 16vw 16vw 16vw;
+    grid-gap: 6vw;
+}
+
+section p {
+    padding: 12px 20px;
+    color: var(--dark);
+}
+
+section p a {
+    text-decoration: none;
+    color: var(--sub-highlight);
+    font-weight: bold;
+}
+
+.intro {
+    grid-column: 1 / 4;
+    grid-row: 1;
+}
+
+.warning {
+    grid-column: 1 / 4;
+    grid-row: 2;
+    border: 2px solid var(--sub-highlight);
+    background-color: var(--highlight);
+    color: black;
+}
+
+.example {
+    border: 2px solid var(--sub-highlight);
+    text-align: center;
+    padding: 10px 10px;
+    background-color: var(--body-darker);
+}
+
+.example img {
+    background-color: black;
+    border: 1px solid black;
+    box-sizing: border-box;
+    width: 12vw;
+    height: 12vw;
+}
+
+.example a {
+    text-decoration: none;
+    color: var(--dark);
+}
+
+@media only screen and (max-width: 600px) {
+    header {
+        height: 40vw;
+    }
+
+    header * {
+        left: 10vw;
+    }
+
+    header img {
+        width: 80vw;
+        height: 80vw;
+    }
+
+    h1 {
+        top: 20vw;
+        width: 80vw;
+        font-size: 10vw;
+    }
+
+    section.demos {
+        margin: 5vw 5vw;
+        grid-template-columns: 90vw;
+        grid-gap: 6vw;
+    }
+
+    .intro {
+        grid-column: 1;
+    }
+
+    .warning {
+        grid-column: 1;
+    }
+
+    .example img {
+        width: 70vw;
+        height: 70vw;
+    }
+}
+
+</style>
+</head>
+<body>
+    <header>
+        <img src="circle.svg">
+        <h1>WebGPU<br>demos</h1>
+    </header>
+    <section class="demos">
+        <p class="intro">
+            Here are a collection of simple <a
+            href="https://webkit.org/blog/7380/next-generation-3d-graphics-on-th
+            e-web/">WebGPU</a> examples. They should work in the latest <a
+            href="https://developer.apple.com/safari/technology-preview/">Safari
+             Technology Preview</a> releases, as well as <a
+            href="https://webkit.org/nightly/">nightly WebKit</a> builds. At
+            the moment there are a few small differences between the
+            implementation and the <a
+            href="https://webkit.org/wp-content/uploads/webgpu-api-proposal.html
+            ">documented proposal</a>, most of which are documented in the code.
+        </p>
+        <p class="warning">
+            WebGPU is an experimental technology, and you should not browse the entire
+            Web with it enabled for now. It doesn't do any validation of content, and
+            thus may cause some issues with your computer.
+        </p>
+        <div class="example">
+            <a href="hello.html">
+            <img src="hello.jpg"><br>
+            Hello World Triangle
+            </a>
+        </div>
+        <div class="example">
+            <a href="2d.html">
+            <img src="2d.jpg"><br>
+            2d-drawing like Shadertoy
+            </a>
+        </div>
+        <div class="example">
+            <a href="simple.html">
+            <img src="simple.jpg"><br>
+            Simple Spinning Cube
+            </a>
+        </div>
+        <div class="example">
+            <a href="cubes.html">
+            <img src="cubes.jpg"><br>
+            Animating Cubes
+            </a>
+        </div>
+    </section>
+</div>
+</body>
+</html>
diff --git a/Websites/webkit.org/demos/webgpu/simple.jpg b/Websites/webkit.org/demos/webgpu/simple.jpg
new file mode 100644 (file)
index 0000000..9199301
Binary files /dev/null and b/Websites/webkit.org/demos/webgpu/simple.jpg differ