<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[214710] trunk/Websites/webkit.org</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/214710">214710</a></dd>
<dt>Author</dt> <dd>dino@apple.com</dd>
<dt>Date</dt> <dd>2017-03-31 19:05:01 -0700 (Fri, 31 Mar 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkWebsiteswebkitorgChangeLog">trunk/Websites/webkit.org/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li>trunk/Websites/webkit.org/demos/webgpu/</li>
<li><a href="#trunkWebsiteswebkitorgdemoswebgpu2dhtml">trunk/Websites/webkit.org/demos/webgpu/2d.html</a></li>
<li><a href="#trunkWebsiteswebkitorgdemoswebgpu2djs">trunk/Websites/webkit.org/demos/webgpu/2d.js</a></li>
<li><a href="#trunkWebsiteswebkitorgdemoswebgpucubeshtml">trunk/Websites/webkit.org/demos/webgpu/cubes.html</a></li>
<li><a href="#trunkWebsiteswebkitorgdemoswebgpucubesjs">trunk/Websites/webkit.org/demos/webgpu/cubes.js</a></li>
<li><a href="#trunkWebsiteswebkitorgdemoswebgpusharedcss">trunk/Websites/webkit.org/demos/webgpu/shared.css</a></li>
<li><a href="#trunkWebsiteswebkitorgdemoswebgpusharedjs">trunk/Websites/webkit.org/demos/webgpu/shared.js</a></li>
<li><a href="#trunkWebsiteswebkitorgdemoswebgpusimplehtml">trunk/Websites/webkit.org/demos/webgpu/simple.html</a></li>
<li><a href="#trunkWebsiteswebkitorgdemoswebgpusimplejs">trunk/Websites/webkit.org/demos/webgpu/simple.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkWebsiteswebkitorgChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Websites/webkit.org/ChangeLog (214709 => 214710)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+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.
+
</ins><span class="cx"> 2017-03-11 Jon Davis <jond@apple.com>
</span><span class="cx">
</span><span class="cx"> Add Swift syntax highlighting to webkit.org
</span></span></pre></div>
<a id="trunkWebsiteswebkitorgdemoswebgpu2dhtml"></a>
<div class="addfile"><h4>Added: trunk/Websites/webkit.org/demos/webgpu/2d.html (0 => 214710)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,61 @@
</span><ins>+<!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>
</ins><span class="cx">Property changes on: trunk/Websites/webkit.org/demos/webgpu/2d.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+native
</ins><span class="cx">\ No newline at end of property
</span><a id="svnkeywords"></a>
<div class="addfile"><h4>Added: svn:keywords</h4></div>
<ins>+Date Revision
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkWebsiteswebkitorgdemoswebgpu2djs"></a>
<div class="addfile"><h4>Added: trunk/Websites/webkit.org/demos/webgpu/2d.js (0 => 214710)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,144 @@
</span><ins>+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]);
+
+}
</ins><span class="cx">Property changes on: trunk/Websites/webkit.org/demos/webgpu/2d.js
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+native
</ins><span class="cx">\ No newline at end of property
</span><a id="svnkeywords"></a>
<div class="addfile"><h4>Added: svn:keywords</h4></div>
<ins>+Date Revision
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/plain
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkWebsiteswebkitorgdemoswebgpucubeshtml"></a>
<div class="addfile"><h4>Added: trunk/Websites/webkit.org/demos/webgpu/cubes.html (0 => 214710)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,78 @@
</span><ins>+<!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>
</ins><span class="cx">Property changes on: trunk/Websites/webkit.org/demos/webgpu/cubes.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+native
</ins><span class="cx">\ No newline at end of property
</span><a id="svnkeywords"></a>
<div class="addfile"><h4>Added: svn:keywords</h4></div>
<ins>+Date Revision
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkWebsiteswebkitorgdemoswebgpucubesjs"></a>
<div class="addfile"><h4>Added: trunk/Websites/webkit.org/demos/webgpu/cubes.js (0 => 214710)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,344 @@
</span><ins>+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];
+ }
+ }
+ }
+}
</ins><span class="cx">Property changes on: trunk/Websites/webkit.org/demos/webgpu/cubes.js
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+native
</ins><span class="cx">\ No newline at end of property
</span><a id="svnkeywords"></a>
<div class="addfile"><h4>Added: svn:keywords</h4></div>
<ins>+Date Revision
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/plain
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkWebsiteswebkitorgdemoswebgpusharedcss"></a>
<div class="addfile"><h4>Added: trunk/Websites/webkit.org/demos/webgpu/shared.css (0 => 214710)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,45 @@
</span><ins>+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;
+}
</ins><span class="cx">Property changes on: trunk/Websites/webkit.org/demos/webgpu/shared.css
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+native
</ins><span class="cx">\ No newline at end of property
</span><a id="svnkeywords"></a>
<div class="addfile"><h4>Added: svn:keywords</h4></div>
<ins>+Date Revision
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/css
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkWebsiteswebkitorgdemoswebgpusharedjs"></a>
<div class="addfile"><h4>Added: trunk/Websites/webkit.org/demos/webgpu/shared.js (0 => 214710)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,11 @@
</span><ins>+const hasWebGPU = () => {
+ return 'WebGPURenderingContext' in window;
+};
+
+const checkForWebGPU = () => {
+ if (hasWebGPU())
+ return true;
+
+ document.body.className = "error";
+ return false;
+}
</ins><span class="cx">Property changes on: trunk/Websites/webkit.org/demos/webgpu/shared.js
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+native
</ins><span class="cx">\ No newline at end of property
</span><a id="svnkeywords"></a>
<div class="addfile"><h4>Added: svn:keywords</h4></div>
<ins>+Date Revision
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/plain
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkWebsiteswebkitorgdemoswebgpusimplehtml"></a>
<div class="addfile"><h4>Added: trunk/Websites/webkit.org/demos/webgpu/simple.html (0 => 214710)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,57 @@
</span><ins>+<!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>
</ins><span class="cx">Property changes on: trunk/Websites/webkit.org/demos/webgpu/simple.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+native
</ins><span class="cx">\ No newline at end of property
</span><a id="svnkeywords"></a>
<div class="addfile"><h4>Added: svn:keywords</h4></div>
<ins>+Date Revision
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkWebsiteswebkitorgdemoswebgpusimplejs"></a>
<div class="addfile"><h4>Added: trunk/Websites/webkit.org/demos/webgpu/simple.js (0 => 214710)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,172 @@
</span><ins>+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];
+ }
+}
</ins><span class="cx">Property changes on: trunk/Websites/webkit.org/demos/webgpu/simple.js
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+native
</ins><span class="cx">\ No newline at end of property
</span><a id="svnkeywords"></a>
<div class="addfile"><h4>Added: svn:keywords</h4></div>
<ins>+Date Revision
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/plain
</ins><span class="cx">\ No newline at end of property
</span></div>
</body>
</html>