@rednaxela101/cubing 0.63.9 → 0.63.10

package/dist/lib/cubing/chunks/{twisty-dynamic-3d-MF76FSDA.js → twisty-dynamic-3d-3MGVD3TG.js}

@@ -3,7 +3,7 @@ import {
   bulk3DCode,
   haveStartedSharingRenderers,
   hintFaceletStyles
-} from "./chunk-F765ZFNM.js";
+} from "./chunk-IOHGEWB2.js";
 import "./chunk-3ODTF4HE.js";
 import {
   cube3x3x3,
@@ -15,20 +15,20 @@ import {
 } from "./chunk-XPDJUSZ7.js";
 
 // src/cubing/twisty/views/3D/puzzles/Cube3D.ts
-import { BackSide, DoubleSide, FrontSide } from "three/src/constants.js";
-import { BufferAttribute as BufferAttribute2 } from "three/src/core/BufferAttribute.js";
-import { BufferGeometry as BufferGeometry2 } from "three/src/core/BufferGeometry.js";
+import { BackSide, DoubleSide, FrontSide as FrontSide2 } from "three/src/constants.js";
+import { BufferAttribute as BufferAttribute3 } from "three/src/core/BufferAttribute.js";
+import { BufferGeometry as BufferGeometry3 } from "three/src/core/BufferGeometry.js";
 import { Object3D } from "three/src/core/Object3D.js";
 import { BoxGeometry } from "three/src/geometries/BoxGeometry.js";
 import { TextureLoader } from "three/src/loaders/TextureLoader.js";
-import { MeshBasicMaterial as MeshBasicMaterial2 } from "three/src/materials/MeshBasicMaterial.js";
+import { MeshBasicMaterial as MeshBasicMaterial3 } from "three/src/materials/MeshBasicMaterial.js";
 import { Color as Color2 } from "three/src/math/Color.js";
 import { Matrix4 } from "three/src/math/Matrix4.js";
 import { Quaternion } from "three/src/math/Quaternion.js";
 import { Vector2 } from "three/src/math/Vector2.js";
-import { Vector3 as Vector33 } from "three/src/math/Vector3.js";
+import { Vector3 as Vector34 } from "three/src/math/Vector3.js";
 import { Group } from "three/src/objects/Group.js";
-import { Mesh } from "three/src/objects/Mesh.js";
+import { Mesh as Mesh2 } from "three/src/objects/Mesh.js";
 
 // src/cubing/twisty/controllers/easing.ts
 function smootherStep(x) {
@@ -288,34 +288,240 @@ var hintMaskStyles = {
   mystery: { color: 15911883, opacity: 0.5 }
 };
 
+// src/cubing/twisty/views/3D/puzzles/PuzzleLogo.ts
+import { FrontSide } from "three/src/constants.js";
+import { BufferAttribute as BufferAttribute2 } from "three/src/core/BufferAttribute.js";
+import { BufferGeometry as BufferGeometry2 } from "three/src/core/BufferGeometry.js";
+import { MeshBasicMaterial as MeshBasicMaterial2 } from "three/src/materials/MeshBasicMaterial.js";
+import { Vector3 as Vector33 } from "three/src/math/Vector3.js";
+import { Mesh } from "three/src/objects/Mesh.js";
+var LOGO_FIT = 0.8;
+var EPSILON = 1e-9;
+function logoSurface(polygon, normal2, elevation) {
+  if (polygon.length < 3) {
+    return null;
+  }
+  const center = new Vector33();
+  for (const vertex of polygon) {
+    center.addScaledVector(vertex, 1 / polygon.length);
+  }
+  const u = new Vector33().subVectors(polygon[1], polygon[0]).addScaledVector(
+    normal2,
+    -new Vector33().subVectors(polygon[1], polygon[0]).dot(normal2)
+  );
+  if (u.lengthSq() < EPSILON) {
+    return null;
+  }
+  u.normalize();
+  const v = new Vector33().crossVectors(normal2, u).normalize();
+  let half = Number.POSITIVE_INFINITY;
+  for (let i = 0; i < polygon.length; i++) {
+    const edge = new Vector33().subVectors(
+      polygon[(i + 1) % polygon.length],
+      polygon[i]
+    );
+    const outward = new Vector33().crossVectors(edge, normal2);
+    if (outward.lengthSq() < EPSILON) {
+      continue;
+    }
+    outward.normalize();
+    const distance = Math.abs(
+      new Vector33().subVectors(polygon[i], center).dot(outward)
+    );
+    const reach = Math.abs(outward.dot(u)) + Math.abs(outward.dot(v));
+    if (reach > EPSILON) {
+      half = Math.min(half, distance / reach);
+    }
+  }
+  if (!Number.isFinite(half) || half <= 0) {
+    return null;
+  }
+  half *= LOGO_FIT;
+  return {
+    center: center.addScaledVector(normal2, elevation),
+    u: u.multiplyScalar(half),
+    v: v.multiplyScalar(half)
+  };
+}
+function rectangleLogoSurface(center, u, v) {
+  const half = LOGO_FIT * Math.min(u.length(), v.length());
+  return {
+    center,
+    u: u.clone().setLength(half),
+    v: v.clone().setLength(half)
+  };
+}
+function surfaceMatrix(surface, into) {
+  return into.makeBasis(
+    surface.u,
+    surface.v,
+    new Vector33().crossVectors(surface.u, surface.v).normalize()
+  ).setPosition(surface.center);
+}
+var cachedLogoGeometry;
+function logoGeometry() {
+  if (cachedLogoGeometry) {
+    return cachedLogoGeometry;
+  }
+  const geometry = new BufferGeometry2();
+  geometry.setAttribute(
+    "position",
+    new BufferAttribute2(
+      // biome-ignore format: one vertex per line is less readable than one triangle per line.
+      new Float32Array([
+        -1,
+        -1,
+        0,
+        1,
+        -1,
+        0,
+        1,
+        1,
+        0,
+        -1,
+        -1,
+        0,
+        1,
+        1,
+        0,
+        -1,
+        1,
+        0
+      ]),
+      3
+    )
+  );
+  geometry.setAttribute(
+    "uv",
+    // biome-ignore format: see above.
+    new BufferAttribute2(new Float32Array([
+      0,
+      0,
+      1,
+      0,
+      1,
+      1,
+      0,
+      0,
+      1,
+      1,
+      0,
+      1
+    ]), 2)
+  );
+  cachedLogoGeometry = geometry;
+  return geometry;
+}
+function newLogoMesh(texture) {
+  const mesh = new Mesh(
+    logoGeometry(),
+    new MeshBasicMaterial2({
+      map: texture,
+      side: FrontSide,
+      transparent: true,
+      // The logo floats just above the plastic, so it never has to compete with
+      // it for depth, and writing depth would let its transparent corners
+      // punch a hole in anything drawn after it.
+      depthWrite: false
+    })
+  );
+  mesh.matrixAutoUpdate = false;
+  mesh.renderOrder = 1;
+  return mesh;
+}
+var logoSpots = {
+  // Every piece of a 2×2×2 is a corner, so this is just "a piece of the white
+  // face".
+  "2x2x2": { face: "U", corner: true, toward: [1, 1, 1] },
+  // `Cube3D` draws the 3×3×3 by default and places its own logo; this is for
+  // `visualization="PG3D"`.
+  "3x3x3": { face: "U" },
+  "4x4x4": { face: "U", corner: true, toward: [1, 1, 1] },
+  "5x5x5": { face: "U", corner: true, toward: [1, 1, 1] },
+  "6x6x6": { face: "U", corner: true, toward: [1, 1, 1] },
+  "7x7x7": { face: "U", corner: true, toward: [1, 1, 1] },
+  megaminx: { face: "U" },
+  // A pyraminx has no center piece: the middle of a face is an edge's facelet.
+  pyraminx: { face: "D" },
+  skewb: { face: "U" }
+  // No logo on the FTO or the clock.
+};
+function centroid(coords) {
+  const center = new Vector33();
+  const vertices = coords.length / 3;
+  for (let i = 0; i < coords.length; i += 3) {
+    center.x += coords[i] / vertices;
+    center.y += coords[i + 1] / vertices;
+    center.z += coords[i + 2] / vertices;
+  }
+  return center;
+}
+function logoFaceletAddress(puzzleID, stickerDat) {
+  const spot = logoSpots[puzzleID];
+  if (!spot) {
+    return null;
+  }
+  const faceIdx = stickerDat.faces.findIndex((face2) => face2.name === spot.face);
+  if (faceIdx === -1) {
+    return null;
+  }
+  const faceCenter = centroid(stickerDat.faces[faceIdx].coords);
+  const faceletCounts = /* @__PURE__ */ new Map();
+  for (const sticker of stickerDat.stickers) {
+    if (sticker.isDup) {
+      continue;
+    }
+    const key = `${sticker.orbit}/${sticker.ord}`;
+    faceletCounts.set(key, (faceletCounts.get(key) ?? 0) + 1);
+  }
+  const toward = spot.toward ? new Vector33(...spot.toward) : null;
+  let best = null;
+  let bestScore = Number.NEGATIVE_INFINITY;
+  for (const sticker of stickerDat.stickers) {
+    if (sticker.isDup || sticker.face !== faceIdx) {
+      continue;
+    }
+    if (spot.corner && faceletCounts.get(`${sticker.orbit}/${sticker.ord}`) !== 3) {
+      continue;
+    }
+    const center = centroid(sticker.coords);
+    const score = toward ? center.dot(toward) : -center.distanceTo(faceCenter);
+    if (score > bestScore) {
+      bestScore = score;
+      best = { orbit: sticker.orbit, ord: sticker.ord, ori: sticker.ori };
+    }
+  }
+  return best;
+}
+
 // src/cubing/twisty/views/3D/puzzles/Cube3D.ts
 var svgLoader = new TextureLoader();
 function newHintMaterial(style) {
-  return new MeshBasicMaterial2({
+  return new MeshBasicMaterial3({
     color: new Color2(style.color).convertLinearToSRGB(),
     side: BackSide,
     transparent: true,
     opacity: style.opacity
   });
 }
-var ignoredMaterial = new MeshBasicMaterial2({
+var ignoredMaterial = new MeshBasicMaterial3({
   color: new Color2(bodyMaskColors.ignored).convertLinearToSRGB()
 });
 var ignoredMaterialHint = newHintMaterial(hintMaskStyles.ignored);
-var invisibleMaterial = new MeshBasicMaterial2({
+var invisibleMaterial = new MeshBasicMaterial3({
   visible: false
 });
-var orientedMaterial = new MeshBasicMaterial2({
+var orientedMaterial = new MeshBasicMaterial3({
   color: bodyMaskColors.oriented
 });
 var orientedMaterialHint = newHintMaterial(hintMaskStyles.oriented);
-var experimentalOriented2Material = new MeshBasicMaterial2({
+var experimentalOriented2Material = new MeshBasicMaterial3({
   color: bodyMaskColors.experimentalOriented2
 });
 var experimentalOriented2MaterialHint = newHintMaterial(
   hintMaskStyles.experimentalOriented2
 );
-var mysteryMaterial = new MeshBasicMaterial2({
+var mysteryMaterial = new MeshBasicMaterial3({
   color: bodyMaskColors.mystery
 });
 var mysterMaterialHint = newHintMaterial(hintMaskStyles.mystery);
@@ -339,14 +545,14 @@ var AxisInfo = class {
     const colorLinearSRGB = new Color2(color).convertLinearToSRGB();
     const dimColorLinearSRGB = new Color2(dimColor).convertLinearToSRGB();
     this.stickerMaterial = {
-      regular: new MeshBasicMaterial2({
+      regular: new MeshBasicMaterial3({
         color: colorLinearSRGB,
-        side: FrontSide
+        side: FrontSide2
         // TODO: set to `DoubleSide` when hint facelets are disabled.
       }),
-      dim: new MeshBasicMaterial2({
+      dim: new MeshBasicMaterial3({
         color: dimColorLinearSRGB,
-        side: FrontSide
+        side: FrontSide2
         // TODO: set to `DoubleSide` when hint facelets are disabled.
       }),
       oriented: orientedMaterial,
@@ -437,6 +643,8 @@ var cubieDimensions = {
    */
   bodyVertexCut: 0.45
 };
+var LOGO_PIECE = { orbit: "CENTERS", ord: 0, faceletIdx: 0 };
+var LOGO_ELEVATION = 0.01;
 var EXPERIMENTAL_PICTURE_CUBE_HINT_ELEVATION = 2;
 var cube3DOptionsDefaults = {
   showMainStickers: true,
@@ -457,12 +665,12 @@ function getFaceletScale(options) {
   }
   return options.faceletScale;
 }
-var blackMesh = new MeshBasicMaterial2({
+var blackMesh = new MeshBasicMaterial3({
   color: 0,
   opacity: 1,
   transparent: true
 });
-var blackTranslucentMesh = new MeshBasicMaterial2({
+var blackTranslucentMesh = new MeshBasicMaterial3({
   color: 0,
   opacity: 0.3,
   transparent: true
@@ -485,18 +693,18 @@ function t(v, t4) {
   return new Quaternion().setFromAxisAngle(v, TAU * t4 / 4);
 }
 var r = {
-  O: new Vector33(0, 0, 0),
-  U: new Vector33(0, -1, 0),
-  L: new Vector33(1, 0, 0),
-  F: new Vector33(0, 0, -1),
-  R: new Vector33(-1, 0, 0),
-  B: new Vector33(0, 0, 1),
-  D: new Vector33(0, 1, 0)
+  O: new Vector34(0, 0, 0),
+  U: new Vector34(0, -1, 0),
+  L: new Vector34(1, 0, 0),
+  F: new Vector34(0, 0, -1),
+  R: new Vector34(-1, 0, 0),
+  B: new Vector34(0, 0, 1),
+  D: new Vector34(0, 1, 0)
 };
 var firstPiecePosition = {
-  EDGES: new Vector33(0, 1, 1),
-  CORNERS: new Vector33(1, 1, 1),
-  CENTERS: new Vector33(0, 1, 0)
+  EDGES: new Vector34(0, 1, 1),
+  CORNERS: new Vector34(1, 1, 1),
+  CENTERS: new Vector34(0, 1, 0)
 };
 var orientationRotation = {
   EDGES: [0, 1].map(
@@ -668,11 +876,11 @@ function sharedCubieFoundationGeometry() {
   ));
 }
 function newStickerGeometry() {
-  const r2 = new BufferGeometry2();
+  const r2 = new BufferGeometry3();
   const half = 0.5;
   r2.setAttribute(
     "position",
-    new BufferAttribute2(
+    new BufferAttribute3(
       new Float32Array([
         half,
         half,
@@ -698,7 +906,7 @@ function newStickerGeometry() {
   );
   r2.setAttribute(
     "uv",
-    new BufferAttribute2(
+    new BufferAttribute3(
       new Float32Array([
         1,
         1,
@@ -977,7 +1185,9 @@ var Cube3D = class extends Object3D {
       this.setHintFaceletsElevation(hintFaceletsElevation);
     }
   }
+  #lastPosition = null;
   onPositionChange(p) {
+    this.#lastPosition = p;
     const reid333 = p.pattern;
     for (const orbit in pieceDefs) {
       const pieces = pieceDefs[orbit];
@@ -1007,6 +1217,7 @@ var Cube3D = class extends Object3D {
         }
       }
     }
+    this.#placeLogo(p);
     this.scheduleRenderCallback();
   }
   // TODO: Always create (but sometimes hide parts) so we can show them later,
@@ -1015,7 +1226,7 @@ var Cube3D = class extends Object3D {
     const cubieFaceletInfo = [];
     orbitFacelets.push(cubieFaceletInfo);
     const cubie = new Group();
-    const body = this.#stickerless() ? new Mesh(
+    const body = this.#stickerless() ? new Mesh2(
       cubieBodyGeometry(
         orbit,
         cubieStickerOrder.slice(0, piece.stickerFaces.length)
@@ -1064,7 +1275,7 @@ var Cube3D = class extends Object3D {
               axesInfo[piece.stickerFaces[i]],
               hint
             );
-            mesh.material = new MeshBasicMaterial2({
+            mesh.material = new MeshBasicMaterial3({
               map: texture,
               side: hint ? BackSide : DoubleSide,
               transparent: true
@@ -1093,7 +1304,7 @@ var Cube3D = class extends Object3D {
             }
             mesh.geometry.setAttribute(
               "uv",
-              new BufferAttribute2(
+              new BufferAttribute3(
                 new Float32Array([
                   v3.x,
                   v3.y,
@@ -1127,14 +1338,14 @@ var Cube3D = class extends Object3D {
   // TODO: Support creating only the outward-facing parts?
   createCubieFoundation() {
     const box = sharedCubieFoundationGeometry();
-    return new Mesh(
+    return new Mesh2(
       box,
       this.options.experimentalStickeringMask?.specialBehaviour === "picture" ? blackMesh : blackTranslucentMesh
     );
   }
   createSticker(posAxisInfo, materialAxisInfo, isHint) {
     const geo = this.options.experimentalStickeringMask?.specialBehaviour === "picture" ? newStickerGeometry() : isHint ? this.#sharedHintStickerGeometry() : sharedStickerGeometry();
-    const stickerMesh = new Mesh(
+    const stickerMesh = new Mesh2(
       geo,
       isHint ? materialAxisInfo.hintStickerMaterial.regular : materialAxisInfo.stickerMaterial.regular
     );
@@ -1161,6 +1372,82 @@ var Cube3D = class extends Object3D {
     stickerMesh.translateZ(elevation - 1);
     return stickerMesh;
   }
+  #logoMesh = null;
+  /** The logo's placement on its facelet, in the piece's own frame. */
+  #logoSurface = null;
+  #logoPieceMatrix = new Matrix4();
+  /**
+   * Prints a logo on the white center, or takes it off again when passed
+   * `null`.
+   *
+   * The image is stretched onto a square sized to the piece, so its own
+   * proportions don't matter. It rides the piece, so a rotation of the whole
+   * cube carries it to whichever face the white center ends up on.
+   */
+  experimentalSetLogo(texture) {
+    if (this.#logoMesh) {
+      this.#logoMesh.removeFromParent();
+      this.#logoMesh.material.dispose();
+      this.#logoMesh = null;
+      this.#logoSurface = null;
+    }
+    if (texture) {
+      const normal2 = axesInfo[cubieStickerOrder[LOGO_PIECE.faceletIdx]].vector;
+      const u = new Vector34(normal2.y, normal2.z, normal2.x);
+      const v = new Vector34().crossVectors(normal2, u);
+      const surface = rectangleLogoSurface(
+        normal2.clone().multiplyScalar(this.#faceletDistance() + LOGO_ELEVATION),
+        // Half-axes of the facelet, which is one cubie wide.
+        u.multiplyScalar(0.5),
+        v.multiplyScalar(0.5)
+      );
+      this.#logoMesh = newLogoMesh(texture);
+      this.#logoSurface = surfaceMatrix(surface, new Matrix4());
+      this.add(this.#logoMesh);
+      if (this.#lastPosition) {
+        this.#placeLogo(this.#lastPosition);
+      }
+    }
+    this.scheduleRenderCallback?.();
+  }
+  /**
+   * Puts the logo where its piece is.
+   *
+   * Almost all of this is the piece's own matrix, but not quite: the 3×3×3's
+   * `KPuzzle` does not track how a center is turned (`orientationMod` is 1),
+   * so a `U` ends in the state it started in as far as the white center is
+   * concerned. Riding that animation would spin the logo through the turn and
+   * snap it back at the end, so a move that leaves the piece in its own slot
+   * leaves the logo alone. A move that carries the piece elsewhere — a cube
+   * rotation — still takes the logo with it.
+   */
+  #placeLogo(p) {
+    const mesh = this.#logoMesh;
+    if (!mesh || !this.#logoSurface) {
+      return;
+    }
+    const { orbit, ord } = LOGO_PIECE;
+    const orbitPattern = p.pattern.patternData[orbit];
+    const slot = orbitPattern.pieces.indexOf(ord);
+    if (slot === -1) {
+      mesh.visible = false;
+      return;
+    }
+    mesh.visible = true;
+    const untracked = orbitPattern.orientationMod?.[slot] === 1;
+    const staysPut = untracked && p.movesInProgress.every(
+      (moveProgress) => this.kpuzzle.moveToTransformation(
+        moveProgress.move.modified({ amount: 1 })
+      ).transformationData[orbit].permutation[slot] === slot
+    );
+    const pieceMatrix = staysPut ? this.#logoPieceMatrix.copy(pieceDefs[orbit][slot].matrix).multiply(orientationRotation[orbit][orbitPattern.orientation[slot]]) : this.pieces[orbit][ord].matrix;
+    mesh.matrix.multiplyMatrices(pieceMatrix, this.#logoSurface);
+    mesh.matrixWorldNeedsUpdate = true;
+  }
+  /** How far a facelet's surface sits from the center of its cubie. */
+  #faceletDistance() {
+    return this.#stickerless() ? cubieBodyDimensions.halfWidth * cubieBodyDimensions.pieceScale : cubieDimensions.stickerElevation;
+  }
   /** @deprecated */
   experimentalSetFoundationOpacity(opacity) {
     if (this.experimentalFoundationMeshes.length === 0) {
@@ -1205,10 +1492,10 @@ var Cube3D = class extends Object3D {
 };
 
 // src/cubing/twisty/views/3D/puzzles/CubePieces.ts
-import { BufferAttribute as BufferAttribute3 } from "three/src/core/BufferAttribute.js";
-import { BufferGeometry as BufferGeometry3 } from "three/src/core/BufferGeometry.js";
+import { BufferAttribute as BufferAttribute4 } from "three/src/core/BufferAttribute.js";
+import { BufferGeometry as BufferGeometry4 } from "three/src/core/BufferGeometry.js";
 import { Matrix4 as Matrix42 } from "three/src/math/Matrix4.js";
-import { Vector3 as Vector34 } from "three/src/math/Vector3.js";
+import { Vector3 as Vector35 } from "three/src/math/Vector3.js";
 
 // src/cubing/twisty/views/3D/puzzles/StickerlessPlan.ts
 var HINT_FACELET_ELEVATION = 0.5;
@@ -1308,6 +1595,7 @@ function paintInternal(colors, ranges) {
 // src/cubing/twisty/views/3D/puzzles/CubePieces.ts
 var PG_SCALE = 0.5;
 var FACE_COUNT = 6;
+var LOGO_ELEVATION2 = 0.01;
 function faceIdxForNormal(x, y, z) {
   for (let faceIdx = 0; faceIdx < FACE_COUNT; faceIdx++) {
     const { vector } = cubeFaceStyles[faceIdx];
@@ -1344,20 +1632,20 @@ function cubeLayout(stickerDat) {
   const faceColors = new Array(FACE_COUNT);
   const cubiesByPiece = /* @__PURE__ */ new Map();
   const cubies = [];
-  const centroid = [0, 0, 0];
+  const centroid2 = [0, 0, 0];
   for (const sticker of stickers) {
     const { coords } = sticker;
     for (let axis = 0; axis < 3; axis++) {
-      centroid[axis] = (coords[axis] + coords[axis + 3] + coords[axis + 6] + coords[axis + 9]) / 4;
+      centroid2[axis] = (coords[axis] + coords[axis + 3] + coords[axis + 6] + coords[axis + 9]) / 4;
     }
     let normalAxis = 0;
     for (let axis = 1; axis < 3; axis++) {
-      if (Math.abs(centroid[axis]) > Math.abs(centroid[normalAxis])) {
+      if (Math.abs(centroid2[axis]) > Math.abs(centroid2[normalAxis])) {
         normalAxis = axis;
       }
     }
-    const outward = Math.sign(centroid[normalAxis]);
-    const center = new Vector34();
+    const outward = Math.sign(centroid2[normalAxis]);
+    const center = new Vector35();
     for (let axis = 0; axis < 3; axis++) {
       let expected;
       if (axis === normalAxis) {
@@ -1365,7 +1653,7 @@ function cubeLayout(stickerDat) {
         center.setComponent(axis, outward * (halfExtent - slotWidth / 2));
       } else {
         const slot = Math.round(
-          (centroid[axis] + halfExtent) / slotWidth - 0.5
+          (centroid2[axis] + halfExtent) / slotWidth - 0.5
         );
         if (slot < 0 || slot >= layers) {
           return null;
@@ -1373,7 +1661,7 @@ function cubeLayout(stickerDat) {
         expected = -halfExtent + (slot + 0.5) * slotWidth;
         center.setComponent(axis, expected);
       }
-      if (Math.abs(centroid[axis] - expected) > epsilon) {
+      if (Math.abs(centroid2[axis] - expected) > epsilon) {
         return null;
       }
       const halfSpan = axis === normalAxis ? 0 : slotWidth / 2;
@@ -1451,13 +1739,23 @@ function newCubieShape(outwardFaces, slotWidth) {
   const hintVertexRanges = /* @__PURE__ */ new Map();
   const hintHalfWidth = HINT_FACELET_SCALE * slotWidth / 2;
   const hintDistance = slotWidth / 2 + HINT_FACELET_ELEVATION;
-  const u = new Vector34();
-  const v = new Vector34();
-  const corner = new Vector34();
+  const logoSurfaces = /* @__PURE__ */ new Map();
+  const faceDistance = cubieBodyDimensions.halfWidth * cubieBodyDimensions.pieceScale * slotWidth;
+  const u = new Vector35();
+  const v = new Vector35();
+  const corner = new Vector35();
   for (const faceIdx of outwardFaces) {
     const normal2 = cubeFaceStyles[faceIdx].vector;
     u.set(normal2.y, normal2.z, normal2.x);
     v.crossVectors(normal2, u);
+    logoSurfaces.set(
+      faceIdx,
+      rectangleLogoSurface(
+        normal2.clone().multiplyScalar(faceDistance + LOGO_ELEVATION2 * slotWidth),
+        u.clone().multiplyScalar(slotWidth / 2),
+        v.clone().multiplyScalar(slotWidth / 2)
+      )
+    );
     const start = hintPositions.length / 3;
     for (const [su, sv] of [
       [-1, -1],
@@ -1473,21 +1771,22 @@ function newCubieShape(outwardFaces, slotWidth) {
   }
   body.dispose();
   return {
-    bodyPosition: new BufferAttribute3(bodyPositions.slice(), 3),
-    bodyIndex: new BufferAttribute3(new Uint16Array(bodyIndices), 1),
+    bodyPosition: new BufferAttribute4(bodyPositions.slice(), 3),
+    bodyIndex: new BufferAttribute4(new Uint16Array(bodyIndices), 1),
     bodyVertexCount: bodyPositions.length / 3,
-    hintPosition: new BufferAttribute3(new Float32Array(hintPositions), 3),
-    hintIndex: new BufferAttribute3(new Uint16Array(hintIndices), 1),
+    hintPosition: new BufferAttribute4(new Float32Array(hintPositions), 3),
+    hintIndex: new BufferAttribute4(new Uint16Array(hintIndices), 1),
     hintVertexCount: hintPositions.length / 3,
     faceVertexRanges,
-    hintVertexRanges
+    hintVertexRanges,
+    logoSurfaces
   };
 }
 function newPieceMesh(position, index, vertexCount) {
-  const geometry = new BufferGeometry3();
+  const geometry = new BufferGeometry4();
   geometry.setAttribute("position", position);
   geometry.setIndex(index);
-  const colors = new BufferAttribute3(new Uint8Array(4 * vertexCount), 4, true);
+  const colors = new BufferAttribute4(new Uint8Array(4 * vertexCount), 4, true);
   geometry.setAttribute("color", colors);
   return { geometry, colors };
 }
@@ -1505,7 +1804,10 @@ function newCubiePiece(cubie, shape) {
     // A duplicate shares its square with the real facelet, which is the one
     // that gets painted.
     body: sticker.isDup ? [] : [shape.faceVertexRanges[sticker.faceIdx]],
-    hint: sticker.isDup ? [] : [shape.hintVertexRanges.get(sticker.faceIdx)].filter(Boolean)
+    hint: sticker.isDup ? [] : [shape.hintVertexRanges.get(sticker.faceIdx)].filter(Boolean),
+    // Set for a duplicate too: it is the same square, seen through another of
+    // the piece's facelets.
+    logo: shape.logoSurfaces.get(sticker.faceIdx) ?? null
   }));
   return {
     orbit: cubie.orbit,
@@ -1542,23 +1844,23 @@ function cubePuzzlePlan(stickerDat) {
 }
 
 // src/cubing/twisty/views/3D/puzzles/PG3D.ts
-import { DoubleSide as DoubleSide2, FrontSide as FrontSide2 } from "three/src/constants.js";
-import { BufferAttribute as BufferAttribute4 } from "three/src/core/BufferAttribute.js";
-import { BufferGeometry as BufferGeometry4 } from "three/src/core/BufferGeometry.js";
+import { DoubleSide as DoubleSide2, FrontSide as FrontSide3 } from "three/src/constants.js";
+import { BufferAttribute as BufferAttribute5 } from "three/src/core/BufferAttribute.js";
+import { BufferGeometry as BufferGeometry5 } from "three/src/core/BufferGeometry.js";
 import { Object3D as Object3D2 } from "three/src/core/Object3D.js";
-import { MeshBasicMaterial as MeshBasicMaterial3 } from "three/src/materials/MeshBasicMaterial.js";
+import { MeshBasicMaterial as MeshBasicMaterial4 } from "three/src/materials/MeshBasicMaterial.js";
 import { Color as Color3 } from "three/src/math/Color.js";
-import { Vector3 as Vector35 } from "three/src/math/Vector3.js";
+import { Vector3 as Vector36 } from "three/src/math/Vector3.js";
 import { Group as Group2 } from "three/src/objects/Group.js";
-import { Mesh as Mesh2 } from "three/src/objects/Mesh.js";
-var foundationMaterial = new MeshBasicMaterial3({
+import { Mesh as Mesh3 } from "three/src/objects/Mesh.js";
+var foundationMaterial = new MeshBasicMaterial4({
   side: DoubleSide2,
   color: 0
 });
-var invisMaterial = new MeshBasicMaterial3({
+var invisMaterial = new MeshBasicMaterial4({
   visible: false
 });
-var basicStickerMaterial = new MeshBasicMaterial3({
+var basicStickerMaterial = new MeshBasicMaterial4({
   vertexColors: true
 });
 function dist(coords, a, b) {
@@ -1693,9 +1995,9 @@ var Filler = class {
     }
   }
   setAttributes(geo) {
-    geo.setAttribute("position", new BufferAttribute4(this.vertices, 3));
+    geo.setAttribute("position", new BufferAttribute5(this.vertices, 3));
     const sa2 = this.colors.subarray(0, 9 * this.sz);
-    geo.setAttribute("color", new BufferAttribute4(sa2, 3, true));
+    geo.setAttribute("color", new BufferAttribute5(sa2, 3, true));
   }
   makeGroups(geo) {
     geo.clearGroups();
@@ -1921,9 +2223,9 @@ var HitPlaneDef = class {
       filler.addUncolored(coords, g);
       filler.addUncolored(coords, g + 1);
     }
-    this.geo = new BufferGeometry4();
+    this.geo = new BufferGeometry5();
     filler.setAttributes(this.geo);
-    const obj = new Mesh2(this.geo, invisMaterial);
+    const obj = new Mesh3(this.geo, invisMaterial);
     obj.userData["quantumMove"] = stickerDat.notationMapper.notationToExternal(
       new Move(hitface.name)
     );
@@ -1936,7 +2238,7 @@ var AxisInfo2 = class {
   order;
   constructor(axisDat) {
     const vec = axisDat.coordinates;
-    this.axis = new Vector35(vec[0], vec[1], vec[2]);
+    this.axis = new Vector36(vec[0], vec[1], vec[2]);
     this.order = axisDat.order;
   }
 };
@@ -1953,7 +2255,7 @@ var PG3D = class extends Object3D2 {
     if (stickerDat.stickers.length === 0) {
       throw Error("Reuse of stickerdat from pg; please don't do that.");
     }
-    this.hintMaterial = new MeshBasicMaterial3({
+    this.hintMaterial = new MeshBasicMaterial4({
       vertexColors: true,
       transparent: true,
       opacity: 0.5
@@ -2041,13 +2343,13 @@ var PG3D = class extends Object3D2 {
         this.stickers[orbit][ori][ord].addFoundation(filler, sticker, black);
       }
     }
-    const fixedGeo = new BufferGeometry4();
+    const fixedGeo = new BufferGeometry5();
     filler.setAttributes(fixedGeo);
     filler.makeGroups(fixedGeo);
-    const obj = new Mesh2(fixedGeo, this.materialArray1);
+    const obj = new Mesh3(fixedGeo, this.materialArray1);
     obj.scale.set(PG_SCALE2, PG_SCALE2, PG_SCALE2);
     this.add(obj);
-    const obj2 = new Mesh2(fixedGeo, this.materialArray2);
+    const obj2 = new Mesh3(fixedGeo, this.materialArray2);
     obj2.scale.set(PG_SCALE2, PG_SCALE2, PG_SCALE2);
     this.add(obj2);
     const hitfaces = this.stickerDat.faces;
@@ -2138,7 +2440,7 @@ var PG3D = class extends Object3D2 {
       }
     }
     for (const axis of this.stickerDat.axis) {
-      const product = point.dot(new Vector35(...axis.coordinates));
+      const product = point.dot(new Vector36(...axis.coordinates));
       if (product > closestMoveDotProduct) {
         const modified = this.stickerDat.notationMapper.notationToExternal(
           modify(axis.quantumMove)
@@ -2372,7 +2674,7 @@ var PG3D = class extends Object3D2 {
     } else if (v === 1) {
       this.hintMaterial = this.stickerMaterial;
     } else {
-      this.hintMaterial = new MeshBasicMaterial3({
+      this.hintMaterial = new MeshBasicMaterial4({
         vertexColors: true,
         transparent: true,
         opacity: v
@@ -2420,7 +2722,7 @@ var PG3D = class extends Object3D2 {
     }
     filler.uvs.copyWithin(6 * filler.sz, 0, 6 * filler.sz);
     const sa1 = filler.uvs.subarray(0, 6 * filler.sz);
-    this.fixedGeo.setAttribute("uv", new BufferAttribute4(sa1, 2, true));
+    this.fixedGeo.setAttribute("uv", new BufferAttribute5(sa1, 2, true));
   }
   experimentalUpdateTexture(enabled, stickerTexture, hintTexture) {
     if (!stickerTexture) {
@@ -2435,9 +2737,9 @@ var PG3D = class extends Object3D2 {
       this.stickerMaterialDisposable = false;
     }
     if (enabled) {
-      this.stickerMaterial = new MeshBasicMaterial3({
+      this.stickerMaterial = new MeshBasicMaterial4({
         map: stickerTexture,
-        side: FrontSide2,
+        side: FrontSide3,
         transparent: false
       });
       this.stickerMaterialDisposable = true;
@@ -2449,9 +2751,9 @@ var PG3D = class extends Object3D2 {
       this.hintMaterialDisposable = false;
     }
     if (enabled) {
-      this.hintMaterial = new MeshBasicMaterial3({
+      this.hintMaterial = new MeshBasicMaterial4({
         map: hintTexture,
-        side: FrontSide2,
+        side: FrontSide3,
         transparent: true
       });
       this.hintMaterialDisposable = true;
@@ -2471,21 +2773,21 @@ var PG3D = class extends Object3D2 {
 };
 
 // src/cubing/twisty/views/3D/puzzles/SolidPieces.ts
-import { BufferAttribute as BufferAttribute5 } from "three/src/core/BufferAttribute.js";
-import { BufferGeometry as BufferGeometry5 } from "three/src/core/BufferGeometry.js";
+import { BufferAttribute as BufferAttribute6 } from "three/src/core/BufferAttribute.js";
+import { BufferGeometry as BufferGeometry6 } from "three/src/core/BufferGeometry.js";
 import { Color as Color4 } from "three/src/math/Color.js";
 import { Matrix4 as Matrix43 } from "three/src/math/Matrix4.js";
-import { Vector3 as Vector37 } from "three/src/math/Vector3.js";
+import { Vector3 as Vector38 } from "three/src/math/Vector3.js";
 
 // src/cubing/twisty/views/3D/puzzles/SolidPieceGeometry.ts
-import { Vector3 as Vector36 } from "three/src/math/Vector3.js";
+import { Vector3 as Vector37 } from "three/src/math/Vector3.js";
 var SOLID_PIECE_GROOVE = 0.018;
 var SOLID_PIECE_CHAMFER = 5e-3;
 var BOX_PLANE = -1;
 function boxFacet(planeIdx, normal2, size) {
-  const reference = Math.abs(normal2.y) > 0.5 ? new Vector36(0, 0, 1) : new Vector36(0, 1, 0);
-  const u = new Vector36().crossVectors(reference, normal2).normalize();
-  const v = new Vector36().crossVectors(normal2, u);
+  const reference = Math.abs(normal2.y) > 0.5 ? new Vector37(0, 0, 1) : new Vector37(0, 1, 0);
+  const u = new Vector37().crossVectors(reference, normal2).normalize();
+  const v = new Vector37().crossVectors(normal2, u);
   const center = normal2.clone().multiplyScalar(size);
   return {
     plane: planeIdx,
@@ -2500,23 +2802,23 @@ function boxFacet(planeIdx, normal2, size) {
   };
 }
 var BOX_NORMALS = [
-  new Vector36(1, 0, 0),
-  new Vector36(-1, 0, 0),
-  new Vector36(0, 1, 0),
-  new Vector36(0, -1, 0),
-  new Vector36(0, 0, 1),
-  new Vector36(0, 0, -1)
+  new Vector37(1, 0, 0),
+  new Vector37(-1, 0, 0),
+  new Vector37(0, 1, 0),
+  new Vector37(0, -1, 0),
+  new Vector37(0, 0, 1),
+  new Vector37(0, 0, -1)
 ];
 function orderInPlane(points, normal2) {
-  const centroid = new Vector36();
+  const centroid2 = new Vector37();
   for (const point of points) {
-    centroid.addScaledVector(point, 1 / points.length);
+    centroid2.addScaledVector(point, 1 / points.length);
   }
-  const reference = new Vector36().subVectors(points[0], centroid).normalize();
-  const other = new Vector36().crossVectors(normal2, reference);
-  const offset = new Vector36();
+  const reference = new Vector37().subVectors(points[0], centroid2).normalize();
+  const other = new Vector37().crossVectors(normal2, reference);
+  const offset = new Vector37();
   return points.map((point) => {
-    offset.subVectors(point, centroid);
+    offset.subVectors(point, centroid2);
     return {
       point,
       angle: Math.atan2(offset.dot(other), offset.dot(reference))
@@ -2618,7 +2920,7 @@ function chamferPlanes(facets, planes, chamfer, epsilon) {
       continue;
     }
     seen.add(pairKey);
-    const sum = new Vector36().addVectors(
+    const sum = new Vector37().addVectors(
       planes[colored].normal,
       planes[internal].normal
     );
@@ -2681,9 +2983,10 @@ function solidPieceGeometry(planes, options) {
 
 // src/cubing/twisty/views/3D/puzzles/SolidPieces.ts
 var PG_SCALE3 = 0.5;
-var EPSILON = 1e-6;
+var EPSILON2 = 1e-6;
+var LOGO_ELEVATION3 = 0.01;
 function vertexAt(sticker, index) {
-  return new Vector37(
+  return new Vector38(
     sticker.coords[3 * index],
     sticker.coords[3 * index + 1],
     sticker.coords[3 * index + 2]
@@ -2697,11 +3000,11 @@ function polygonOf(sticker) {
   return vertices;
 }
 function outwardNormal(polygon) {
-  const normal2 = new Vector37().crossVectors(
-    new Vector37().subVectors(polygon[1], polygon[0]),
-    new Vector37().subVectors(polygon[2], polygon[0])
+  const normal2 = new Vector38().crossVectors(
+    new Vector38().subVectors(polygon[1], polygon[0]),
+    new Vector38().subVectors(polygon[2], polygon[0])
   );
-  if (normal2.length() < EPSILON) {
+  if (normal2.length() < EPSILON2) {
     return null;
   }
   normal2.normalize();
@@ -2742,13 +3045,13 @@ function faceStyles(faceNormals, faceColors) {
   return styles;
 }
 function hintPolygon(polygon, normal2) {
-  const centroid = new Vector37();
+  const centroid2 = new Vector38();
   for (const vertex of polygon) {
-    centroid.addScaledVector(vertex, 1 / polygon.length);
+    centroid2.addScaledVector(vertex, 1 / polygon.length);
   }
   return polygon.map(
-    (vertex) => centroid.clone().addScaledVector(
-      new Vector37().subVectors(vertex, centroid),
+    (vertex) => centroid2.clone().addScaledVector(
+      new Vector38().subVectors(vertex, centroid2),
       HINT_FACELET_SCALE
     ).addScaledVector(normal2, HINT_FACELET_ELEVATION)
   );
@@ -2825,7 +3128,7 @@ function solidPuzzlePlan(stickerDat) {
     }
     faceletCount++;
     for (let i = 1; i < polygon.length - 1; i++) {
-      faceletArea += new Vector37().subVectors(polygon[i], polygon[0]).cross(new Vector37().subVectors(polygon[i + 1], polygon[0])).length() / 2;
+      faceletArea += new Vector38().subVectors(polygon[i], polygon[0]).cross(new Vector38().subVectors(polygon[i + 1], polygon[0])).length() / 2;
     }
     piece.stickers.push({ sticker, polygon });
     for (let i = 0; i < polygon.length; i++) {
@@ -2852,7 +3155,7 @@ function solidPuzzlePlan(stickerDat) {
   const cuts = cutPlanes(
     order,
     edges,
-    stickerDat.axis.map((axis) => new Vector37(...axis.coordinates).normalize()),
+    stickerDat.axis.map((axis) => new Vector38(...axis.coordinates).normalize()),
     quantum
   );
   if (!cuts) {
@@ -2946,7 +3249,7 @@ function newSolidPiece(piece, cuts, sizes) {
   }
   const planes = [];
   const planeOfSticker = /* @__PURE__ */ new Map();
-  const interior = new Vector37();
+  const interior = new Vector38();
   for (const { polygon } of piece.stickers) {
     for (const vertex of polygon) {
       interior.addScaledVector(
@@ -3046,18 +3349,31 @@ function newSolidPiece(piece, cuts, sizes) {
   const body = newPieceMesh2(solid.positions);
   const hint = hintPositions.length > 0 ? newPieceMesh2(new Float32Array(hintPositions)) : null;
   paintInternal(body.colors, solid.internalRanges);
+  const logoByFace = /* @__PURE__ */ new Map();
+  for (const { sticker, polygon } of piece.stickers) {
+    logoByFace.set(
+      sticker.face,
+      logoSurface(
+        polygon,
+        outwardNormal(polygon),
+        LOGO_ELEVATION3 * sizes.featureScale
+      )
+    );
+  }
   const facelets = piece.stickers.map(({ sticker }) => ({
     ori: sticker.ori,
     faceStyle: sticker.face,
     body: solid.ranges[planeOfSticker.get(sticker)],
-    hint: [hintRanges.get(sticker)]
+    hint: [hintRanges.get(sticker)],
+    logo: logoByFace.get(sticker.face) ?? null
   }));
   for (const sticker of piece.duplicates) {
     facelets.push({
       ori: sticker.ori,
       faceStyle: sticker.face,
       body: [],
-      hint: []
+      hint: [],
+      logo: logoByFace.get(sticker.face) ?? null
     });
   }
   return {
@@ -3071,9 +3387,9 @@ function newSolidPiece(piece, cuts, sizes) {
   };
 }
 function newPieceMesh2(positions) {
-  const geometry = new BufferGeometry5();
-  geometry.setAttribute("position", new BufferAttribute5(positions, 3));
-  const colors = new BufferAttribute5(
+  const geometry = new BufferGeometry6();
+  geometry.setAttribute("position", new BufferAttribute6(positions, 3));
+  const colors = new BufferAttribute6(
     new Uint8Array(4 * positions.length / 3),
     4,
     true
@@ -3084,15 +3400,15 @@ function newPieceMesh2(positions) {
 
 // src/cubing/twisty/views/3D/puzzles/Square1_3D.ts
 import { DoubleSide as DoubleSide3 } from "three/src/constants.js";
-import { BufferAttribute as BufferAttribute6 } from "three/src/core/BufferAttribute.js";
-import { BufferGeometry as BufferGeometry6 } from "three/src/core/BufferGeometry.js";
+import { BufferAttribute as BufferAttribute7 } from "three/src/core/BufferAttribute.js";
+import { BufferGeometry as BufferGeometry7 } from "three/src/core/BufferGeometry.js";
 import { Object3D as Object3D3 } from "three/src/core/Object3D.js";
-import { MeshBasicMaterial as MeshBasicMaterial4 } from "three/src/materials/MeshBasicMaterial.js";
+import { MeshBasicMaterial as MeshBasicMaterial5 } from "three/src/materials/MeshBasicMaterial.js";
 import { Color as Color5 } from "three/src/math/Color.js";
 import { Quaternion as Quaternion2 } from "three/src/math/Quaternion.js";
-import { Vector3 as Vector38 } from "three/src/math/Vector3.js";
+import { Vector3 as Vector39 } from "three/src/math/Vector3.js";
 import { Group as Group3 } from "three/src/objects/Group.js";
-import { Mesh as Mesh3 } from "three/src/objects/Mesh.js";
+import { Mesh as Mesh4 } from "three/src/objects/Mesh.js";
 var DEGREE = TAU / 360;
 var SLOT_ANGLE_DEGREES = 30;
 var WEDGES_PER_LAYER = 12;
@@ -3107,8 +3423,8 @@ var RING_COLORS = [2254591, 16750848, 65280, 16711680];
 var FRAME_OFFSET_DEGREES = 180;
 var BODY_COLOR = 1118481;
 var MIRROR = -1;
-var Y_AXIS = new Vector38(0, 1, 0);
-var SLICE_AXIS = new Vector38(
+var Y_AXIS = new Vector39(0, 1, 0);
+var SLICE_AXIS = new Vector39(
   MIRROR * Math.sin(15 * DEGREE),
   0,
   Math.cos(15 * DEGREE)
@@ -3125,7 +3441,7 @@ function slotQuaternion(slot) {
   );
   if (slot >= WEDGES_PER_LAYER) {
     quaternion.multiply(
-      new Quaternion2().setFromAxisAngle(new Vector38(0, 0, 1), TAU / 2)
+      new Quaternion2().setFromAxisAngle(new Vector39(0, 0, 1), TAU / 2)
     );
   }
   return quaternion;
@@ -3214,15 +3530,15 @@ function prismStickerSpecs(spec) {
   const specs = [];
   if (topColor !== null) {
     specs.push({
-      corners: polygon.map(([x, z]) => new Vector38(x, yTop, z)),
-      normal: new Vector38(0, 1, 0),
+      corners: polygon.map(([x, z]) => new Vector39(x, yTop, z)),
+      normal: new Vector39(0, 1, 0),
       color: topColor
     });
   }
   if (bottomColor !== null) {
     specs.push({
-      corners: polygon.map(([x, z]) => new Vector38(x, yBottom, z)),
-      normal: new Vector38(0, -1, 0),
+      corners: polygon.map(([x, z]) => new Vector39(x, yBottom, z)),
+      normal: new Vector39(0, -1, 0),
       color: bottomColor
     });
   }
@@ -3239,17 +3555,17 @@ function prismStickerSpecs(spec) {
     }
     const [x0, z0] = polygon[i];
     const [x1, z1] = polygon[(i + 1) % polygon.length];
-    const normal2 = new Vector38(z1 - z0, 0, -(x1 - x0)).normalize();
+    const normal2 = new Vector39(z1 - z0, 0, -(x1 - x0)).normalize();
     const outward = normal2.x * ((x0 + x1) / 2 - centroidX) + normal2.z * ((z0 + z1) / 2 - centroidZ);
     if (outward < 0) {
       normal2.negate();
     }
     specs.push({
       corners: [
-        new Vector38(x0, yBottom, z0),
-        new Vector38(x1, yBottom, z1),
-        new Vector38(x1, yTop, z1),
-        new Vector38(x0, yTop, z0)
+        new Vector39(x0, yBottom, z0),
+        new Vector39(x1, yBottom, z1),
+        new Vector39(x1, yTop, z1),
+        new Vector39(x0, yTop, z0)
       ],
       normal: normal2,
       color
@@ -3258,7 +3574,7 @@ function prismStickerSpecs(spec) {
   return specs;
 }
 function stickerPositions(spec, faceletScale) {
-  const center = new Vector38();
+  const center = new Vector39();
   for (const corner of spec.corners) {
     center.addScaledVector(corner, 1 / spec.corners.length);
   }
@@ -3287,9 +3603,9 @@ var PUZZLE_RADIUS = CUBE_HALF_EDGE * Math.SQRT2;
 function prismPlanes(spec) {
   const { polygon, sideColors } = spec;
   const planes = [
-    { normal: new Vector38(0, 1, 0), offset: spec.yTop, color: spec.topColor },
+    { normal: new Vector39(0, 1, 0), offset: spec.yTop, color: spec.topColor },
     {
-      normal: new Vector38(0, -1, 0),
+      normal: new Vector39(0, -1, 0),
       offset: -spec.yBottom,
       color: spec.bottomColor
     }
@@ -3303,7 +3619,7 @@ function prismPlanes(spec) {
   for (let i = 0; i < polygon.length; i++) {
     const [x0, z0] = polygon[i];
     const [x1, z1] = polygon[(i + 1) % polygon.length];
-    const normal2 = new Vector38(z1 - z0, 0, -(x1 - x0)).normalize();
+    const normal2 = new Vector39(z1 - z0, 0, -(x1 - x0)).normalize();
     if (normal2.x * (x0 - centroidX) + normal2.z * (z0 - centroidZ) < 0) {
       normal2.negate();
     }
@@ -3343,12 +3659,12 @@ function stickerlessPieceGeometry(spec) {
       paint(piece.ranges[i], color);
     }
   }
-  const geometry = new BufferGeometry6();
-  geometry.setAttribute("position", new BufferAttribute6(piece.positions, 3));
-  geometry.setAttribute("color", new BufferAttribute6(colors, 4, true));
+  const geometry = new BufferGeometry7();
+  geometry.setAttribute("position", new BufferAttribute7(piece.positions, 3));
+  geometry.setAttribute("color", new BufferAttribute7(colors, 4, true));
   return geometry;
 }
-var bodyMaterial = new MeshBasicMaterial4({
+var bodyMaterial = new MeshBasicMaterial5({
   color: new Color5(BODY_COLOR).convertLinearToSRGB(),
   side: DoubleSide3
 });
@@ -3360,7 +3676,7 @@ var stickerMaterialCache = /* @__PURE__ */ new Map();
 function stickerMaterial(color) {
   let material = stickerMaterialCache.get(color);
   if (!material) {
-    material = new MeshBasicMaterial4({
+    material = new MeshBasicMaterial5({
       color: new Color5(color).convertLinearToSRGB(),
       side: DoubleSide3
     });
@@ -3375,28 +3691,28 @@ var Square1Piece = class extends Group3 {
   constructor(spec, faceletScale, stickerless) {
     super();
     if (stickerless) {
-      this.body = new Mesh3(
+      this.body = new Mesh4(
         stickerlessPieceGeometry(spec),
         stickerlessMaterial()
       );
       this.add(this.body);
       return;
     }
-    const bodyGeometry = new BufferGeometry6();
+    const bodyGeometry = new BufferGeometry7();
     bodyGeometry.setAttribute(
       "position",
-      new BufferAttribute6(prismBodyPositions(spec), 3)
+      new BufferAttribute7(prismBodyPositions(spec), 3)
     );
-    this.body = new Mesh3(bodyGeometry, bodyMaterial);
+    this.body = new Mesh4(bodyGeometry, bodyMaterial);
     this.add(this.body);
     this.#stickerSpecs = prismStickerSpecs(spec);
     for (const stickerSpec of this.#stickerSpecs) {
-      const geometry = new BufferGeometry6();
+      const geometry = new BufferGeometry7();
       geometry.setAttribute(
         "position",
-        new BufferAttribute6(stickerPositions(stickerSpec, faceletScale), 3)
+        new BufferAttribute7(stickerPositions(stickerSpec, faceletScale), 3)
       );
-      const mesh = new Mesh3(geometry, stickerMaterial(stickerSpec.color));
+      const mesh = new Mesh4(geometry, stickerMaterial(stickerSpec.color));
       this.#stickerMeshes.push(mesh);
       this.add(mesh);
     }
@@ -3406,7 +3722,7 @@ var Square1Piece = class extends Group3 {
       const geometry = this.#stickerMeshes[i].geometry;
       geometry.setAttribute(
         "position",
-        new BufferAttribute6(
+        new BufferAttribute7(
           stickerPositions(this.#stickerSpecs[i], faceletScale),
           3
         )
@@ -3461,6 +3777,38 @@ function equatorPrismSpec(homePiece) {
     ]
   };
 }
+var LOGO_EQUATOR_PIECE = 0;
+var LOGO_ELEVATION4 = 2 * STICKER_ELEVATION;
+function equatorLogoSurface(spec) {
+  const { polygon, yBottom, yTop, sideColors } = spec;
+  let best = null;
+  let bestWidth = 0;
+  for (let i = 0; i < polygon.length; i++) {
+    if (sideColors[i] === null || sideColors[i] === void 0) {
+      continue;
+    }
+    const [x0, z0] = polygon[i];
+    const [x1, z1] = polygon[(i + 1) % polygon.length];
+    const width = Math.hypot(x1 - x0, z1 - z0);
+    if (width <= bestWidth) {
+      continue;
+    }
+    const normal2 = new Vector39(z1 - z0, 0, -(x1 - x0)).normalize();
+    const u = new Vector39(x1 - x0, 0, z1 - z0).multiplyScalar(0.5);
+    const v = new Vector39(0, (yTop - yBottom) / 2, 0);
+    if (new Vector39().crossVectors(u, v).dot(normal2) < 0) {
+      u.negate();
+    }
+    const center = new Vector39(
+      (x0 + x1) / 2,
+      (yBottom + yTop) / 2,
+      (z0 + z1) / 2
+    ).addScaledVector(normal2, LOGO_ELEVATION4);
+    bestWidth = width;
+    best = rectangleLogoSurface(center, u, v);
+  }
+  return best;
+}
 function ringColorAt(phiDegrees) {
   const faceIndex = Math.round(phiDegrees / 90);
   return RING_COLORS[(faceIndex % 4 + 4) % 4];
@@ -3617,6 +3965,31 @@ var Square1_3D = class extends Object3D3 {
   }
   setStickeringMask(_stickeringMask) {
   }
+  #logoMesh = null;
+  /**
+   * Prints a logo on the equator block, or takes it off again when passed
+   * `null`.
+   *
+   * The image is stretched onto a square sized to the face, so its own
+   * proportions don't matter. It is a child of the piece, so it turns and flips
+   * with the equator.
+   */
+  experimentalSetLogo(texture) {
+    if (this.#logoMesh) {
+      this.#logoMesh.removeFromParent();
+      this.#logoMesh.material.dispose();
+      this.#logoMesh = null;
+    }
+    if (texture) {
+      const surface = equatorLogoSurface(equatorPrismSpec(LOGO_EQUATOR_PIECE));
+      if (surface) {
+        this.#logoMesh = newLogoMesh(texture);
+        surfaceMatrix(surface, this.#logoMesh.matrix);
+        this.#equatorPieces[LOGO_EQUATOR_PIECE].add(this.#logoMesh);
+      }
+    }
+    this.scheduleRenderCallback?.();
+  }
   experimentalUpdateOptions(options) {
     let changed = false;
     if (typeof options.showFoundation === "boolean") {
@@ -3651,15 +4024,15 @@ var Square1_3D = class extends Object3D3 {
 
 // src/cubing/twisty/views/3D/puzzles/Stickerless3D.ts
 import { BackSide as BackSide2 } from "three/src/constants.js";
-import { BufferAttribute as BufferAttribute7 } from "three/src/core/BufferAttribute.js";
-import { BufferGeometry as BufferGeometry7 } from "three/src/core/BufferGeometry.js";
+import { BufferAttribute as BufferAttribute8 } from "three/src/core/BufferAttribute.js";
+import { BufferGeometry as BufferGeometry8 } from "three/src/core/BufferGeometry.js";
 import { Object3D as Object3D4 } from "three/src/core/Object3D.js";
-import { MeshBasicMaterial as MeshBasicMaterial5 } from "three/src/materials/MeshBasicMaterial.js";
+import { MeshBasicMaterial as MeshBasicMaterial6 } from "three/src/materials/MeshBasicMaterial.js";
 import { Matrix4 as Matrix44 } from "three/src/math/Matrix4.js";
-import { Vector3 as Vector39 } from "three/src/math/Vector3.js";
+import { Vector3 as Vector310 } from "three/src/math/Vector3.js";
 import { BatchedMesh } from "three/src/objects/BatchedMesh.js";
-import { Mesh as Mesh4 } from "three/src/objects/Mesh.js";
-var invisibleMaterial2 = new MeshBasicMaterial5({ visible: false });
+import { Mesh as Mesh5 } from "three/src/objects/Mesh.js";
+var invisibleMaterial2 = new MeshBasicMaterial6({ visible: false });
 function newBatch(meshes, material) {
   let vertices = 0;
   let indices = 0;
@@ -3684,7 +4057,8 @@ var Stickerless3D = class extends Object3D4 {
     this.kpuzzle = kpuzzle;
     this.stickerDat = stickerDat;
     this.plan = plan;
-    this.#hintMaterial = new MeshBasicMaterial5({
+    this.#logoFacelet = options.logoFacelet ?? null;
+    this.#hintMaterial = new MeshBasicMaterial6({
       vertexColors: true,
       transparent: true,
       // Hint facelets show the faces turned away from the camera, so they are
@@ -3694,7 +4068,7 @@ var Stickerless3D = class extends Object3D4 {
     this.#bodyMaterial = newVertexColorBodyMaterial();
     for (const axis of stickerDat.axis) {
       this.#axesInfo[axis.quantumMove.family] = {
-        axis: new Vector39(...axis.coordinates),
+        axis: new Vector310(...axis.coordinates),
         order: axis.order
       };
     }
@@ -3758,6 +4132,11 @@ var Stickerless3D = class extends Object3D4 {
   #dirtyColors = /* @__PURE__ */ new Map();
   #lastPosition = null;
   #pendingStickeringUpdate = false;
+  /** The facelet a logo is printed on, and where it currently shows. */
+  #logoFacelet = null;
+  #logoMesh = null;
+  #logoSlot = null;
+  #logoSurfaceMatrix = new Matrix44();
   #addPiece(plan) {
     const bodyInstance = addToBatch(this.#bodyBatch, plan.body, plan.home);
     const hintInstance = plan.hint && this.#hintBatch ? addToBatch(this.#hintBatch, plan.hint, plan.home) : -1;
@@ -3782,7 +4161,8 @@ var Stickerless3D = class extends Object3D4 {
         hint: hintInstance === -1 ? [] : shift(facelet.hint, hintInstance.vertexStart),
         appearanceKey: -1,
         mask: "regular",
-        hintMask: "regular"
+        hintMask: "regular",
+        logo: facelet.logo
       };
     }
   }
@@ -3807,15 +4187,94 @@ var Stickerless3D = class extends Object3D4 {
         }
       }
     }
-    const geometry = new BufferGeometry7();
-    geometry.setAttribute("position", new BufferAttribute7(positions, 3));
-    const mesh = new Mesh4(geometry, invisibleMaterial2);
+    const geometry = new BufferGeometry8();
+    geometry.setAttribute("position", new BufferAttribute8(positions, 3));
+    const mesh = new Mesh5(geometry, invisibleMaterial2);
     mesh.userData["quantumMove"] = this.stickerDat.notationMapper.notationToExternal(new Move(face2.name));
     mesh.scale.setScalar(0.99);
     this.add(mesh);
     this.#controlTargets.push(mesh);
   }
+  /**
+   * Prints a logo on the piece this puzzle keeps one on, or takes it off again
+   * when passed `null`.
+   *
+   * The image is stretched onto the square {@link PuzzlePlan} sized for that
+   * facelet, so its own proportions don't matter. It follows the piece: the
+   * logo is drawn wherever the piece currently is, including part-way through a
+   * move. The one thing it does not follow is a piece turning in place — a
+   * megaminx or skewb center whose facelets are all one square — which leaves
+   * the logo upright rather than rotating it with the plastic.
+   */
+  experimentalSetLogo(texture) {
+    if (!texture || !this.#logoFacelet) {
+      this.#disposeLogo();
+      this.scheduleRenderCallback();
+      return;
+    }
+    if (this.#logoMesh) {
+      const material = this.#logoMesh.material;
+      material.map = texture;
+      material.needsUpdate = true;
+    } else {
+      this.#logoMesh = newLogoMesh(texture);
+      this.add(this.#logoMesh);
+    }
+    this.#updateLogoSlot();
+    this.#placeLogo();
+    this.scheduleRenderCallback();
+  }
+  #disposeLogo() {
+    if (!this.#logoMesh) {
+      return;
+    }
+    this.remove(this.#logoMesh);
+    this.#logoMesh.material.dispose();
+    this.#logoMesh = null;
+    this.#logoSlot = null;
+  }
+  /** Which slot is showing the logo's facelet, as of the last position. */
+  #updateLogoSlot() {
+    this.#logoSlot = null;
+    const address = this.#logoFacelet;
+    const pattern = this.#lastPosition?.pattern;
+    if (!address || !pattern) {
+      return;
+    }
+    const orbitFacelets = this.#facelets[address.orbit];
+    const orbitPattern = pattern.patternData[address.orbit];
+    if (!orbitFacelets || !orbitPattern) {
+      return;
+    }
+    const numOrientations = orbitFacelets.length;
+    for (let ord = 0; ord < orbitPattern.pieces.length; ord++) {
+      if (orbitPattern.pieces[ord] !== address.ord) {
+        continue;
+      }
+      const ori = numOrientations === 1 ? 0 : (address.ori + orbitPattern.orientation[ord]) % numOrientations;
+      this.#logoSlot = orbitFacelets[ori]?.[ord] ?? null;
+      return;
+    }
+  }
+  #placeLogo() {
+    const mesh = this.#logoMesh;
+    if (!mesh) {
+      return;
+    }
+    const slot = this.#logoSlot;
+    if (!slot?.logo) {
+      mesh.visible = false;
+      return;
+    }
+    mesh.visible = true;
+    mesh.matrix.multiplyMatrices(
+      slot.piece.matrix,
+      surfaceMatrix(slot.logo, this.#logoSurfaceMatrix)
+    );
+    mesh.matrixWorldNeedsUpdate = true;
+  }
   dispose() {
+    this.#disposeLogo();
     this.#bodyBatch.dispose();
     this.#bodyBatch.geometry.dispose();
     this.#hintBatch?.dispose();
@@ -3852,7 +4311,7 @@ var Stickerless3D = class extends Object3D4 {
       }
     }
     for (const axis of this.stickerDat.axis) {
-      const product = point.dot(new Vector39(...axis.coordinates));
+      const product = point.dot(new Vector310(...axis.coordinates));
       if (product > closestMoveDotProduct) {
         const modified = this.stickerDat.notationMapper.notationToExternal(
           modify(axis.quantumMove)
@@ -3929,6 +4388,7 @@ var Stickerless3D = class extends Object3D4 {
       this.#updateColors(position);
       this.#lastPosition = position;
       this.#pendingStickeringUpdate = false;
+      this.#updateLogoSlot();
     }
     const wereTurning = this.#turningPieces;
     for (const piece of wereTurning) {
@@ -3968,6 +4428,7 @@ var Stickerless3D = class extends Object3D4 {
     for (const piece of this.#turningPieces) {
       this.#setMatrix(piece);
     }
+    this.#placeLogo();
     this.scheduleRenderCallback();
   }
   /**
@@ -4086,7 +4547,7 @@ import { Raycaster } from "three/src/core/Raycaster.js";
 import { TextureLoader as TextureLoader2 } from "three/src/loaders/TextureLoader.js";
 import { Spherical } from "three/src/math/Spherical.js";
 import { Vector2 as Vector22 } from "three/src/math/Vector2.js";
-import { Vector3 as Vector310 } from "three/src/math/Vector3.js";
+import { Vector3 as Vector311 } from "three/src/math/Vector3.js";
 import { WebGLRenderer } from "three/src/renderers/WebGLRenderer.js";
 import { Scene } from "three/src/scenes/Scene.js";
 
@@ -4134,7 +4595,8 @@ async function pg3dShim(renderCallback, puzzleLoader, hintFacelets, faceletScale
   const plan = darkIgnoredOrbits || pictureCube ? null : cubePuzzlePlan(stickerDat) ?? solidPuzzlePlan(stickerDat);
   if (plan) {
     return new Stickerless3D(renderCallback, kpuzzle, stickerDat, plan, {
-      hintFacelets
+      hintFacelets,
+      logoFacelet: logoFaceletAddress(puzzleLoader.id, stickerDat)
     });
   }
   return new PG3D(
@@ -4158,11 +4620,11 @@ export {
   Spherical as ThreeSpherical,
   TextureLoader2 as ThreeTextureLoader,
   Vector22 as ThreeVector2,
-  Vector310 as ThreeVector3,
+  Vector311 as ThreeVector3,
   WebGLRenderer as ThreeWebGLRenderer,
   Twisty3DScene,
   cube3DShim,
   pg3dShim,
   square1_3DShim
 };
-//# sourceMappingURL=twisty-dynamic-3d-MF76FSDA.js.map
+//# sourceMappingURL=twisty-dynamic-3d-3MGVD3TG.js.map