[oden] Circles work

game/actor.ts

@@ -1,7 +1,7 @@
 import { load_texture } from "./assets";
 import { btn, Button } from "./input";
 import { Vec2, new_v2, vadd, vsub, vnorm, vmul } from "./vector";
-import { spr, use_texture, Texture } from "./graphics";
+import { spr, circle, use_texture, Texture } from "./graphics";
 import { has_collision, Level } from "./level";
 
 export interface ActorProps {
@@ -191,6 +191,7 @@ export class Robo extends Actor {
 
       const frame = (anim.start + ((clock / anim.speed) % anim.length)) >> 0;
       spr(x, y, w, h, frame * w, 0, 32, 32);
+      // circle(this.props.position.x, this.props.position.y, 16, 1);
     }
   }
 }

src/circle_shader.wgsl

@@ -31,7 +31,7 @@ struct VertexOutput {
   // The circle's coordinate system goes from (-1,-1) to (1,1) but by
   // convention we provide ourselves texture coordinates that go from (0,0)
   // to (1,1).
-  out.tex_coords = mix(vec2f(-1.0, -1.0), vec2f(1.0, 1.0), vertex.tex_coords);
+  out.tex_coords = (vertex.tex_coords * vec2f(2.0,2.0)) - vec2f(1.0,1.0);
 
   // Compute the squared radius of the inner circle, so we don't do it
   // per-pixel.
@@ -65,7 +65,7 @@ struct VertexOutput {
   } else if (tc2.x + tc2.y <= 1.0) {
      return in.stroke_color;
   } else {
-    return vec4<f32>(0.0, 0.0, 0.0, 1.0);
+    return vec4<f32>(0.0, 0.0, 0.0, 0.0);
   }
 }
 
@@ -76,7 +76,7 @@ struct VertexOutput {
 struct ScreenUniform {
   resolution : vec2f,
 };
-@group(1) @binding(0) // 1.
+@group(0) @binding(0) // 1.
     var<uniform> screen : ScreenUniform;
 
 const RES = vec2f(320.0, 240.0); // The logical resolution of the screen.

src/graphics.ts

@@ -52,6 +52,18 @@ export function spr(
   core.spr(x, y, w, h, sx, sy, sw, sh);
 }
 
+/**
+ * Draw a circle.
+ *
+ * @param x - The x coordinate of the center of the circle.
+ * @param y - The y coordinate of the center of the circle.
+ * @param r - The radius of the circle.
+ * @param s - The stroke width of the circle.
+ */
+export function circle(x: number, y: number, r: number, s: number) {
+  core.circle(x, y, r, s);
+}
+
 export class Texture {
   #id: number;
   constructor(id: number) {

src/lib.rs

@@ -46,7 +46,7 @@ impl Vertex {
 
 #[repr(C)]
 #[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]
-struct SpriteInstance {
+pub struct SpriteInstance {
     src_top_left: [f32; 2],
     src_dims: [f32; 2],
 
@@ -87,7 +87,7 @@ impl SpriteInstance {
 
 #[repr(C)]
 #[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]
-struct CircleInstance {
+pub struct CircleInstance {
     center: [f32; 2],
     radius: f32,
     stroke_width: f32,
@@ -440,7 +440,7 @@ impl State {
         let sprite_pipeline_layout =
             device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
                 label: Some("Sprite Pipeline Layout"),
-                bind_group_layouts: &[&sprite_bind_group_layout, &screen_uniform_bind_group_layout],
+                bind_group_layouts: &[&screen_uniform_bind_group_layout, &sprite_bind_group_layout],
                 push_constant_ranges: &[],
             });
 
@@ -487,9 +487,16 @@ impl State {
             source: wgpu::ShaderSource::Wgsl(include_str!("circle_shader.wgsl").into()),
         });
 
+        let circle_pipeline_layout =
+            device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
+                label: Some("Sprite Pipeline Layout"),
+                bind_group_layouts: &[&screen_uniform_bind_group_layout],
+                push_constant_ranges: &[],
+            });
+
         let circle_pipeline = device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
             label: Some("Circle Pipeline"),
-            layout: Some(&sprite_pipeline_layout),
+            layout: Some(&circle_pipeline_layout),
             vertex: wgpu::VertexState {
                 module: &circle_shader,
                 entry_point: "vs_main",
@@ -726,21 +733,22 @@ impl DrawCall {
 
     pub fn draw<'a>(&self, state: &'a State, pass: &mut wgpu::RenderPass<'a>) {
         if self.draw_end > self.draw_start {
-            match self.texture_id {
-                Some(id) => {
-                    let bind_group = state.sprite_textures.get(&id).unwrap();
-                    pass.set_bind_group(0, bind_group, &[]);
-                }
-                None => (),
-            };
-
             let vb = match self.mode {
                 DrawMode::Sprites => {
+                    match self.texture_id {
+                        Some(id) => {
+                            let bind_group = state.sprite_textures.get(&id).unwrap();
+                            pass.set_bind_group(1, bind_group, &[]);
+                        }
+                        None => (),
+                    };
+
                     &state
                         .sprite_instance_buffers
                         .get(&self.vertex_buffer)
                         .buffer
                 }
+
                 DrawMode::Circles => {
                     &state
                         .circle_instance_buffers
@@ -748,7 +756,7 @@ impl DrawCall {
                         .buffer
                 }
             };
-            pass.set_bind_group(1, &state.screen_uniform_bind_group, &[]);
+            pass.set_bind_group(0, &state.screen_uniform_bind_group, &[]);
             pass.set_vertex_buffer(0, state.sprite_vertex_buffer.slice(..));
             pass.set_vertex_buffer(1, vb.slice(..));
 
@@ -845,7 +853,8 @@ impl<'a> FrameBuilder<'a> {
                 }
             }
             GraphicsCommand::Print(pc) => println!("{}", pc.text),
-            GraphicsCommand::Sprite(sc) => self.push_sprite(sc),
+            GraphicsCommand::Sprite(si) => self.push_sprite(si),
+            GraphicsCommand::Circle(ci) => self.push_circle(ci),
             GraphicsCommand::UseTexture(id) => self.use_texture(id),
             GraphicsCommand::EndFrame => self.flush(),
 
@@ -935,14 +944,9 @@ impl<'a> FrameBuilder<'a> {
         self.state.sprite_instance_buffers.get_mut(&vb)
     }
 
-    fn push_sprite(&mut self, sc: script::graphics::SpriteCommand) {
+    fn push_sprite(&mut self, si: SpriteInstance) {
         let vertex_buffer = self.get_sprite_instance_buffer();
-        vertex_buffer.vec.push(SpriteInstance {
-            src_top_left: [sc.u, sc.v],
-            src_dims: [sc.sw, sc.sh],
-            dest_top_left: [sc.x, sc.y],
-            dest_dims: [sc.w, sc.h],
-        });
+        vertex_buffer.vec.push(si);
     }
 
     fn get_circle_instance_buffer(&mut self) -> &mut VertexBuffer<CircleInstance> {
@@ -961,6 +965,11 @@ impl<'a> FrameBuilder<'a> {
         self.state.circle_instance_buffers.get_mut(&vb)
     }
 
+    fn push_circle(&mut self, ci: CircleInstance) {
+        let vertex_buffer = self.get_circle_instance_buffer();
+        vertex_buffer.vec.push(ci);
+    }
+
     fn flush(&mut self) {
         let first_call = match self.draw_calls.last() {
             Some(call) => call.new_at_buffer_tail(),

src/script/graphics.rs

@@ -15,18 +15,6 @@ pub struct ClearCommand {
     pub color: [f64; 4],
 }
 
-#[derive(Debug)]
-pub struct SpriteCommand {
-    pub x: f32,
-    pub y: f32,
-    pub w: f32,
-    pub h: f32,
-    pub u: f32,
-    pub v: f32,
-    pub sw: f32,
-    pub sh: f32,
-}
-
 #[derive(Debug)]
 pub struct CreateTextureCommand {
     pub id: u32,
@@ -38,7 +26,8 @@ pub struct CreateTextureCommand {
 pub enum GraphicsCommand {
     Clear(ClearCommand),
     Print(PrintCommand),
-    Sprite(SpriteCommand),
+    Circle(crate::CircleInstance),
+    Sprite(crate::SpriteInstance),
     CreateTexture(CreateTextureCommand),
     CreateWritableTexture {
         id: u32,
@@ -78,16 +67,26 @@ impl GraphicsImpl {
     }
 
     fn spr(&self, x: f32, y: f32, w: f32, h: f32, u: f32, v: f32, sw: f32, sh: f32) {
-        let _ = self.sender.send(GraphicsCommand::Sprite(SpriteCommand {
-            x,
-            y,
-            w,
-            h,
-            u,
-            v,
-            sw,
-            sh,
-        }));
+        let _ = self
+            .sender
+            .send(GraphicsCommand::Sprite(crate::SpriteInstance {
+                src_top_left: [u, v],
+                src_dims: [sw, sh],
+                dest_top_left: [x, y],
+                dest_dims: [w, h],
+            }));
+    }
+
+    fn circle(&self, x: f32, y: f32, r: f32, s: f32) {
+        let _ = self
+            .sender
+            .send(GraphicsCommand::Circle(crate::CircleInstance {
+                center: [x, y],
+                radius: r,
+                stroke_width: s,
+                stroke_color: [1.0, 0.0, 0.0, 1.0],
+                fill_color: [1.0, 1.0, 1.0, 1.0],
+            }));
     }
 
     fn create_texture(
@@ -183,6 +182,15 @@ impl GraphicsAPI {
                 )?,
             )?;
         }
+        {
+            let gfx = gfx.clone();
+            builder.export(
+                "circle",
+                ctx.new_fn(move |_: &ContextRef, x: f32, y: f32, r: f32, s: f32| {
+                    gfx.circle(x, y, r, s)
+                })?,
+            )?;
+        }
         {
             let gfx = gfx.clone();
             builder.export(

src/sprite_shader.wgsl

@@ -34,8 +34,8 @@ struct VertexOutput {
 // Fragment shader
 // ----------------------------------------------------------------------------
 
-@group(0) @binding(0) var t_diffuse : texture_2d<f32>;
-@group(0) @binding(1) var s_diffuse : sampler;
+@group(1) @binding(0) var t_diffuse : texture_2d<f32>;
+@group(1) @binding(1) var s_diffuse : sampler;
 
 @fragment fn fs_main(in : VertexOutput)->@location(0) vec4<f32> {
   let tc = vec2(u32(in.tex_coords.x), u32(in.tex_coords.y));
@@ -50,7 +50,7 @@ struct VertexOutput {
 struct ScreenUniform {
   resolution : vec2f,
 };
-@group(1) @binding(0) // 1.
+@group(0) @binding(0) // 1.
     var<uniform> screen : ScreenUniform;
 
 const RES = vec2f(320.0, 240.0); // The logical resolution of the screen.

types/graphics-core.d.ts

@@ -15,6 +15,8 @@ export function spr(
   sh: number
 );
 
+export function circle(x: number, y: number, r: number, s: number);
+
 export function create_texture(
   buffer: ArrayBuffer,
   label: string | undefined