Fix some WebGPU demos
[WebKit-https.git] / Websites / webkit.org / demos / webgpu / textured-cube.html
index 773fec8..274b66e 100644 (file)
@@ -32,12 +32,16 @@ p {
     <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 → WebGPU.
+        Safari, first make sure the Developer Menu is visible (Preferences >
+        Advanced), then Develop > Experimental Features > WebGPU.
+    </p>
+    <p>
+        In addition, you must be using Safari Technology Preview 92 or above.
+        You can get the latest STP <a href="https://developer.apple.com/safari/download/">here</a>.
     </p>
 </div>
 <script>
-if (!navigator.gpu)
+if (!navigator.gpu || GPUBufferUsage.COPY_SRC === undefined)
     document.body.className = 'error';
 
 const positionAttributeNum  = 0;
@@ -76,6 +80,8 @@ fragment float4 fragment_main(
 }
 `;
 
+//console.log(`Shader is: ${shader}`);
+
 let device, swapChain, verticesBuffer, bindGroupLayout, pipeline, renderPassDescriptor, queue, textureViewBinding, samplerBinding;
 let projectionMatrix = mat4.create();
 
@@ -130,6 +136,10 @@ async function init() {
     const adapter = await navigator.gpu.requestAdapter();
     device = await adapter.requestDevice();
 
+    device.onuncapturederror = function (e) {
+        console.log(`ERROR:`, e);
+    };
+
     const canvas = document.querySelector('canvas');
 
     const aspect = Math.abs(canvas.width / canvas.height);
@@ -149,7 +159,7 @@ async function init() {
 
     const verticesBufferDescriptor = { 
         size: verticesArray.byteLength, 
-        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.TRANSFER_DST
+        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
     };
     let verticesArrayBuffer;
     [verticesBuffer, verticesArrayBuffer] = device.createBufferMapped(verticesBufferDescriptor);
@@ -200,7 +210,7 @@ async function init() {
         sampleCount: 1,
         dimension: "2d",
         format: "rgba8unorm",
-        usage: GPUTextureUsage.TRANSFER_DST | GPUTextureUsage.SAMPLED
+        usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.SAMPLED
     };
     const texture = device.createTexture(textureDescriptor);
 
@@ -215,7 +225,7 @@ async function init() {
 
     const textureDataBufferDescriptor = {
         size: imageData.data.length,
-        usage: GPUBufferUsage.TRANSFER_SRC
+        usage: GPUBufferUsage.COPY_SRC
     };
     const [textureDataBuffer, textureArrayBuffer] = device.createBufferMapped(textureDataBufferDescriptor);
     
@@ -246,13 +256,13 @@ async function init() {
     // Bind group binding layout
     const transformBufferBindGroupLayoutBinding = {
         binding: transformBindingNum, // id[[(0)]]
-        visibility: GPUShaderStageBit.VERTEX,
+        visibility: GPUShaderStage.VERTEX,
         type: "uniform-buffer"
     };
 
     const textureBindGroupLayoutBinding = {
         binding: textureBindingNum,
-        visibility: GPUShaderStageBit.FRAGMENT,
+        visibility: GPUShaderStage.FRAGMENT,
         type: "sampled-texture"
     };
     textureViewBinding = {
@@ -262,7 +272,7 @@ async function init() {
 
     const samplerBindGroupLayoutBinding = {
         binding: samplerBindingNum,
-        visibility: GPUShaderStageBit.FRAGMENT,
+        visibility: GPUShaderStage.FRAGMENT,
         type: "sampler"
     };
     samplerBinding = {
@@ -303,7 +313,7 @@ async function init() {
             dstFactor: "one-minus-src-alpha",
             operation: "add"
         },
-        writeMask: GPUColorWriteBits.ALL
+        writeMask: GPUColorWrite.ALL
     };
     const pipelineDescriptor = {
         layout: pipelineLayout,
@@ -438,4 +448,4 @@ function updateTransformArray(array) {
 window.addEventListener("load", init);
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>