From b4d1f3f41203afcd4172e28f71760cec1063a964 Mon Sep 17 00:00:00 2001 From: cmhhelgeson <62450112+cmhhelgeson@users.noreply.github.com> Date: Thu, 7 Mar 2024 21:31:38 -0800 Subject: [PATCH] deleted unrelated code --- sample/sobelFilter/fullscreen.wgsl | 40 ----- sample/sobelFilter/index.html | 27 ---- sample/sobelFilter/main.ts | 139 ----------------- sample/sobelFilter/meta.ts | 10 -- sample/sobelFilter/sobel.wgsl | 39 ----- sample/sobelFilter/utils.ts | 240 ----------------------------- 6 files changed, 495 deletions(-) delete mode 100644 sample/sobelFilter/fullscreen.wgsl delete mode 100644 sample/sobelFilter/index.html delete mode 100644 sample/sobelFilter/main.ts delete mode 100644 sample/sobelFilter/meta.ts delete mode 100644 sample/sobelFilter/sobel.wgsl delete mode 100644 sample/sobelFilter/utils.ts diff --git a/sample/sobelFilter/fullscreen.wgsl b/sample/sobelFilter/fullscreen.wgsl deleted file mode 100644 index 59e3f20c..00000000 --- a/sample/sobelFilter/fullscreen.wgsl +++ /dev/null @@ -1,40 +0,0 @@ -@group(0) @binding(0) var mySampler : sampler; -@group(0) @binding(2) var myTexture : texture_2d; - -struct VertexOutput { - @builtin(position) Position : vec4, - @location(0) fragUV : vec2, -} - -@vertex -fn vert_main(@builtin(vertex_index) VertexIndex : u32) -> VertexOutput { - const pos = array( - vec2( 1.0, 1.0), - vec2( 1.0, -1.0), - vec2(-1.0, -1.0), - vec2( 1.0, 1.0), - vec2(-1.0, -1.0), - vec2(-1.0, 1.0), - ); - - const uv = array( - vec2(1.0, 0.0), - vec2(1.0, 1.0), - vec2(0.0, 1.0), - vec2(1.0, 0.0), - vec2(0.0, 1.0), - vec2(0.0, 0.0), - ); - - var output : VertexOutput; - output.Position = vec4(pos[VertexIndex], 0.0, 1.0); - output.fragUV = uv[VertexIndex]; - return output; -} - -@fragment -fn frag_main(@location(0) fragUV : vec2) -> @location(0) vec4 { - let texture_sample = textureSample(myTexture, mySampler, fragUV); - let color = texture_sample.r; - return vec4(color, 1.0); -} diff --git a/sample/sobelFilter/index.html b/sample/sobelFilter/index.html deleted file mode 100644 index 084119ce..00000000 --- a/sample/sobelFilter/index.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - webgpu-samples: sobelFilter - - - - - - - - \ No newline at end of file diff --git a/sample/sobelFilter/main.ts b/sample/sobelFilter/main.ts deleted file mode 100644 index 4126b131..00000000 --- a/sample/sobelFilter/main.ts +++ /dev/null @@ -1,139 +0,0 @@ -import { createBindGroupCluster, createTextureFromImage } from './utils'; -import sobelWGSL from './sobel.wgsl'; -import fullscreenWGSL from './fullscreen.wgsl'; - -const canvas = document.querySelector('canvas') as HTMLCanvasElement; -const adapter = await navigator.gpu.requestAdapter(); -const device = await adapter.requestDevice(); - -const context = canvas.getContext('webgpu') as GPUCanvasContext; - -const devicePixelRatio = window.devicePixelRatio; -canvas.width = canvas.clientWidth * devicePixelRatio; -canvas.height = canvas.clientHeight * devicePixelRatio; -const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); - -context.configure({ - device, - format: presentationFormat, - alphaMode: 'premultiplied', -}); - -// Fetch the image and upload it into a GPUTexture. -let birdTexture: GPUTexture; -{ - const response = await fetch('../../assets/img/bird.gif'); - const imageBitmap = await createImageBitmap(await response.blob()); - birdTexture = createTextureFromImage(device, imageBitmap, 'r8unorm', false); -} - -let sobelTexture: GPUTexture; -{ - const response = await fetch('../../assets/img/bird.gif'); - const imageBitmap = await createImageBitmap(await response.blob()); - birdTexture = createTextureFromImage(device, imageBitmap, 'r8uint', true); -} - -// Create a sampler with linear filtering for smooth interpolation. -const sampler = device.createSampler({ - magFilter: 'linear', - minFilter: 'linear', -}); - -const textureBGCluster = createBindGroupCluster({ - device, - label: 'Texture', - bindingLayouts: [ - { - visibility: GPUShaderStage.FRAGMENT, - bindingMember: 'sampler', - bindingLayout: { type: 'filtering' }, - }, - { - visibility: GPUShaderStage.COMPUTE | GPUShaderStage.FRAGMENT, - bindingMember: 'storageTexture', - bindingLayout: { access: 'read-write', format: 'r8unorm' }, - }, - { - visibility: GPUShaderStage.COMPUTE | GPUShaderStage.FRAGMENT, - bindingMember: 'texture', - bindingLayout: { sampleType: 'float' }, - }, - ], - resourceLayouts: [ - [sampler, sobelTexture.createView(), birdTexture.createView()], - ], -}); - -const sobelPipeline = device.createComputePipeline({ - layout: device.createPipelineLayout({ - bindGroupLayouts: [textureBGCluster.bindGroupLayout], - }), - compute: { - module: device.createShaderModule({ - code: sobelWGSL, - }), - entryPoint: 'main', - }, -}); - -const fullscreenQuadPipeline = device.createRenderPipeline({ - layout: 'auto', - vertex: { - module: device.createShaderModule({ - code: fullscreenWGSL, - }), - entryPoint: 'vert_main', - }, - fragment: { - module: device.createShaderModule({ - code: fullscreenWGSL, - }), - entryPoint: 'frag_main', - targets: [ - { - format: presentationFormat, - }, - ], - }, - primitive: { - topology: 'triangle-list', - }, -}); - -const renderPassDescriptor: GPURenderPassDescriptor = { - colorAttachments: [ - { - view: undefined, // Assigned later - - clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, - loadOp: 'clear', - storeOp: 'store', - }, - ], -}; - -function frame() { - renderPassDescriptor.colorAttachments[0].view = context - .getCurrentTexture() - .createView(); - - const commandEncoder = device.createCommandEncoder(); - - /*const computePassEncoder = commandEncoder.beginComputePass(); - computePassEncoder.setPipeline(sobelPipeline); - computePassEncoder.setBindGroup(0, textureBGCluster.bindGroups[0]); - computePassEncoder.dispatchWorkgroups(32, 32); - computePassEncoder.end(); */ - - const renderPassEncoder = - commandEncoder.beginRenderPass(renderPassDescriptor); - renderPassEncoder.setPipeline(fullscreenQuadPipeline); - renderPassEncoder.setBindGroup(0, textureBGCluster.bindGroups[0]); - renderPassEncoder.draw(6); - renderPassEncoder.end(); - device.queue.submit([commandEncoder.finish()]); - - requestAnimationFrame(frame); -} -requestAnimationFrame(frame); diff --git a/sample/sobelFilter/meta.ts b/sample/sobelFilter/meta.ts deleted file mode 100644 index d7e04404..00000000 --- a/sample/sobelFilter/meta.ts +++ /dev/null @@ -1,10 +0,0 @@ -export default { - name: 'Sobel Filter', - description: 'WIP sobelFilter', - filename: 'sample/sobelFilter', - sources: [ - { path: 'main.ts' }, - { path: 'fullscreen.wgsl' }, - { path: 'sobel.wgsl' }, - ], -}; diff --git a/sample/sobelFilter/sobel.wgsl b/sample/sobelFilter/sobel.wgsl deleted file mode 100644 index 3fedb9ad..00000000 --- a/sample/sobelFilter/sobel.wgsl +++ /dev/null @@ -1,39 +0,0 @@ -@group(0) @binding(1) var sobel_texture: texture_storage_2d; -@group(0) @binding(2) var grayscale_texture: texture_2d; - -@compute workgroup_size(16, 16) -fn computeMain( - @builtin(global_invocation_id) flobal_id: vec3 -) { - // Sobel filter for detecting vertical edges - // [ -1, 0, 1 ] - // [ -2, 0, 2 ] - // [ -1, 0, 1 ] - // Pack kernel and pixel info - // Pack info for pixels 0, 3, 5, 6, since these are the only pixels that would benefit - // 0 3 5 6 - var kernel_pack_template = vec4(-1.0, -2.0, 2.0, -1.0); - let kernel_pack = pack4x8unorm(kernel_pack_template); - - let pixel_pack = pack4x8unorm( - vec4( - // Pixel 0 - textureLoad(grayscale_texture, vec2(global_id.x - 1, global_id.y - 1), 0).r, - // Pixel 3 - textureLoad(grayscale_texture, vec2(global_id.x - 1, global_id.y + 0), 0).r, - // Pixel 5 - textureLoad(grayscale_texture, vec2(global_id.x + 1, global_id.y + 0), 0).r, - //Pixel 7 - textureLoad(grayscale_texture, vec2(global_id.x - 1, global_id.y + 1), 0).r - ) - ); - // Pixels 0 and 2 will not be packed, since there is no benefit to adding to dot product operation - // Since there will not be packed to a uint, we need to denormalize ourselves. - let pixel_load = - textureLoad(grayscale_texture, vec2(global_id.x + 1, global_id.y - 1), 0).r + - textureLoad(grayscale_texture, vec2(global_id.x + 1, global_id.y + 1), 0).r; - - let sobel_product = dot4U8Packed(kernel_pack, pixel_pack) / 255.0 + pixel_product; - - textureStore(sobel_texture, global_id.xy, vec4(sobel_product, 0.0, 0.0, 0.0)); -} \ No newline at end of file diff --git a/sample/sobelFilter/utils.ts b/sample/sobelFilter/utils.ts deleted file mode 100644 index 74dbc702..00000000 --- a/sample/sobelFilter/utils.ts +++ /dev/null @@ -1,240 +0,0 @@ -import fullscreenTexturedQuad from '../shaders/fullscreenTexturedQuad.wgsl'; - -// A union type representing all posibble GPUBindingLayout types -type BindGroupBindingLayout = - | GPUBufferBindingLayout - | GPUTextureBindingLayout - | GPUSamplerBindingLayout - | GPUStorageTextureBindingLayout - | GPUExternalTextureBindingLayout; - -/** - * @property {GPUBindGroup[]} bindGroups - An array of `GPUBindGroup` objects created according to the `resourceLayouts`. - * @property {GPUBindGroupLayout} bindGroupLayout - The `GPUBindGroupLayout` created based on `bindingLayouts`. - */ -export type BindGroupCluster = { - bindGroups: GPUBindGroup[]; - bindGroupLayout: GPUBindGroupLayout; -}; - -// A union type representing all possible binding members assignable to a GPUBindGroupLayoutEntry -type BindingMemberType = - | 'buffer' - | 'texture' - | 'sampler' - | 'externalTexture' - | 'storageTexture'; - -/** - * @property {GPUDevice} device - The WebGPU device to use for creating bind groups and layouts. - * @property {string} label - A base label that identifies the bind group resources. - * @property {BindGroupClusterBindingLayout[]} bindingLayouts - Descriptors for each binding's layout within the bind group layout. - * @property {GPUBindingResource[][]} resourceLayouts - A 2D array of resources for each bind group, matching the binding layouts. - * - */ -interface BindGroupClusterFunctionArgs { - device: GPUDevice; - label: string; - bindingLayouts: BindGroupClusterBindingLayout[]; - resourceLayouts: GPUBindingResource[][]; -} - -/** - * @property {number} visibility - GPU shader stages where the binding is visible. - * @property {BindingMemberType} bindingMember - Specifies the type of binding (e.g., 'buffer', 'texture'). - * @property {BindGroupBindingLayout} bindingLayout - The detailed layout for the binding, specifying the type of resource. - * - */ -export interface BindGroupClusterBindingLayout { - visibility: number; - bindingMember: BindingMemberType; - bindingLayout: BindGroupBindingLayout; -} - -/** - * Creates a cluster of bind groups and a corresponding bind group layout based on specified binding and resource layouts. - * This function acts as a less verbose and more compact way of flexibily defining diverging bind groups based on a single - * bind group layout template. - * - * @param {BindGroupClusterFunctionArgs} args - The arguments required for bind group cluster creation. - * @returns {BindGroupCluster} An object containing the created `bindGroupLayout` and an array of `bindGroups`. - * - * @example - * const cluster = createBindGroupCluster({ - * device: gpuDevice, - * label: 'exampleCluster', - * bindingLayouts: [ - * { visibility: GPUShaderStage.FRAGMENT, bindingMember: 'buffer', bindingLayout: { type: 'uniform-buffer' } }, - * { visibility: GPUShaderStage.FRAGMENT, bindingMember: 'texture', bindingLayout: { type: 'sampled-texture', viewDimension: '2d' } } - * ], - * resourceLayouts: [ - * [uniformBuffer, sampledTextureView], - * [uniformBuffer2, sampledTextureView2] - * ] - * }); - */ -export const createBindGroupCluster = ( - args: BindGroupClusterFunctionArgs -): BindGroupCluster => { - const { device, label, bindingLayouts, resourceLayouts } = args; - const layoutEntries: GPUBindGroupLayoutEntry[] = []; - for (let i = 0; i < bindingLayouts.length; i++) { - layoutEntries.push({ - binding: i, - visibility: bindingLayouts[i].visibility, - [bindingLayouts[i].bindingMember]: bindingLayouts[i].bindingLayout, - }); - } - - const bindGroupLayout = device.createBindGroupLayout({ - label: `${label}.bindGroupLayout`, - entries: layoutEntries, - }); - - const bindGroups: GPUBindGroup[] = []; - for (let i = 0; i < resourceLayouts.length; i++) { - const groupEntries: GPUBindGroupEntry[] = []; - for (let j = 0; j < resourceLayouts[0].length; j++) { - groupEntries.push({ - binding: j, - resource: resourceLayouts[i][j], - }); - } - const newBindGroup = device.createBindGroup({ - label: `${label}.bindGroup${i}`, - layout: bindGroupLayout, - entries: groupEntries, - }); - bindGroups.push(newBindGroup); - } - - return { - bindGroups, - bindGroupLayout, - }; -}; - -// A class that provides a set of utilities for creating a basic fullscreen shader that renders -// a programatically generated 2D image to the screen -export abstract class BaseFullscreenShaderClass { - // The intended implementation of switchBindGroup is to facilitate switching between bind groups that conform - // to the same bind group layout used within the fullscreen shader - abstract switchBindGroup(name: string): void; - // THe intended implementation of startRun is to execute any necessary code that must be executed before the renderPassEncoder - // is created. This may include writing new values to our uniform buffers, switching bind groups, taking diagnostics, etc. - abstract startRun( - commandEncoder: GPUCommandEncoder, - ...args: unknown[] - ): void; - protected renderPassDescriptor: GPURenderPassDescriptor; - protected pipeline: GPURenderPipeline; - // A map between a string and its associated bind group. Used to switch between bind groups in a sensible manner. - // For instance, if you wanted to switch your texture from a cat texture to a dog texture, you could assign - // the label 'cat' to a bind group containing that texture which accords with the shader's bind group layout. - protected bindGroupMap: Record; - // The current bind group in use within the shader. - protected currentBindGroup: GPUBindGroup; - // The label associated with currentBindGroup - protected currentBindGroupName: string; - - executeRun( - commandEncoder: GPUCommandEncoder, - renderPassDescriptor: GPURenderPassDescriptor, - pipeline: GPURenderPipeline, - bindGroups: GPUBindGroup[] - ) { - const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor); - passEncoder.setPipeline(pipeline); - for (let i = 0; i < bindGroups.length; i++) { - passEncoder.setBindGroup(i, bindGroups[i]); - } - passEncoder.draw(6, 1, 0, 0); - passEncoder.end(); - } - - setUniformArguments( - device: GPUDevice, - uniformBuffer: GPUBuffer, - instance: T, - keys: K - ) { - for (let i = 0; i < keys.length; i++) { - device.queue.writeBuffer( - uniformBuffer, - i * 4, - new Float32Array([instance[keys[i]]]) - ); - } - } - - createFullscreenShaderPipeline( - device: GPUDevice, - label: string, - bgLayouts: GPUBindGroupLayout[], - code: string, - presentationFormat: GPUTextureFormat - ) { - return device.createRenderPipeline({ - label: `${label}.pipeline`, - layout: device.createPipelineLayout({ - bindGroupLayouts: bgLayouts, - }), - vertex: { - module: device.createShaderModule({ - code: fullscreenTexturedQuad, - }), - entryPoint: 'vert_main', - }, - fragment: { - module: device.createShaderModule({ - code: code, - }), - entryPoint: 'frag_main', - targets: [ - { - format: presentationFormat, - }, - ], - }, - primitive: { - topology: 'triangle-list', - cullMode: 'none', - }, - }); - } -} - -/** - * Creates a GPUTexture from an ImageBitmap. - * This function creates a GPUTexture object from a given ImageBitmap. The texture is created - * with specified format and is usable as a texture binding, destination for copy operations, - * and as a render attachment. - * @param {GPUDevice} device - The GPUDevice to create the texture on. - * @param {ImageBitmap} bitmap - The source image bitmap. - * @param {GPUTextureFormat} format - The texture's intended texture format. - * @returns {GPUTexture} The created GPUTexture object. - */ -export const createTextureFromImage = ( - device: GPUDevice, - bitmap: ImageBitmap, - format: GPUTextureFormat, - storage: boolean -) => { - const texture: GPUTexture = device.createTexture({ - size: [bitmap.width, bitmap.height, 1], - format, - usage: storage - ? GPUTextureUsage.TEXTURE_BINDING | - GPUTextureUsage.COPY_DST | - GPUTextureUsage.STORAGE_BINDING - : GPUTextureUsage.TEXTURE_BINDING | - GPUTextureUsage.COPY_DST | - GPUTextureUsage.RENDER_ATTACHMENT, - }); - device.queue.copyExternalImageToTexture( - { source: bitmap }, - { texture: texture }, - [bitmap.width, bitmap.height] - ); - return texture; -};