From 1e332ebe9593aa4e1cb60f6fe089370e7b273067 Mon Sep 17 00:00:00 2001 From: ben-clayton Date: Wed, 27 Mar 2024 17:28:32 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20=20@=20cf0f3?= =?UTF-8?q?803a068e6175b041651a9cb6b04c321b93a=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sample/helloTriangleMSAA/main.js | 2 +- sample/helloTriangleMSAA/main.js.map | 2 +- sample/helloTriangleMSAA/main.ts | 2 +- sample/resizeCanvas/main.js | 2 +- sample/resizeCanvas/main.js.map | 2 +- sample/resizeCanvas/main.ts | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/sample/helloTriangleMSAA/main.js b/sample/helloTriangleMSAA/main.js index dd8b075b..ab3ff41c 100644 --- a/sample/helloTriangleMSAA/main.js +++ b/sample/helloTriangleMSAA/main.js @@ -52,7 +52,7 @@ const pipeline = device.createRenderPipeline({ topology: 'triangle-list', }, multisample: { - count: 4, + count: sampleCount, }, }); const texture = device.createTexture({ diff --git a/sample/helloTriangleMSAA/main.js.map b/sample/helloTriangleMSAA/main.js.map index 8175e94e..507e0264 100644 --- a/sample/helloTriangleMSAA/main.js.map +++ b/sample/helloTriangleMSAA/main.js.map @@ -1 +1 @@ -{"version":3,"file":"main.js","sources":["../../../../../sample/helloTriangleMSAA/main.ts"],"sourcesContent":["import triangleVertWGSL from '../../shaders/triangle.vert.wgsl';\nimport redFragWGSL from '../../shaders/red.frag.wgsl';\n\nconst canvas = document.querySelector('canvas') as HTMLCanvasElement;\nconst adapter = await navigator.gpu.requestAdapter();\nconst device = await adapter.requestDevice();\n\nconst context = canvas.getContext('webgpu') as GPUCanvasContext;\n\nconst devicePixelRatio = window.devicePixelRatio;\ncanvas.width = canvas.clientWidth * devicePixelRatio;\ncanvas.height = canvas.clientHeight * devicePixelRatio;\nconst presentationFormat = navigator.gpu.getPreferredCanvasFormat();\n\ncontext.configure({\n device,\n format: presentationFormat,\n alphaMode: 'premultiplied',\n});\n\nconst sampleCount = 4;\n\nconst pipeline = device.createRenderPipeline({\n layout: 'auto',\n vertex: {\n module: device.createShaderModule({\n code: triangleVertWGSL,\n }),\n },\n fragment: {\n module: device.createShaderModule({\n code: redFragWGSL,\n }),\n targets: [\n {\n format: presentationFormat,\n },\n ],\n },\n primitive: {\n topology: 'triangle-list',\n },\n multisample: {\n count: 4,\n },\n});\n\nconst texture = device.createTexture({\n size: [canvas.width, canvas.height],\n sampleCount,\n format: presentationFormat,\n usage: GPUTextureUsage.RENDER_ATTACHMENT,\n});\nconst view = texture.createView();\n\nfunction frame() {\n const commandEncoder = device.createCommandEncoder();\n\n const renderPassDescriptor: GPURenderPassDescriptor = {\n colorAttachments: [\n {\n view,\n resolveTarget: context.getCurrentTexture().createView(),\n clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },\n loadOp: 'clear',\n storeOp: 'discard',\n },\n ],\n };\n\n const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);\n passEncoder.setPipeline(pipeline);\n passEncoder.draw(3);\n passEncoder.end();\n\n device.queue.submit([commandEncoder.finish()]);\n requestAnimationFrame(frame);\n}\n\nrequestAnimationFrame(frame);\n"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"main.js","sources":["../../../../../sample/helloTriangleMSAA/main.ts"],"sourcesContent":["import triangleVertWGSL from '../../shaders/triangle.vert.wgsl';\nimport redFragWGSL from '../../shaders/red.frag.wgsl';\n\nconst canvas = document.querySelector('canvas') as HTMLCanvasElement;\nconst adapter = await navigator.gpu.requestAdapter();\nconst device = await adapter.requestDevice();\n\nconst context = canvas.getContext('webgpu') as GPUCanvasContext;\n\nconst devicePixelRatio = window.devicePixelRatio;\ncanvas.width = canvas.clientWidth * devicePixelRatio;\ncanvas.height = canvas.clientHeight * devicePixelRatio;\nconst presentationFormat = navigator.gpu.getPreferredCanvasFormat();\n\ncontext.configure({\n device,\n format: presentationFormat,\n alphaMode: 'premultiplied',\n});\n\nconst sampleCount = 4;\n\nconst pipeline = device.createRenderPipeline({\n layout: 'auto',\n vertex: {\n module: device.createShaderModule({\n code: triangleVertWGSL,\n }),\n },\n fragment: {\n module: device.createShaderModule({\n code: redFragWGSL,\n }),\n targets: [\n {\n format: presentationFormat,\n },\n ],\n },\n primitive: {\n topology: 'triangle-list',\n },\n multisample: {\n count: sampleCount,\n },\n});\n\nconst texture = device.createTexture({\n size: [canvas.width, canvas.height],\n sampleCount,\n format: presentationFormat,\n usage: GPUTextureUsage.RENDER_ATTACHMENT,\n});\nconst view = texture.createView();\n\nfunction frame() {\n const commandEncoder = device.createCommandEncoder();\n\n const renderPassDescriptor: GPURenderPassDescriptor = {\n colorAttachments: [\n {\n view,\n resolveTarget: context.getCurrentTexture().createView(),\n clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },\n loadOp: 'clear',\n storeOp: 'discard',\n },\n ],\n };\n\n const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);\n passEncoder.setPipeline(pipeline);\n passEncoder.draw(3);\n passEncoder.end();\n\n device.queue.submit([commandEncoder.finish()]);\n requestAnimationFrame(frame);\n}\n\nrequestAnimationFrame(frame);\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/sample/helloTriangleMSAA/main.ts b/sample/helloTriangleMSAA/main.ts index aac0117c..115baabc 100644 --- a/sample/helloTriangleMSAA/main.ts +++ b/sample/helloTriangleMSAA/main.ts @@ -41,7 +41,7 @@ const pipeline = device.createRenderPipeline({ topology: 'triangle-list', }, multisample: { - count: 4, + count: sampleCount, }, }); diff --git a/sample/resizeCanvas/main.js b/sample/resizeCanvas/main.js index 2f14651d..ab7f1f7c 100644 --- a/sample/resizeCanvas/main.js +++ b/sample/resizeCanvas/main.js @@ -52,7 +52,7 @@ const pipeline = device.createRenderPipeline({ topology: 'triangle-list', }, multisample: { - count: 4, + count: sampleCount, }, }); let renderTarget = undefined; diff --git a/sample/resizeCanvas/main.js.map b/sample/resizeCanvas/main.js.map index 714c897c..b93febd6 100644 --- a/sample/resizeCanvas/main.js.map +++ b/sample/resizeCanvas/main.js.map @@ -1 +1 @@ -{"version":3,"file":"main.js","sources":["../../../../../sample/resizeCanvas/main.ts"],"sourcesContent":["import triangleVertWGSL from '../../shaders/triangle.vert.wgsl';\nimport redFragWGSL from '../../shaders/red.frag.wgsl';\n\nconst canvas = document.querySelector('canvas') as HTMLCanvasElement;\nconst adapter = await navigator.gpu.requestAdapter();\nconst device = await adapter.requestDevice();\n\nconst context = canvas.getContext('webgpu') as GPUCanvasContext;\n\nconst presentationFormat = navigator.gpu.getPreferredCanvasFormat();\n\nconst devicePixelRatio = window.devicePixelRatio;\ncanvas.width = canvas.clientWidth * devicePixelRatio;\ncanvas.height = canvas.clientHeight * devicePixelRatio;\n\ncontext.configure({\n device,\n format: presentationFormat,\n alphaMode: 'premultiplied',\n});\n\nconst sampleCount = 4;\n\nconst pipeline = device.createRenderPipeline({\n layout: 'auto',\n vertex: {\n module: device.createShaderModule({\n code: triangleVertWGSL,\n }),\n },\n fragment: {\n module: device.createShaderModule({\n code: redFragWGSL,\n }),\n targets: [\n {\n format: presentationFormat,\n },\n ],\n },\n primitive: {\n topology: 'triangle-list',\n },\n multisample: {\n count: 4,\n },\n});\n\nlet renderTarget: GPUTexture | undefined = undefined;\nlet renderTargetView: GPUTextureView;\n\nfunction frame() {\n const currentWidth = canvas.clientWidth * devicePixelRatio;\n const currentHeight = canvas.clientHeight * devicePixelRatio;\n\n // The canvas size is animating via CSS.\n // When the size changes, we need to reallocate the render target.\n // We also need to set the physical size of the canvas to match the computed CSS size.\n if (\n (currentWidth !== canvas.width ||\n currentHeight !== canvas.height ||\n !renderTargetView) &&\n currentWidth &&\n currentHeight\n ) {\n if (renderTarget !== undefined) {\n // Destroy the previous render target\n renderTarget.destroy();\n }\n\n // Setting the canvas width and height will automatically resize the textures returned\n // when calling getCurrentTexture() on the context.\n canvas.width = currentWidth;\n canvas.height = currentHeight;\n\n // Resize the multisampled render target to match the new canvas size.\n renderTarget = device.createTexture({\n size: [canvas.width, canvas.height],\n sampleCount,\n format: presentationFormat,\n usage: GPUTextureUsage.RENDER_ATTACHMENT,\n });\n\n renderTargetView = renderTarget.createView();\n }\n\n if (renderTargetView) {\n const commandEncoder = device.createCommandEncoder();\n\n const renderPassDescriptor: GPURenderPassDescriptor = {\n colorAttachments: [\n {\n view: renderTargetView,\n resolveTarget: context.getCurrentTexture().createView(),\n clearValue: { r: 0.2, g: 0.2, b: 0.2, a: 1.0 },\n loadOp: 'clear',\n storeOp: 'store',\n },\n ],\n };\n\n const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);\n passEncoder.setPipeline(pipeline);\n passEncoder.draw(3);\n passEncoder.end();\n\n device.queue.submit([commandEncoder.finish()]);\n }\n\n requestAnimationFrame(frame);\n}\n\nrequestAnimationFrame(frame);\n"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"main.js","sources":["../../../../../sample/resizeCanvas/main.ts"],"sourcesContent":["import triangleVertWGSL from '../../shaders/triangle.vert.wgsl';\nimport redFragWGSL from '../../shaders/red.frag.wgsl';\n\nconst canvas = document.querySelector('canvas') as HTMLCanvasElement;\nconst adapter = await navigator.gpu.requestAdapter();\nconst device = await adapter.requestDevice();\n\nconst context = canvas.getContext('webgpu') as GPUCanvasContext;\n\nconst presentationFormat = navigator.gpu.getPreferredCanvasFormat();\n\nconst devicePixelRatio = window.devicePixelRatio;\ncanvas.width = canvas.clientWidth * devicePixelRatio;\ncanvas.height = canvas.clientHeight * devicePixelRatio;\n\ncontext.configure({\n device,\n format: presentationFormat,\n alphaMode: 'premultiplied',\n});\n\nconst sampleCount = 4;\n\nconst pipeline = device.createRenderPipeline({\n layout: 'auto',\n vertex: {\n module: device.createShaderModule({\n code: triangleVertWGSL,\n }),\n },\n fragment: {\n module: device.createShaderModule({\n code: redFragWGSL,\n }),\n targets: [\n {\n format: presentationFormat,\n },\n ],\n },\n primitive: {\n topology: 'triangle-list',\n },\n multisample: {\n count: sampleCount,\n },\n});\n\nlet renderTarget: GPUTexture | undefined = undefined;\nlet renderTargetView: GPUTextureView;\n\nfunction frame() {\n const currentWidth = canvas.clientWidth * devicePixelRatio;\n const currentHeight = canvas.clientHeight * devicePixelRatio;\n\n // The canvas size is animating via CSS.\n // When the size changes, we need to reallocate the render target.\n // We also need to set the physical size of the canvas to match the computed CSS size.\n if (\n (currentWidth !== canvas.width ||\n currentHeight !== canvas.height ||\n !renderTargetView) &&\n currentWidth &&\n currentHeight\n ) {\n if (renderTarget !== undefined) {\n // Destroy the previous render target\n renderTarget.destroy();\n }\n\n // Setting the canvas width and height will automatically resize the textures returned\n // when calling getCurrentTexture() on the context.\n canvas.width = currentWidth;\n canvas.height = currentHeight;\n\n // Resize the multisampled render target to match the new canvas size.\n renderTarget = device.createTexture({\n size: [canvas.width, canvas.height],\n sampleCount,\n format: presentationFormat,\n usage: GPUTextureUsage.RENDER_ATTACHMENT,\n });\n\n renderTargetView = renderTarget.createView();\n }\n\n if (renderTargetView) {\n const commandEncoder = device.createCommandEncoder();\n\n const renderPassDescriptor: GPURenderPassDescriptor = {\n colorAttachments: [\n {\n view: renderTargetView,\n resolveTarget: context.getCurrentTexture().createView(),\n clearValue: { r: 0.2, g: 0.2, b: 0.2, a: 1.0 },\n loadOp: 'clear',\n storeOp: 'store',\n },\n ],\n };\n\n const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);\n passEncoder.setPipeline(pipeline);\n passEncoder.draw(3);\n passEncoder.end();\n\n device.queue.submit([commandEncoder.finish()]);\n }\n\n requestAnimationFrame(frame);\n}\n\nrequestAnimationFrame(frame);\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/sample/resizeCanvas/main.ts b/sample/resizeCanvas/main.ts index 94d39331..1a16144e 100644 --- a/sample/resizeCanvas/main.ts +++ b/sample/resizeCanvas/main.ts @@ -42,7 +42,7 @@ const pipeline = device.createRenderPipeline({ topology: 'triangle-list', }, multisample: { - count: 4, + count: sampleCount, }, });