0.2.0 • Published 10 months ago

@triadica/lagopus v0.2.0

Weekly downloads
-
License
-
Repository
-
Last release
10 months ago

WebGPU tiny example

Based on:

WebGPU support has landed on latest Chrome.

Usage

Read full example in https://github.com/Triadica/lagopus-ts-workflow .

Defining object:

object({
  shader: triangleWgsl,
  topology: "triangle-list",
  attrsList: [
    { field: "position", format: "float32x4" },
    { field: "color", format: "float32x4" },
  ],
  // vertex params
  data: [
    { position: [120.0, 120.0, 30, 1], color: [1, 0, 0, 1] },
    { position: [128.0, 120.0, 30, 1], color: [1, 0, 0, 1] },
    { position: [120.0, 126.0, 38, 1], color: [1, 0, 0, 1] },
  ],
  hitRegion: {
    radius: 4,
    position: [124, 123, 34],
    onHit: (e, d) => {
      console.log("hit", e);
      d("hit", { x: e.clientX, y: e.clientY });
    },
  },
  // in @group(0) for uniforms
  getParams: () => {
    return [(Date.now() / 400) % 1, 0, 0, 0];
  },
  // in @group(1) for textures
  textures: [],
});

Shader:

struct UBO {
  cone_back_scale: f32,
  viewport_ratio: f32,
  look_distance: f32,
  forward: vec3f,
  // direction up overhead, better unit vector
  upward: vec3f,
  rightward: vec3f,
  camera_position: vec3f,
};

@group(0) @binding(0) var<uniform> uniforms: UBO;

// your custom params
struct Params {
  _pad: f32
}

@group(0) @binding(1) var<uniform> params Params;

// perspective

struct PointResult {
  pointPosition: vec3f,
  r: f32,
  s: f32,
};

fn transform_perspective(p: vec3f) -> PointResult {
  let forward = uniforms.forward;
  let upward = uniforms.upward;
  let rightward = uniforms.rightward;
  let look_distance = uniforms.look_distance;
  let camera_position = uniforms.camera_position;

  let moved_point: vec3f = p - camera_position;

  let s: f32 = uniforms.cone_back_scale;

  let r: f32 = dot(moved_point, forward) / look_distance;

  // if (r < (s * -0.9)) {
  //   // make it disappear with depth test since it's probably behind the camera
  //   return PointResult(vec3(0.0, 0.0, 10000.), r, s);
  // }

  let screen_scale: f32 = (s + 1.0) / (r + s);
  let y_next: f32 = dot(moved_point, upward) * screen_scale;
  let x_next: f32 = dot(moved_point, rightward) * screen_scale;
  let z_next: f32 = r;

  return PointResult(
    vec3(x_next, y_next / uniforms.viewport_ratio, z_next),
    r, s
  );
}

// main

struct VertexOut {
  @builtin(position) position : vec4f,
  @location(0) color : vec4f,
};

@vertex
fn vertex_main(
  @location(0) position: vec4f,
  @location(1) color: vec4f
) -> VertexOut {
  var output: VertexOut;
  let p = transform_perspective(position.xyz).pointPosition;
  let scale: f32 = 0.002;
  output.position = vec4(p[0]*scale, p[1]*scale, p[2]*scale, 1.0);
  // output.position = position;
  output.color = color;
  return output;
}

@fragment
fn fragment_main(vtx_out: VertexOut) -> @location(0) vec4f {
  return vtx_out.color;
  // return vec4f(0.0, 0.0, 1.0, 1.0);
}

Uniforms is passed from params, whose layout is quite tricky.

License

MIT

0.2.0

10 months ago

0.1.2

10 months ago

0.1.1

10 months ago

0.1.4

10 months ago

0.1.3

10 months ago

0.0.23

1 year ago

0.0.22

1 year ago

0.0.21

1 year ago

0.0.20

2 years ago

0.0.19

2 years ago

0.0.17

2 years ago

0.0.18

2 years ago

0.0.15

2 years ago

0.0.16

2 years ago

0.0.16-a1

2 years ago

0.0.11

2 years ago

0.0.12

2 years ago

0.0.13

2 years ago

0.0.14

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.1-a10

2 years ago

0.0.1-a11

2 years ago

0.0.1-a6

2 years ago

0.0.1-a8

2 years ago

0.0.1-a7

2 years ago

0.0.1

2 years ago

0.0.1-a9

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.6

2 years ago

0.0.1-a5

3 years ago

0.0.1-a4

3 years ago

0.0.1-a3

3 years ago

0.0.1-a2

3 years ago

0.0.1-a1

3 years ago