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