feat: 给爱心设置位移和缩放

notthistrain · Jun 17, 2024 · 5c29da3 · 5c29da3
1 parent 1495cf5
commit 5c29da3
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/src/shader/heart.wgsl b/src/shader/heart.wgsl
@@ -6,12 +6,17 @@ struct VertexOuput {
     @builtin(position) position: vec4f,
 }
 
+@group(0) @binding(0) var<uniform> translate: vec2f;
+
+const scale = 0.5;
+override aspect: f32 = 1;
+
 @vertex
 fn vertex_main(
     input: VertexInput
 ) -> VertexOuput {
     var output: VertexOuput;
-    output.position = vec4f(input.position, 0.0, 1.0);
+    output.position = vec4f((input.position * vec2f(scale, scale * aspect)) + translate, 0.0, 1.0);
     return output;
 }
 

diff --git a/src/ui/routes/heart.tsx b/src/ui/routes/heart.tsx
@@ -30,7 +30,7 @@ function create_heart_vertices() {
     let vertex_offset = 2
     for (let i = 1; i <= nums_of_vertices; i++) {
         const angle = angle_of_subvision * i
-        
+
         // const x = param_a * (1 - sin(angle)) * cos(angle)
         // const y = param_a * (1 - sin(angle)) * sin(angle)
 
@@ -68,19 +68,16 @@ async function render(canvas: HTMLCanvasElement, effect: IEffectWrap) {
     })
     device.queue.writeBuffer(index_buffer, 0, index_data)
 
-    // const bind_group = device.createBindGroup({
-    //     label: 'heart bind group',
-    //     layout: 0,
-    //     entries: undefined
-    // })
-
     const module = device.createShaderModule({ code: shader_code })
     const pipe_line = device.createRenderPipeline({
         label: 'heart render pipe line',
         layout: 'auto',
         vertex: {
             module,
             entryPoint: 'vertex_main',
+            constants: {
+                'aspect': canvas.width / canvas.height
+            },
             buffers: [
                 {
                     arrayStride: floats_of_position * bytes_of_float,
@@ -101,6 +98,23 @@ async function render(canvas: HTMLCanvasElement, effect: IEffectWrap) {
         }
     })
 
+    const translate_data = new Float32Array([0.0, 0.25])
+    const translate_buffer = device.createBuffer({
+        label: 'translate buffer',
+        size: translate_data.byteLength,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    })
+    const bind_group = device.createBindGroup({
+        label: 'heart bind group',
+        layout: pipe_line.getBindGroupLayout(0),
+        entries: [
+            {
+                binding: 0,
+                resource: { buffer: translate_buffer }
+            }
+        ]
+    })
+
     const render_pass_descriptor: GPURenderPassDescriptor = {
         label: 'heart render pass',
         colorAttachments: [
@@ -122,6 +136,7 @@ async function render(canvas: HTMLCanvasElement, effect: IEffectWrap) {
         render_pass.setPipeline(pipe_line)
         render_pass.setVertexBuffer(0, vertex_buffer)
         render_pass.setIndexBuffer(index_buffer, 'uint32')
+        render_pass.setBindGroup(0, bind_group)
         render_pass.drawIndexed(index_data.length)
         render_pass.end()
         const command_buffer = command_encoder.finish()