simulationjsv2 0.1.8 → 0.1.10

package/dist/graphics.d.ts

@@ -72,8 +72,10 @@ export declare class BezierCurve2d {
 }
 export declare class CubicBezierCurve2d extends BezierCurve2d {
     private detail;
-    constructor(points: [Vector2, Vector2, Vector2, Vector2], detail?: number);
+    private colors;
+    constructor(points: [Vector2, Vector2, Vector2, Vector2], detail?: number, colors?: (Color | null)[]);
     getDetail(): number | undefined;
+    getColors(): (Color | null)[];
 }
 export declare class SplinePoint2d {
     private start;
@@ -88,6 +90,7 @@ export declare class SplinePoint2d {
     getControls(): readonly [Vector2 | null, Vector2];
     getRawControls(): [Vector2, Vector2];
     getDetail(): number | undefined;
+    getColors(prevColor?: Color | null): (Color | null)[];
     getVectorArray(prevEnd: Vector2 | null, prevControl: Vector2 | null): readonly [Vector2, Vector2, Vector2, Vector2];
 }
 export declare class Spline2d extends SimulationElement {
@@ -96,7 +99,7 @@ export declare class Spline2d extends SimulationElement {
     private detail;
     private interpolateLimit;
     private distance;
-    constructor(pos: Vector2, points: SplinePoint2d[], width?: number, color?: Color, detail?: number);
+    constructor(pos: Vertex, points: SplinePoint2d[], width?: number, detail?: number);
     setInterpolateLimit(limit: number, t?: number, f?: LerpFunc): Promise<void>;
     getBuffer(camera: Camera, force: boolean): number[];
 }

package/dist/graphics.js

@@ -1,5 +1,5 @@
 import { vec3, quat, mat4, vec2, vec4 } from 'wgpu-matrix';
-import { Vertex, VertexCache, cloneBuf, color, colorFromVector4, lossyTriangulate, vec3ToPixelRatio, vector3FromVector2, vector2, vector3, vertex, vertexBuffer2d, vertexBuffer3d, Color, transitionValues, logger, vector2FromVector3 } from './utils.js';
+import { Vertex, VertexCache, cloneBuf, color, colorFromVector4, lossyTriangulate, vec3ToPixelRatio, vector3FromVector2, vector2, vector3, vertex, vertexBuffer2d, vertexBuffer3d, Color, transitionValues, logger, vector2FromVector3, interpolateColors } from './utils.js';
 export class SimulationElement {
     pos;
     color;
@@ -480,13 +480,18 @@ export class BezierCurve2d {
 }
 export class CubicBezierCurve2d extends BezierCurve2d {
     detail;
-    constructor(points, detail) {
+    colors;
+    constructor(points, detail, colors) {
         super(points);
         this.detail = detail;
+        this.colors = colors || [];
     }
     getDetail() {
         return this.detail;
     }
+    getColors() {
+        return this.colors;
+    }
 }
 export class SplinePoint2d {
     start;
@@ -518,6 +523,22 @@ export class SplinePoint2d {
     getDetail() {
         return this.detail;
     }
+    getColors(prevColor) {
+        const colors = [null, null];
+        if (this.start && this.start.getColor()) {
+            colors[0] = this.start.getColor();
+        }
+        if (this.end.getColor()) {
+            colors[1] = this.end.getColor();
+        }
+        if (prevColor) {
+            colors.unshift(prevColor);
+        }
+        if (colors.at(-1) === null) {
+            colors.pop();
+        }
+        return colors;
+    }
     getVectorArray(prevEnd, prevControl) {
         const firstControl = cloneBuf(this.control1 || prevControl || vector2());
         if (prevEnd) {
@@ -540,8 +561,8 @@ export class Spline2d extends SimulationElement {
     detail;
     interpolateLimit;
     distance;
-    constructor(pos, points, width = 2, color, detail = 40) {
-        super(vector3FromVector2(pos), color);
+    constructor(pos, points, width = 2, detail = 40) {
+        super(pos.getPos(), pos.getColor() || undefined);
         this.curves = [];
         this.width = width * devicePixelRatio;
         this.detail = detail;
@@ -549,13 +570,17 @@ export class Spline2d extends SimulationElement {
         this.distance = 0;
         for (let i = 0; i < points.length; i++) {
             let prevControl = null;
+            let prevColor = null;
             if (i > 0) {
                 prevControl = cloneBuf(points[i - 1].getRawControls()[1]);
                 vec2.negate(prevControl, prevControl);
-                console.log(prevControl);
+                const prevColors = points[i - 1].getColors();
+                if (prevColors.at(-1)) {
+                    prevColor = prevColors.at(-1) || null;
+                }
             }
             const bezierPoints = points[i].getVectorArray(i > 0 ? vector2FromVector3(points[i - 1].getEnd().getPos()) : null, prevControl);
-            const curve = new CubicBezierCurve2d(bezierPoints, points[i].getDetail());
+            const curve = new CubicBezierCurve2d(bezierPoints, points[i].getDetail(), points[i].getColors(prevColor));
             this.distance += curve.getLength();
             this.curves.push(curve);
         }
@@ -599,9 +624,11 @@ export class Spline2d extends SimulationElement {
                     const normal = vector2(-slope[1], slope[0]);
                     vec2.normalize(normal, normal);
                     vec2.scale(normal, this.width / 2, normal);
-                    const vertTop = vertex(point[0] + normal[0], point[1] + normal[1]);
+                    const colors = this.curves[i].getColors().map((c) => (c ? c : this.getColor()));
+                    const vertexColor = interpolateColors(colors, currentInterpolation);
+                    const vertTop = vertex(point[0] + normal[0], point[1] + normal[1], 0, vertexColor);
                     verticesTop.push(vertTop);
-                    const vertBottom = vertex(point[0] - normal[0], point[1] - normal[1]);
+                    const vertBottom = vertex(point[0] - normal[0], point[1] - normal[1], 0, vertexColor);
                     verticesBottom.unshift(vertBottom);
                     if (atLimit) {
                         break outer;

package/dist/simulation.js

@@ -1,7 +1,7 @@
 import { vec3 } from 'wgpu-matrix';
 import { SimulationElement } from './graphics.js';
 import { BUF_LEN } from './constants.js';
-import { Color, applyElementToScene, buildDepthTexture, buildProjectionMatrix, getOrthoMatrix, getTransformationMatrix, logger, transitionValues, vector2, vector3 } from './utils.js';
+import { Color, applyElementToScene, buildMultisampleTexture, buildProjectionMatrix, getOrthoMatrix, getTransformationMatrix, logger, transitionValues, vector2, vector3 } from './utils.js';
 const vertexSize = 44; // 4 * 10 + 1
 const colorOffset = 16; // 4 * 4
 const uvOffset = 32; // 4 * 8
@@ -227,10 +227,8 @@ export class Simulation {
             primitive: {
                 topology: 'triangle-list'
             },
-            depthStencil: {
-                depthWriteEnabled: true,
-                depthCompare: 'less',
-                format: 'depth24plus'
+            multisample: {
+                count: 4
             }
         });
         const uniformBufferSize = 4 * 16 + 4 * 16 + 4 * 2 + 8; // 4x4 matrix + 4x4 matrix + vec2<f32> + 8 bc 144 is cool
@@ -268,15 +266,9 @@ export class Simulation {
             orthoMatrix = getOrthoMatrix(this.camera.getScreenSize());
         };
         updateOrthoMatrix();
-        let depthTexture = buildDepthTexture(device, canvas.width, canvas.height);
+        let multisampleTexture = buildMultisampleTexture(device, ctx, canvas.width, canvas.height);
         const renderPassDescriptor = {
-            colorAttachments: [colorAttachment],
-            depthStencilAttachment: {
-                view: depthTexture.createView(),
-                depthClearValue: 1.0,
-                depthLoadOp: 'clear',
-                depthStoreOp: 'store'
-            }
+            colorAttachments: [colorAttachment]
         };
         // sub 10 to start with a reasonable gap between starting time and next frame time
         let prev = Date.now() - 10;
@@ -303,11 +295,12 @@ export class Simulation {
                 aspect = this.camera.getAspectRatio();
                 projectionMatrix = buildProjectionMatrix(aspect);
                 updateModelViewProjectionMatrix();
-                depthTexture = buildDepthTexture(device, screenSize[0], screenSize[1]);
-                renderPassDescriptor.depthStencilAttachment.view = depthTexture.createView();
+                multisampleTexture = buildMultisampleTexture(device, ctx, screenSize[0], screenSize[1]);
             }
             // @ts-ignore
-            renderPassDescriptor.colorAttachments[0].view = ctx.getCurrentTexture().createView();
+            renderPassDescriptor.colorAttachments[0].view = multisampleTexture.createView();
+            // @ts-ignore
+            renderPassDescriptor.colorAttachments[0].resolveTarget = ctx.getCurrentTexture().createView();
             if (this.camera.hasUpdated()) {
                 updateOrthoMatrix();
                 updateModelViewProjectionMatrix();

package/dist/utils.d.ts

@@ -51,7 +51,7 @@ export declare class Vertex {
 export declare const buildProjectionMatrix: (aspectRatio: number, zNear?: number, zFar?: number) => any;
 export declare const getTransformationMatrix: (pos: Vector3, rotation: Vector3, projectionMatrix: mat4) => Float32Array;
 export declare const getOrthoMatrix: (screenSize: [number, number]) => Float32Array;
-export declare const buildDepthTexture: (device: GPUDevice, width: number, height: number) => GPUTexture;
+export declare const buildMultisampleTexture: (device: GPUDevice, ctx: GPUCanvasContext, width: number, height: number) => GPUTexture;
 export declare const applyElementToScene: (scene: SimulationElement[], camera: Camera | null, el: SimulationElement) => void;
 declare class Logger {
     constructor();
@@ -90,4 +90,5 @@ export declare function color(r?: number, g?: number, b?: number, a?: number): C
 export declare function colorf(val: number, a?: number): Color;
 export declare function splinePoint2d(end: Vertex, control1: Vector2, control2: Vector2, detail?: number): SplinePoint2d;
 export declare function continuousSplinePoint2d(end: Vertex, control: Vector2, detail?: number): SplinePoint2d;
+export declare function interpolateColors(colors: Color[], t: number): Color;
 export {};

package/dist/utils.js

@@ -125,11 +125,12 @@ export const getTransformationMatrix = (pos, rotation, projectionMatrix) => {
 export const getOrthoMatrix = (screenSize) => {
     return mat4.ortho(0, screenSize[0], 0, screenSize[1], 0, 100);
 };
-export const buildDepthTexture = (device, width, height) => {
+export const buildMultisampleTexture = (device, ctx, width, height) => {
     return device.createTexture({
         size: [width, height],
-        format: 'depth24plus',
-        usage: GPUTextureUsage.RENDER_ATTACHMENT
+        format: ctx.getCurrentTexture().format,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT,
+        sampleCount: 4
     });
 };
 export const applyElementToScene = (scene, camera, el) => {
@@ -299,3 +300,26 @@ export function continuousSplinePoint2d(end, control, detail) {
     vec2.add(end.getPos(), control, control);
     return new SplinePoint2d(null, end, null, control, rawControls, detail);
 }
+export function interpolateColors(colors, t) {
+    if (colors.length === 0)
+        return color();
+    if (colors.length === 1)
+        return colors[0];
+    const colorInterval = 1 / colors.length;
+    let index = Math.floor(t / colorInterval);
+    if (index === colors.length)
+        index--;
+    const from = index === colors.length - 1 ? colors[index - 1] : colors[index];
+    const to = index === colors.length - 1 ? colors[index] : colors[index + 1];
+    const diff = to.diff(from);
+    diff.r *= t / (colorInterval * colors.length);
+    diff.g *= t / (colorInterval * colors.length);
+    diff.b *= t / (colorInterval * colors.length);
+    diff.a *= t / (colorInterval * colors.length);
+    const res = from.clone();
+    res.r += diff.r;
+    res.g += diff.g;
+    res.b += diff.b;
+    res.a += diff.a;
+    return res;
+}

package/package.json

@@ -5,7 +5,7 @@
   "types": "./dist/index.d.ts",
   "author": "Jackson Otto",
   "description": "A simple graphics library using WebGPU",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "exports": {
     ".": {
       "import": "./dist/index.js",