cubing 0.21.2 → 0.23.0

package/src/cubing/twisty/old/dom/viewers/Twisty3DCanvas.ts

@@ -1,256 +0,0 @@
-import { PerspectiveCamera, Vector3, WebGLRenderer } from "three";
-import type { Twisty3DScene } from "../../../views/3D/Twisty3DScene";
-import { RenderScheduler } from "../../animation/RenderScheduler";
-import { ManagedCustomElement } from "../element/ManagedCustomElement";
-import { pixelRatio } from "./canvas";
-import { twisty3DCanvasCSS } from "./Twisty3DCanvas.css";
-import { OrbitCoordinates, TwistyOrbitControls } from "./TwistyOrbitControls";
-import type { TwistyViewerElement } from "./TwistyViewerElement";
-import { customElementsShim } from "../element/node-custom-element-shims";
-import { Stats } from "../../../../vendor/three/examples/jsm/libs/stats.modified.module";
-import type { CameraLatitudeLimits } from "../TwistyPlayerConfig";
-
-let SHOW_STATS = false;
-// Show render stats for newly contructed renderers.
-export function experimentalShowRenderStats(show: boolean): void {
-  SHOW_STATS = show;
-}
-const shareAllNewRenderers: boolean = false;
-
-let sharedRenderer: WebGLRenderer | null = null;
-
-function newRenderer(): WebGLRenderer {
-  return new WebGLRenderer({
-    antialias: true,
-    alpha: true, // TODO
-  });
-}
-
-function newSharedRenderer(): WebGLRenderer {
-  return sharedRenderer ?? (sharedRenderer = newRenderer());
-}
-
-// <twisty-3d-canvas>
-export class Twisty3DCanvas
-  extends ManagedCustomElement
-  implements TwistyViewerElement
-{
-  private scene: Twisty3DScene;
-  public canvas: HTMLCanvasElement;
-  public camera: PerspectiveCamera;
-  private legacyExperimentalShift: number = 0;
-  orbitControls: TwistyOrbitControls;
-  private scheduler = new RenderScheduler(this.render.bind(this));
-  private resizePending: boolean = false;
-
-  private renderer: WebGLRenderer; // TODO: share renderers across elements? (issue: renderers are not designed to be constantly resized?)
-  private rendererIsShared: boolean;
-  private canvas2DContext: CanvasRenderingContext2D;
-
-  private stats: Stats | null = null;
-
-  // TODO: Are there any render duration performance concerns with removing this?
-  #invisible: boolean = false;
-  #onRenderFinish: null | (() => void) = null;
-  constructor(
-    scene?: Twisty3DScene,
-    options: {
-      orbitCoordinates?: OrbitCoordinates;
-      negateCameraPosition?: boolean;
-    } = {},
-  ) {
-    super();
-    this.addCSS(twisty3DCanvasCSS);
-
-    this.scene = scene!;
-    this.scene?.addRenderTarget(this); // TODO
-    if (SHOW_STATS) {
-      this.stats = new Stats();
-      this.stats.dom.style.position = "absolute";
-      this.addElement(this.stats.dom);
-    }
-
-    // We rely on the resize logic to handle renderer dimensions.
-    this.rendererIsShared = shareAllNewRenderers;
-    this.renderer = this.rendererIsShared ? newSharedRenderer() : newRenderer();
-    this.canvas = this.rendererIsShared
-      ? document.createElement("canvas")
-      : this.renderer.domElement;
-    this.canvas2DContext = this.canvas.getContext("2d")!; // TODO: avoid saving unneeded?
-    this.addElement(this.canvas);
-
-    this.camera = new PerspectiveCamera(
-      20,
-      1, // We rely on the resize logic to handle this.
-      0.1,
-      20,
-    );
-    this.camera.position.copy(new Vector3(2, 4, 4));
-    this.orbitControls = new TwistyOrbitControls(
-      this.camera,
-      this.canvas,
-      this.scheduleRender.bind(this),
-    );
-    if (options.orbitCoordinates) {
-      this.orbitControls.latitude =
-        options.orbitCoordinates.latitude *
-        (options.negateCameraPosition ? -1 : 1);
-    }
-    if (options.orbitCoordinates) {
-      this.orbitControls.longitude =
-        options.orbitCoordinates.longitude +
-        (options.negateCameraPosition ? 180 : 0);
-    }
-    if (options.orbitCoordinates) {
-      this.orbitControls.distance = options.orbitCoordinates.distance;
-    }
-    this.camera.lookAt(new Vector3(0, 0, 0)); // TODO: Handle with `negateCameraPosition`
-
-    const observer = new ResizeObserver(this.onResize.bind(this));
-    observer.observe(this.contentWrapper);
-  }
-
-  public setMirror(partner: Twisty3DCanvas): void {
-    this.orbitControls.setMirror(partner.orbitControls);
-    partner.orbitControls.setMirror(this.orbitControls);
-  }
-
-  /** @deprecated */
-  public experimentalSetLatitudeLimits(limits: CameraLatitudeLimits): void {
-    this.orbitControls.experimentalLatitudeLimits = limits;
-  }
-
-  protected connectedCallback(): void {
-    // Resize as soon as we're in the DOM, to avoid a flash of incorrectly sized content.
-    this.#resize();
-    this.render();
-  }
-
-  scheduleRender(): void {
-    this.scheduler.requestAnimFrame();
-  }
-
-  // If the current size/state is incorrect, it may be preferable to hide it
-  // briefly, rather than flashing an incorrect version for one frame.
-  makeInvisibleUntilRender(): void {
-    this.contentWrapper.classList.add("invisible");
-    this.#invisible = true;
-  }
-
-  /** @deprecated */
-  experimentalSetOnRenderFinish(f: null | (() => void)): void {
-    this.#onRenderFinish = f;
-  }
-
-  private render(): void {
-    // Cancel any scheduled frame, since we're rendering right now.
-    // We don't need to re-render until something schedules again.
-    this.stats?.begin();
-    this.scheduler.cancelAnimFrame();
-    if (this.resizePending) {
-      this.#resize();
-    }
-
-    if (this.rendererIsShared) {
-      this.renderer.setSize(this.canvas.width, this.canvas.height, false);
-      this.canvas2DContext.clearRect(
-        0,
-        0,
-        this.canvas.width,
-        this.canvas.height,
-      );
-    }
-    if (this.scene) {
-      this.renderer.render(this.scene, this.camera); // TODO
-    }
-    if (this.rendererIsShared) {
-      this.canvas2DContext.drawImage(this.renderer.domElement, 0, 0);
-    }
-
-    if (this.#invisible) {
-      this.contentWrapper.classList.remove("invisible");
-    }
-    this.stats?.end();
-
-    if (this.#onRenderFinish) {
-      this.#onRenderFinish();
-    }
-  }
-
-  private onResize(): void {
-    this.resizePending = true;
-    this.scheduleRender();
-  }
-
-  #resize(minWidth: number = 0, minHeight: number = 0): void {
-    this.resizePending = false;
-
-    const w = Math.max(this.contentWrapper.clientWidth, minWidth);
-    const h = Math.max(this.contentWrapper.clientHeight, minHeight);
-    let off = 0;
-    if (this.legacyExperimentalShift > 0) {
-      off = Math.max(0, Math.floor((w - h) * 0.5));
-    } else if (this.legacyExperimentalShift < 0) {
-      off = -Math.max(0, Math.floor((w - h) * 0.5));
-    }
-    let yoff = 0;
-    let excess = 0;
-    if (h > w) {
-      excess = h - w;
-      yoff = -Math.floor(0.5 * excess);
-    }
-    this.camera.aspect = w / h;
-    this.camera.setViewOffset(w, h - excess, off, yoff, w, h);
-    this.camera.updateProjectionMatrix(); // TODO
-
-    if (this.rendererIsShared) {
-      this.canvas.width = w * pixelRatio();
-      this.canvas.height = h * pixelRatio();
-      this.canvas.style.width = w.toString();
-      this.canvas.style.height = w.toString();
-    } else {
-      this.renderer.setPixelRatio(pixelRatio());
-      this.renderer.setSize(w, h, true);
-    }
-
-    this.scheduleRender();
-  }
-
-  // Square crop is useful for rending icons.
-  renderToDataURL(
-    options: {
-      squareCrop?: boolean;
-      minWidth?: number;
-      minHeight?: number;
-    } = {},
-  ): string {
-    this.#resize(options.minWidth, options.minHeight);
-
-    // We don't preserve the drawing buffer, so we have to render again and then immediately read the canvas data.
-    // https://stackoverflow.com/a/30647502
-    this.render();
-
-    let url: string;
-    // TODO: can we assume that a central crop is similar enough to how a square canvas render would loook?
-    if (!options.squareCrop || this.canvas.width === this.canvas.height) {
-      // TODO: is this such an uncommon path that we can skip it?
-      url = this.canvas.toDataURL();
-    } else {
-      const tempCanvas = document.createElement("canvas");
-      const squareSize = Math.min(this.canvas.width, this.canvas.height);
-      tempCanvas.width = squareSize;
-      tempCanvas.height = squareSize;
-      const tempCtx = tempCanvas.getContext("2d")!; // TODO: can we assume this is always availab?E
-      tempCtx.drawImage(
-        this.canvas,
-        -(this.canvas.width - squareSize) / 2,
-        -(this.canvas.height - squareSize) / 2,
-      );
-      url = tempCanvas.toDataURL();
-    }
-    this.#resize();
-    return url;
-  }
-}
-
-customElementsShim.define("twisty-3d-canvas", Twisty3DCanvas);

package/src/cubing/twisty/old/dom/viewers/TwistyOrbitControls.ts

@@ -1,420 +0,0 @@
-import { Camera, Spherical, Vector3 } from "three";
-import { DEGREES_PER_RADIAN } from "../../../views/3D/TAU";
-import { RenderScheduler } from "../../animation/RenderScheduler";
-import type { CameraLatitudeLimits } from "../TwistyPlayerConfig";
-
-// Buffer at the end values of the latitude (phi), to prevent gymbal lock.
-// Without this, the puzzle would flip every frame if you try to push past the
-// end, or snap to a standard longitude (theta).
-const EPSILON = 0.00000001;
-
-const INERTIA_DEFAULT: boolean = true;
-const LATITUDE_LIMITS_DEFAULT: CameraLatitudeLimits = "auto";
-
-const INERTIA_DURATION_MS = 500;
-// If the first inertial render is this long after the last move, we assume the
-// user has halted the cursor and we consider inertia to have "timed out". We
-// never begin animating the inertia.
-const INERTIA_TIMEOUT_MS = 50;
-
-const VERTICAL_MOVEMENT_BASE_SCALE = 0.75;
-
-// progress is from 0 to 1.
-function momentumScale(progress: number) {
-  // This is the exponential curve flipped so that
-  // - The slope at progress = 0 is 1 (this corresponds to "x = 1" on the normal
-  //   curve).
-  // - The scale exponentially "decays" until progress = 1.
-  // This means the scale at the end will be about 0.418
-  return (Math.exp(1 - progress) - (1 - progress)) / (1 - Math.E) + 1;
-}
-
-class Inertia {
-  private scheduler = new RenderScheduler(this.render.bind(this));
-  private lastTimestamp: number;
-  constructor(
-    private startTimestamp: number,
-    private momentumX: number,
-    private momentumY: number,
-    private callback: (movementX: number, movementY: number) => void,
-  ) {
-    this.scheduler.requestAnimFrame();
-    this.lastTimestamp = startTimestamp;
-  }
-
-  private render(now: DOMHighResTimeStamp) {
-    const progressBefore =
-      (this.lastTimestamp - this.startTimestamp) / INERTIA_DURATION_MS;
-    const progressAfter = Math.min(
-      1,
-      (now - this.startTimestamp) / INERTIA_DURATION_MS,
-    );
-
-    if (
-      progressBefore === 0 &&
-      progressAfter > INERTIA_TIMEOUT_MS / INERTIA_DURATION_MS
-    ) {
-      // The user has already paused for a while. Don't start any inertia.
-      return;
-    }
-
-    const delta = momentumScale(progressAfter) - momentumScale(progressBefore);
-
-    // TODO: For now, we only carry horizontal momentum. If this should stay, we
-    // can remove the plumbing for the Y dimension.
-    this.callback(this.momentumX * delta * 1000, this.momentumY * delta * 1000);
-
-    if (progressAfter < 1) {
-      this.scheduler.requestAnimFrame();
-    }
-    this.lastTimestamp = now;
-  }
-}
-
-export interface OrbitCoordinates {
-  latitude: number;
-  longitude: number;
-  distance: number;
-}
-
-export function positionToOrbitCoordinates(
-  position: Vector3,
-): OrbitCoordinates {
-  const spherical = new Spherical();
-  spherical.setFromVector3(position);
-  return {
-    latitude: 90 - spherical.phi * DEGREES_PER_RADIAN,
-    longitude: spherical.theta * DEGREES_PER_RADIAN,
-    distance: spherical.radius,
-  };
-}
-
-// TODO: change mouse cursor while moving.
-export class TwistyOrbitControls {
-  // TODO: should we store as lat/long directly and stick to more rounded values in degrees?
-  #spherical: Spherical = new Spherical();
-  #lookAt: Vector3 = new Vector3(0, 0, 0);
-  // longitude: number;
-  // latitude: number;
-  // altitude: number;
-
-  lookAt(v: Vector3): void {
-    if (!this.#acceptPropagation) {
-      return;
-    }
-    this.#lookAt = v;
-
-    this.#acceptPropagation = false;
-    this.#adjust();
-    this.scheduleRender();
-    try {
-      if (this.mirrorControls) {
-        // TODO: will these ever need to be separate?
-        this.mirrorControls.lookAt(v);
-      }
-    } finally {
-      this.#acceptPropagation = true;
-    }
-  }
-
-  set latitude(newLatitude: number) {
-    // this.#pullFromCamera();
-    this.#spherical.phi = (90 - newLatitude) / DEGREES_PER_RADIAN;
-    this.#propagateSpherical();
-  }
-
-  get latitude(): number {
-    return 90 - this.#spherical.phi * DEGREES_PER_RADIAN;
-  }
-
-  set longitude(newLongitude: number) {
-    // this.#pullFromCamera();
-    this.#spherical.theta = newLongitude / DEGREES_PER_RADIAN;
-    this.#propagateSpherical();
-  }
-
-  // TODO: Wrap into [-180, 180]
-  get longitude(): number {
-    return this.#spherical.theta * DEGREES_PER_RADIAN;
-  }
-
-  set distance(newDistance: number) {
-    // this.#pullFromCamera();
-    this.#spherical.radius = newDistance;
-    this.#propagateSpherical();
-  }
-
-  get distance(): number {
-    return this.#spherical.radius;
-  }
-
-  /** @deprecated */
-  get orbitCoordinates(): OrbitCoordinates {
-    return {
-      latitude: this.latitude,
-      longitude: this.longitude,
-      distance: this.distance,
-    };
-  }
-
-  /** @deprecated */
-  set orbitCoordinates(orbitCoordinates: OrbitCoordinates) {
-    this.latitude = orbitCoordinates.latitude;
-    this.longitude = orbitCoordinates.longitude;
-    this.distance = orbitCoordinates.distance;
-  }
-
-  /** @deprecated */
-  experimentalInertia: boolean = INERTIA_DEFAULT;
-  /** @deprecated */
-  experimentalLatitudeLimits: CameraLatitudeLimits = LATITUDE_LIMITS_DEFAULT;
-  private mirrorControls?: TwistyOrbitControls;
-  private lastTouchClientX: number = 0;
-  private lastTouchClientY: number = 0;
-  private currentTouchID: number | null = null; // TODO: support multiple touches?
-  private onMoveBound = this.onMove.bind(this);
-  private onMouseMoveBound = this.onMouseMove.bind(this);
-  private onMouseEndBound = this.onMouseEnd.bind(this);
-  private onTouchMoveBound = this.onTouchMove.bind(this);
-  private onTouchEndBound = this.onTouchEnd.bind(this);
-  private lastTouchTimestamp: number = 0;
-  private lastTouchMoveMomentumX: number = 0;
-  private lastTouchMoveMomentumY: number = 0;
-  private lastMouseTimestamp: number = 0;
-  private lastMouseMoveMomentumX: number = 0;
-  private lastMouseMoveMomentumY: number = 0;
-  public experimentalHasBeenMoved: boolean = false;
-  constructor(
-    private camera: Camera,
-    private canvas: HTMLCanvasElement,
-    private scheduleRender: () => void,
-  ) {
-    this.#spherical.setFromVector3(camera.position);
-    this.#propagateSpherical();
-    canvas.addEventListener("mousedown", this.onMouseStart.bind(this));
-    canvas.addEventListener("touchstart", this.onTouchStart.bind(this));
-  }
-
-  // f is the fraction of the canvas traversed per ms.
-  temperMovement(f: number): number {
-    // This is scaled to be linear for small values, but to reduce large values
-    // by a significant factor.
-    return (Math.sign(f) * Math.log(Math.abs(f * 10) + 1)) / 6;
-  }
-
-  onMouseStart(e: MouseEvent): void {
-    this.experimentalHasBeenMoved = true;
-    window.addEventListener("mousemove", this.onMouseMoveBound);
-    window.addEventListener("mouseup", this.onMouseEndBound);
-    this.onStart(e);
-
-    this.lastMouseTimestamp = e.timeStamp;
-  }
-
-  onMouseMove(e: MouseEvent): void {
-    if (e.buttons === 0) {
-      // Certain elements (e.g. disabled buttons) can capture the `mouseup`
-      // event. So if we notice that there are no mouse buttons pressed, we stop
-      // the movement.
-      this.onMouseEnd(e);
-      return;
-    }
-
-    if (e.movementX === 0 && e.movementY === 0) {
-      // Short-circuit
-      console.log("short-circuit mouse!");
-      return;
-    }
-
-    const minDim = Math.min(this.canvas.offsetWidth, this.canvas.offsetHeight);
-    const movementX = this.temperMovement(e.movementX / minDim);
-    const movementY = this.temperMovement(
-      (e.movementY / minDim) * VERTICAL_MOVEMENT_BASE_SCALE,
-    );
-    this.onMove(movementX, movementY);
-
-    const deltaMs = e.timeStamp - this.lastMouseTimestamp;
-    if (deltaMs > 0) {
-      this.lastMouseMoveMomentumX = movementX / deltaMs;
-      this.lastMouseMoveMomentumY = movementY / deltaMs;
-      this.lastMouseTimestamp = e.timeStamp;
-    }
-  }
-
-  onMouseEnd(e: MouseEvent): void {
-    window.removeEventListener("mousemove", this.onMouseMoveBound);
-    window.removeEventListener("mouseup", this.onMouseEndBound);
-    this.onEnd(e);
-
-    if (this.experimentalInertia) {
-      new Inertia(
-        this.lastMouseTimestamp,
-        this.lastMouseMoveMomentumX,
-        this.lastMouseMoveMomentumY,
-        this.onMoveBound,
-      );
-    }
-  }
-
-  onTouchStart(e: TouchEvent): void {
-    this.experimentalHasBeenMoved = true;
-    if (this.currentTouchID === null) {
-      if (e.touches[0].clientX === 0 && e.touches[0].clientY === 0) {
-        // Short-circuit
-        console.log("short-circuit touch!");
-        return;
-      }
-      this.currentTouchID = e.changedTouches[0].identifier;
-      this.lastTouchClientX = e.touches[0].clientX;
-      this.lastTouchClientY = e.touches[0].clientY;
-      window.addEventListener("touchmove", this.onTouchMoveBound);
-      window.addEventListener("touchend", this.onTouchEndBound);
-      window.addEventListener("touchcancel", this.onTouchEndBound);
-      this.onStart(e);
-
-      this.lastTouchTimestamp = e.timeStamp;
-    }
-  }
-
-  onTouchMove(e: TouchEvent): void {
-    for (let i = 0; i < e.changedTouches.length; i++) {
-      const touch = e.changedTouches[i];
-      if (touch.identifier === this.currentTouchID) {
-        const minDim = Math.min(
-          this.canvas.offsetWidth,
-          this.canvas.offsetHeight,
-        );
-        const movementX = this.temperMovement(
-          (touch.clientX - this.lastTouchClientX) / minDim,
-        );
-        const movementY = this.temperMovement(
-          ((touch.clientY - this.lastTouchClientY) / minDim) *
-            VERTICAL_MOVEMENT_BASE_SCALE,
-        );
-        this.onMove(movementX, movementY);
-        this.lastTouchClientX = touch.clientX;
-        this.lastTouchClientY = touch.clientY;
-
-        const deltaMs = e.timeStamp - this.lastTouchTimestamp;
-        if (deltaMs > 0) {
-          this.lastTouchMoveMomentumX = movementX / deltaMs;
-          this.lastTouchMoveMomentumY = movementY / deltaMs;
-          this.lastTouchTimestamp = e.timeStamp;
-        }
-      }
-    }
-  }
-
-  onTouchEnd(e: TouchEvent): void {
-    for (let i = 0; i < e.changedTouches.length; i++) {
-      const touch = e.changedTouches[i];
-      if (touch.identifier === this.currentTouchID) {
-        this.currentTouchID = null;
-        window.removeEventListener("touchmove", this.onTouchMoveBound);
-        window.removeEventListener("touchend", this.onTouchEndBound);
-        window.removeEventListener("touchcancel", this.onTouchEndBound);
-        this.onEnd(e);
-      }
-    }
-
-    if (this.experimentalInertia) {
-      new Inertia(
-        this.lastTouchTimestamp,
-        this.lastTouchMoveMomentumX,
-        this.lastTouchMoveMomentumY,
-        this.onMoveBound,
-      );
-    }
-  }
-
-  onStart(e: MouseEvent | TouchEvent): void {
-    e.preventDefault();
-  }
-
-  onMove(movementX: number, movementY: number): void {
-    // TODO: optimize, e.g. by caching or using the spherical coordinates
-    // directly if they are still fresh.
-
-    // this.#pullFromCamera();
-
-    // console.log(movementX, movementY)
-
-    const newSpherical = new Spherical();
-    newSpherical.copy(this.#spherical);
-
-    newSpherical.theta += -2 * movementX;
-    newSpherical.phi += -2 * movementY;
-    if (this.experimentalLatitudeLimits !== "none") {
-      newSpherical.phi = Math.max(newSpherical.phi, Math.PI * 0.3); // TODO: Arctic circle: 1/6
-      newSpherical.phi = Math.min(newSpherical.phi, Math.PI * 0.7); // TODO: Antarctic circle: 5/6
-    } else {
-      newSpherical.phi = Math.max(newSpherical.phi, EPSILON);
-      newSpherical.phi = Math.min(newSpherical.phi, Math.PI - EPSILON);
-    }
-
-    if (
-      isNaN(newSpherical.theta) ||
-      newSpherical.theta === Infinity ||
-      newSpherical.theta === -Infinity
-    ) {
-      return;
-    }
-
-    if (
-      isNaN(newSpherical.phi) ||
-      newSpherical.phi === Infinity ||
-      newSpherical.phi === -Infinity
-    ) {
-      return;
-    }
-
-    this.#spherical = newSpherical;
-    this.#propagateSpherical();
-  }
-
-  #adjust(): void {
-    this.#spherical.makeSafe(); // TODO: IS this close enouh for all purposes? Can we set exact using e.g. matrices?
-    this.camera.position.setFromSpherical(this.#spherical);
-    this.camera.lookAt(this.#lookAt);
-  }
-
-  #acceptPropagation: boolean = true;
-  // #lastTranslation = 0;
-  #propagateSpherical(): void {
-    this.#acceptPropagation = false;
-    try {
-      this.#adjust();
-
-      this.scheduleRender();
-      this.mirrorControls?.updateMirroredCamera({
-        latitude: this.latitude,
-        longitude: this.longitude,
-        distance: this.distance,
-      });
-      // We would take the event in the arguments, and try to call
-      // `preventDefault()` on it, but Chrome logs an error event if we try to
-      // catch it, because it enforces a passive listener.
-    } finally {
-      this.#acceptPropagation = true;
-    }
-  }
-
-  onEnd(e: MouseEvent | TouchEvent): void {
-    e.preventDefault();
-  }
-
-  public setMirror(m: TwistyOrbitControls): void {
-    this.mirrorControls = m;
-  }
-
-  updateMirroredCamera(orbitCoordinates: OrbitCoordinates): void {
-    if (this.#acceptPropagation) {
-      this.latitude = -orbitCoordinates.latitude;
-      this.longitude = orbitCoordinates.longitude + 180;
-      this.distance = orbitCoordinates.distance;
-
-      this.#adjust();
-      this.scheduleRender();
-    }
-  }
-}

package/src/cubing/twisty/old/dom/viewers/TwistyViewerElement.ts

@@ -1,5 +0,0 @@
-import type { Twisty3DRenderTarget } from "../../../views/3D/Twisty3DRenderTarget";
-
-export interface TwistyViewerElement extends Element, Twisty3DRenderTarget {
-  /*...*/
-}