@bloopjs/toodle 0.0.100

package/src/colors/mod.ts

@@ -0,0 +1,151 @@
+/**
+ * Named colors from the web for easier prototyping than using hex codes or rgba values.
+ *
+ * https://www.w3schools.com/colors/colors_names.asp
+ */
+export const web = Object.freeze({
+  aliceBlue: { r: 0.941176, g: 0.972549, b: 1, a: 1 },
+  antiqueWhite: { r: 0.980392, g: 0.921569, b: 0.843137, a: 1 },
+  aqua: { r: 0, g: 1, b: 1, a: 1 },
+  aquamarine: { r: 0.498039, g: 1, b: 0.831373, a: 1 },
+  azure: { r: 0.941176, g: 1, b: 1, a: 1 },
+  beige: { r: 0.960784, g: 0.960784, b: 0.862745, a: 1 },
+  bisque: { r: 1, g: 0.894118, b: 0.768627, a: 1 },
+  black: { r: 0, g: 0, b: 0, a: 1 },
+  blanchedAlmond: { r: 1, g: 0.921569, b: 0.803922, a: 1 },
+  blue: { r: 0, g: 0, b: 1, a: 1 },
+  blueViolet: { r: 0.541176, g: 0.168627, b: 0.886275, a: 1 },
+  brown: { r: 0.647059, g: 0.164706, b: 0.164706, a: 1 },
+  burlywood: { r: 0.870588, g: 0.721569, b: 0.529412, a: 1 },
+  cadetBlue: { r: 0.372549, g: 0.619608, b: 0.627451, a: 1 },
+  chartreuse: { r: 0.498039, g: 1, b: 0, a: 1 },
+  chocolate: { r: 0.823529, g: 0.411765, b: 0.117647, a: 1 },
+  coral: { r: 1, g: 0.498039, b: 0.313726, a: 1 },
+  cornflowerBlue: { r: 0.392157, g: 0.584314, b: 0.929412, a: 1 },
+  cornsilk: { r: 1, g: 0.972549, b: 0.862745, a: 1 },
+  crimson: { r: 0.862745, g: 0.0784314, b: 0.235294, a: 1 },
+  cyan: { r: 0, g: 1, b: 1, a: 1 },
+  darkBlue: { r: 0, g: 0, b: 0.545098, a: 1 },
+  darkCyan: { r: 0, g: 0.545098, b: 0.545098, a: 1 },
+  darkGoldenrod: { r: 0.721569, g: 0.52549, b: 0.0431373, a: 1 },
+  darkGray: { r: 0.662745, g: 0.662745, b: 0.662745, a: 1 },
+  darkGreen: { r: 0, g: 0.392157, b: 0, a: 1 },
+  darkKhaki: { r: 0.741176, g: 0.717647, b: 0.419608, a: 1 },
+  darkMagenta: { r: 0.545098, g: 0, b: 0.545098, a: 1 },
+  darkOliveGreen: { r: 0.333333, g: 0.419608, b: 0.184314, a: 1 },
+  darkOrange: { r: 1, g: 0.54902, b: 0, a: 1 },
+  darkOrchid: { r: 0.6, g: 0.196078, b: 0.8, a: 1 },
+  darkRed: { r: 0.545098, g: 0, b: 0, a: 1 },
+  darkSalmon: { r: 0.913725, g: 0.588235, b: 0.478431, a: 1 },
+  darkSeaGreen: { r: 0.560784, g: 0.737255, b: 0.560784, a: 1 },
+  darkSlateBlue: { r: 0.282353, g: 0.239216, b: 0.545098, a: 1 },
+  darkSlateGray: { r: 0.184314, g: 0.309804, b: 0.309804, a: 1 },
+  darkTurquoise: { r: 0, g: 0.807843, b: 0.819608, a: 1 },
+  darkViolet: { r: 0.580392, g: 0, b: 0.827451, a: 1 },
+  deepPink: { r: 1, g: 0.0784314, b: 0.576471, a: 1 },
+  deepSkyBlue: { r: 0, g: 0.74902, b: 1, a: 1 },
+  dimGray: { r: 0.411765, g: 0.411765, b: 0.411765, a: 1 },
+  dodgerBlue: { r: 0.117647, g: 0.564706, b: 1, a: 1 },
+  firebrick: { r: 0.698039, g: 0.133333, b: 0.133333, a: 1 },
+  floralWhite: { r: 1, g: 0.980392, b: 0.941176, a: 1 },
+  forestGreen: { r: 0.133333, g: 0.545098, b: 0.133333, a: 1 },
+  fuchsia: { r: 1, g: 0, b: 1, a: 1 },
+  gainsboro: { r: 0.862745, g: 0.862745, b: 0.862745, a: 1 },
+  ghostWhite: { r: 0.972549, g: 0.972549, b: 1, a: 1 },
+  gold: { r: 1, g: 0.843137, b: 0, a: 1 },
+  goldenrod: { r: 0.854902, g: 0.647059, b: 0.12549, a: 1 },
+  gray: { r: 0.745098, g: 0.745098, b: 0.745098, a: 1 },
+  green: { r: 0, g: 1, b: 0, a: 1 },
+  greenYellow: { r: 0.678431, g: 1, b: 0.184314, a: 1 },
+  honeydew: { r: 0.941176, g: 1, b: 0.941176, a: 1 },
+  hotPink: { r: 1, g: 0.411765, b: 0.705882, a: 1 },
+  indigo: { r: 0.294118, g: 0, b: 0.509804, a: 1 },
+  ivory: { r: 1, g: 1, b: 0.941176, a: 1 },
+  khaki: { r: 0.941176, g: 0.901961, b: 0.54902, a: 1 },
+  lavender: { r: 0.901961, g: 0.901961, b: 0.980392, a: 1 },
+  lavenderBlush: { r: 1, g: 0.941176, b: 0.960784, a: 1 },
+  lawnGreen: { r: 0.486275, g: 0.988235, b: 0, a: 1 },
+  lemonChiffon: { r: 1, g: 0.980392, b: 0.803922, a: 1 },
+  lightBlue: { r: 0.678431, g: 0.847059, b: 0.901961, a: 1 },
+  lightCoral: { r: 0.941176, g: 0.501961, b: 0.501961, a: 1 },
+  lightCyan: { r: 0.878431, g: 1, b: 1, a: 1 },
+  lightGoldenrod: { r: 0.980392, g: 0.980392, b: 0.823529, a: 1 },
+  lightGray: { r: 0.827451, g: 0.827451, b: 0.827451, a: 1 },
+  lightGreen: { r: 0.564706, g: 0.933333, b: 0.564706, a: 1 },
+  lightPink: { r: 1, g: 0.713726, b: 0.756863, a: 1 },
+  lightSalmon: { r: 1, g: 0.627451, b: 0.478431, a: 1 },
+  lightSeaGreen: { r: 0.12549, g: 0.698039, b: 0.666667, a: 1 },
+  lightSkyBlue: { r: 0.529412, g: 0.807843, b: 0.980392, a: 1 },
+  lightSlateGray: { r: 0.466667, g: 0.533333, b: 0.6, a: 1 },
+  lightSteelBlue: { r: 0.690196, g: 0.768627, b: 0.870588, a: 1 },
+  lightYellow: { r: 1, g: 1, b: 0.878431, a: 1 },
+  lime: { r: 0, g: 1, b: 0, a: 1 },
+  limeGreen: { r: 0.196078, g: 0.803922, b: 0.196078, a: 1 },
+  linen: { r: 0.980392, g: 0.941176, b: 0.901961, a: 1 },
+  magenta: { r: 1, g: 0, b: 1, a: 1 },
+  maroon: { r: 0.690196, g: 0.188235, b: 0.376471, a: 1 },
+  mediumAquamarine: { r: 0.4, g: 0.803922, b: 0.666667, a: 1 },
+  mediumBlue: { r: 0, g: 0, b: 0.803922, a: 1 },
+  mediumOrchid: { r: 0.729412, g: 0.333333, b: 0.827451, a: 1 },
+  mediumPurple: { r: 0.576471, g: 0.439216, b: 0.858824, a: 1 },
+  mediumSeaGreen: { r: 0.235294, g: 0.701961, b: 0.443137, a: 1 },
+  mediumSlateBlue: { r: 0.482353, g: 0.407843, b: 0.933333, a: 1 },
+  mediumSpringGreen: { r: 0, g: 0.980392, b: 0.603922, a: 1 },
+  mediumTurquoise: { r: 0.282353, g: 0.819608, b: 0.8, a: 1 },
+  mediumVioletRed: { r: 0.780392, g: 0.0823529, b: 0.521569, a: 1 },
+  midnightBlue: { r: 0.0980392, g: 0.0980392, b: 0.439216, a: 1 },
+  mintCream: { r: 0.960784, g: 1, b: 0.980392, a: 1 },
+  mistyRose: { r: 1, g: 0.894118, b: 0.882353, a: 1 },
+  moccasin: { r: 1, g: 0.894118, b: 0.709804, a: 1 },
+  navyBlue: { r: 0, g: 0, b: 0.501961, a: 1 },
+  oldLace: { r: 0.992157, g: 0.960784, b: 0.901961, a: 1 },
+  olive: { r: 0.501961, g: 0.501961, b: 0, a: 1 },
+  oliveDrab: { r: 0.419608, g: 0.556863, b: 0.137255, a: 1 },
+  orange: { r: 1, g: 0.647059, b: 0, a: 1 },
+  orangeRed: { r: 1, g: 0.270588, b: 0, a: 1 },
+  orchid: { r: 0.854902, g: 0.439216, b: 0.839216, a: 1 },
+  paleGoldenrod: { r: 0.933333, g: 0.909804, b: 0.666667, a: 1 },
+  paleGreen: { r: 0.596078, g: 0.984314, b: 0.596078, a: 1 },
+  paleTurquoise: { r: 0.686275, g: 0.933333, b: 0.933333, a: 1 },
+  paleVioletRed: { r: 0.858824, g: 0.439216, b: 0.576471, a: 1 },
+  papayaWhip: { r: 1, g: 0.937255, b: 0.835294, a: 1 },
+  peachPuff: { r: 1, g: 0.854902, b: 0.72549, a: 1 },
+  peru: { r: 0.803922, g: 0.521569, b: 0.247059, a: 1 },
+  pink: { r: 1, g: 0.752941, b: 0.796078, a: 1 },
+  plum: { r: 0.866667, g: 0.627451, b: 0.866667, a: 1 },
+  powderBlue: { r: 0.690196, g: 0.878431, b: 0.901961, a: 1 },
+  purple: { r: 0.627451, g: 0.12549, b: 0.941176, a: 1 },
+  rebeccaPurple: { r: 0.4, g: 0.2, b: 0.6, a: 1 },
+  red: { r: 1, g: 0, b: 0, a: 1 },
+  rosyBrown: { r: 0.737255, g: 0.560784, b: 0.560784, a: 1 },
+  royalBlue: { r: 0.254902, g: 0.411765, b: 0.882353, a: 1 },
+  saddleBrown: { r: 0.545098, g: 0.270588, b: 0.0745098, a: 1 },
+  salmon: { r: 0.980392, g: 0.501961, b: 0.447059, a: 1 },
+  sandyBrown: { r: 0.956863, g: 0.643137, b: 0.376471, a: 1 },
+  seaGreen: { r: 0.180392, g: 0.545098, b: 0.341176, a: 1 },
+  seashell: { r: 1, g: 0.960784, b: 0.933333, a: 1 },
+  sienna: { r: 0.627451, g: 0.321569, b: 0.176471, a: 1 },
+  silver: { r: 0.752941, g: 0.752941, b: 0.752941, a: 1 },
+  skyBlue: { r: 0.529412, g: 0.807843, b: 0.921569, a: 1 },
+  slateBlue: { r: 0.415686, g: 0.352941, b: 0.803922, a: 1 },
+  slateGray: { r: 0.439216, g: 0.501961, b: 0.564706, a: 1 },
+  snow: { r: 1, g: 0.980392, b: 0.980392, a: 1 },
+  springGreen: { r: 0, g: 1, b: 0.498039, a: 1 },
+  steelBlue: { r: 0.27451, g: 0.509804, b: 0.705882, a: 1 },
+  tan: { r: 0.823529, g: 0.705882, b: 0.54902, a: 1 },
+  teal: { r: 0, g: 0.501961, b: 0.501961, a: 1 },
+  thistle: { r: 0.847059, g: 0.74902, b: 0.847059, a: 1 },
+  tomato: { r: 1, g: 0.388235, b: 0.278431, a: 1 },
+  transparent: { r: 1, g: 1, b: 1, a: 0 },
+  turquoise: { r: 0.25098, g: 0.878431, b: 0.815686, a: 1 },
+  violet: { r: 0.933333, g: 0.509804, b: 0.933333, a: 1 },
+  webGray: { r: 0.501961, g: 0.501961, b: 0.501961, a: 1 },
+  webGreen: { r: 0, g: 0.501961, b: 0, a: 1 },
+  webMaroon: { r: 0.501961, g: 0, b: 0, a: 1 },
+  webPurple: { r: 0.501961, g: 0, b: 0.501961, a: 1 },
+  wheat: { r: 0.960784, g: 0.870588, b: 0.701961, a: 1 },
+  white: { r: 1, g: 1, b: 1, a: 1 },
+  whiteSmoke: { r: 0.960784, g: 0.960784, b: 0.960784, a: 1 },
+  yellow: { r: 1, g: 1, b: 0, a: 1 },
+  yellowGreen: { r: 0.603922, g: 0.803922, b: 0.196078, a: 1 },
+});

package/src/coreTypes/Color.ts

@@ -0,0 +1 @@
+export type Color = { r: number; g: number; b: number; a: number };

package/src/coreTypes/Point.ts

@@ -0,0 +1,7 @@
+/**
+ * A point in 2D space
+ */
+export type Point = {
+  x: number;
+  y: number;
+};

package/src/coreTypes/Size.ts

@@ -0,0 +1,4 @@
+export type Size = {
+  width: number;
+  height: number;
+};

package/src/coreTypes/Transform.ts

@@ -0,0 +1,16 @@
+import type { Point } from "./Point";
+import type { Size } from "./Size";
+import type { Vec2 } from "./Vec2";
+
+export type Transform = {
+  position: Point;
+  scale: Vec2;
+  rotation: number;
+  /**
+   * width and height of the quad
+   *
+   * these are multiplied with scale for rendering
+   * but they are not used to calculate child transforms
+   */
+  size: Size;
+};

package/src/coreTypes/Vec2.ts

@@ -0,0 +1,7 @@
+/**
+ * A vector in 2D space
+ */
+export type Vec2 = {
+  x: number;
+  y: number;
+};

package/src/coreTypes/mod.ts

@@ -0,0 +1,5 @@
+export type * from "./Color";
+export type * from "./Point";
+export type * from "./Size";
+export type * from "./Transform";
+export type * from "./Vec2";

package/src/globals.d.ts

@@ -0,0 +1,4 @@
+declare module "*wgsl?raw" {
+  const content: string;
+  export default content;
+}

package/src/limits.ts

@@ -0,0 +1,23 @@
+export const DEFAULT_LIMITS = {
+  /** Maximum number of rendered instances in the scene per frame */
+  instanceCount: 1024 * 2,
+  /** Maximum number of unique z-indexes in the scene */
+  zIndex: 32,
+  /** Maximum number of vfx shaders */
+  shaderCount: 32,
+  /** Maximum dimensions of a single texture */
+  textureSize: 1024 * 4,
+  /** Maximum number of layers in a texture array */
+  textureArrayLayers: 64,
+  /** Maximum size of uniforms buffer */
+  uniformBufferSize: 1024 * 64,
+  /** Maximum number of instance buffer fields - 16 minus the vertex locations used by the engine */
+  instanceBufferFields: 16 - 6,
+  /** Maximum size of instance buffer */
+  instanceBufferSize: Float32Array.BYTES_PER_ELEMENT * 4 * (16 - 6),
+  /** Maximum length of a single piece of text */
+  maxTextLength: 256,
+};
+
+export type Limits = typeof DEFAULT_LIMITS;
+export type LimitsOptions = Partial<Limits>;

package/src/math/angle.ts

@@ -0,0 +1,17 @@
+/**
+ * Convert degrees to radians
+ * @param degrees Angle in degrees
+ * @returns Angle in radians
+ */
+export function deg2rad(degrees: number): number {
+  return degrees * (Math.PI / 180);
+}
+
+/**
+ * Convert radians to degrees
+ * @param radians Angle in radians
+ * @returns Angle in degrees
+ */
+export function rad2deg(radians: number): number {
+  return radians * (180 / Math.PI);
+}

package/src/math/matrix.ts

@@ -0,0 +1,99 @@
+import { type Mat3, mat3, vec2 } from "wgpu-matrix";
+import type { Point } from "../coreTypes/Point";
+import type { Transform } from "../coreTypes/Transform";
+import type { Camera } from "../scene/Camera";
+import type { Resolution } from "../screen/resolution";
+
+/**
+ * Creates a projection matrix for the given resolution.
+ * The matrix is a 3x3 matrix that converts screen coordinates centered at the origin ranging from:
+ *
+ * (-resolution.width / 2, resolution.height / 2) = top left corner to (resolution.width / 2, -resolution.height / 2) = bottom right corner
+ *
+ * into clip space centered at the originranging from:
+ *
+ * (-1, 1) = top left corner to (1, -1) = bottom right corner
+ *
+ * @param resolution - The resolution of the screen in logical pixels.
+ * @param dst - The destination matrix.
+ * @returns The projection matrix.
+ */
+export function createProjectionMatrix(resolution: Resolution, dst?: Mat3) {
+  const { width, height } = resolution;
+
+  // origin is always the same
+  // (0,0) => (0 * 2 / 1920, 0 * 2 / 1080) => (0,0)
+  //
+  // top left corner is (-1, 1) in clip space, (-width / 2, height / 2) in screen space e.g.
+  // (-960, 540) => (-960 * 2 / 1920, 540 * 2 / 1080) => (-1, 1)
+  return mat3.scaling([2 / width, 2 / height], dst);
+}
+
+export function createViewMatrix(camera: Camera, target: Mat3) {
+  const matrix = mat3.identity(target);
+
+  // Apply scaling
+  mat3.scale(matrix, [camera.zoom, camera.zoom], matrix);
+
+  // Apply rotation
+  mat3.rotate(matrix, camera.rotationRadians, matrix);
+
+  // Apply translation
+  mat3.translate(matrix, [-camera.x, -camera.y], matrix);
+
+  return matrix;
+}
+
+export function createModelMatrix(transform: Transform, base: Mat3) {
+  // Apply translation
+  mat3.translate(base, [transform.position.x, transform.position.y], base);
+  // Apply rotation
+  mat3.rotate(base, transform.rotation, base);
+
+  // Apply scaling
+  mat3.scale(base, [transform.scale.x, transform.scale.y], base);
+
+  return base;
+}
+
+export function convertScreenToWorld(
+  screenCoordinates: Point,
+  camera: Camera,
+  projectionMatrix: Mat3,
+  resolution: Resolution,
+): Point {
+  const inverseViewProjectionMatrix = mat3.mul(
+    mat3.inverse(camera.matrix),
+    mat3.inverse(projectionMatrix),
+  );
+  const normalizedDeviceCoordinates = {
+    x: (2 * screenCoordinates.x) / resolution.width - 1,
+    y: 1 - (2 * screenCoordinates.y) / resolution.height,
+  };
+  return transformPoint(
+    normalizedDeviceCoordinates,
+    inverseViewProjectionMatrix,
+  );
+}
+
+export function convertWorldToScreen(
+  worldCoordinates: Point,
+  camera: Camera,
+  projectionMatrix: Mat3,
+  resolution: Resolution,
+): Point {
+  const viewProjectionMatrix = mat3.mul(projectionMatrix, camera.matrix);
+  const ndcPoint = transformPoint(worldCoordinates, viewProjectionMatrix);
+  return {
+    x: ((ndcPoint.x + 1) * resolution.width) / 2,
+    y: ((1 - ndcPoint.y) * resolution.height) / 2,
+  };
+}
+
+export function transformPoint(point: Point, matrix: Mat3): Point {
+  const result = vec2.transformMat3([point.x, point.y], matrix);
+  return {
+    x: result[0],
+    y: result[1],
+  };
+}

package/src/math/mod.ts

@@ -0,0 +1,2 @@
+export * from "./angle";
+export * from "./matrix";

package/src/mod.ts

@@ -0,0 +1,22 @@
+import { AssetManager } from "./textures/AssetManager";
+
+export type * from "./coreTypes/mod";
+
+export type * from "./scene/QuadNode";
+export type * from "./scene/SceneNode";
+export type * from "./shaders/QuadShader";
+export type * from "./text/TextNode";
+
+export * from "./limits";
+export * from "./Toodle";
+
+export * as Colors from "./colors/mod";
+export * as GfxMath from "./math/mod";
+export * as Scene from "./scene/mod";
+export * as Screen from "./screen/mod";
+export * as Shaders from "./shaders/mod";
+export * as Text from "./text/mod";
+export * as Textures from "./textures/mod";
+export * as Utils from "./utils/mod";
+
+export { AssetManager } from "./textures/AssetManager";

package/src/scene/Batcher.ts

@@ -0,0 +1,61 @@
+import type { IShader } from "../shaders/IShader";
+import type { SceneNode } from "./SceneNode";
+
+type Layer = {
+  z: number;
+  pipelines: Pipeline[];
+};
+
+export type Pipeline<TNode extends SceneNode = SceneNode> = {
+  shader: IShader;
+  nodes: TNode[];
+};
+
+export class Batcher {
+  nodes: SceneNode[] = [];
+  layers: Layer[] = [];
+  pipelines: Pipeline[] = [];
+
+  enqueue(node: SceneNode) {
+    if (node.renderComponent && node.isActive) {
+      this.nodes.push(node);
+      const z = node.layer;
+      const layer = this.#findOrCreateLayer(z);
+      const pipeline = this.#findOrCreatePipeline(
+        layer,
+        node.renderComponent.shader,
+      );
+      pipeline.nodes.push(node);
+    }
+
+    for (const kid of node.kids) {
+      this.enqueue(kid);
+    }
+  }
+
+  flush() {
+    this.nodes = [];
+    this.layers = [];
+    this.pipelines = [];
+  }
+
+  #findOrCreateLayer(z: number) {
+    let layer = this.layers.find((l) => l.z === z);
+    if (!layer) {
+      layer = { z, pipelines: [] };
+      this.layers.push(layer);
+      this.layers.sort((a, b) => a.z - b.z);
+    }
+    return layer;
+  }
+
+  #findOrCreatePipeline(layer: Layer, shader: IShader) {
+    let pipeline = layer.pipelines.find((p) => p.shader === shader);
+    if (!pipeline) {
+      pipeline = { shader, nodes: [] };
+      layer.pipelines.push(pipeline);
+      this.pipelines.push(pipeline);
+    }
+    return pipeline;
+  }
+}

package/src/scene/Camera.ts

@@ -0,0 +1,69 @@
+import { mat3 } from "wgpu-matrix";
+import type { Vec2 } from "../coreTypes/Vec2";
+import { deg2rad, rad2deg } from "../math/angle";
+import { createViewMatrix } from "../math/matrix";
+
+export class Camera {
+  #position: Vec2 = { x: 0, y: 0 };
+  #zoom = 1;
+  #rotation = 0;
+  #isDirty = true;
+  #matrix = mat3.create();
+
+  get zoom() {
+    return this.#zoom;
+  }
+
+  set zoom(value: number) {
+    this.#zoom = value;
+    this.setDirty();
+  }
+
+  get rotation() {
+    return rad2deg(this.#rotation);
+  }
+
+  set rotation(value: number) {
+    this.#rotation = deg2rad(value);
+    this.setDirty();
+  }
+
+  get rotationRadians() {
+    return this.#rotation;
+  }
+
+  set rotationRadians(value: number) {
+    this.#rotation = value;
+    this.setDirty();
+  }
+
+  get x() {
+    return this.#position.x;
+  }
+
+  get y() {
+    return this.#position.y;
+  }
+
+  set x(value: number) {
+    this.#position.x = value;
+    this.setDirty();
+  }
+
+  set y(value: number) {
+    this.#position.y = value;
+    this.setDirty();
+  }
+
+  get matrix() {
+    if (this.#isDirty) {
+      this.#isDirty = false;
+      this.#matrix = createViewMatrix(this, this.#matrix);
+    }
+    return this.#matrix;
+  }
+
+  setDirty() {
+    this.#isDirty = true;
+  }
+}