@volter/editor-game 0.5.65

package/src/three/authoring/constraint-inspector-section.tsx

@@ -0,0 +1,189 @@
+import { instanceStampOf } from '@volter/editor-core/authoring/component-instance-root';
+import { setAuthoringSelection } from '@volter/editor-core/authoring/consumer-actions';
+import { useEditorStore } from '@volter/editor-core/editor-runtime';
+import type { InspectorSectionProps } from '@volter/editor-core/inspector-section-registry';
+import type { AuthoringAdapter, EditorNode } from '@volter/editor-project/adapter';
+import {
+  type ConstraintMark,
+  type ConstraintSnapshot,
+  constraintsOf,
+} from '@volter/threejs-runtime/adapter/constraint';
+import {
+  Button,
+  EditorBanner,
+  FieldGroup,
+  FieldRow,
+  Text,
+  themeVars,
+} from '@volter/editor-sdk/widgets';
+import type * as THREE from 'three';
+
+function objectFor(adapter: AuthoringAdapter, nodeId: string | null) {
+  return nodeId ? (adapter.hierarchy.object3D?.(nodeId) ?? null) : null;
+}
+
+/** Marks owned by this semantic component, including same-instance host nodes
+ * the component-aware hierarchy deliberately folds beneath its one row. */
+function constraintMarksFor(object: THREE.Object3D | null): ConstraintMark[] {
+  if (!object) return [];
+  const instance = instanceStampOf(object);
+  const marks = new Set<ConstraintMark>();
+  const visit = (current: THREE.Object3D): void => {
+    const currentInstance = instanceStampOf(current);
+    if (
+      current !== object &&
+      instance !== undefined &&
+      currentInstance !== undefined &&
+      currentInstance !== instance
+    ) {
+      return;
+    }
+    for (const mark of constraintsOf(current)) marks.add(mark);
+    for (const child of current.children) visit(child);
+  };
+  visit(object);
+  return [...marks];
+}
+
+export function matches(node: EditorNode | null, adapter: AuthoringAdapter): boolean {
+  return constraintMarksFor(objectFor(adapter, node?.id ?? null)).length > 0;
+}
+
+const STATUS_LABEL: Record<ConstraintSnapshot['status'], string> = {
+  ready: 'Ready',
+  disabled: 'Disabled',
+  unresolved: 'Unresolved',
+  error: 'Error',
+};
+
+function typeLabel(type: ConstraintMark['config']['type']): string {
+  if (type === 'two-bone-ik') return 'Two Bone IK';
+  if (type === 'ccd-ik') return 'CCD IK';
+  if (type === 'aim') return 'Aim';
+  if (type === 'rotation') return 'Rotation';
+  return type;
+}
+
+export function ConstraintStackSection({ adapter, nodeId }: InspectorSectionProps) {
+  const store = useEditorStore();
+  const object = nodeId
+    ? (store.objectMap.get(nodeId) ?? objectFor(adapter, nodeId) ?? null)
+    : null;
+  const marks = constraintMarksFor(object).sort(
+    (left, right) => left.config.order - right.config.order,
+  );
+
+  const selectObject = (object: THREE.Object3D | null): void => {
+    if (!object) return;
+    const id = adapter.hierarchy.idForObject3D?.(object);
+    if (!id) return;
+    if (!setAuthoringSelection(adapter, [id], { intent: 'exact' })) store.select(id);
+  };
+
+  return (
+    <div style={{ display: 'grid', gap: 10 }}>
+      {/* biome-ignore lint/complexity/noExcessiveCognitiveComplexity: one compact card projects one constraint snapshot. */}
+      {marks.map((mark, index) => {
+        const config = mark.config;
+        const snapshot = mark.getSnapshot();
+        const isIk = config.type === 'two-bone-ik' || config.type === 'ccd-ik';
+        return (
+          <div
+            key={config.id}
+            style={{
+              border: `1px solid ${themeVars.boundary.default}`,
+              borderRadius: 6,
+              overflow: 'hidden',
+            }}
+          >
+            <div
+              style={{
+                alignItems: 'center',
+                background: themeVars.surface.raised,
+                display: 'flex',
+                gap: 8,
+                justifyContent: 'space-between',
+                padding: '6px 8px',
+              }}
+            >
+              <Text>{`${index + 1}. ${config.label}`}</Text>
+              <Text tone="muted">{typeLabel(config.type)}</Text>
+            </div>
+            {snapshot.message &&
+            (snapshot.status === 'error' || snapshot.status === 'unresolved') ? (
+              <EditorBanner tone="error">{snapshot.message}</EditorBanner>
+            ) : null}
+            <FieldGroup>
+              <FieldRow label="Status">
+                <Text
+                  tone={
+                    snapshot.status === 'error' || snapshot.status === 'unresolved'
+                      ? 'danger'
+                      : snapshot.status === 'ready'
+                        ? 'success'
+                        : 'muted'
+                  }
+                >
+                  {STATUS_LABEL[snapshot.status]}
+                </Text>
+              </FieldRow>
+              <FieldRow label="Weight">
+                <Text tone="muted">{`${Math.round(config.weight * 100)}%`}</Text>
+              </FieldRow>
+              {isIk ? (
+                <FieldRow label="Chain">
+                  <Text tone="muted">
+                    {snapshot.chain.map((bone) => bone.name || bone.type).join(' → ') ||
+                      'Unresolved'}
+                  </Text>
+                </FieldRow>
+              ) : (
+                <FieldRow label="Constrained">
+                  {snapshot.constrained &&
+                  adapter.hierarchy.idForObject3D?.(snapshot.constrained) ? (
+                    <Button size="compact" onClick={() => selectObject(snapshot.constrained)}>
+                      {snapshot.constrained.name || 'Select object'}
+                    </Button>
+                  ) : (
+                    <Text tone="muted">{snapshot.constrained?.name || 'Unresolved'}</Text>
+                  )}
+                </FieldRow>
+              )}
+              {snapshot.error !== null ? (
+                <FieldRow
+                  label={snapshot.error.unit === 'degrees' ? 'Angular error' : 'Solve error'}
+                >
+                  <Text tone="muted">
+                    {snapshot.error.unit === 'degrees'
+                      ? `${snapshot.error.value.toFixed(2)}°`
+                      : `${snapshot.error.value.toFixed(3)} m`}
+                  </Text>
+                </FieldRow>
+              ) : null}
+              <FieldRow label="Target">
+                {snapshot.target && adapter.hierarchy.idForObject3D?.(snapshot.target) ? (
+                  <Button size="compact" onClick={() => selectObject(snapshot.target)}>
+                    {snapshot.target.name || 'Select target'}
+                  </Button>
+                ) : (
+                  <Text tone="muted">{snapshot.target?.name || 'Dynamic target'}</Text>
+                )}
+              </FieldRow>
+              {isIk ? (
+                <FieldRow label="Pole">
+                  {snapshot.pole && adapter.hierarchy.idForObject3D?.(snapshot.pole) ? (
+                    <Button size="compact" onClick={() => selectObject(snapshot.pole)}>
+                      {snapshot.pole.name || 'Select pole'}
+                    </Button>
+                  ) : (
+                    <Text tone="muted">{snapshot.pole?.name || 'None'}</Text>
+                  )}
+                </FieldRow>
+              ) : null}
+            </FieldGroup>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/three/authoring/design-time-renderer.ts

@@ -0,0 +1,189 @@
+/**
+ * A design root borrows the viewport's GPU for offscreen work (PMREM, cube
+ * cameras, render textures). The editor owns the canvas, loop and context.
+ * Fiber configuration is local to the borrower and applied only while it
+ * submits work, so overlapping HMR mounts cannot restore each other's state.
+ */
+import {
+  Color,
+  type ColorRepresentation,
+  Vector4,
+  type WebGLRenderer,
+  type WebGLRenderTarget,
+} from 'three';
+
+export function createDesignTimeRenderer(
+  canvas: HTMLCanvasElement,
+  renderer: WebGLRenderer,
+): WebGLRenderer {
+  const noop = (): void => {};
+  const owned = new Set<PropertyKey>([
+    'dispose',
+    'forceContextLoss',
+    'forceContextRestore',
+    'setAnimationLoop',
+    'setSize',
+    'setPixelRatio',
+    'setDrawingBufferSize',
+  ]);
+  const writes = new Map<PropertyKey, unknown>();
+  const shadowMap = { ...renderer.shadowMap };
+  let xrEnabled = renderer.xr.enabled;
+  const clearColor = renderer.getClearColor(new Color());
+  let clearAlpha = renderer.getClearAlpha();
+  let renderTarget: WebGLRenderTarget | null = null;
+  let cubeFace = 0;
+  let mipLevel = 0;
+  const viewport = renderer.getViewport(new Vector4());
+  const scissor = renderer.getScissor(new Vector4());
+  let scissorTest = renderer.getScissorTest();
+  let viewportAfterTarget = false;
+  let scissorAfterTarget = false;
+  let scissorTestAfterTarget = false;
+  const copyRect = (out: Vector4, x: Vector4 | number, y?: number, w?: number, h?: number) => {
+    if (typeof x === 'number') out.set(x, y!, w!, h!);
+    else out.copy(x);
+  };
+  const xr = new Proxy(renderer.xr, {
+    get(target, key) {
+      if (key === 'enabled') return xrEnabled;
+      if (key === 'setAnimationLoop' || key === 'addEventListener' || key === 'removeEventListener')
+        return noop;
+      const value = Reflect.get(target, key, target);
+      return typeof value === 'function' ? value.bind(target) : value;
+    },
+    set(target, key, value) {
+      if (key === 'enabled') {
+        xrEnabled = value;
+        return true;
+      }
+      return Reflect.set(target, key, value, target);
+    },
+  });
+  const renderLists = new Proxy(renderer.renderLists, {
+    get(target, key) {
+      if (key === 'dispose') return noop;
+      const value = Reflect.get(target, key, target);
+      return typeof value === 'function' ? value.bind(target) : value;
+    },
+  });
+
+  function submit(method: (...args: unknown[]) => unknown, args: unknown[]): unknown {
+    const previous = new Map<PropertyKey, unknown>();
+    const previousShadows = { ...renderer.shadowMap };
+    const previousXr = renderer.xr.enabled;
+    const previousColor = renderer.getClearColor(new Color());
+    const previousAlpha = renderer.getClearAlpha();
+    const previousTarget = renderer.getRenderTarget();
+    const previousFace = renderer.getActiveCubeFace();
+    const previousMip = renderer.getActiveMipmapLevel();
+    const previousViewport = renderer.getViewport(new Vector4());
+    const previousScissor = renderer.getScissor(new Vector4());
+    const previousScissorTest = renderer.getScissorTest();
+    try {
+      for (const [key, value] of writes) {
+        previous.set(key, Reflect.get(renderer, key));
+        Reflect.set(renderer, key, value);
+      }
+      Object.assign(renderer.shadowMap, shadowMap);
+      renderer.xr.enabled = xrEnabled;
+      renderer.setClearColor(clearColor, clearAlpha);
+      renderer.setViewport(viewport);
+      renderer.setScissor(scissor);
+      renderer.setScissorTest(scissorTest);
+      renderer.setRenderTarget(renderTarget, cubeFace, mipLevel);
+      if (viewportAfterTarget) renderer.setViewport(viewport);
+      if (scissorAfterTarget) renderer.setScissor(scissor);
+      if (scissorTestAfterTarget) renderer.setScissorTest(scissorTest);
+      return method.apply(renderer, args);
+    } finally {
+      for (const [key, value] of previous) Reflect.set(renderer, key, value);
+      Object.assign(renderer.shadowMap, previousShadows);
+      renderer.xr.enabled = previousXr;
+      renderer.setClearColor(previousColor, previousAlpha);
+      renderer.setViewport(previousViewport);
+      renderer.setScissor(previousScissor);
+      renderer.setScissorTest(previousScissorTest);
+      renderer.setRenderTarget(previousTarget, previousFace, previousMip);
+    }
+  }
+
+  const methods = new Map<PropertyKey, unknown>();
+  return new Proxy(renderer, {
+    get(target, key) {
+      if (key === 'domElement') return canvas;
+      if (key === 'shadowMap') return shadowMap;
+      if (key === 'xr') return xr;
+      if (key === 'renderLists') return renderLists;
+      if (owned.has(key)) return noop;
+      if (key === 'getRenderTarget') return () => renderTarget;
+      if (key === 'getActiveCubeFace') return () => cubeFace;
+      if (key === 'getActiveMipmapLevel') return () => mipLevel;
+      if (key === 'setRenderTarget')
+        return (value: WebGLRenderTarget | null, face = 0, mip = 0) => {
+          renderTarget = value;
+          cubeFace = face;
+          mipLevel = mip;
+          viewportAfterTarget = scissorAfterTarget = scissorTestAfterTarget = false;
+        };
+      if (key === 'getViewport') return (out: Vector4) => out.copy(viewport);
+      if (key === 'getCurrentViewport')
+        return (out: Vector4) => {
+          if (renderTarget && !viewportAfterTarget) return out.copy(renderTarget.viewport);
+          out.copy(viewport).multiplyScalar(renderer.getPixelRatio());
+          return viewportAfterTarget ? out.round() : out.floor();
+        };
+      if (key === 'getScissor') return (out: Vector4) => out.copy(scissor);
+      if (key === 'getScissorTest') return () => scissorTest;
+      if (key === 'setViewport')
+        return (x: Vector4 | number, y?: number, w?: number, h?: number) => {
+          copyRect(viewport, x, y, w, h);
+          viewportAfterTarget = true;
+        };
+      if (key === 'setScissor')
+        return (x: Vector4 | number, y?: number, w?: number, h?: number) => {
+          copyRect(scissor, x, y, w, h);
+          scissorAfterTarget = true;
+        };
+      if (key === 'setScissorTest')
+        return (value: boolean) => {
+          scissorTest = value;
+          scissorTestAfterTarget = true;
+        };
+      if (key === 'getClearColor') return (out: Color) => out.copy(clearColor);
+      if (key === 'getClearAlpha') return () => clearAlpha;
+      if (key === 'setClearColor')
+        return (color: ColorRepresentation, alpha = clearAlpha) => {
+          clearColor.set(color);
+          clearAlpha = alpha;
+        };
+      if (key === 'setClearAlpha')
+        return (alpha: number) => {
+          clearAlpha = alpha;
+        };
+      if (writes.has(key)) return writes.get(key);
+      const value = Reflect.get(target, key, target);
+      if (typeof value !== 'function') return value;
+      if (!methods.has(key)) {
+        const gpu = /^(render|compile|clear|copy|init|readRenderTarget)/.test(String(key));
+        methods.set(
+          key,
+          gpu
+            ? (...args: unknown[]) => {
+                // Fiber's final screen draw is the viewport's job. Offscreen draws
+                // and clears must execute: their textures are inputs to that image.
+                if ((key === 'render' || String(key).startsWith('clear')) && !renderTarget)
+                  return undefined;
+                return submit(value, args);
+              }
+            : value.bind(target),
+        );
+      }
+      return methods.get(key);
+    },
+    set(_target, key, value) {
+      if (key !== 'domElement') writes.set(key, value);
+      return true;
+    },
+  });
+}

package/src/three/authoring/model-asset-inspector-section.css

@@ -0,0 +1,41 @@
+/* A section's own verb (Open Editor, Open Source). Section headers carry no
+   action slot — every projection heads a section the same way — so a block's
+   verb sits at the top of its BODY, where it reads identically in the card
+   and the column. */
+.vgai-model-inspector-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--vgai-space-2) var(--vgai-space-3) 0;
+}
+
+.vgai-model-inspector-row > div {
+  display: grid;
+  min-width: 0;
+}
+
+.vgai-model-inspector-list {
+  display: grid;
+  max-height: 360px;
+  gap: var(--vgai-space-2);
+  overflow: auto;
+}
+
+.vgai-model-inspector-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--vgai-space-3);
+  padding: var(--vgai-space-3);
+}
+
+.vgai-model-inspector-row:has(.vgai-model-material-swatch) {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+}
+
+.vgai-model-material-swatch {
+  width: var(--vgai-control-default-height);
+  height: var(--vgai-control-default-height);
+  border: var(--vgai-stroke-resting) solid var(--vgai-boundary-strong);
+  border-radius: var(--vgai-radius-sm);
+  background-color: var(--vgai-surface-inset);
+}