cubing 0.20.2 → 0.21.0-pre12

package/src/cubing/twisty/views/3D/puzzles/PG3D.ts

@@ -0,0 +1,988 @@
+import {
+  BufferAttribute,
+  BufferGeometry,
+  Color,
+  DoubleSide,
+  Euler,
+  FrontSide,
+  Group,
+  Material,
+  Mesh,
+  MeshBasicMaterial,
+  Object3D,
+  Texture,
+  Vector3,
+} from "three";
+import {
+  areTransformationsEquivalent,
+  KPuzzleDefinition,
+  Transformation,
+} from "../../../../kpuzzle";
+import { experimentalTransformationForQuantumMove } from "../../../../kpuzzle";
+import type {
+  StickerDat,
+  StickerDatSticker,
+} from "../../../../puzzle-geometry";
+import type { TextureMapper } from "../../../../puzzle-geometry/PuzzleGeometry";
+import {
+  ExperimentalFaceletMeshAppearance,
+  experimentalGetFaceletAppearance,
+  ExperimentalPuzzleAppearance,
+} from "../../../../puzzles";
+import type { AlgCursor } from "../../../old/animation/cursor/AlgCursor";
+import type { PuzzlePosition } from "../../../old/animation/cursor/CursorTypes";
+import { smootherStep } from "../../../old/animation/easing";
+import type { HintFaceletStyle } from "../../../old/dom/TwistyPlayerConfig";
+import { TAU } from "../TAU";
+
+import type { Twisty3DPuzzle } from "./Twisty3DPuzzle";
+
+const foundationMaterial = new MeshBasicMaterial({
+  side: DoubleSide,
+  color: 0x000000,
+});
+const invisMaterial = new MeshBasicMaterial({
+  visible: false,
+});
+const basicStickerMaterial = new MeshBasicMaterial({
+  vertexColors: true,
+});
+
+function dist(coords: number[], a: number, b: number): number {
+  return Math.hypot(
+    coords[3 * a] - coords[3 * b],
+    coords[3 * a + 1] - coords[3 * b + 1],
+    coords[3 * a + 2] - coords[3 * b + 2],
+  );
+}
+
+function triarea(coords: number[], a: number, b: number, c: number): number {
+  const ab = dist(coords, a, b);
+  const bc = dist(coords, b, c);
+  const ac = dist(coords, a, c);
+  const p = (ab + bc + ac) / 2;
+  return Math.sqrt(p * (p - ab) * (p - bc) * (p - ac));
+}
+
+function polyarea(coords: number[]): number {
+  let sum = 0;
+  for (let i = 2; 3 * i < coords.length; i++) {
+    sum += triarea(coords, 0, 1, i);
+  }
+  return sum;
+}
+
+function normalize(r: number[]): number[] {
+  const m = Math.hypot(r[0], r[1], r[2]);
+  r[0] /= m;
+  r[1] /= m;
+  r[2] /= m;
+  return r;
+}
+
+function cross(a: number[], b: number[]): number[] {
+  const r = new Array<number>(3);
+  r[0] = a[1] * b[2] - a[2] * b[1];
+  r[1] = a[2] * b[0] - a[0] * b[2];
+  r[2] = a[0] * b[1] - a[1] * b[0];
+  return r;
+}
+
+function normal(c: number[]): number[] {
+  const a: number[] = [c[3] - c[0], c[4] - c[1], c[5] - c[2]];
+  const b: number[] = [c[6] - c[3], c[7] - c[4], c[8] - c[5]];
+  const r = cross(a, b);
+  return normalize(r);
+}
+
+function trimEdges(face: number[], tr: number): number[] {
+  const r: number[] = [];
+  const A: number[] = new Array(3);
+  const B: number[] = new Array(3);
+  for (let iter = 1; iter < 10; iter++) {
+    for (let i = 0; i < face.length; i += 3) {
+      const pi = (i + face.length - 3) % face.length;
+      const ni = (i + 3) % face.length;
+      for (let k = 0; k < 3; k++) {
+        A[k] = face[pi + k] - face[i + k];
+        B[k] = face[ni + k] - face[i + k];
+      }
+      const alen = Math.hypot(A[0], A[1], A[2]);
+      const blen = Math.hypot(B[0], B[1], B[2]);
+      for (let k = 0; k < 3; k++) {
+        A[k] /= alen;
+        B[k] /= blen;
+      }
+      const d = A[0] * B[0] + A[1] * B[1] + A[2] * B[2];
+      const m = tr / Math.sqrt(1 - d * d);
+      for (let k = 0; k < 3; k++) {
+        r[i + k] = face[i + k] + (A[k] + B[k]) * m;
+      }
+    }
+    let good = true;
+    for (let i = 0; good && i < r.length; i += 3) {
+      const ni = (i + 3) % face.length;
+      let t = 0;
+      for (let k = 0; k < 3; k++) {
+        const a = face[ni + k] - face[i + k];
+        const b = r[ni + k] - r[i + k];
+        t += a * b;
+      }
+      if (t <= 0) {
+        good = false;
+      }
+    }
+    if (good) {
+      return r;
+    }
+    tr /= 2;
+  }
+  return face;
+}
+
+class Filler {
+  pos: number;
+  ipos: number;
+  vertices: Float32Array;
+  colors: Uint8Array;
+  uvs?: Float32Array;
+  ind: Uint8Array;
+  constructor(public sz: number, public tm: TextureMapper) {
+    this.vertices = new Float32Array(9 * sz);
+    this.uvs = undefined;
+    this.colors = new Uint8Array(18 * sz);
+    this.ind = new Uint8Array(sz);
+    this.pos = 0;
+    this.ipos = 0;
+  }
+
+  add(pt: number[], i: number, c: number) {
+    this.vertices[this.pos] = pt[3 * i + 0];
+    this.vertices[this.pos + 1] = pt[3 * i + 1];
+    this.vertices[this.pos + 2] = pt[3 * i + 2];
+    this.colors[this.pos] = c >> 16;
+    this.colors[this.pos + 1] = (c >> 8) & 255;
+    this.colors[this.pos + 2] = c & 255;
+    this.pos += 3;
+  }
+
+  addUncolored(pt: number[], i: number) {
+    this.vertices[this.pos] = pt[3 * i + 0];
+    this.vertices[this.pos + 1] = pt[3 * i + 1];
+    this.vertices[this.pos + 2] = pt[3 * i + 2];
+    this.pos += 3;
+  }
+
+  setind(i: number) {
+    this.ind[this.ipos++] = i;
+  }
+
+  makePoly(coords: number[], color: number, ind: number): void {
+    const ncoords: number[] = coords;
+    for (let g = 1; 3 * (g + 1) < ncoords.length; g++) {
+      this.add(ncoords, 0, color);
+      this.add(ncoords, g, color);
+      this.add(ncoords, g + 1, color);
+      this.setind(ind);
+    }
+  }
+
+  setAttributes(geo: BufferGeometry) {
+    geo.setAttribute("position", new BufferAttribute(this.vertices, 3));
+    // the geometry only needs the first half of the array
+    const sa2 = this.colors.subarray(0, 9 * this.sz);
+    geo.setAttribute("color", new BufferAttribute(sa2, 3, true));
+  }
+
+  makeGroups(geo: BufferGeometry) {
+    geo.clearGroups();
+    for (let i = 0; i < this.ipos; ) {
+      const si = i++;
+      const iv = this.ind[si];
+      while (this.ind[i] === iv) {
+        i++;
+      }
+      geo.addGroup(3 * si, 3 * (i - si), iv);
+    }
+  }
+
+  saveOriginalColors() {
+    this.colors.copyWithin(this.pos, 0, this.pos);
+  }
+}
+
+class StickerDef {
+  private origColor: number;
+  private origColorAppearance: number;
+  private faceColor: number;
+  private texturePtr?: StickerDef = undefined;
+  public twistVal: number = -1;
+  public stickerStart: number;
+  public stickerEnd: number;
+  public hintStart: number;
+  public hintEnd: number;
+  public foundationStart: number;
+  public foundationEnd: number;
+  private isDup: boolean;
+  private faceNum: number;
+  constructor(
+    filler: Filler,
+    stickerDat: StickerDatSticker,
+    trim: number,
+    options?: {
+      appearance?: ExperimentalFaceletMeshAppearance;
+    },
+  ) {
+    this.isDup = !!stickerDat.isDup;
+    this.faceNum = stickerDat.face;
+    this.stickerStart = filler.ipos;
+    const sdColor = new Color(stickerDat.color).getHex();
+    this.origColor = sdColor;
+    this.origColorAppearance = sdColor;
+    if (options?.appearance) {
+      this.setAppearance(filler, options.appearance);
+    }
+    this.faceColor = sdColor;
+    const coords = this.stickerCoords(stickerDat.coords, trim);
+    filler.makePoly(coords, this.faceColor, this.isDup ? 4 : 0);
+    this.stickerEnd = filler.ipos;
+  }
+
+  private stickerCoords(coords: number[], trim: number): number[] {
+    return trimEdges(coords.slice(), trim);
+  }
+
+  private hintCoords(
+    coords: number[],
+    hintStickerHeightScale: number,
+    trim: number,
+    normal: number[],
+  ): number[] {
+    coords = this.stickerCoords(coords, trim); // pick up trim from stickers
+    normal = normal.slice();
+    for (let i = 0; i < 3; i++) {
+      normal[i] *= 0.5 * hintStickerHeightScale;
+    }
+    const hCoords = new Array<number>(coords.length);
+    for (let i = 0; 3 * i < coords.length; i++) {
+      const j = coords.length / 3 - 1 - i;
+      hCoords[3 * i] = coords[3 * j] + normal[0];
+      hCoords[3 * i + 1] = coords[3 * j + 1] + normal[1];
+      hCoords[3 * i + 2] = coords[3 * j + 2] + normal[2];
+    }
+    return hCoords;
+  }
+
+  private foundationCoords(coords: number[]): number[] {
+    const ncoords = coords.slice();
+    for (let i = 0; i < coords.length; i++) {
+      ncoords[i] = coords[i] * 0.999;
+    }
+    return ncoords;
+  }
+
+  addHint(
+    filler: Filler,
+    stickerDat: StickerDatSticker,
+    hintStickers: boolean,
+    hintStickerHeightScale: number,
+    trim: number,
+    normal: number[],
+  ): void {
+    this.hintStart = filler.ipos;
+    const coords = this.hintCoords(
+      stickerDat.coords,
+      hintStickerHeightScale,
+      trim,
+      normal,
+    );
+    filler.makePoly(
+      coords,
+      this.faceColor,
+      hintStickers && !this.isDup ? 2 : 4,
+    );
+    this.hintEnd = filler.ipos;
+  }
+
+  public addFoundation(
+    filler: Filler,
+    stickerDat: StickerDatSticker,
+    black: number,
+  ) {
+    this.foundationStart = filler.ipos;
+    const coords = this.foundationCoords(stickerDat.coords);
+    filler.makePoly(coords, black, this.isDup ? 4 : 6);
+    this.foundationEnd = filler.ipos;
+  }
+
+  private setHintStickers(filler: Filler, hintStickers: boolean): void {
+    const indv = this.isDup || !hintStickers ? 4 : 2;
+    for (let i = this.hintStart; i < this.hintEnd; i++) {
+      filler.ind[i] = indv | (filler.ind[i] & 1);
+    }
+  }
+
+  public setAppearance(
+    filler: Filler,
+    faceletMeshAppearance: ExperimentalFaceletMeshAppearance,
+  ): void {
+    let c = 0;
+    switch (faceletMeshAppearance) {
+      case "regular":
+        c = this.origColor;
+        break;
+      case "dim":
+        if (this.origColor === 0xffffff) {
+          c = 0xdddddd;
+        } else {
+          c = new Color(this.origColor).multiplyScalar(0.5).getHex();
+        }
+        break;
+      case "oriented":
+        c = 0xff88ff;
+        break;
+      case "ignored":
+        c = 0x444444;
+        break;
+      case "invisible":
+        c = this.origColor;
+    }
+    this.origColorAppearance = c;
+    for (let i = 9 * this.stickerStart; i < 9 * this.stickerEnd; i += 3) {
+      filler.colors[filler.pos + i] = c >> 16;
+      filler.colors[filler.pos + i + 1] = (c >> 8) & 255;
+      filler.colors[filler.pos + i + 2] = c & 255;
+    }
+    for (let i = 9 * this.hintStart; i < 9 * this.hintEnd; i += 3) {
+      filler.colors[filler.pos + i] = c >> 16;
+      filler.colors[filler.pos + i + 1] = (c >> 8) & 255;
+      filler.colors[filler.pos + i + 2] = c & 255;
+    }
+    this.setHintStickers(
+      filler,
+      faceletMeshAppearance !== "invisible" && !this.isDup,
+    );
+  }
+
+  public addUVs(filler: Filler): void {
+    const uvs = filler.uvs!;
+    const vert = filler.vertices;
+    const coords = new Array(3);
+    for (let i = 3 * this.stickerStart; i < 3 * this.stickerEnd; i++) {
+      coords[0] = vert[3 * i];
+      coords[1] = vert[3 * i + 1];
+      coords[2] = vert[3 * i + 2];
+      const uv = filler.tm.getuv(this.faceNum, coords);
+      uvs[2 * i] = uv[0];
+      uvs[2 * i + 1] = uv[1];
+    }
+    for (let i = 3 * this.hintStart; i < 3 * this.hintEnd; i++) {
+      coords[0] = vert[3 * i];
+      coords[1] = vert[3 * i + 1];
+      coords[2] = vert[3 * i + 2];
+      const uv = filler.tm.getuv(this.faceNum, coords);
+      uvs[2 * i] = uv[0];
+      uvs[2 * i + 1] = uv[1];
+    }
+  }
+
+  public setTexture(filler: Filler, sd: StickerDef): number {
+    if (this.texturePtr === sd) {
+      return 0;
+    }
+    this.texturePtr = sd;
+    const sz = 6 * filler.sz;
+    filler.uvs!.copyWithin(
+      6 * this.stickerStart,
+      6 * sd.stickerStart + sz,
+      6 * sd.stickerEnd + sz,
+    );
+    filler.uvs!.copyWithin(
+      6 * this.hintStart,
+      6 * sd.hintStart + sz,
+      6 * sd.hintEnd + sz,
+    );
+    return 1;
+  }
+
+  public setColor(filler: Filler, sd: StickerDef): number {
+    const c = sd.origColorAppearance;
+    if (this.faceColor !== c) {
+      this.faceColor = c;
+      const sz = filler.pos;
+      filler.colors.copyWithin(
+        9 * this.stickerStart,
+        9 * sd.stickerStart + sz,
+        9 * sd.stickerEnd + sz,
+      );
+      filler.colors.copyWithin(
+        9 * this.hintStart,
+        9 * sd.hintStart + sz,
+        9 * sd.hintEnd + sz,
+      );
+      return 1;
+    } else {
+      return 0;
+    }
+  }
+}
+
+class HitPlaneDef {
+  public cubie: Group;
+  private geo: BufferGeometry;
+  constructor(hitface: any, tm: TextureMapper) {
+    this.cubie = new Group();
+    const coords = hitface.coords as number[];
+    const filler = new Filler(coords.length / 3 - 2, tm);
+    for (let g = 1; 3 * g + 3 < coords.length; g++) {
+      filler.addUncolored(coords, 0);
+      filler.addUncolored(coords, g);
+      filler.addUncolored(coords, g + 1);
+    }
+    this.geo = new BufferGeometry();
+    filler.setAttributes(this.geo);
+    const obj = new Mesh(this.geo, invisMaterial);
+    obj.userData.name = hitface.name;
+    this.cubie.scale.setScalar(0.99);
+    this.cubie.add(obj);
+  }
+}
+
+class AxisInfo {
+  public axis: Vector3;
+  public order: number;
+  constructor(axisDat: any) {
+    const vec = axisDat[0] as number[];
+    this.axis = new Vector3(vec[0], vec[1], vec[2]);
+    this.order = axisDat[2];
+  }
+}
+
+export interface PG3DOptions {
+  appearance?: ExperimentalPuzzleAppearance;
+}
+
+const DEFAULT_COLOR_FRACTION = 0.71;
+const PG_SCALE = 0.5;
+
+// TODO: Split into "scene model" and "view".
+/*
+ *  PG3D uses a single geometry for the puzzle, with all the faces for
+ *  each sticker (including the foundation stickers) in a single
+ *  geometry.  We use the materialIndex in the face to point to a
+ *  specific entry, which is either a colored sticker, invisible, or
+ *  black (foundation).
+ *
+ *  To support general twisting of a subset of the puzzle, we then
+ *  instantiate this same geometry in two different meshes with two
+ *  distinct material arrays.  One, the fixed mesh, has the material
+ *  array set up like:  [colored, invisible, black, invisible].
+ *  The twisting mesh has the material array set up as
+ *  [invisible, colored, invislble, black].  When not twisted, the
+ *  two meshes are directly coincident, and the (shared) materialIndex
+ *  in each face points to a non-invisible material in exactly one of
+ *  the two meshes.  When we decide to twist some cubies, we make
+ *  the cubies that move point to visible materials in the moving
+ *  mesh (which makes them point to invisible materials in the static
+ *  mesh).  This way, we only need to rotate the moving mesh as a
+ *  single object---this should be very fast, and occur entirely in
+ *  the GPU.  Unfortunately this doesn't quite work as fast as we'd
+ *  like because three.js makes a draw call every time we have a change
+ *  in the material index.  By moving the foundation triangles separate
+ *  from the sticker triangles, we enhance the probability that many
+ *  triangles can be rendered in one call speeding up the render.
+ *  We also get some assistance from puzzleGeometry to try to keep
+ *  nearby stickers close to each other.
+ */
+export class PG3D extends Object3D implements Twisty3DPuzzle {
+  private stickers: { [key: string]: StickerDef[][] };
+  private axesInfo: { [key: string]: AxisInfo };
+
+  private stickerTargets: Object3D[] = [];
+  private controlTargets: Object3D[] = [];
+
+  private movingObj: Object3D;
+  private filler: Filler;
+  private foundationBound: number; // before this: colored; after: black
+  private fixedGeo: BufferGeometry;
+  private lastPos: PuzzlePosition;
+  private lastMove: Transformation;
+  private hintMaterial: Material;
+  private stickerMaterial: Material;
+  private materialArray1: Material[];
+  private materialArray2: Material[];
+  private textured: boolean = false;
+  private hintMaterialDisposable: boolean;
+  private stickerMaterialDisposable: boolean;
+
+  #pendingStickeringUpdate: boolean = false;
+
+  constructor(
+    cursor: AlgCursor,
+    private scheduleRenderCallback: () => void,
+    private definition: KPuzzleDefinition,
+    private pgdat: StickerDat,
+    private showFoundation: boolean = false,
+    private showHintStickers: boolean = false,
+    hintStickerHeightScale: number = 1,
+    private params: PG3DOptions = {},
+  ) {
+    super();
+    if (pgdat.stickers.length === 0) {
+      throw Error("Reuse of stickerdat from pg; please don't do that.");
+    }
+    this.hintMaterial = new MeshBasicMaterial({
+      vertexColors: true,
+      transparent: true,
+      opacity: 0.5,
+    });
+    this.hintMaterialDisposable = true;
+    this.stickerMaterial = basicStickerMaterial;
+    this.stickerMaterialDisposable = false;
+    this.axesInfo = {};
+    const axesDef = this.pgdat.axis as any[];
+    for (const axis of axesDef) {
+      this.axesInfo[axis[1]] = new AxisInfo(axis);
+    }
+    const stickers = this.pgdat.stickers as any[];
+    this.stickers = {};
+    this.materialArray1 = new Array(8);
+    this.materialArray2 = new Array(8);
+    this.enableFoundation(showFoundation);
+    this.updateMaterialArrays();
+    let triangleCount = 0;
+    const multiplier = 3;
+    for (const sticker of stickers) {
+      const sides = sticker.coords.length / 3;
+      triangleCount += multiplier * (sides - 2);
+    }
+    const filler = new Filler(triangleCount, pgdat.textureMapper);
+    const black = 0;
+    const normals: number[][] = [];
+    let totArea = 0;
+    for (const f of pgdat.faces) {
+      normals.push(normal(f.coords));
+      totArea += polyarea(f.coords);
+    }
+    const colorfrac = DEFAULT_COLOR_FRACTION;
+    let nonDupStickers = 0;
+    for (const sticker of stickers) {
+      if (!sticker.isDup) {
+        nonDupStickers++;
+      }
+    }
+    const trim =
+      (Math.sqrt(totArea / nonDupStickers) * (1 - Math.sqrt(colorfrac))) / 2;
+    for (const sticker of stickers) {
+      const orbit = sticker.orbit;
+      const ord = sticker.ord;
+      const ori = sticker.ori;
+      if (!this.stickers[orbit]) {
+        this.stickers[orbit] = [];
+      }
+      if (!this.stickers[orbit][ori]) {
+        this.stickers[orbit][ori] = [];
+      }
+      const options: { appearance?: ExperimentalFaceletMeshAppearance } = {};
+      if (params.appearance) {
+        options.appearance = experimentalGetFaceletAppearance(
+          params.appearance,
+          orbit,
+          ord,
+          ori,
+          false,
+        );
+      }
+      const stickerdef = new StickerDef(filler, sticker, trim, options);
+      this.stickers[orbit][ori][ord] = stickerdef;
+    }
+    for (const sticker of stickers) {
+      const orbit = sticker.orbit;
+      const ord = sticker.ord;
+      const ori = sticker.ori;
+      this.stickers[orbit][ori][ord].addHint(
+        filler,
+        sticker,
+        showHintStickers,
+        hintStickerHeightScale,
+        trim,
+        normals[sticker.face],
+      );
+    }
+    this.foundationBound = filler.ipos;
+    for (const sticker of stickers) {
+      const orbit = sticker.orbit;
+      const ord = sticker.ord;
+      const ori = sticker.ori;
+      this.stickers[orbit][ori][ord].addFoundation(filler, sticker, black);
+    }
+    const fixedGeo = new BufferGeometry();
+    filler.setAttributes(fixedGeo);
+    filler.makeGroups(fixedGeo);
+    const obj = new Mesh(fixedGeo, this.materialArray1);
+    obj.scale.set(PG_SCALE, PG_SCALE, PG_SCALE);
+    this.add(obj);
+    const obj2 = new Mesh(fixedGeo, this.materialArray2);
+    obj2.scale.set(PG_SCALE, PG_SCALE, PG_SCALE);
+    this.add(obj2);
+    const hitfaces = this.pgdat.faces as any[];
+    this.movingObj = obj2;
+    this.fixedGeo = fixedGeo;
+    this.filler = filler;
+    for (const hitface of hitfaces) {
+      const facedef = new HitPlaneDef(hitface, pgdat.textureMapper);
+      facedef.cubie.scale.set(PG_SCALE, PG_SCALE, PG_SCALE);
+      this.add(facedef.cubie);
+      this.controlTargets.push(facedef.cubie.children[0]);
+    }
+    filler.saveOriginalColors();
+    cursor.addPositionListener(this);
+    pgdat.stickers = []; // don't need these anymore
+    /*
+    this.experimentalUpdateTexture(
+      true,
+      new TextureLoader().load(
+        "/experiments.cubing.net/cubing.js/twisty/mkbhd-sprite-red.png",
+      ),
+      new TextureLoader().load(
+        "/experiments.cubing.net/cubing.js/twisty/mkbhd-sprite-red-hint.png",
+      ),
+    );
+    */
+  }
+
+  public dispose(): void {
+    if (this.fixedGeo) {
+      this.fixedGeo.dispose();
+    }
+    if (this.stickerMaterialDisposable) {
+      this.stickerMaterial.dispose();
+      this.stickerMaterial = basicStickerMaterial;
+      this.stickerMaterialDisposable = false;
+    }
+    if (this.hintMaterialDisposable) {
+      this.hintMaterial.dispose();
+      this.hintMaterial = basicStickerMaterial;
+      this.hintMaterialDisposable = false;
+    }
+  }
+
+  public experimentalGetStickerTargets(): Object3D[] {
+    return this.stickerTargets;
+  }
+
+  public experimentalGetControlTargets(): Object3D[] {
+    return this.controlTargets;
+  }
+
+  experimentalSetAppearance(appearance: ExperimentalPuzzleAppearance): void {
+    this.params.appearance = appearance;
+    for (const orbitName in this.definition.orbits) {
+      const { numPieces, orientations } = this.definition.orbits[orbitName];
+      for (let pieceIdx = 0; pieceIdx < numPieces; pieceIdx++) {
+        for (let faceletIdx = 0; faceletIdx < orientations; faceletIdx++) {
+          const faceletAppearance = experimentalGetFaceletAppearance(
+            appearance,
+            orbitName,
+            pieceIdx,
+            faceletIdx,
+            false,
+          );
+          const stickerDef = this.stickers[orbitName][faceletIdx][pieceIdx];
+          stickerDef.setAppearance(this.filler, faceletAppearance);
+        }
+      }
+    }
+    if (this.scheduleRenderCallback) {
+      this.#pendingStickeringUpdate = true;
+      if (this.lastPos) {
+        this.onPositionChange(this.lastPos);
+      }
+      this.scheduleRenderCallback();
+    }
+  }
+
+  public onPositionChange(p: PuzzlePosition): void {
+    const state = p.state;
+    const noRotation = new Euler();
+    this.movingObj.rotation.copy(noRotation);
+    let colormods = 0;
+    const filler = this.filler;
+    const ind = filler.ind;
+    if (
+      !this.lastPos ||
+      this.#pendingStickeringUpdate ||
+      !areTransformationsEquivalent(this.definition, this.lastPos.state, state)
+    ) {
+      for (const orbit in this.stickers) {
+        const pieces = this.stickers[orbit];
+        const pos2 = state[orbit];
+        const orin = pieces.length;
+        if (orin === 1) {
+          const pieces2 = pieces[0];
+          for (let i = 0; i < pieces2.length; i++) {
+            const ni = pos2.permutation[i];
+            if (this.textured) {
+              colormods += pieces2[i].setTexture(filler, pieces2[ni]);
+            } else {
+              colormods += pieces2[i].setColor(filler, pieces2[ni]);
+            }
+          }
+        } else {
+          for (let ori = 0; ori < orin; ori++) {
+            const pieces2 = pieces[ori];
+            for (let i = 0; i < pieces2.length; i++) {
+              const nori = (ori + orin - pos2.orientation[i]) % orin;
+              const ni = pos2.permutation[i];
+              if (this.textured) {
+                colormods += pieces2[i].setTexture(filler, pieces[nori][ni]);
+              } else {
+                colormods += pieces2[i].setColor(filler, pieces[nori][ni]);
+              }
+            }
+          }
+        }
+      }
+      this.lastPos = p;
+      this.#pendingStickeringUpdate = false;
+    }
+    let vismods = 0;
+    for (const moveProgress of p.movesInProgress) {
+      const externalMove = moveProgress.move;
+      // TODO: unswizzle goes external to internal, and so does the call after that
+      // and so does the stateForBlockMove call
+      const unswizzled = this.pgdat.unswizzle(externalMove);
+      const move = this.pgdat.notationMapper.notationToInternal(externalMove);
+      if (move === null) {
+        throw Error("Bad blockmove " + externalMove.family);
+      }
+      const quantumTransformation = experimentalTransformationForQuantumMove(
+        this.definition,
+        externalMove.quantum,
+      );
+      const ax = this.axesInfo[unswizzled];
+      const turnNormal = ax.axis;
+      const angle =
+        (-this.ease(moveProgress.fraction) *
+          moveProgress.direction *
+          move.amount *
+          TAU) /
+        ax.order;
+      this.movingObj.rotateOnAxis(turnNormal, angle);
+      if (this.lastMove !== quantumTransformation) {
+        for (const orbit in this.stickers) {
+          const pieces = this.stickers[orbit];
+          const orin = pieces.length;
+          const bmv = quantumTransformation[orbit];
+          for (let ori = 0; ori < orin; ori++) {
+            const pieces2 = pieces[ori];
+            for (let i = 0; i < pieces2.length; i++) {
+              const p2 = pieces2[i];
+              const ni = bmv.permutation[i];
+              let tv = 0;
+              if (ni !== i || bmv.orientation[i] !== 0) {
+                tv = 1;
+              }
+              if (tv !== p2.twistVal) {
+                if (tv) {
+                  for (let j = p2.stickerStart; j < p2.stickerEnd; j++) {
+                    ind[j] |= 1;
+                  }
+                  for (let j = p2.hintStart; j < p2.hintEnd; j++) {
+                    ind[j] |= 1;
+                  }
+                  for (let j = p2.foundationStart; j < p2.foundationEnd; j++) {
+                    ind[j] |= 1;
+                  }
+                } else {
+                  for (let j = p2.stickerStart; j < p2.stickerEnd; j++) {
+                    ind[j] &= ~1;
+                  }
+                  for (let j = p2.hintStart; j < p2.hintEnd; j++) {
+                    ind[j] &= ~1;
+                  }
+                  for (let j = p2.foundationStart; j < p2.foundationEnd; j++) {
+                    ind[j] &= ~1;
+                  }
+                }
+                p2.twistVal = tv;
+                vismods++;
+              }
+            }
+          }
+        }
+        this.lastMove = quantumTransformation;
+      }
+    }
+    if (vismods) {
+      this.filler.makeGroups(this.fixedGeo);
+    }
+    if (colormods) {
+      if (this.textured) {
+        (this.fixedGeo.getAttribute("uv") as BufferAttribute).updateRange = {
+          offset: 0,
+          count: 6 * this.foundationBound,
+        };
+        (this.fixedGeo.getAttribute("uv") as BufferAttribute).needsUpdate =
+          true;
+      } else {
+        (this.fixedGeo.getAttribute("color") as BufferAttribute).updateRange = {
+          offset: 0,
+          count: 9 * this.foundationBound,
+        };
+        (this.fixedGeo.getAttribute("color") as BufferAttribute).needsUpdate =
+          true;
+      }
+    }
+    this.scheduleRenderCallback();
+  }
+
+  private ease(fraction: number): number {
+    return smootherStep(fraction);
+  }
+
+  private enableHintFacelets(v: boolean) {
+    this.showHintStickers = v;
+    this.updateMaterialArrays();
+  }
+
+  private updateMaterialArrays() {
+    for (let i = 0; i < 8; i++) {
+      this.materialArray1[i] = invisMaterial;
+      this.materialArray2[i] = invisMaterial;
+    }
+    this.materialArray1[0] = this.stickerMaterial;
+    this.materialArray2[1] = this.stickerMaterial;
+    if (this.showHintStickers) {
+      this.materialArray1[2] = this.hintMaterial;
+      this.materialArray2[3] = this.hintMaterial;
+    } else {
+      this.materialArray1[2] = invisMaterial;
+      this.materialArray2[3] = invisMaterial;
+    }
+    if (this.showFoundation) {
+      this.materialArray1[6] = foundationMaterial;
+      this.materialArray2[7] = foundationMaterial;
+    } else {
+      this.materialArray1[6] = invisMaterial;
+      this.materialArray2[7] = invisMaterial;
+    }
+  }
+
+  private enableFoundation(v: boolean) {
+    this.showFoundation = v;
+    this.updateMaterialArrays();
+  }
+
+  private setHintStickerOpacity(v: number): void {
+    if (this.hintMaterialDisposable) {
+      this.hintMaterial.dispose();
+      this.hintMaterialDisposable = false;
+    }
+    if (v === 0) {
+      this.hintMaterial = invisMaterial;
+    } else if (v === 1) {
+      this.hintMaterial = this.stickerMaterial;
+    } else {
+      this.hintMaterial = new MeshBasicMaterial({
+        vertexColors: true,
+        transparent: true,
+        opacity: 0.5,
+      });
+      this.hintMaterialDisposable = true;
+    }
+  }
+
+  public experimentalUpdateOptions(options: {
+    showMainStickers?: boolean;
+    hintFacelets?: HintFaceletStyle;
+    showFoundation?: boolean; // TODO: better name
+    hintStickerOpacity?: number;
+  }): void {
+    if (options.hintFacelets !== undefined) {
+      this.enableHintFacelets(options.hintFacelets !== "none");
+    }
+    if (options.showFoundation !== undefined) {
+      this.enableFoundation(options.showFoundation);
+    }
+    if (options.hintStickerOpacity !== undefined) {
+      this.setHintStickerOpacity(options.hintStickerOpacity);
+    }
+    this.#pendingStickeringUpdate = true;
+    if (this.lastPos) {
+      this.onPositionChange(this.lastPos);
+    }
+    this.scheduleRenderCallback();
+  }
+
+  private adduvs() {
+    const filler = this.filler;
+    if (filler.uvs) {
+      return;
+    }
+    this.filler.uvs = new Float32Array(12 * filler.sz);
+    for (const orbit in this.stickers) {
+      const pieces = this.stickers[orbit];
+      const orin = pieces.length;
+      for (let ori = 0; ori < orin; ori++) {
+        const pieces2 = pieces[ori];
+        for (const piece2 of pieces2) {
+          piece2.addUVs(this.filler);
+        }
+      }
+    }
+    filler.uvs!.copyWithin(6 * filler.sz, 0, 6 * filler.sz);
+    const sa1 = filler.uvs!.subarray(0, 6 * filler.sz);
+    this.fixedGeo.setAttribute("uv", new BufferAttribute(sa1, 2, true));
+  }
+
+  public experimentalUpdateTexture(
+    enabled: boolean,
+    stickerTexture?: Texture | null,
+    hintTexture?: Texture | null,
+  ) {
+    if (!stickerTexture) {
+      enabled = false;
+    } else if (!hintTexture) {
+      hintTexture = stickerTexture;
+    }
+    if (enabled && !this.filler.uvs) {
+      this.adduvs();
+    }
+    this.textured = enabled;
+    if (this.stickerMaterialDisposable) {
+      this.stickerMaterial.dispose();
+      this.stickerMaterialDisposable = false;
+    }
+    if (enabled) {
+      this.stickerMaterial = new MeshBasicMaterial({
+        map: stickerTexture,
+        side: FrontSide,
+        transparent: false,
+      });
+      this.stickerMaterialDisposable = true;
+    } else {
+      this.stickerMaterial = basicStickerMaterial;
+    }
+    if (this.hintMaterialDisposable) {
+      this.hintMaterial.dispose();
+      this.hintMaterialDisposable = false;
+    }
+    if (enabled) {
+      this.hintMaterial = new MeshBasicMaterial({
+        map: hintTexture,
+        side: FrontSide,
+        transparent: false,
+      });
+      this.hintMaterialDisposable = true;
+    } else {
+      this.hintMaterial = basicStickerMaterial;
+    }
+    this.updateMaterialArrays();
+    this.#pendingStickeringUpdate = true;
+    if (this.lastPos) {
+      this.onPositionChange(this.lastPos);
+    }
+    this.scheduleRenderCallback();
+  }
+}