Diff
Modified: trunk/Websites/webkit.org/ChangeLog (214709 => 214710)
--- trunk/Websites/webkit.org/ChangeLog 2017-04-01 01:54:53 UTC (rev 214709)
+++ trunk/Websites/webkit.org/ChangeLog 2017-04-01 02:05:01 UTC (rev 214710)
@@ -1,3 +1,16 @@
+2017-03-31 Dean Jackson <[email protected]>
+
+ 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 <[email protected]>
Add Swift syntax highlighting to webkit.org
Added: trunk/Websites/webkit.org/demos/webgpu/2d.html (0 => 214710)
--- trunk/Websites/webkit.org/demos/webgpu/2d.html (rev 0)
+++ trunk/Websites/webkit.org/demos/webgpu/2d.html 2017-04-01 02:05:01 UTC (rev 214710)
@@ -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=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<script src=""
+<script src=""
+<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>
Property changes on: trunk/Websites/webkit.org/demos/webgpu/2d.html
___________________________________________________________________
Added: svn:eol-style
+native
\ No newline at end of property
Added: svn:keywords
+Date Revision
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/Websites/webkit.org/demos/webgpu/2d.js (0 => 214710)
--- trunk/Websites/webkit.org/demos/webgpu/2d.js (rev 0)
+++ trunk/Websites/webkit.org/demos/webgpu/2d.js 2017-04-01 02:05:01 UTC (rev 214710)
@@ -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]);
+
+}
Property changes on: trunk/Websites/webkit.org/demos/webgpu/2d.js
___________________________________________________________________
Added: svn:eol-style
+native
\ No newline at end of property
Added: svn:keywords
+Date Revision
\ No newline at end of property
Added: svn:mime-type
+text/plain
\ No newline at end of property
Added: trunk/Websites/webkit.org/demos/webgpu/cubes.html (0 => 214710)
--- trunk/Websites/webkit.org/demos/webgpu/cubes.html (rev 0)
+++ trunk/Websites/webkit.org/demos/webgpu/cubes.html 2017-04-01 02:05:01 UTC (rev 214710)
@@ -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=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<script src=""
+<script src=""
+<script src=""
+<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>
Property changes on: trunk/Websites/webkit.org/demos/webgpu/cubes.html
___________________________________________________________________
Added: svn:eol-style
+native
\ No newline at end of property
Added: svn:keywords
+Date Revision
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/Websites/webkit.org/demos/webgpu/cubes.js (0 => 214710)
--- trunk/Websites/webkit.org/demos/webgpu/cubes.js (rev 0)
+++ trunk/Websites/webkit.org/demos/webgpu/cubes.js 2017-04-01 02:05:01 UTC (rev 214710)
@@ -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];
+ }
+ }
+ }
+}
Property changes on: trunk/Websites/webkit.org/demos/webgpu/cubes.js
___________________________________________________________________
Added: svn:eol-style
+native
\ No newline at end of property
Added: svn:keywords
+Date Revision
\ No newline at end of property
Added: svn:mime-type
+text/plain
\ No newline at end of property
Added: trunk/Websites/webkit.org/demos/webgpu/shared.css (0 => 214710)
--- trunk/Websites/webkit.org/demos/webgpu/shared.css (rev 0)
+++ trunk/Websites/webkit.org/demos/webgpu/shared.css 2017-04-01 02:05:01 UTC (rev 214710)
@@ -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;
+}
Property changes on: trunk/Websites/webkit.org/demos/webgpu/shared.css
___________________________________________________________________
Added: svn:eol-style
+native
\ No newline at end of property
Added: svn:keywords
+Date Revision
\ No newline at end of property
Added: svn:mime-type
+text/css
\ No newline at end of property
Added: trunk/Websites/webkit.org/demos/webgpu/shared.js (0 => 214710)
--- trunk/Websites/webkit.org/demos/webgpu/shared.js (rev 0)
+++ trunk/Websites/webkit.org/demos/webgpu/shared.js 2017-04-01 02:05:01 UTC (rev 214710)
@@ -0,0 +1,11 @@
+const hasWebGPU = () => {
+ return 'WebGPURenderingContext' in window;
+};
+
+const checkForWebGPU = () => {
+ if (hasWebGPU())
+ return true;
+
+ document.body.className = "error";
+ return false;
+}
Property changes on: trunk/Websites/webkit.org/demos/webgpu/shared.js
___________________________________________________________________
Added: svn:eol-style
+native
\ No newline at end of property
Added: svn:keywords
+Date Revision
\ No newline at end of property
Added: svn:mime-type
+text/plain
\ No newline at end of property
Added: trunk/Websites/webkit.org/demos/webgpu/simple.html (0 => 214710)
--- trunk/Websites/webkit.org/demos/webgpu/simple.html (rev 0)
+++ trunk/Websites/webkit.org/demos/webgpu/simple.html 2017-04-01 02:05:01 UTC (rev 214710)
@@ -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=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<script src=""
+<script src=""
+<script src=""
+<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>
Property changes on: trunk/Websites/webkit.org/demos/webgpu/simple.html
___________________________________________________________________
Added: svn:eol-style
+native
\ No newline at end of property
Added: svn:keywords
+Date Revision
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/Websites/webkit.org/demos/webgpu/simple.js (0 => 214710)
--- trunk/Websites/webkit.org/demos/webgpu/simple.js (rev 0)
+++ trunk/Websites/webkit.org/demos/webgpu/simple.js 2017-04-01 02:05:01 UTC (rev 214710)
@@ -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];
+ }
+}
Property changes on: trunk/Websites/webkit.org/demos/webgpu/simple.js
___________________________________________________________________
Added: svn:eol-style
+native
\ No newline at end of property
Added: svn:keywords
+Date Revision
\ No newline at end of property
Added: svn:mime-type
+text/plain
\ No newline at end of property
