ranuts 0.4.1-alpha.1 → 0.5.0

package/dist/src/utils/visual/render/utils/verticy.js

@@ -0,0 +1,162 @@
+import { LINE_CAP as k, LINE_JOIN as w } from "../../enums.js";
+import { Rectangle as $ } from "../../shape/rectangle.js";
+import { BatchPart as tt } from "./batch/index.js";
+import { Polygon as z } from "../../shape/polygon.js";
+import at from "./earcut.js";
+import { Circle as st } from "../../shape/circle.js";
+import { Ellipse as nt } from "../../shape/ellipse.js";
+import { RoundedRectangle as et } from "../../shape/roundedRectangle.js";
+var lt = (r, h) => {
+  const { x: n, y: o, radius: v } = r, p = 2 * Math.PI * v, i = Math.min(Math.ceil(p / 5), 2048);
+  for (let d = 0; d < i; d++) {
+    const l = d / i * Math.PI * 2, t = n + v * Math.cos(l), u = o + v * Math.sin(l);
+    h.vertices.push(t, u);
+  }
+}, ut = (r, h) => {
+  const { x: n, y: o, width: v, height: p, radius: i } = r, d = 2 * Math.PI * i / 4, l = Math.min(Math.ceil(d / 4), 2048);
+  for (let t = 0; t < l; t++) {
+    const u = t / l * Math.PI * 0.5, g = i * Math.cos(u), s = i * Math.sin(u);
+    h.vertices.push(n + v - i + g, o + p - i + s);
+  }
+  for (let t = 0; t < l; t++) {
+    const u = t / l * Math.PI * 0.5 + Math.PI / 2, g = i * Math.cos(u), s = i * Math.sin(u);
+    h.vertices.push(n + i + g, o + p - i + s);
+  }
+  for (let t = 0; t < l; t++) {
+    const u = t / l * Math.PI * 0.5 + Math.PI, g = i * Math.cos(u), s = i * Math.sin(u);
+    h.vertices.push(n + i + g, o + i + s);
+  }
+  for (let t = 0; t < l; t++) {
+    const u = t / l * Math.PI * 0.5 + Math.PI * 1.5, g = i * Math.cos(u), s = i * Math.sin(u);
+    h.vertices.push(n + v - i + g, o + i + s);
+  }
+}, ft = (r, h) => {
+  const { x: n, y: o, radiusX: v, radiusY: p } = r, i = Math.PI * Math.sqrt(2 * (v * v + p * p)), d = Math.min(Math.ceil(i / 5), 2048);
+  for (let l = 0; l < d; l++) {
+    const t = l / d * Math.PI * 2, u = n + v * Math.cos(t), g = o + p * Math.sin(t);
+    h.vertices.push(u, g);
+  }
+}, bt = (r) => {
+  const { shape: h, vertices: n } = r;
+  if (h instanceof $) {
+    const { x: o, y: v, width: p, height: i } = h;
+    n.push(o, v, o + p, v, o + p, v + i, o, v + i);
+  }
+  h instanceof st && lt(h, r), h instanceof et && ut(h, r), h instanceof nt && ft(h, r), h instanceof z && (r.vertices = h.points);
+}, y = (r) => {
+  const h = [], n = r.length / 2 + 1;
+  for (let o = 1; o < n - 1; o++) h.push(0, o, o + 1);
+  return h.push(0, n - 1, 1), h;
+}, Et = (r, h) => {
+  const { shape: n, vertices: o, fillStyle: v } = r, p = new tt(v);
+  if (h.batchParts.push(p), p.start(h.vertices.length / 2, h.indices.length), n instanceof $ && (h.vertices.concat(o), h.indices.concat([
+    0,
+    1,
+    2,
+    0,
+    2,
+    3
+  ]), p.end(4, 6)), n instanceof st) {
+    const { x: i, y: d } = n;
+    h.vertices.push(i), h.vertices.push(d), h.vertices.concat(o);
+    const l = y(o);
+    h.indices.concat(l), p.end(o.length / 2 + 1, l.length);
+  }
+  if (n instanceof et) {
+    const { x: i, y: d, width: l, height: t } = n;
+    h.vertices.push(i + l / 2), h.vertices.push(d + t / 2), h.vertices.concat(o);
+    const u = y(o);
+    h.indices.concat(u), p.end(o.length / 2 + 1, u.length);
+  }
+  if (n instanceof nt) {
+    const { x: i, y: d } = n;
+    h.vertices.push(i), h.vertices.push(d), h.vertices.concat(o);
+    const l = y(o);
+    h.indices.concat(l), p.end(o.length / 2 + 1, l.length);
+  }
+  if (n instanceof z) {
+    h.vertices.concat(o);
+    const i = at(o);
+    h.indices.concat(i), p.end(o.length / 2, i.length);
+  }
+}, Z = (r, h, n, o, v, p, i, d) => {
+  let l = 0, t = 0, u = 0, g = 0, s = 0, a = 0;
+  if (Math.abs(n - r) <= Number.EPSILON)
+    l = 1, t = 0, s = n;
+  else {
+    const E = (o - h) / (n - r), N = o - E * n;
+    l = E, t = -1, s = -N;
+  }
+  if (Math.abs(i - v) <= Number.EPSILON)
+    u = 1, g = 0, a = i;
+  else {
+    const E = (d - p) / (i - v), N = d - E * i;
+    u = E, g = -1, a = -N;
+  }
+  return [(s * g - t * a) / (l * g - t * u), (l * a - s * u) / (l * g - t * u)];
+}, J = (r, h, n) => {
+  const o = h, v = -r, p = Math.sqrt(r * r + h * h), i = n / 2 / p;
+  return [o * i, v * i];
+}, V = (r, h, n, o, v, p, i, d) => {
+  const l = n - r, t = o - h, u = v - r, g = p - h;
+  let s = 0;
+  l === 0 ? t > 0 ? s = Math.PI * 0.5 : s = Math.PI * 1.5 : t === 0 ? l > 0 ? s = 0 : s = Math.PI : l >= 0 && t >= 0 ? s = Math.atan(t / l) : l <= 0 && t >= 0 ? s = Math.atan(-l / t) + Math.PI * 0.5 : l <= 0 && t <= 0 ? s = Math.atan(t / l) + Math.PI : s = Math.atan(l / -t) + Math.PI * 1.5;
+  let a = 0;
+  u === 0 ? g > 0 ? a = Math.PI * 0.5 : a = Math.PI * 1.5 : g === 0 ? u > 0 ? a = 0 : a = Math.PI : u >= 0 && g >= 0 ? a = Math.atan(g / u) : u <= 0 && g >= 0 ? a = Math.atan(-u / g) + Math.PI * 0.5 : u <= 0 && g <= 0 ? a = Math.atan(g / u) + Math.PI : a = Math.atan(u / -g) + Math.PI * 1.5, s > a && (s -= Math.PI * 2);
+  const E = Math.sqrt((n - r) * (n - r) + (o - h) * (o - h)), N = 2 * Math.PI * E / 3, q = i.length / 2;
+  i.push(r, h, n, o);
+  for (let O = 1; O < N; O++) {
+    const m = s + (a - s) * (O / N), C = r + E * Math.cos(m), D = h + E * Math.sin(m);
+    i.push(C, D);
+  }
+  i.push(v, p);
+  for (let O = 1; O < i.length / 2 - q - 1; O++) d.push(0 + q, O + q, O + 1 + q);
+}, Rt = (r, h) => {
+  const { vertices: n, shape: o, lineStyle: v } = r, { width: p, cap: i, join: d, miterLimit: l } = v;
+  let t = 0, u = !1;
+  if (o instanceof z ? o.closeStroke && (u = !0) : u = !0, u) {
+    const I = n[0], R = n[1], B = n[n.length - 2], c = n[n.length - 1];
+    Math.abs(I - B) < 1e-4 && Math.abs(R - c) < 1e-4 && (n.pop(), n.pop());
+    const e = n[n.length - 2], x = n[n.length - 1], U = (I + e) / 2, f = (R + x) / 2;
+    n.unshift(U, f), n.push(U, f);
+  }
+  const g = new tt(v);
+  h.batchParts.push(g), g.start(h.vertices.length / 2, h.indices.length);
+  const s = [], a = [], E = n[0], N = n[1], q = n[2], O = n[3], [m, C] = J(q - E, O - N, p);
+  if (!u) {
+    if (i === k.SQUARE) {
+      const I = C, R = -m;
+      s.push(E + m, N + C, E + m + I, N + C + R, E - m + I, N - C + R, E - m, N - C), a.push(0, 1, 2, 0, 2, 3);
+    }
+    i === k.ROUND && V(E, N, E - m, N - C, E + m, N + C, s, a), k.BUTT;
+  }
+  t = s.length / 2, s.push(E - m, N - C, E + m, N + C);
+  for (let I = 2; I < n.length - 2; I += 2) {
+    const R = n[I - 2], B = n[I - 1], c = n[I], e = n[I + 1], x = n[I + 2], U = n[I + 3], [f, M] = J(c - R, e - B, p), [P, b] = J(x - c, U - e, p), F = c - R, Q = e - B, _ = x - c, j = U - e, A = _ * Q - F * j, K = F * _ + Q * j;
+    if (Math.abs(A) < 1e-3 * Math.abs(K)) {
+      s.push(c + f, e + M, c - f, e - M), a.push(0 + t, 1 + t, 2 + t, 0 + t, 2 + t, 3 + t), t = s.length / 2, K > 0 ? s.push(c - f, e - M, c + f, e + M) : (d === w.ROUND && (V(c, e, c + f, e + M, c - f, e - M, s, a), t = s.length / 2), d === w.BEVEL || w.MITER, s.push(c + f, e + M, c - f, e - M));
+      continue;
+    }
+    const [X, Y] = Z(R + f, B + M, c + f, e + M, c + P, e + b, x + P, U + b), [L, S] = Z(R - f, B - M, c - f, e - M, c - P, e - b, x - P, U - b);
+    let T = d;
+    d === w.MITER && (((L - X) ** 2 + (S - Y) ** 2) / p ** 2 <= l ** 2 || (T = w.BEVEL));
+    const it = F * F + Q * Q + (p / 2) ** 2, ot = _ * _ + j * j + (p / 2) ** 2;
+    (L - c) ** 2 + (S - e) ** 2 < Math.min(it, ot) ? (T === w.BEVEL && (A > 0 ? (s.push(X, Y, c - f, e - M), a.push(0 + t, 1 + t, 2 + t, 0 + t, 2 + t, 3 + t), t = s.length / 2, s.push(X, Y, c - f, e - M, c - P, e - b), a.push(0 + t, 1 + t, 2 + t), t = s.length / 2, s.push(c - P, e - b, X, Y)) : (s.push(c + f, e + M, L, S), a.push(0 + t, 1 + t, 2 + t, 0 + t, 2 + t, 3 + t), t = s.length / 2, s.push(L, S, c + f, e + M, c + P, e + b), a.push(0 + t, 1 + t, 2 + t), t = s.length / 2, s.push(L, S, c + P, e + b))), T === w.MITER && (s.push(X, Y, L, S), a.push(0 + t, 1 + t, 2 + t, 0 + t, 2 + t, 3 + t), t = s.length / 2, s.push(L, S, X, Y)), T === w.ROUND && (A < 0 ? (s.push(c + f, e + M, L, S), a.push(0 + t, 1 + t, 2 + t, 0 + t, 2 + t, 3 + t), t = s.length / 2, s.push(L, S, c + f, e + M, c, e), a.push(0 + t, 1 + t, 2 + t), t = s.length / 2, s.push(L, S, c + P, e + b, c, e), a.push(0 + t, 1 + t, 2 + t), t = s.length / 2, V(c, e, c + f, e + M, c + P, e + b, s, a), t = s.length / 2, s.push(L, S, c + P, e + b)) : (s.push(X, Y, c - f, e - M), a.push(0 + t, 1 + t, 2 + t, 0 + t, 2 + t, 3 + t), t = s.length / 2, s.push(X, Y, c - f, e - M, c, e), a.push(0 + t, 1 + t, 2 + t), t = s.length / 2, s.push(X, Y, c - P, e - b, c, e), a.push(0 + t, 1 + t, 2 + t), t = s.length / 2, V(c, e, c - P, e - b, c - f, e - M, s, a), t = s.length / 2, s.push(c - P, e - b, X, Y)))) : (s.push(c + f, e + M, c - f, e - M), a.push(0 + t, 1 + t, 2 + t, 0 + t, 2 + t, 3 + t), t = s.length / 2, T === w.BEVEL && (A > 0 ? (s.push(c, e, c - f, e - M, c - P, e - b), a.push(0 + t, 1 + t, 2 + t)) : (s.push(c, e, c + f, e + M, c + P, e + b), a.push(0 + t, 1 + t, 2 + t))), T === w.MITER && (A > 0 ? (s.push(c, e, c - f, e - M, L, S, c - P, e - b), a.push(0 + t, 1 + t, 2 + t, 0 + t, 2 + t, 3 + t)) : (s.push(c, e, c + f, e + M, X, Y, c + P, e + b), a.push(0 + t, 1 + t, 2 + t, 0 + t, 2 + t, 3 + t))), T === w.ROUND && (A > 0 ? V(c, e, c - P, e - b, c - f, e - M, s, a) : V(c, e, c + f, e + M, c + P, e + b, s, a)), t = s.length / 2, s.push(c - P, e - b, c + P, e + b));
+  }
+  const D = n[n.length - 2], W = n[n.length - 1], ct = n[n.length - 4], ht = n[n.length - 3], [G, H] = J(D - ct, W - ht, p);
+  if (s.push(D + G, W + H, D - G, W - H), a.push(0 + t, 1 + t, 2 + t, 0 + t, 2 + t, 3 + t), t = s.length / 2, !u) {
+    const I = n[n.length - 2], R = n[n.length - 1], B = n[n.length - 4], c = n[n.length - 3], [e, x] = J(I - B, R - c, p);
+    if (i === k.SQUARE) {
+      const U = -x, f = e;
+      s.push(I + e, R + x, I + e + U, R + x + f, I - e + U, R - x + f, I - e, R - x), a.push(0 + t, 1 + t, 2 + t, 0 + t, 2 + t, 3 + t);
+    }
+    i === k.ROUND && V(I, R, I + e, R + x, I - e, R - x, s, a);
+  }
+  h.vertices.concat(s), h.indices.concat(a), g.end(s.length / 2, a.length);
+};
+export {
+  bt as buildVertices,
+  J as getNormalVector,
+  Et as triangulateFill,
+  Rt as triangulateStroke
+};

package/dist/src/utils/visual/render/utils/webgl/initShader.d.ts

@@ -1,4 +1,4 @@
-import type { WebGLRenderer } from '@/utils/visual/render/webGlRenderer';
+import type { WebGLRenderer } from "../../webGlRenderer.js";
 /**
  * Set the vertex attribute layout. The target ARRAY_BUFFER must already be bound.
  * The vertex format matches the shared batching pipeline (BatchRenderer):

package/dist/src/utils/visual/render/utils/webgl/initShader.js

@@ -0,0 +1,31 @@
+import "../../../enums.js";
+import { fragmentShaderSource as i, vertexShaderSource as c } from "./shaders.js";
+var n = (r, t, o) => {
+  const e = r.createShader(t);
+  if (r.shaderSource(e, o), r.compileShader(e), r.getShaderParameter(e, r.COMPILE_STATUS)) return e;
+  {
+    const a = r.getShaderInfoLog(e);
+    throw r.deleteShader(e), console.error(`shader compilation failed: ${a}`), new Error(`shader compilation failed: ${a}`);
+  }
+}, d = (r, t, o) => {
+  const e = r.createProgram();
+  if (!e)
+    throw console.error("failed to create the program"), new Error("failed to create the program");
+  if (r.attachShader(e, t), r.attachShader(e, o), r.linkProgram(e), !r.getProgramParameter(e, r.LINK_STATUS)) {
+    const a = r.getProgramInfoLog(e);
+    throw console.error(`link failed: ${a}`), r.deleteProgram(e), r.deleteShader(t), r.deleteShader(o), new Error(`link failed: ${a}`);
+  }
+  return r.useProgram(e), e;
+}, m = (r, t) => {
+  const o = r.getAttribLocation(t, "a_position");
+  r.vertexAttribPointer(o, 2, r.FLOAT, !1, 12, 0), r.enableVertexAttribArray(o);
+  const e = r.getAttribLocation(t, "a_color");
+  r.vertexAttribPointer(e, 4, r.UNSIGNED_BYTE, !0, 12, 8), r.enableVertexAttribArray(e);
+}, E = (r) => {
+  const t = r.gl, o = n(t, t.VERTEX_SHADER, c), e = n(t, t.FRAGMENT_SHADER, i), a = d(t, o, e);
+  return t.enable(t.BLEND), t.blendFunc(t.ONE, t.ONE_MINUS_SRC_ALPHA), a;
+};
+export {
+  E as initShader,
+  m as setupVertexLayout
+};

package/dist/src/utils/visual/render/utils/webgl/shaders.js

@@ -0,0 +1,22 @@
+var o = `
+precision highp float;
+attribute vec2 a_position;
+attribute vec4 a_color;
+varying vec4 v_color;
+uniform mat3 u_root_transform;
+uniform mat3 u_projection_matrix;
+void main(){
+  v_color = a_color;
+  gl_Position = vec4((u_projection_matrix * u_root_transform * vec3(a_position, 1.0)).xy, 0.0, 1.0);
+}
+`.trim(), r = `
+precision mediump float;
+varying vec4 v_color;
+void main(){
+  gl_FragColor = v_color;
+}
+`.trim();
+export {
+  r as fragmentShaderSource,
+  o as vertexShaderSource
+};

package/dist/src/utils/visual/render/utils/webgpu/shaders.js

@@ -0,0 +1,32 @@
+var o = `
+@group(0) @binding(0) var<uniform> u_root_transform: mat3x3<f32>;
+@group(0) @binding(1) var<uniform> u_projection_matrix: mat3x3<f32>;
+
+struct VertOutput {
+  @builtin(position) v_position: vec4<f32>,
+  @location(0) v_color : vec4<f32>,
+};
+
+@vertex
+fn main(
+  @location(0) a_position: vec2<f32>,
+  @location(1) a_color: vec4<f32>,
+) -> VertOutput {
+  let v_position = vec4<f32>((u_projection_matrix * u_root_transform * vec3<f32>(a_position, 1.0)).xy, 0.0, 1.0);
+
+  let v_color = a_color;
+
+  return VertOutput(v_position, v_color);
+}
+`, r = `
+@fragment
+fn main(
+  @location(0) v_color : vec4<f32>,
+) -> @location(0) vec4<f32> {
+  return v_color;
+}
+`;
+export {
+  r as fragmentShaderSource,
+  o as vertexShaderSource
+};

package/dist/src/utils/visual/render/webGPURenderer.d.ts

@@ -1,5 +1,5 @@
-import { BatchRenderer } from '@/utils/visual/render/batchRenderer';
-import type { IApplicationOptions } from '@/utils/visual/types';
+import { BatchRenderer } from "./batchRenderer.js";
+import type { IApplicationOptions } from "../types.js";
 export declare class WebGPURenderer extends BatchRenderer {
     private gpu;
     private device;

package/dist/src/utils/visual/render/webGPURenderer.js

@@ -0,0 +1,185 @@
+import "../enums.js";
+import { BatchRenderer as h } from "./batchRenderer.js";
+import { toRgbArray as p } from "./utils/index.js";
+import { fragmentShaderSource as g, vertexShaderSource as l } from "./utils/webgpu/shaders.js";
+var E = class extends h {
+  gpu;
+  device;
+  pipeline;
+  renderPassDescriptor;
+  options;
+  gpuVertexBuffer;
+  gpuIndexBuffer;
+  projectionMatBuffer;
+  stageMatBuffer;
+  uniformBindGroup;
+  constructor(e) {
+    super(e), e.debug, this.options = e, this.gpu = this.canvasEle.getContext("webgpu"), this.curVertBufferLength = 256, this.curIndexBufferLength = 256;
+  }
+  async init() {
+    await this.initDevice(), this.initGpuBuffer(), this.initRenderPassDescriptor(), this.createPipeline(), this.initUniformBindGroup(), this.setRootTransform(1, 0, 0, 1, 0, 0), this.setProjectionMatrix();
+  }
+  draw() {
+    const { device: e, renderPassDescriptor: r, gpuVertexBuffer: t, gpuIndexBuffer: i, gpu: a, uniformBindGroup: u, indexCount: f, pipeline: c } = this, n = e.createCommandEncoder(), o = [...r.colorAttachments];
+    o?.[0]?.view && (o[0].view = a.getCurrentTexture().createView());
+    const s = n.beginRenderPass(r);
+    s.setPipeline(c), s.setVertexBuffer(0, t), s.setIndexBuffer(i, "uint32"), s.setBindGroup(0, u), s.drawIndexed(f), s.end();
+    const d = n.finish();
+    e.queue.submit([d]);
+  }
+  initUniformBindGroup() {
+    const e = this.device;
+    this.stageMatBuffer = e.createBuffer({
+      label: "stage-matrix-uniform-buffer",
+      size: 12 * Float32Array.BYTES_PER_ELEMENT,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    }), this.projectionMatBuffer = e.createBuffer({
+      label: "projection-matrix-uniform-buffer",
+      size: 12 * Float32Array.BYTES_PER_ELEMENT,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    }), this.uniformBindGroup = this.device.createBindGroup({
+      label: "my-uniform-bind-group",
+      layout: this.pipeline.getBindGroupLayout(0),
+      entries: [{
+        binding: 0,
+        resource: { buffer: this.stageMatBuffer }
+      }, {
+        binding: 1,
+        resource: { buffer: this.projectionMatBuffer }
+      }]
+    });
+  }
+  initGpuBuffer() {
+    const e = this.device;
+    this.gpuVertexBuffer = e.createBuffer({
+      label: "my-gpu-vertex-buffer",
+      size: this.curVertBufferLength * 12,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+    }), this.gpuIndexBuffer = e.createBuffer({
+      label: "my-gpu-index-buffer",
+      size: this.curIndexBufferLength * Uint32Array.BYTES_PER_ELEMENT,
+      usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
+    });
+  }
+  updateBuffer() {
+    const e = this.device;
+    this.vertexCount > this.curVertBufferLength && (this.gpuVertexBuffer.destroy(), this.gpuVertexBuffer = e.createBuffer({
+      label: "my-gpu-vertex-buffer",
+      size: this.vertexCount * 12,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+    }), this.curVertBufferLength = this.vertexCount), e.queue.writeBuffer(this.gpuVertexBuffer, 0, this.vertFloatView.buffer), this.indexCount > this.curIndexBufferLength && (this.gpuIndexBuffer.destroy(), this.gpuIndexBuffer = e.createBuffer({
+      label: "my-gpu-index-buffer",
+      size: this.indexCount * Uint32Array.BYTES_PER_ELEMENT,
+      usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
+    }), this.curIndexBufferLength = this.indexCount), e.queue.writeBuffer(this.gpuIndexBuffer, 0, this.indexBuffer.buffer);
+  }
+  setRootTransform(e, r, t, i, a, u) {
+    this.device.queue.writeBuffer(this.stageMatBuffer, 0, new Float32Array([
+      e,
+      r,
+      0,
+      0,
+      t,
+      i,
+      0,
+      0,
+      a,
+      u,
+      1,
+      0
+    ]));
+  }
+  setProjectionMatrix() {
+    const e = this.canvasEle.width, r = this.canvasEle.height, t = 1 / e * 2, i = 1 / r * 2;
+    this.device.queue.writeBuffer(this.projectionMatBuffer, 0, new Float32Array([
+      t,
+      0,
+      0,
+      0,
+      0,
+      -i,
+      0,
+      0,
+      -1,
+      1,
+      1,
+      0
+    ]));
+  }
+  createPipeline() {
+    this.pipeline = this.device.createRenderPipeline({
+      layout: "auto",
+      label: "my-render-pipeline",
+      vertex: {
+        module: this.device.createShaderModule({
+          code: l,
+          label: "my-vert-shader-module"
+        }),
+        entryPoint: "main",
+        buffers: [{
+          arrayStride: 12,
+          attributes: [{
+            shaderLocation: 0,
+            format: "float32x2",
+            offset: 0
+          }, {
+            shaderLocation: 1,
+            format: "unorm8x4",
+            offset: 2 * Float32Array.BYTES_PER_ELEMENT
+          }]
+        }]
+      },
+      fragment: {
+        module: this.device.createShaderModule({
+          code: g,
+          label: "my-frag-shader-module"
+        }),
+        entryPoint: "main",
+        targets: [{
+          format: navigator.gpu.getPreferredCanvasFormat(),
+          blend: {
+            alpha: {
+              srcFactor: "one",
+              dstFactor: "one-minus-src-alpha",
+              operation: "add"
+            },
+            color: {
+              srcFactor: "one",
+              dstFactor: "one-minus-src-alpha",
+              operation: "add"
+            }
+          }
+        }]
+      },
+      primitive: { topology: "triangle-list" }
+    });
+  }
+  async initDevice() {
+    const e = await (await navigator.gpu.requestAdapter())?.requestDevice();
+    e && (this.gpu.configure({
+      device: e,
+      format: navigator.gpu.getPreferredCanvasFormat(),
+      alphaMode: "premultiplied"
+    }), this.device = e);
+  }
+  initRenderPassDescriptor() {
+    const { backgroundColor: e = "", backgroundAlpha: r = 1 } = this.options, t = r, [i, a, u] = p(e).map((f) => f * t);
+    this.renderPassDescriptor = {
+      label: "my-render-pass-descriptor",
+      colorAttachments: [{
+        view: this.gpu.getCurrentTexture().createView(),
+        storeOp: "store",
+        loadOp: "clear",
+        clearValue: [
+          i,
+          a,
+          u,
+          t
+        ]
+      }]
+    };
+  }
+};
+export {
+  E as WebGPURenderer
+};

package/dist/src/utils/visual/render/webGlRenderer.d.ts

@@ -1,5 +1,5 @@
-import { BatchRenderer } from '@/utils/visual/render/batchRenderer';
-import type { IApplicationOptions } from '@/utils/visual/types';
+import { BatchRenderer } from "./batchRenderer.js";
+import type { IApplicationOptions } from "../types.js";
 export declare class WebGLRenderer extends BatchRenderer {
     gl: WebGLRenderingContext;
     private program;

package/dist/src/utils/visual/render/webGlRenderer.js

@@ -0,0 +1,88 @@
+import { BatchRenderer as g } from "./batchRenderer.js";
+import { initShader as R, setupVertexLayout as h } from "./utils/webgl/initShader.js";
+import { toRgbArray as B } from "./utils/index.js";
+import { WebGLRenderTarget as l } from "./renderTarget.js";
+var _ = class extends g {
+  gl;
+  program;
+  glVertexBuffer;
+  glIndexBuffer;
+  unifLoc;
+  targetA;
+  targetB;
+  quadBuffer;
+  constructor(t) {
+    super(t), t.debug, this.gl = this.canvasEle.getContext("webgl", { antialias: !0 }), this.gl.getExtension("OES_element_index_uint"), this.program = R(this), this.glVertexBuffer = this.gl.createBuffer(), this.glIndexBuffer = this.gl.createBuffer(), this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.glVertexBuffer), this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.glIndexBuffer), h(this.gl, this.program), this.unifLoc = {
+      u_root_transform: this.gl.getUniformLocation(this.program, "u_root_transform"),
+      u_projection_matrix: this.gl.getUniformLocation(this.program, "u_projection_matrix")
+    };
+    const r = t.backgroundAlpha ?? 0, [e, i, s] = B(t.backgroundColor ?? "");
+    this.gl.clearColor(e * r, i * r, s * r, r), this.setRootTransform(1, 0, 0, 1, 0, 0), this.setProjectionMatrix();
+  }
+  setProjectionMatrix() {
+    const t = this.canvasEle.width, r = this.canvasEle.height, e = 1 / t * 2, i = 1 / r * 2;
+    this.gl.uniformMatrix3fv(this.unifLoc.u_projection_matrix, !1, new Float32Array([
+      e,
+      0,
+      0,
+      0,
+      -i,
+      0,
+      -1,
+      1,
+      1
+    ]));
+  }
+  setRootTransform(t, r, e, i, s, a) {
+    this.gl.uniformMatrix3fv(this.unifLoc.u_root_transform, !1, new Float32Array([
+      t,
+      r,
+      0,
+      e,
+      i,
+      0,
+      s,
+      a,
+      1
+    ]));
+  }
+  updateBuffer() {
+    const t = this.gl;
+    t.bindBuffer(t.ARRAY_BUFFER, this.glVertexBuffer), t.bufferData(t.ARRAY_BUFFER, this.vertFloatView, t.DYNAMIC_DRAW), t.bindBuffer(t.ELEMENT_ARRAY_BUFFER, this.glIndexBuffer), t.bufferData(t.ELEMENT_ARRAY_BUFFER, this.indexBuffer, t.DYNAMIC_DRAW);
+  }
+  draw() {
+    const t = this.gl, r = this.canvasEle.width, e = this.canvasEle.height;
+    if (this.filters.length === 0) {
+      t.bindFramebuffer(t.FRAMEBUFFER, null), t.viewport(0, 0, r, e), t.clear(t.COLOR_BUFFER_BIT), t.drawElements(t.TRIANGLES, this.indexCount, t.UNSIGNED_INT, 0);
+      return;
+    }
+    this.ensurePostResources(r, e);
+    const i = this.targetA, s = this.targetB;
+    i.bind(), t.clear(t.COLOR_BUFFER_BIT), t.drawElements(t.TRIANGLES, this.indexCount, t.UNSIGNED_INT, 0);
+    let a = i, o = s;
+    for (let f = 0; f < this.filters.length; f++) {
+      const n = f === this.filters.length - 1;
+      if (this.filters[f].apply(t, this.quadBuffer, a.texture, n ? null : o, r, e), !n) {
+        const u = a;
+        a = o, o = u;
+      }
+    }
+    t.useProgram(this.program), t.bindBuffer(t.ARRAY_BUFFER, this.glVertexBuffer), t.bindBuffer(t.ELEMENT_ARRAY_BUFFER, this.glIndexBuffer), h(t, this.program);
+  }
+  ensurePostResources(t, r) {
+    const e = this.gl;
+    this.quadBuffer || (this.quadBuffer = e.createBuffer(), e.bindBuffer(e.ARRAY_BUFFER, this.quadBuffer), e.bufferData(e.ARRAY_BUFFER, new Float32Array([
+      -1,
+      -1,
+      1,
+      -1,
+      -1,
+      1,
+      1,
+      1
+    ]), e.STATIC_DRAW), this.targetA = new l(e), this.targetB = new l(e)), this.targetA?.resize(t, r), this.targetB?.resize(t, r);
+  }
+};
+export {
+  _ as WebGLRenderer
+};

package/dist/src/utils/visual/shape/circle.d.ts

@@ -1,6 +1,6 @@
-import { Shape } from '@/utils/visual/shape/shape';
-import { SHAPE_TYPE } from '@/utils/visual/enums';
-import type { Point } from '@/utils/visual/vertex/point';
+import { Shape } from "./shape.js";
+import { SHAPE_TYPE } from "../enums.js";
+import type { Point } from "../vertex/point.js";
 export declare class Circle extends Shape {
     x: number;
     y: number;

package/dist/src/utils/visual/shape/circle.js

@@ -0,0 +1,17 @@
+import { SHAPE_TYPE as i } from "../enums.js";
+import { Shape as e } from "./shape.js";
+var u = class extends e {
+  x;
+  y;
+  radius;
+  type = i.CIRCLE;
+  constructor(s = 0, t = 0, r = 0) {
+    super(), this.x = s, this.y = t, this.radius = r;
+  }
+  contains(s) {
+    return (s.x - this.x) * (s.x - this.x) + (s.y - this.y) * (s.y - this.y) < this.radius * this.radius;
+  }
+};
+export {
+  u as Circle
+};

package/dist/src/utils/visual/shape/ellipse.d.ts

@@ -1,6 +1,6 @@
-import { Shape } from '@/utils/visual/shape/shape';
-import { SHAPE_TYPE } from '@/utils/visual/enums';
-import type { Point } from '@/utils/visual/vertex/point';
+import { Shape } from "./shape.js";
+import { SHAPE_TYPE } from "../enums.js";
+import type { Point } from "../vertex/point.js";
 export declare class Ellipse extends Shape {
     x: number;
     y: number;

package/dist/src/utils/visual/shape/ellipse.js

@@ -0,0 +1,18 @@
+import { SHAPE_TYPE as a } from "../enums.js";
+import { Shape as e } from "./shape.js";
+var d = class extends e {
+  x;
+  y;
+  radiusX;
+  radiusY;
+  type = a.ELLIPSE;
+  constructor(s = 0, i = 0, t = 0, r = 0) {
+    super(), this.x = s, this.y = i, this.radiusX = t, this.radiusY = r;
+  }
+  contains(s) {
+    return (s.x - this.x) * (s.x - this.x) / (this.radiusX * this.radiusX) + (s.y - this.y) * (s.y - this.y) / (this.radiusY * this.radiusY) < 1;
+  }
+};
+export {
+  d as Ellipse
+};

package/dist/src/utils/visual/shape/index.d.ts

@@ -1,7 +1,7 @@
-import { Circle } from '@/utils/visual/shape/circle';
-import { Ellipse } from '@/utils/visual/shape/ellipse';
-import { Polygon } from '@/utils/visual/shape/polygon';
-import { Rectangle } from '@/utils/visual/shape/rectangle';
-import { Shape } from '@/utils/visual/shape/shape';
-import { RoundedRectangle } from '@/utils/visual/shape/roundedRectangle';
+import { Circle } from "./circle.js";
+import { Ellipse } from "./ellipse.js";
+import { Polygon } from "./polygon.js";
+import { Rectangle } from "./rectangle.js";
+import { Shape } from "./shape.js";
+import { RoundedRectangle } from "./roundedRectangle.js";
 export { Shape, Circle, Ellipse, Polygon, Rectangle, RoundedRectangle };

package/dist/src/utils/visual/shape/polygon.d.ts

@@ -1,6 +1,6 @@
-import { Shape } from '@/utils/visual/shape/shape';
-import { SHAPE_TYPE } from '@/utils/visual/enums';
-import type { Point } from '@/utils/visual/vertex/point';
+import { Shape } from "./shape.js";
+import { SHAPE_TYPE } from "../enums.js";
+import type { Point } from "../vertex/point.js";
 export declare class Polygon extends Shape {
     points: number[];
     closeStroke: boolean;

package/dist/src/utils/visual/shape/polygon.js

@@ -0,0 +1,29 @@
+import { SHAPE_TYPE as a } from "../enums.js";
+import { Shape as p } from "./shape.js";
+var I = class extends p {
+  points = [];
+  closeStroke = !1;
+  type = a.POLYGON;
+  constructor(t = []) {
+    super(), this.points = t;
+  }
+  isIntersect(t, s, e, r, o, i) {
+    if (r > s && i > s || r < s && i < s || e < t && o < t) return !1;
+    if (e > t && o > t) return !0;
+    const c = r - i, n = o - e, f = s - i;
+    return o - n / c * f > t;
+  }
+  contains(t) {
+    const s = this.points.length;
+    let e = 0;
+    for (let n = 2; n <= s - 2; n += 2) {
+      const f = this.points[n - 2], l = this.points[n - 1], h = this.points[n], u = this.points[n + 1];
+      this.isIntersect(t.x, t.y, f, l, h, u) && e++;
+    }
+    const r = this.points[0], o = this.points[1], i = this.points[s - 2], c = this.points[s - 1];
+    return this.isIntersect(t.x, t.y, r, o, i, c) && e++, e % 2 !== 0;
+  }
+};
+export {
+  I as Polygon
+};