@woosh/meep-engine 3.9.0 → 3.11.0

package/src/shade/renderer/shader/chunk/color/xyz/chunk_rgb_to_xyz.js

@@ -1,21 +1,23 @@
-import { CodeChunk } from "../../../compiler/CodeChunk.js";
-
-/**
- * Transforms an RGB color in Rec.709 to CIE XYZ.
- * @type {CodeChunk}
- */
-export const chunk_rgb_to_xyz = CodeChunk.from(
-    //language=WGSL
-    `
-fn rgb_to_xyz(c: vec3<f32>) -> vec3<f32>{
-     const M = mat3x3(
-        0.4123907992659595, 0.3575843393838780, 0.1804807884018343,
-        0.2126390058715104, 0.7151686787677559, 0.0721923153607337,
-        0.0193308187155918, 0.1191947797946259, 0.9505321522496608
-    );
-    
-    return c * M;
-}
-    `
-);
-
+import { CodeChunk } from "../../../compiler/CodeChunk.js";
+
+/**
+ * Transforms an RGB color in Rec.709 to CIE XYZ.
+ * @type {CodeChunk}
+ */
+export const chunk_rgb_to_xyz = CodeChunk.from(
+    //language=WGSL
+    `
+fn rgb_to_xyz(c: vec3<f32>) -> vec3<f32>{
+    // the same matrix as core/color/xyz/rgb_to_xyz.js, digit for digit; the middle row is
+    // REC709_LUMINANCE_R/G/B from core/color/REC709_PRIMARIES.js
+     const M = mat3x3(
+        0.41239079926595948129, 0.35758433938387796373, 0.18048078840183428751,
+        0.21263900587151035754, 0.71516867876775592746, 0.07219231536073371500,
+        0.01933081871559185069, 0.11919477979462598791, 0.95053215224966058086
+    );
+    
+    return c * M;
+}
+    `
+);
+

package/src/view/elements/ColorPickerView.js

@@ -1,296 +1,296 @@
-import { GaugeView } from "../../../editor/view/ecs/components/color/GaugeView.js";
-import { drawCheckers } from "./drawCheckers.js";
-import { hsv2rgb } from "../../core/color/hsv/hsv2rgb.js";
-import { rgb2hsv } from "../../core/color/hsv/rgb2hsv.js";
-import Vector1 from "../../core/geom/Vector1.js";
-import GuiControl from "../controller/controls/GuiControl.js";
-
-
-export class ColorPickerView extends GuiControl {
-    constructor() {
-        super();
-
-        const self = this;
-
-        /**
-         *
-         * @param {CanvasRenderingContext2D} ctx
-         * @param {number} value
-         * @param {GaugeView} view
-         * @param {number} width
-         * @param {number} height
-         */
-        function drawSaturation(ctx, value, view, width, height) {
-            ctx.clearRect(0, 0, width, height);
-
-            const gradient = ctx.createLinearGradient(0, 0, width, 0);
-
-            const color = self.model.getValue();
-
-            if (color === null) {
-                gradient.addColorStop(0, `hsl(0, 0%, 50%)`);
-                gradient.addColorStop(1, `hsl(0, 100%, 50%)`);
-            } else {
-                const hsv = rgb2hsv(color.x, color.y, color.z);
-
-                gradient.addColorStop(0, `hsl(${hsv.h * 360}, 0%, ${hsv.v * 50}% )`);
-                gradient.addColorStop(1, `hsl(${hsv.h * 360}, 100%, ${hsv.v * 50}% )`);
-            }
-
-
-            ctx.fillStyle = gradient;
-
-            ctx.fillRect(0, 0, width, height);
-        }
-
-        /**
-         *
-         * @param {CanvasRenderingContext2D} ctx
-         * @param {number} value
-         * @param {GaugeView} view
-         * @param {number} width
-         * @param {number} height
-         */
-        function drawValue(ctx, value, view, width, height) {
-            ctx.clearRect(0, 0, width, height);
-
-            const gradient = ctx.createLinearGradient(0, 0, width, 0);
-
-            const color = self.model.getValue();
-
-            if (color === null) {
-                gradient.addColorStop(0, `hsl(0, 0%, 0%)`);
-                gradient.addColorStop(1, `hsl(0, 0%, 50%)`);
-            } else {
-                const hsv = rgb2hsv(color.x, color.y, color.z);
-
-                gradient.addColorStop(0, `hsl(${hsv.h * 360}, ${hsv.s * 100}%, 0%)`);
-                gradient.addColorStop(1, `hsl(${hsv.h * 360}, ${hsv.s * 100}%, 100%)`);
-            }
-
-
-            ctx.fillStyle = gradient;
-
-            ctx.fillRect(0, 0, width, height);
-        }
-
-        /**
-         *
-         * @param {CanvasRenderingContext2D} ctx
-         * @param {number} value
-         * @param {GaugeView} view
-         * @param {number} width
-         * @param {number} height
-         */
-        function drawHue(ctx, value, view, width, height) {
-            const gradient = ctx.createLinearGradient(0, 0, width, 0);
-
-            for (let i = 0; i < 360; i++) {
-                const offset = i / 360;
-                gradient.addColorStop(offset, `hsl(${i}, 100%, 50%)`);
-            }
-
-            ctx.clearRect(0, 0, width, height);
-
-            ctx.fillStyle = gradient;
-
-            ctx.fillRect(0, 0, width, height);
-        }
-
-        /**
-         *
-         * @param {CanvasRenderingContext2D} ctx
-         * @param {number} value
-         * @param {GaugeView} view
-         * @param {number} width
-         * @param {number} height
-         */
-        function drawAlpha(ctx, value, view, width, height) {
-            ctx.clearRect(0, 0, width, height);
-
-            drawCheckers(ctx, width, height, 4, 'white', '#999999');
-
-            const gradient = ctx.createLinearGradient(0, 0, width, 0);
-
-            const color = self.model.getValue();
-
-            if (color === null) {
-                gradient.addColorStop(0, `hsla(0, 0%, 50%, 0)`);
-                gradient.addColorStop(1, `hsla(0, 0%, 50%, 1)`);
-            } else {
-                const hsv = rgb2hsv(color.x, color.y, color.z);
-
-                gradient.addColorStop(0, `hsla(${hsv.h * 360}, ${hsv.s * 100}%, ${hsv.v * 50}%, 0)`);
-                gradient.addColorStop(1, `hsla(${hsv.h * 360}, ${hsv.s * 100}%, ${hsv.v * 50}%, 1)`);
-            }
-
-
-            ctx.fillStyle = gradient;
-
-            ctx.fillRect(0, 0, width, height);
-        }
-
-        this.dRoot.addClass('color-picker-control-view');
-
-        const vHue = new GaugeView({ name: 'H', draw: drawHue, classList: ['hue'] });
-        const vSaturation = new GaugeView({ name: 'S', draw: drawSaturation, classList: ['saturation'] });
-        const vValue = new GaugeView({ name: 'L', draw: drawValue, classList: ['lightness'] });
-        const vAlpha = new GaugeView({ name: 'A', draw: drawAlpha, classList: ['alpha'] });
-
-        const colorH = new Vector1();
-        const colorS = new Vector1();
-        const colorV = new Vector1();
-        const colorA = new Vector1();
-
-        vHue.model.set(colorH);
-        vSaturation.model.set(colorS);
-        vValue.model.set(colorV);
-        vAlpha.model.set(colorA);
-
-
-        this.addChild(vHue);
-        this.addChild(vSaturation);
-        this.addChild(vValue);
-        this.addChild(vAlpha);
-
-        const writeLocks = {
-            h: false,
-            s: false,
-            l: false,
-            a: false
-        };
-
-        colorH.onChanged.add(function (h) {
-            if (writeLocks.h) {
-                return;
-            }
-
-            const rgb = hsv2rgb(h, colorS.getValue(), colorV.getValue());
-
-            const color = self.model.getValue();
-
-            if (color !== null) {
-
-                writeLocks.h = true;
-
-                try {
-                    color.set(rgb.r / 255, rgb.g / 255, rgb.b / 255, color.w);
-                } finally {
-                    writeLocks.h = false;
-                }
-
-                //update other displays
-                vSaturation.render();
-                vValue.render();
-                vAlpha.render();
-            }
-        });
-
-        colorS.onChanged.add(function (s) {
-            if (writeLocks.s) {
-                return;
-            }
-
-            const rgb = hsv2rgb(colorH.getValue(), s, colorV.getValue());
-
-            const color = self.model.getValue();
-
-            if (color !== null) {
-
-                writeLocks.s = true;
-
-                try {
-                    color.set(rgb.r / 255, rgb.g / 255, rgb.b / 255, color.w);
-                } finally {
-                    writeLocks.s = false;
-                }
-
-                //update other displays
-                vValue.render();
-                vAlpha.render();
-            }
-        });
-
-        colorV.onChanged.add(function (v) {
-            if (writeLocks.v) {
-                return;
-            }
-
-            const rgb = hsv2rgb(colorH.getValue(), colorS.getValue(), v);
-
-            const color = self.model.getValue();
-
-            if (color !== null) {
-                writeLocks.v = true;
-
-                try {
-                    color.set(rgb.r / 255, rgb.g / 255, rgb.b / 255, color.w);
-                } finally {
-                    writeLocks.v = false;
-                }
-
-                //update other displays
-                vSaturation.render();
-                vAlpha.render();
-            }
-        });
-
-        colorA.onChanged.add(function (a) {
-            if (writeLocks.a) {
-                return;
-            }
-
-            const color = self.model.getValue();
-
-            if (color !== null) {
-                writeLocks.a = true;
-
-                try {
-                    color.set(color.x, color.y, color.z, a);
-                } finally {
-                    writeLocks.a = false;
-                }
-            }
-        });
-
-        function modelValueChanged(r, g, b, a) {
-            if (writeLocks.h || writeLocks.s || writeLocks.l || writeLocks.a) {
-                return;
-            }
-
-            const hsv = rgb2hsv(r, g, b);
-
-            //acquire locks
-            writeLocks.h = true;
-            writeLocks.s = true;
-            writeLocks.l = true;
-            writeLocks.a = true;
-
-            try {
-                vHue.model.getValue().set(hsv.h);
-                vSaturation.model.getValue().set(hsv.s);
-                vValue.model.getValue().set(hsv.v);
-                vAlpha.model.getValue().set(a);
-            } finally {
-                writeLocks.h = false;
-                writeLocks.s = false;
-                writeLocks.l = false;
-                writeLocks.a = false;
-            }
-        }
-
-        this.model.onChanged.add(function (v, _v) {
-
-            if (v !== null) {
-                modelValueChanged(v.x, v.y, v.z, v.w);
-                v.onChanged.add(modelValueChanged);
-            } else {
-                modelValueChanged(0, 0, 0, 0);
-            }
-
-            if (_v !== null) {
-                v.onChanged.remove(modelValueChanged);
-            }
-        });
-    }
-}
+import { GaugeView } from "../../../editor/view/ecs/components/color/GaugeView.js";
+import { drawCheckers } from "./drawCheckers.js";
+import { hsv_to_rgb_uint8 } from "../../core/color/hsv/hsv_to_rgb_uint8.js";
+import { rgb_to_hsv } from "../../core/color/hsv/rgb_to_hsv.js";
+import Vector1 from "../../core/geom/Vector1.js";
+import GuiControl from "../controller/controls/GuiControl.js";
+
+
+export class ColorPickerView extends GuiControl {
+    constructor() {
+        super();
+
+        const self = this;
+
+        /**
+         *
+         * @param {CanvasRenderingContext2D} ctx
+         * @param {number} value
+         * @param {GaugeView} view
+         * @param {number} width
+         * @param {number} height
+         */
+        function drawSaturation(ctx, value, view, width, height) {
+            ctx.clearRect(0, 0, width, height);
+
+            const gradient = ctx.createLinearGradient(0, 0, width, 0);
+
+            const color = self.model.getValue();
+
+            if (color === null) {
+                gradient.addColorStop(0, `hsl(0, 0%, 50%)`);
+                gradient.addColorStop(1, `hsl(0, 100%, 50%)`);
+            } else {
+                const hsv = rgb_to_hsv(color.x, color.y, color.z);
+
+                gradient.addColorStop(0, `hsl(${hsv.h * 360}, 0%, ${hsv.v * 50}% )`);
+                gradient.addColorStop(1, `hsl(${hsv.h * 360}, 100%, ${hsv.v * 50}% )`);
+            }
+
+
+            ctx.fillStyle = gradient;
+
+            ctx.fillRect(0, 0, width, height);
+        }
+
+        /**
+         *
+         * @param {CanvasRenderingContext2D} ctx
+         * @param {number} value
+         * @param {GaugeView} view
+         * @param {number} width
+         * @param {number} height
+         */
+        function drawValue(ctx, value, view, width, height) {
+            ctx.clearRect(0, 0, width, height);
+
+            const gradient = ctx.createLinearGradient(0, 0, width, 0);
+
+            const color = self.model.getValue();
+
+            if (color === null) {
+                gradient.addColorStop(0, `hsl(0, 0%, 0%)`);
+                gradient.addColorStop(1, `hsl(0, 0%, 50%)`);
+            } else {
+                const hsv = rgb_to_hsv(color.x, color.y, color.z);
+
+                gradient.addColorStop(0, `hsl(${hsv.h * 360}, ${hsv.s * 100}%, 0%)`);
+                gradient.addColorStop(1, `hsl(${hsv.h * 360}, ${hsv.s * 100}%, 100%)`);
+            }
+
+
+            ctx.fillStyle = gradient;
+
+            ctx.fillRect(0, 0, width, height);
+        }
+
+        /**
+         *
+         * @param {CanvasRenderingContext2D} ctx
+         * @param {number} value
+         * @param {GaugeView} view
+         * @param {number} width
+         * @param {number} height
+         */
+        function drawHue(ctx, value, view, width, height) {
+            const gradient = ctx.createLinearGradient(0, 0, width, 0);
+
+            for (let i = 0; i < 360; i++) {
+                const offset = i / 360;
+                gradient.addColorStop(offset, `hsl(${i}, 100%, 50%)`);
+            }
+
+            ctx.clearRect(0, 0, width, height);
+
+            ctx.fillStyle = gradient;
+
+            ctx.fillRect(0, 0, width, height);
+        }
+
+        /**
+         *
+         * @param {CanvasRenderingContext2D} ctx
+         * @param {number} value
+         * @param {GaugeView} view
+         * @param {number} width
+         * @param {number} height
+         */
+        function drawAlpha(ctx, value, view, width, height) {
+            ctx.clearRect(0, 0, width, height);
+
+            drawCheckers(ctx, width, height, 4, 'white', '#999999');
+
+            const gradient = ctx.createLinearGradient(0, 0, width, 0);
+
+            const color = self.model.getValue();
+
+            if (color === null) {
+                gradient.addColorStop(0, `hsla(0, 0%, 50%, 0)`);
+                gradient.addColorStop(1, `hsla(0, 0%, 50%, 1)`);
+            } else {
+                const hsv = rgb_to_hsv(color.x, color.y, color.z);
+
+                gradient.addColorStop(0, `hsla(${hsv.h * 360}, ${hsv.s * 100}%, ${hsv.v * 50}%, 0)`);
+                gradient.addColorStop(1, `hsla(${hsv.h * 360}, ${hsv.s * 100}%, ${hsv.v * 50}%, 1)`);
+            }
+
+
+            ctx.fillStyle = gradient;
+
+            ctx.fillRect(0, 0, width, height);
+        }
+
+        this.dRoot.addClass('color-picker-control-view');
+
+        const vHue = new GaugeView({ name: 'H', draw: drawHue, classList: ['hue'] });
+        const vSaturation = new GaugeView({ name: 'S', draw: drawSaturation, classList: ['saturation'] });
+        const vValue = new GaugeView({ name: 'L', draw: drawValue, classList: ['lightness'] });
+        const vAlpha = new GaugeView({ name: 'A', draw: drawAlpha, classList: ['alpha'] });
+
+        const colorH = new Vector1();
+        const colorS = new Vector1();
+        const colorV = new Vector1();
+        const colorA = new Vector1();
+
+        vHue.model.set(colorH);
+        vSaturation.model.set(colorS);
+        vValue.model.set(colorV);
+        vAlpha.model.set(colorA);
+
+
+        this.addChild(vHue);
+        this.addChild(vSaturation);
+        this.addChild(vValue);
+        this.addChild(vAlpha);
+
+        const writeLocks = {
+            h: false,
+            s: false,
+            l: false,
+            a: false
+        };
+
+        colorH.onChanged.add(function (h) {
+            if (writeLocks.h) {
+                return;
+            }
+
+            const rgb = hsv_to_rgb_uint8(h, colorS.getValue(), colorV.getValue());
+
+            const color = self.model.getValue();
+
+            if (color !== null) {
+
+                writeLocks.h = true;
+
+                try {
+                    color.set(rgb.r / 255, rgb.g / 255, rgb.b / 255, color.w);
+                } finally {
+                    writeLocks.h = false;
+                }
+
+                //update other displays
+                vSaturation.render();
+                vValue.render();
+                vAlpha.render();
+            }
+        });
+
+        colorS.onChanged.add(function (s) {
+            if (writeLocks.s) {
+                return;
+            }
+
+            const rgb = hsv_to_rgb_uint8(colorH.getValue(), s, colorV.getValue());
+
+            const color = self.model.getValue();
+
+            if (color !== null) {
+
+                writeLocks.s = true;
+
+                try {
+                    color.set(rgb.r / 255, rgb.g / 255, rgb.b / 255, color.w);
+                } finally {
+                    writeLocks.s = false;
+                }
+
+                //update other displays
+                vValue.render();
+                vAlpha.render();
+            }
+        });
+
+        colorV.onChanged.add(function (v) {
+            if (writeLocks.v) {
+                return;
+            }
+
+            const rgb = hsv_to_rgb_uint8(colorH.getValue(), colorS.getValue(), v);
+
+            const color = self.model.getValue();
+
+            if (color !== null) {
+                writeLocks.v = true;
+
+                try {
+                    color.set(rgb.r / 255, rgb.g / 255, rgb.b / 255, color.w);
+                } finally {
+                    writeLocks.v = false;
+                }
+
+                //update other displays
+                vSaturation.render();
+                vAlpha.render();
+            }
+        });
+
+        colorA.onChanged.add(function (a) {
+            if (writeLocks.a) {
+                return;
+            }
+
+            const color = self.model.getValue();
+
+            if (color !== null) {
+                writeLocks.a = true;
+
+                try {
+                    color.set(color.x, color.y, color.z, a);
+                } finally {
+                    writeLocks.a = false;
+                }
+            }
+        });
+
+        function modelValueChanged(r, g, b, a) {
+            if (writeLocks.h || writeLocks.s || writeLocks.l || writeLocks.a) {
+                return;
+            }
+
+            const hsv = rgb_to_hsv(r, g, b);
+
+            //acquire locks
+            writeLocks.h = true;
+            writeLocks.s = true;
+            writeLocks.l = true;
+            writeLocks.a = true;
+
+            try {
+                vHue.model.getValue().set(hsv.h);
+                vSaturation.model.getValue().set(hsv.s);
+                vValue.model.getValue().set(hsv.v);
+                vAlpha.model.getValue().set(a);
+            } finally {
+                writeLocks.h = false;
+                writeLocks.s = false;
+                writeLocks.l = false;
+                writeLocks.a = false;
+            }
+        }
+
+        this.model.onChanged.add(function (v, _v) {
+
+            if (v !== null) {
+                modelValueChanged(v.x, v.y, v.z, v.w);
+                v.onChanged.add(modelValueChanged);
+            } else {
+                modelValueChanged(0, 0, 0, 0);
+            }
+
+            if (_v !== null) {
+                v.onChanged.remove(modelValueChanged);
+            }
+        });
+    }
+}

package/src/avif/codec/dec/Readme.md

@@ -1,14 +0,0 @@
-# AVIF decoder
-
-- Source: <https://github.com/AOMediaCodec/libavif>
-- Version: v1.0.1
-
-## Example
-
-See `example.html`
-
-## API
-
-### `RawImage decode(std::string buffer)`
-
-Decodes the given avif buffer into raw RGBA. `RawImage` is a class with 3 fields: `buffer`, `width`, and `height`.