figureone 1.9.0 → 1.9.1

package/index.js

@@ -66649,13 +66649,31 @@ function composeFragShader() {
     // alpha controls how strongly that region is recolored (0 = leave the base
     // color unchanged). With one mask this is exactly four mixes and one extra
     // texture fetch; each additional mask adds one fetch and four mixes.
+    //
+    // Masks are uploaded with premultiplied alpha, so a region only carries full
+    // weight where the mask pixel is opaque. Author each mask pixel as one of:
+    //   keep base : [0, 0, 0, 0] (transparent)
+    //   region 0  : [1, 0, 0, 1] -> u_tint0   (r channel)
+    //   region 1  : [0, 1, 0, 1] -> u_tint1   (g channel)
+    //   region 2  : [0, 0, 1, 1] -> u_tint2   (b channel)
+    //   region 3  : [0, 0, 0, 1] -> u_tint3   (a channel, opaque black)
+    // With every painted region opaque, the alpha channel is 1 across all of them,
+    // so it can't act as an independent region on its own. The a-channel mix below
+    // gates on (1 - r - g - b) so region 3 is exactly the opaque-black pixels - the
+    // ones not already claimed by an r/g/b region. Regions 0-2 support partial
+    // weight by lowering their channel value (e.g. [0.5, 0, 0, 1]); region 3 is
+    // full-weight only, with slight antialiasing softness at its borders.
     src += '  vec4 base = texture2D(u_texture, v_texcoord);\n';
     src += '  vec3 col = base.rgb;\n';
     for (var _m = 0; _m < numMasks; _m += 1) {
       src += "  vec4 mask".concat(_m, " = texture2D(u_mask").concat(_m, ", v_texcoord);\n");
       for (var c = 0; c < CHANNELS_PER_MASK; c += 1) {
         var _t = _m * CHANNELS_PER_MASK + c;
-        src += "  col = mix(col, u_tint".concat(_t, ".rgb, mask").concat(_m, ".").concat(channels[c], " * u_tint").concat(_t, ".a);\n");
+        if (channels[c] === 'a') {
+          src += "  col = mix(col, u_tint".concat(_t, ".rgb, mask").concat(_m, ".a * (1.0 - clamp(mask").concat(_m, ".r + mask").concat(_m, ".g + mask").concat(_m, ".b, 0.0, 1.0)) * u_tint").concat(_t, ".a);\n");
+        } else {
+          src += "  col = mix(col, u_tint".concat(_t, ".rgb, mask").concat(_m, ".").concat(channels[c], " * u_tint").concat(_t, ".a);\n");
+        }
       }
     }
     src += '  gl_FragColor = vec4(col, base.a * u_color.a);\n';
@@ -82283,8 +82301,8 @@ var tools = {
  */
 
 var Fig = {
-  version: "1.9.0",
-  gitHash: "2e042f98b",
+  version: "1.9.1",
+  gitHash: "0adca1678",
   tools: tools,
   Figure: _js_figure_Figure__WEBPACK_IMPORTED_MODULE_5__["default"],
   Recorder: _js_figure_Recorder_Recorder__WEBPACK_IMPORTED_MODULE_7__.Recorder,

package/llms-full.txt

@@ -115,6 +115,8 @@ Path to figure element(s) within a collection. Supports multiple formats:
 | loadColor | TypeColor | `[0, 0, 1, 0.5]` | Color while loading |
 | onLoad | () => void | | Callback after load |
 
+A `texture` on the `gl` primitive can be recolored by region with one or more masks — see OBJ_TextureMask under OBJ_GenericGL.
+
 ### OBJ_FigurePrimitive (base for all primitives)
 
 | Property | Type | Default | Description |
@@ -365,12 +367,47 @@ Extends OBJ_Generic (without drawType).
 | attributes | OBJ_GLAttribute[] | | Shader attributes |
 | uniforms | OBJ_GLUniform[] | | Shader uniforms |
 | texture | OBJ_Texture | | Texture |
+| mask | OBJ_TextureMask | | Single mask to recolor regions of `texture` |
+| masks | OBJ_TextureMask[] | | Multiple masks (each adds 4 recolorable regions) |
+| tints | (TypeColor \| null)[] | | Recolor per region; mask `m` uses `tints[4m]`…`tints[4m+3]` for its r,g,b,a channels (`null` = leave region unchanged) |
 | dimension | `2` \| `3` | `2` | Coordinate dimensions |
 | light | `'directional'` \| `'point'` \| null | null | Lighting |
 | vertices | number[] \| object | | Vertex data |
 | colors | number[] \| object | | Per-vertex colors |
 | normals | number[] \| object | | Normal vectors |
 
+A texture can be recolored by region using one or more masks. A mask shares the base texture's coordinates (same dimensions, aligned to the base image); each of its r, g, b, a channels marks a region. Mask `m` is recolored by `tints[4m]` (r), `tints[4m + 1]` (g), `tints[4m + 2]` (b), `tints[4m + 3]` (a); unmasked pixels keep the base texture's color. A single mask costs one extra texture fetch and four mixes; each additional mask adds one fetch and four mixes.
+
+### OBJ_TextureMask
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| src | string | | URL of the mask image |
+| loadColor | TypeColor | `[0, 0, 0, 0]` | Color shown while the mask loads (transparent = nothing recolored until loaded) |
+
+```js
+// Recolor three regions of a texture with one mask. The mask image's red,
+// green and blue channels mark the regions tinted by tints 0, 1 and 2.
+figure.add({
+  make: 'gl',
+  vertices: [-0.8, -0.8, 0.8, -0.8, -0.8, 0.8, 0.8, -0.8, 0.8, 0.8, -0.8, 0.8],
+  texture: { src: './image.png', coords: [0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 0, 1] },
+  mask: { src: './mask.png' },
+  tints: [[1, 0, 0, 1], [0, 0.6, 0, 1], [0, 0, 1, 1]],
+});
+
+// Two masks: mask 0 uses tints 0-3, mask 1 uses tints 4-7.
+figure.add({
+  make: 'gl',
+  // ...vertices, texture...
+  masks: [{ src: './mask.png' }, { src: './mask1.png' }],
+  tints: [
+    [1, 0, 0, 1], [0, 0.6, 0, 1], [0, 0, 1, 1], null, // mask 0
+    [0.6, 0, 0.8, 1],                                 // mask 1
+  ],
+});
+```
+
 ### OBJ_Morph (`make: 'morph'`)
 
 Morphable shape with multiple point arrays that can be animated between.

package/llms.txt

@@ -97,6 +97,16 @@ figure.add({
   make: 'rectangle', width: 1.8, height: 1.2,
   texture: { src: 'image.jpg', mapTo: [-0.9, -0.6, 1.8, 1.2] },
 });
+
+// Recolor regions of a texture with masks (gl primitive). Each mask's r,g,b,a
+// channels mark regions; mask m is tinted by tints[4m]..tints[4m+3].
+figure.add({
+  make: 'gl',
+  vertices: [-0.8, -0.8, 0.8, -0.8, -0.8, 0.8, 0.8, -0.8, 0.8, 0.8, -0.8, 0.8],
+  texture: { src: 'image.png', coords: [0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 0, 1] },
+  masks: [{ src: 'mask.png' }, { src: 'mask1.png' }],
+  tints: [[1, 0, 0, 1], [0, 0.6, 0, 1], [0, 0, 1, 1], null, [0.6, 0, 0.8, 1]],
+});
 ```
 
 ### Element Properties

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figureone",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "Draw, animate and interact with shapes, text, plots and equations in Javascript. Create interactive slide shows, and interactive videos.",
   "main": "index.js",
   "types": "types/index.d.ts",