Unreviewed. Add some WebGPU examples.
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 1 Apr 2017 02:05:01 +0000 (02:05 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 1 Apr 2017 02:05:01 +0000 (02:05 +0000)
* demos/webgpu/2d.html: Added.
* demos/webgpu/2d.js: Added.
* demos/webgpu/cubes.html: Added.
* demos/webgpu/cubes.js: Added.
* demos/webgpu/shared.css: Added.
* demos/webgpu/shared.js: Added.
* demos/webgpu/simple.html: Added.
* demos/webgpu/simple.js: Added.

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

Websites/webkit.org/ChangeLog
Websites/webkit.org/demos/webgpu/2d.html [new file with mode: 0644]
Websites/webkit.org/demos/webgpu/2d.js [new file with mode: 0644]
Websites/webkit.org/demos/webgpu/cubes.html [new file with mode: 0644]
Websites/webkit.org/demos/webgpu/cubes.js [new file with mode: 0644]
Websites/webkit.org/demos/webgpu/shared.css [new file with mode: 0644]
Websites/webkit.org/demos/webgpu/shared.js [new file with mode: 0644]
Websites/webkit.org/demos/webgpu/simple.html [new file with mode: 0644]
Websites/webkit.org/demos/webgpu/simple.js [new file with mode: 0644]

index 8b93f86..8b3efac 100644 (file)
@@ -1,3 +1,16 @@
+2017-03-31  Dean Jackson  <dino@apple.com>
+
+        Unreviewed. Add some WebGPU examples.
+
+        * demos/webgpu/2d.html: Added.
+        * demos/webgpu/2d.js: Added.
+        * demos/webgpu/cubes.html: Added.
+        * demos/webgpu/cubes.js: Added.
+        * demos/webgpu/shared.css: Added.
+        * demos/webgpu/shared.js: Added.
+        * demos/webgpu/simple.html: Added.
+        * demos/webgpu/simple.js: Added.
+
 2017-03-11  Jon Davis  <jond@apple.com>
 
         Add Swift syntax highlighting to webkit.org
diff --git a/Websites/webkit.org/demos/webgpu/2d.html b/Websites/webkit.org/demos/webgpu/2d.html
new file mode 100644 (file)
index 0000000..8c6252e
--- /dev/null
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=600">
+<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+<title>WebGPU 2D 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="2d.js"></script>
+<script id="library" type="x-shader/x-metal">
+#include <metal_stdlib>
+
+using namespace metal;
+
+struct Vertex
+{
+    float4 position [[position]];
+};
+
+struct Uniform
+{
+    float2 resolution;
+    float time;
+};
+
+vertex Vertex vertex_main(device Vertex *vertices [[buffer(0)]],
+                          constant Uniform *uniforms [[buffer(1)]],
+                          uint vid [[vertex_id]])
+{
+    return vertices[vid];
+}
+
+fragment float4 fragment_main(Vertex vertexIn [[stage_in]], constant Uniform *uniforms [[buffer(0)]])
+{
+    float2 position = vertexIn.position.xy / uniforms->resolution.xy;
+
+    float color = 0.0;
+    float time = uniforms->time;
+    color += sin(position.x * cos(time / 7.0) * 90.0) + cos(position.y * cos(time / 17.0) * 15.0);
+    color += sin(position.y * sin(time / 13.0) * 35.0) + cos(position.x * sin(time / 27.0) * 35.0);
+    color += sin(position.x * sin(time / 5.0) * 15.0) + sin(position.y * sin(time / 31.0) * 90.0);
+    color *= sin(time / 10.0) * 0.5;
+
+    return float4(color, color * 0.5 + sin(time / 10), sin(color + time / 3.0) * 0.75, 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/2d.js b/Websites/webkit.org/demos/webgpu/2d.js
new file mode 100644 (file)
index 0000000..8f3209b
--- /dev/null
@@ -0,0 +1,144 @@
+class Uniform {
+    constructor(float32Array) {
+        if (float32Array && float32Array.length != 64) {
+            console.log("Incorrect backing store for Uniform");
+            return;
+        }
+
+        this.array = float32Array || new Float32Array(64);
+    }
+    // Layout is
+    // 0-1 = resolution (float2)
+    // 2 = time (float)
+    get buffer() {
+        return this.array;
+    }
+    get resolution() {
+        return this.array.subarray(0, 2);
+    }
+    get time() {
+        return this.array[2];
+    }
+    set resolution(value) {
+        this.array[0] = value[0];
+        this.array[1] = value[1];
+    }
+    set time(value) {
+        this.array[2] = value;
+    }
+    copyValuesTo(buffer) {
+        var bufferData = new Float32Array(buffer.contents);
+        for (let i = 0; i < 3; i++) {
+            bufferData[i] = this.array[i];
+        }
+    }
+}
+
+const vertexData = new Float32Array(
+[
+    -1, -1, 0, 1,
+    1, -1, 0, 1,
+    1, 1, 0, 1,
+    -1, -1, 0, 1,
+    -1, 1, 0, 1,
+    1, 1, 0, 1,
+]);
+
+let gpu;
+let commandQueue;
+let renderPassDescriptor;
+let renderPipelineState;
+
+const NumActiveUniformBuffers = 3;
+let uniforms = new Array(NumActiveUniformBuffers);
+let uniformBuffers = new Array(NumActiveUniformBuffers);
+let currentUniformBufferIndex = 0;
+
+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);
+
+    for (let i = 0; i < NumActiveUniformBuffers; i++) {
+        let uniform = new Uniform();
+        uniform.resolution = new Float32Array([canvasSize.width, canvasSize.height]);
+        uniforms[i] = uniform;
+        uniformBuffers[i] = gpu.createBuffer(uniform.buffer);
+    }
+
+    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];
+
+    vertexBuffer = gpu.createBuffer(vertexData);
+    render();
+}
+
+function render() {
+
+    updateUniformData(currentUniformBufferIndex);
+
+    let commandBuffer = commandQueue.createCommandBuffer();
+
+    let drawable = gpu.nextDrawable();
+
+    renderPassDescriptor.colorAttachments[0].texture = drawable.texture;
+
+    let commandEncoder = commandBuffer.createRenderCommandEncoderWithDescriptor(renderPassDescriptor);
+    commandEncoder.setRenderPipelineState(renderPipelineState);
+    commandEncoder.setVertexBuffer(vertexBuffer, 0, 0);
+    commandEncoder.setVertexBuffer(uniformBuffers[currentUniformBufferIndex], 0, 1);
+    commandEncoder.setFragmentBuffer(uniformBuffers[currentUniformBufferIndex], 0, 0);
+
+    // 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, 6);
+
+    commandEncoder.endEncoding();
+    commandBuffer.presentDrawable(drawable);
+    commandBuffer.commit();
+
+    currentUniformBufferIndex = (currentUniformBufferIndex + 1) % NumActiveUniformBuffers;
+    requestAnimationFrame(render);
+}
+
+var count = 0;
+
+function updateUniformData(index) {
+    var now = Date.now() % 100000 / 500;
+    let uniform = uniforms[index];
+    uniform.time = now;
+
+    uniform.copyValuesTo(uniformBuffers[index]);
+
+}
diff --git a/Websites/webkit.org/demos/webgpu/cubes.html b/Websites/webkit.org/demos/webgpu/cubes.html
new file mode 100644 (file)
index 0000000..9ccf375
--- /dev/null
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=600">
+<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+<title>WebGPU Cubes 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="https://raw.githubusercontent.com/toji/gl-matrix/master/dist/gl-matrix-min.js"></script>
+<script src="shared.js"></script>
+<script src="cubes.js"></script>
+<script id="library" type="x-shader/x-metal">
+#include <metal_stdlib>
+#include <simd/simd.h>
+
+using namespace metal;
+
+struct uniform_t
+{
+    float4x4 modelview_projection_matrix;
+    float4x4 normal_matrix;
+    float4 ambient_color;
+    float multiplier;
+} __attribute__ ((aligned (256)));
+
+constant float3 light_position = float3(0.0, -1.0, 1.0);
+constant float4 light_color = float4(1, 1, 1, 1);
+
+struct vertex_t
+{
+    packed_float3 position;
+    packed_float3 normal;
+};
+
+struct varying_t {
+    float4 position [[position]];
+    half4 color;
+};
+
+vertex varying_t vertex_function(device vertex_t* vertex_array [[ buffer(0) ]],
+                               constant uniform_t& uniforms [[ buffer(1) ]],
+                               unsigned int vid [[ vertex_id ]])
+{
+    varying_t out;
+
+    float4 position = float4(float3(vertex_array[vid].position), 1.0);
+    out.position = uniforms.modelview_projection_matrix * position;
+
+    float3 normal = vertex_array[vid].normal;
+    float4 eye_normal = normalize(uniforms.normal_matrix * float4(normal, 0.0));
+
+    float n_dot_l = dot(eye_normal.rgb, normalize(light_position));
+    n_dot_l = fmax(0.0, n_dot_l);
+
+    out.color = half4(uniforms.ambient_color + light_color * n_dot_l);
+
+    return out;
+}
+
+fragment half4 fragment_function(varying_t in [[stage_in]])
+{
+    return in.color;
+};
+</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/cubes.js b/Websites/webkit.org/demos/webgpu/cubes.js
new file mode 100644 (file)
index 0000000..6f52a24
--- /dev/null
@@ -0,0 +1,344 @@
+class Uniform {
+    constructor(float32Array) {
+        if (float32Array && float32Array.length != 64) {
+            console.log("Incorrect backing store for Uniform");
+            return;
+        }
+
+        this.array = float32Array || new Float32Array(64);
+    }
+    // Layout is
+    // 0-15 = model_view_projection_matrix (float4x4)
+    // 16-31 = normal matrix (float4x4)
+    // 32-35 = ambient color (float4)
+    // 36 = multiplier (int)
+    get buffer() {
+        return this.array;
+    }
+    get mvp() {
+        return this.array.subarray(0, 16);
+    }
+    get normal() {
+        return this.array.subarray(16, 32);
+    }
+    get ambientColor() {
+        return this.array.subarray(32, 36);
+    }
+    get multiplier() {
+        return this.array[40];
+    }
+    set mvp(value) {
+        this._copyMatrix(value, 0);
+    }
+    set normal(value) {
+        this._copyMatrix(value, 16);
+    }
+    set ambientColor(value) {
+        this.array[32] = value[0];
+        this.array[33] = value[1];
+        this.array[34] = value[2];
+        this.array[35] = value[3];
+    }
+    set multiplier(value) {
+        this.array[36] = value;
+    }
+    _copyMatrix(matrix, offset) {
+        for (var i = 0; i < 16; i++) {
+            this.array[offset + i] = matrix[i];
+        }
+    }
+}
+
+const smoothstep = (min, max, value) => {
+    let x = Math.max(0, Math.min(1, (value - min) / (max - min)));
+    return x * x * (3 - 2 * x);
+};
+
+const inTimeRange = (now, start, end, period) => {
+    let offset = now % period;
+    return offset >= start && offset <= end;
+};
+
+const timeRangeOffset = (now, start, end, period) => {
+    if (!inTimeRange(now, start, end, period)) {
+        return 0;
+    }
+    let offset = now % period;
+    return Math.min(1, Math.max(0, (offset - start) / (end - start)));
+};
+
+const middlePeakTimeRangeOffset = (now, start, end, period) => {
+    let offset = timeRangeOffset(now, start, end, period);
+    return 1 - Math.abs(0.5 - offset) * 2;
+};
+
+const kNumActiveUniformBuffers = 3;
+const kNumberOfBoxesPerAxis = 6;
+const kNumberOfBoxes = kNumberOfBoxesPerAxis * kNumberOfBoxesPerAxis;
+const kBoxBaseAmbientColor = [0.2, 0.2, 0.2, 1.0];
+const kFOVY = 45.0 / 180 * Math.PI;
+const kEye = vec3.fromValues(0.0, 2.75, -2);
+const kCenter = vec3.fromValues(0.0, 1.5, 1.0);
+const kUp = vec3.fromValues(0.0, 1.0, 0.0);
+const kEdge = 1.5 / kNumberOfBoxesPerAxis ;
+
+const kCubeVertexData = new Float32Array(
+[
+    kEdge, -kEdge, kEdge, 0.0, -1.0, 0.0,
+    -kEdge, -kEdge, kEdge, 0.0, -1.0, 0.0,
+    -kEdge, -kEdge, -kEdge, 0.0, -1.0, 0.0,
+    kEdge, -kEdge, -kEdge, 0.0, -1.0, 0.0,
+    kEdge, -kEdge, kEdge, 0.0, -1.0, 0.0,
+    -kEdge, -kEdge, -kEdge, 0.0, -1.0, 0.0,
+
+    kEdge, kEdge, kEdge, 1.0, 0.0, 0.0,
+    kEdge, -kEdge, kEdge, 1.0, 0.0, 0.0,
+    kEdge, -kEdge, -kEdge, 1.0, 0.0, 0.0,
+    kEdge, kEdge, -kEdge, 1.0, 0.0, 0.0,
+    kEdge, kEdge, kEdge, 1.0, 0.0, 0.0,
+    kEdge, -kEdge, -kEdge, 1.0, 0.0, 0.0,
+
+    -kEdge, kEdge, kEdge, 0.0, 1.0, 0.0,
+    kEdge, kEdge, kEdge, 0.0, 1.0, 0.0,
+    kEdge, kEdge, -kEdge, 0.0, 1.0, 0.0,
+    -kEdge, kEdge, -kEdge, 0.0, 1.0, 0.0,
+    -kEdge, kEdge, kEdge, 0.0, 1.0, 0.0,
+    kEdge, kEdge, -kEdge, 0.0, 1.0, 0.0,
+
+    -kEdge, -kEdge, kEdge, -1.0, 0.0, 0.0,
+    -kEdge, kEdge, kEdge, -1.0, 0.0, 0.0,
+    -kEdge, kEdge, -kEdge, -1.0, 0.0, 0.0,
+    -kEdge, -kEdge, -kEdge, -1.0, 0.0, 0.0,
+    -kEdge, -kEdge, kEdge, -1.0, 0.0, 0.0,
+    -kEdge, kEdge, -kEdge, -1.0, 0.0, 0.0,
+
+    kEdge, kEdge, kEdge, 0.0, 0.0, 1.0,
+    -kEdge, kEdge, kEdge, 0.0, 0.0, 1.0,
+    -kEdge, -kEdge, kEdge, 0.0, 0.0, 1.0,
+    -kEdge, -kEdge, kEdge, 0.0, 0.0, 1.0,
+    kEdge, -kEdge, kEdge, 0.0, 0.0, 1.0,
+    kEdge, kEdge, kEdge, 0.0, 0.0, 1.0,
+
+    kEdge, -kEdge, -kEdge, 0.0, 0.0, -1.0,
+    -kEdge, -kEdge, -kEdge, 0.0, 0.0, -1.0,
+    -kEdge, kEdge, -kEdge, 0.0, 0.0, -1.0,
+    kEdge, kEdge, -kEdge, 0.0, 0.0, -1.0,
+    kEdge, -kEdge, -kEdge, 0.0, 0.0, -1.0,
+    -kEdge, kEdge, -kEdge, 0.0, 0.0, -1.0
+]);
+
+let gpu;
+let commandQueue;
+let renderPassDescriptor;
+let renderPipelineState;
+let depthStencilState;
+
+let projectionMatrix = mat4.create();
+let viewMatrix = mat4.create();
+
+var startTime;
+var elapsedTime;
+let cameraRotation = 0;
+let cameraAltitude = 0;
+
+const uniformBuffers = new Array(kNumActiveUniformBuffers);
+var currentUniformBufferIndex = 0;
+
+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;
+
+    let aspect = Math.abs(canvasSize.width / canvasSize.height);
+    mat4.perspective(projectionMatrix, kFOVY, aspect, 0.1, 100.0);
+    mat4.lookAt(viewMatrix, kEye, kCenter, kUp);
+
+    gpu = canvas.getContext("webgpu");
+    commandQueue = gpu.createCommandQueue();
+
+    let library = gpu.createLibrary(document.getElementById("library").text);
+    let vertexFunction = library.functionWithName("vertex_function");
+    let fragmentFunction = library.functionWithName("fragment_function");
+
+    if (!library || !fragmentFunction || !vertexFunction) {
+        return;
+    }
+
+    var 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;
+    pipelineDescriptor.depthAttachmentPixelFormat = gpu.PixelFormatDepth32Float;
+
+    renderPipelineState = gpu.createRenderPipelineState(pipelineDescriptor);
+
+    let depthStencilDescriptor = new WebGPUDepthStencilDescriptor();
+    depthStencilDescriptor.depthWriteEnabled = true;
+    depthStencilDescriptor.depthCompareFunction = "less";
+
+    depthStencilState = gpu.createDepthStencilState(depthStencilDescriptor);
+
+    for (let i = 0; i < kNumActiveUniformBuffers; i++) {
+        uniformBuffers[i] = [];
+        for (let j = 0; j < kNumberOfBoxes; j++) {
+            let uniform = new Uniform();
+            uniform.multiplier = (j % 2) ? -1 : 1;
+            uniform.ambientColor = kBoxBaseAmbientColor;
+            uniformBuffers[i].push(gpu.createBuffer(uniform.buffer));
+        }
+    }
+
+    let depthTextureDescriptor = new WebGPUTextureDescriptor(gpu.PixelFormatDepth32Float, canvasSize.width, canvasSize.height, false);
+    // NOTE: Our API proposal has some of these values as enums, not constant numbers.
+    // We haven't got around to implementing the enums yet.
+    depthTextureDescriptor.textureType = gpu.TextureType2D;
+    depthTextureDescriptor.sampleCount = 1;
+    depthTextureDescriptor.usage = gpu.TextureUsageUnknown;
+    depthTextureDescriptor.storageMode = gpu.StorageModePrivate;
+
+    let depthTexture = gpu.createTexture(depthTextureDescriptor);
+
+    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];
+    renderPassDescriptor.depthAttachment.loadAction = gpu.LoadActionClear;
+    renderPassDescriptor.depthAttachment.storeAction = gpu.StoreActionDontCare;
+    renderPassDescriptor.depthAttachment.clearDepth = 1.0;
+    renderPassDescriptor.depthAttachment.texture = depthTexture;
+
+    vertexBuffer = gpu.createBuffer(kCubeVertexData);
+
+    startTime = Date.now();
+    render();
+}
+
+function render() {
+
+    elapsedTime = (Date.now() - startTime) / 1000;
+
+    cameraRotation = Math.PI * 2 * (1 - timeRangeOffset(elapsedTime, 0, 11, 11));
+    cameraAltitude = Math.sin(elapsedTime / 6 * Math.PI) + 1;
+
+    let eye = vec3.create();
+    vec3.add(eye, kEye, vec3.fromValues(0, cameraAltitude, 0));
+    mat4.lookAt(viewMatrix, eye, kCenter, kUp);
+
+    updateUniformData(currentUniformBufferIndex);
+
+    let commandBuffer = commandQueue.createCommandBuffer();
+
+    let drawable = gpu.nextDrawable();
+
+    renderPassDescriptor.colorAttachments[0].texture = drawable.texture;
+
+    let commandEncoder = commandBuffer.createRenderCommandEncoderWithDescriptor(renderPassDescriptor);
+    commandEncoder.setDepthStencilState(depthStencilState);
+    commandEncoder.setRenderPipelineState(renderPipelineState);
+    commandEncoder.setVertexBuffer(vertexBuffer, 0, 0);
+
+    for (let geometryBuffer of uniformBuffers[currentUniformBufferIndex]) {
+        commandEncoder.setVertexBuffer(geometryBuffer, 0, 1);
+        // 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, kCubeVertexData.length);
+    }
+
+    commandEncoder.endEncoding();
+    commandBuffer.presentDrawable(drawable);
+    commandBuffer.commit();
+
+    currentUniformBufferIndex = (currentUniformBufferIndex + 1) % kNumActiveUniformBuffers;
+    requestAnimationFrame(render);
+}
+
+function updateUniformData(index) {
+
+    let baseModelViewMatrix = mat4.create();
+    mat4.translate(baseModelViewMatrix, baseModelViewMatrix, vec3.fromValues(0, -1 * cameraAltitude, 5));
+    mat4.rotate(baseModelViewMatrix, baseModelViewMatrix, cameraRotation, vec3.fromValues(0, 1, 0));
+
+    mat4.multiply(baseModelViewMatrix, viewMatrix, baseModelViewMatrix);
+
+    for (let i = 0; i < kNumberOfBoxesPerAxis; i++) {
+        for (let j = 0; j < kNumberOfBoxesPerAxis; j++) {
+
+            let boxIndex = i * kNumberOfBoxesPerAxis + j;
+
+            let modelViewMatrix = mat4.create();
+
+            // Position the cube in X,Y.
+            let translationMatrix = mat4.create();
+            if (kNumberOfBoxesPerAxis > 1) {
+                let step = 4 / (kNumberOfBoxesPerAxis - 1);
+                mat4.translate(translationMatrix, translationMatrix, vec3.fromValues(j * step - 2, 0, i * step - 2));
+            } else {
+                mat4.translate(translationMatrix, translationMatrix, vec3.fromValues(0, 0, 0));
+            }
+
+            let translateElapsedOffset = elapsedTime + boxIndex * 0.6;
+            if (inTimeRange(translateElapsedOffset, 10, 12, 23)) {
+                let translate = smoothstep(0, 1, middlePeakTimeRangeOffset(translateElapsedOffset, 10, 12, 23)) * 0.4;
+                mat4.translate(translationMatrix, translationMatrix, vec3.fromValues(0, translate, 0));
+            }
+
+            let scaleMatrix = mat4.create();
+            let scaleElapsedOffset = elapsedTime + boxIndex * 0.1;
+            if (inTimeRange(scaleElapsedOffset, 2, 6, 19)) {
+                let scale = smoothstep(0, 1, middlePeakTimeRangeOffset(scaleElapsedOffset, 2, 6, 19)) * 0.5 + 1;
+                mat4.scale(scaleMatrix, scaleMatrix, vec3.fromValues(scale, scale, scale));
+            }
+            mat4.multiply(modelViewMatrix, translationMatrix, scaleMatrix);
+
+            // Rotate the cube.
+            let rotationMatrix = mat4.create();
+            let rotationElapsedOffset = elapsedTime + (kNumberOfBoxes - boxIndex) * 0.1;
+            if (inTimeRange(rotationElapsedOffset, 3, 7, 11)) {
+                var rotation = smoothstep(0, 1, timeRangeOffset(rotationElapsedOffset, 3, 7, 11)) * Math.PI * 2;
+                mat4.rotate(rotationMatrix, rotationMatrix, rotation, vec3.fromValues(0.5, 1, 1));
+            }
+            mat4.multiply(modelViewMatrix, modelViewMatrix, rotationMatrix);
+
+            mat4.multiply(modelViewMatrix, baseModelViewMatrix, modelViewMatrix);
+
+            let normalMatrix = mat4.clone(modelViewMatrix);
+            mat4.transpose(normalMatrix, normalMatrix);
+            mat4.invert(normalMatrix, normalMatrix);
+
+            let uniform = new Uniform(new Float32Array(uniformBuffers[index][i * kNumberOfBoxesPerAxis + j].contents));
+
+            uniform.normal = normalMatrix;
+
+            let modelViewProjectionMatrix = mat4.create();
+            mat4.multiply(modelViewProjectionMatrix, projectionMatrix, modelViewMatrix);
+
+            uniform.mvp = modelViewProjectionMatrix;
+
+            let colorElapsedOffset = elapsedTime + boxIndex * 0.15;
+            if (inTimeRange(colorElapsedOffset, 2, 3, 10)) {
+                let redBoost = middlePeakTimeRangeOffset(colorElapsedOffset, 2, 3, 10) * 0.5;
+                uniform.ambientColor[0] = Math.min(1.0, Math.max(0, kBoxBaseAmbientColor[0] + redBoost));
+            } else {
+                uniform.ambientColor[0] = kBoxBaseAmbientColor[0];
+            }
+            colorElapsedOffset = elapsedTime + (kNumberOfBoxes - boxIndex) * 0.1;
+            if (inTimeRange(colorElapsedOffset, 7, 11, 21)) {
+                let greenBoost = middlePeakTimeRangeOffset(colorElapsedOffset, 7, 11, 21) * 0.3;
+                uniform.ambientColor[1] = Math.min(1.0, Math.max(0, kBoxBaseAmbientColor[1] + greenBoost));
+            } else {
+                uniform.ambientColor[1] = kBoxBaseAmbientColor[1];
+            }
+        }
+    }
+}
diff --git a/Websites/webkit.org/demos/webgpu/shared.css b/Websites/webkit.org/demos/webgpu/shared.css
new file mode 100644 (file)
index 0000000..2351449
--- /dev/null
@@ -0,0 +1,45 @@
+body {
+    background-color: rgb(35%, 65%, 85%);
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+canvas {
+    display: block;
+    width: 100vw;
+    height: 100vh;
+}
+
+body.error {
+    background-color: rgb(85%, 35%, 35%);
+}
+
+body.error canvas {
+    display: none;
+}
+
+#error {
+    margin: 0;
+    padding: 0;
+    width: 50vw;
+    display: none;
+    text-align: center;
+}
+
+body.error #error {
+    display: block;
+}
+
+#error h2 {
+    font-weight: bold;
+    font-size: 40px;
+    margin-bottom: 20px;
+}
+
+#error p {
+    font-size: 30px;
+}
diff --git a/Websites/webkit.org/demos/webgpu/shared.js b/Websites/webkit.org/demos/webgpu/shared.js
new file mode 100644 (file)
index 0000000..e499767
--- /dev/null
@@ -0,0 +1,11 @@
+const hasWebGPU = () => {
+    return 'WebGPURenderingContext' in window;
+};
+
+const checkForWebGPU = () => {
+    if (hasWebGPU())
+      return true;
+
+    document.body.className = "error";
+    return false;
+}
diff --git a/Websites/webkit.org/demos/webgpu/simple.html b/Websites/webkit.org/demos/webgpu/simple.html
new file mode 100644 (file)
index 0000000..6f623c9
--- /dev/null
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=600">
+<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+<title>WebGPU Simple 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="https://raw.githubusercontent.com/toji/gl-matrix/master/dist/gl-matrix-min.js"></script>
+<script src="shared.js"></script>
+<script src="simple.js"></script>
+<script id="library" type="x-shader/x-metal">
+#include <metal_stdlib>
+
+using namespace metal;
+
+struct Vertex
+{
+    float4 position [[position]];
+    float4 color;
+};
+
+struct Uniform
+{
+    float4x4 modelViewProjectionMatrix;
+};
+
+vertex Vertex vertex_main(device Vertex *vertices [[buffer(0)]],
+                          constant Uniform *uniforms [[buffer(1)]],
+                          uint vid [[vertex_id]])
+{
+    Vertex vertexOut;
+    vertexOut.position = uniforms->modelViewProjectionMatrix * vertices[vid].position;
+    vertexOut.color = vertices[vid].color;
+
+    return vertexOut;
+}
+
+fragment float4 fragment_main(Vertex vertexIn [[stage_in]])
+{
+    return float4(vertexIn.color);
+}
+</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/simple.js b/Websites/webkit.org/demos/webgpu/simple.js
new file mode 100644 (file)
index 0000000..2f08d51
--- /dev/null
@@ -0,0 +1,172 @@
+const vertexData = new Float32Array(
+[
+    // float4 position, float4 color
+    1, -1, 1, 1, 1, 0, 1, 1,
+    -1, -1, 1, 1, 0, 0, 1, 1,
+    -1, -1, -1, 1, 0, 0, 0, 1,
+    1, -1, -1, 1, 1, 0, 0, 1,
+    1, -1, 1, 1, 1, 0, 1, 1,
+    -1, -1, -1, 1, 0, 0, 0, 1,
+
+    1, 1, 1, 1, 1, 1, 1, 1,
+    1, -1, 1, 1, 1, 0, 1, 1,
+    1, -1, -1, 1, 1, 0, 0, 1,
+    1, 1, -1, 1, 1, 1, 0, 1,
+    1, 1, 1, 1, 1, 1, 1, 1,
+    1, -1, -1, 1, 1, 0, 0, 1,
+
+    -1, 1, 1, 1, 0, 1, 1, 1,
+    1, 1, 1, 1, 1, 1, 1, 1,
+    1, 1, -1, 1, 1, 1, 0, 1,
+    -1, 1, -1, 1, 0, 1, 0, 1,
+    -1, 1, 1, 1, 0, 1, 1, 1,
+    1, 1, -1, 1, 1, 1, 0, 1,
+
+    -1, -1, 1, 1, 0, 0, 1, 1,
+    -1, 1, 1, 1, 0, 1, 1, 1,
+    -1, 1, -1, 1, 0, 1, 0, 1,
+    -1, -1, -1, 1, 0, 0, 0, 1,
+    -1, -1, 1, 1, 0, 0, 1, 1,
+    -1, 1, -1, 1, 0, 1, 0, 1,
+
+    1, 1, 1, 1, 1, 1, 1, 1,
+    -1, 1, 1, 1, 0, 1, 1, 1,
+    -1, -1, 1, 1, 0, 0, 1, 1,
+    -1, -1, 1, 1, 0, 0, 1, 1,
+    1, -1, 1, 1, 1, 0, 1, 1,
+    1, 1, 1, 1, 1, 1, 1, 1,
+
+    1, -1, -1, 1, 1, 0, 0, 1,
+    -1, -1, -1, 1, 0, 0, 0, 1,
+    -1, 1, -1, 1, 0, 1, 0, 1,
+    1, 1, -1, 1, 1, 1, 0, 1,
+    1, -1, -1, 1, 1, 0, 0, 1,
+    -1, 1, -1, 1, 0, 1, 0, 1,
+]);
+
+const NumActiveUniformBuffers = 3;
+
+let gpu;
+let commandQueue;
+let renderPassDescriptor;
+let renderPipelineState;
+let depthStencilState;
+let projectionMatrix = mat4.create();
+
+let uniformBuffers = new Array(NumActiveUniformBuffers);
+var currentUniformBufferIndex = 0;
+
+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;
+
+    let aspect = Math.abs(canvasSize.width / canvasSize.height);
+    mat4.perspective(projectionMatrix, (2 * Math.PI) / 5, aspect, 1, 100.0);
+
+    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;
+    pipelineDescriptor.depthAttachmentPixelFormat = gpu.PixelFormatDepth32Float;
+
+    renderPipelineState = gpu.createRenderPipelineState(pipelineDescriptor);
+
+    let depthStencilDescriptor = new WebGPUDepthStencilDescriptor();
+    depthStencilDescriptor.depthWriteEnabled = true;
+    depthStencilDescriptor.depthCompareFunction = "less";
+
+    depthStencilState = gpu.createDepthStencilState(depthStencilDescriptor);
+
+    for (let i = 0; i < NumActiveUniformBuffers; i++) {
+        uniformBuffers[i] = gpu.createBuffer(new Float32Array(16));
+    }
+
+    let depthTextureDescriptor = new WebGPUTextureDescriptor(gpu.PixelFormatDepth32Float, canvasSize.width, canvasSize.height, false);
+    // NOTE: Our API proposal has some of these values as enums, not constant numbers.
+    // We haven't got around to implementing the enums yet.
+    depthTextureDescriptor.textureType = gpu.TextureType2D;
+    depthTextureDescriptor.sampleCount = 1;
+    depthTextureDescriptor.usage = gpu.TextureUsageUnknown;
+    depthTextureDescriptor.storageMode = gpu.StorageModePrivate;
+
+    let depthTexture = gpu.createTexture(depthTextureDescriptor);
+
+    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];
+    renderPassDescriptor.depthAttachment.loadAction = gpu.LoadActionClear;
+    renderPassDescriptor.depthAttachment.storeAction = gpu.StoreActionDontCare;
+    renderPassDescriptor.depthAttachment.clearDepth = 1.0;
+    renderPassDescriptor.depthAttachment.texture = depthTexture;
+
+    vertexBuffer = gpu.createBuffer(vertexData);
+    render();
+}
+
+function render() {
+
+    updateUniformData(currentUniformBufferIndex);
+
+    let commandBuffer = commandQueue.createCommandBuffer();
+
+    let drawable = gpu.nextDrawable();
+
+    renderPassDescriptor.colorAttachments[0].texture = drawable.texture;
+
+    let commandEncoder = commandBuffer.createRenderCommandEncoderWithDescriptor(renderPassDescriptor);
+    commandEncoder.setDepthStencilState(depthStencilState);
+    commandEncoder.setRenderPipelineState(renderPipelineState);
+    commandEncoder.setVertexBuffer(vertexBuffer, 0, 0);
+    commandEncoder.setVertexBuffer(uniformBuffers[currentUniformBufferIndex], 0, 1);
+
+    // 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, 36);
+
+    commandEncoder.endEncoding();
+    commandBuffer.presentDrawable(drawable);
+    commandBuffer.commit();
+
+    currentUniformBufferIndex = (currentUniformBufferIndex + 1) % NumActiveUniformBuffers;
+    requestAnimationFrame(render);
+}
+
+function updateUniformData(index) {
+
+    let viewMatrix = mat4.create();
+    mat4.translate(viewMatrix, viewMatrix, vec3.fromValues(0, 0, -5));
+    let now = Date.now() / 1000;
+    mat4.rotate(viewMatrix, viewMatrix, 1, vec3.fromValues(Math.sin(now), Math.cos(now), 0));
+
+    let modelViewProjectionMatrix = mat4.create();
+    mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix);
+
+    let uniform = new Float32Array(uniformBuffers[index].contents);
+    for (let i = 0; i < 16; i++) {
+        uniform[i] = modelViewProjectionMatrix[i];
+    }
+}