dsh-3d-viewer 0.1.0 → 0.2.0

package/src/scene/materials.js

@@ -1,263 +0,0 @@
-import {
-  DoubleSide,
-  MeshBasicMaterial,
-  MeshStandardMaterial,
-  NoColorSpace,
-  SRGBColorSpace,
-} from 'three';
-
-/** Fallback materials offered by the material rail. */
-export const MATERIAL_PRESETS = Object.freeze({
-  diffuse: Object.freeze({ color: 0xd9d9d6, metalness: 0, roughness: 1 }),
-  plastic: Object.freeze({ color: 0xe8eef5, metalness: 0, roughness: 0.1 }),
-  metal: Object.freeze({ color: 0xc5cbd3, metalness: 1, roughness: 0 }),
-  'metal-polished': Object.freeze({ color: 0xd9dde4, metalness: 1, roughness: 0.3 }),
-  clay: Object.freeze({ color: 0xb46f52, metalness: 0, roughness: 0.84 }),
-});
-
-/** Preset id that keeps the original converted FBX material. */
-export const DEFAULT_MATERIAL = 'original';
-
-/** Texture slots carried over from the source material to the PBR replacement. */
-const TEXTURE_SLOTS = Object.freeze([
-  'map',
-  'normalMap',
-  'bumpMap',
-  'displacementMap',
-  'aoMap',
-  'lightMap',
-  'alphaMap',
-  'emissiveMap',
-]);
-
-/** Slots whose pixels are sRGB-encoded color data. */
-const SRGB_TEXTURE_SLOTS = new Set(['map', 'emissiveMap', 'lightMap']);
-
-/** Scalar material fields copied verbatim, with the value used when unset. */
-const SCALAR_DEFAULTS = Object.freeze({
-  emissiveIntensity: 1,
-  bumpScale: 1,
-  displacementScale: 1,
-  displacementBias: 0,
-  aoMapIntensity: 1,
-  lightMapIntensity: 1,
-});
-
-/** Material state copied verbatim from the source material. */
-const COPIED_PROPERTIES = Object.freeze([
-  'transparent',
-  'opacity',
-  'alphaTest',
-  'side',
-  'shadowSide',
-  'depthWrite',
-  'depthTest',
-  'blending',
-  'premultipliedAlpha',
-  'polygonOffset',
-  'polygonOffsetFactor',
-  'polygonOffsetUnits',
-  'toneMapped',
-  'vertexColors',
-  'flatShading',
-  'wireframe',
-  'visible',
-]);
-
-/**
- * Approximate a PBR roughness from a Phong specular exponent.
- *
- * @param {import('three').Material} material Source FBX material.
- * @returns {number} GGX roughness in [0.2, 0.9].
- */
-export function pbrRoughness(material) {
-  const shininess = typeof material.shininess === 'number' ? material.shininess : 0;
-  if (shininess <= 0) return 0.62;
-  return Math.min(0.9, Math.max(0.2, 1 - Math.log2(shininess + 1) / 10));
-}
-
-/**
- * Replace an FBX Phong/Lambert material with a metallic-roughness PBR material.
- *
- * Three's MeshStandardMaterial is its Cook-Torrance path and evaluates
- * BRDF_Lambert for diffuse, D_GGX, F_Schlick and the correlated Smith-GGX
- * visibility (V_GGX_SmithCorrelated, equivalent to Filament's
- * V_SmithGGXCorrelated). Textures and material state are retained.
- *
- * @param {import('three').Material | import('three').Material[] | null | undefined} source Source material(s).
- * @param {Map<string, import('three').Material>} cache Shared converted materials.
- * @returns {import('three').Material | import('three').Material[] | null | undefined} PBR material(s).
- */
-export function toPbrMaterial(source, cache) {
-  if (source === null || source === undefined) return source;
-  if (Array.isArray(source)) return source.map((entry) => toPbrMaterial(entry, cache));
-  if (source.isMeshStandardMaterial === true || source.isMeshPhysicalMaterial === true) return source;
-
-  const cached = cache.get(source.uuid);
-  if (cached !== undefined) return cached;
-
-  const pbr = new MeshStandardMaterial();
-  pbr.name = source.name;
-  // FBXLoaderPbr converts FBX Diffuse/Emissive/Specular colors from sRGB to
-  // the linear working color space; copy those linear values unchanged.
-  if (source.color !== undefined) pbr.color.copy(source.color);
-  if (source.emissive !== undefined) pbr.emissive.copy(source.emissive);
-  for (const [property, fallback] of Object.entries(SCALAR_DEFAULTS)) {
-    pbr[property] = source[property] ?? fallback;
-  }
-  for (const slot of TEXTURE_SLOTS) {
-    pbr[slot] = source[slot] ?? null;
-  }
-  if (source.normalScale !== undefined) pbr.normalScale.copy(source.normalScale);
-
-  // Normalize texture color spaces explicitly. Color maps are decoded from
-  // sRGB by the shader; normal/AO/alpha/displacement/bump maps stay linear.
-  for (const slot of TEXTURE_SLOTS) {
-    const texture = pbr[slot];
-    if (texture === null) continue;
-    texture.colorSpace = SRGB_TEXTURE_SLOTS.has(slot) ? SRGBColorSpace : NoColorSpace;
-  }
-
-  const fbxRoughness = source.userData?.fbxRoughness;
-  pbr.roughness = typeof fbxRoughness === 'number' && Number.isFinite(fbxRoughness)
-    ? Math.min(1, Math.max(0, fbxRoughness))
-    : pbrRoughness(source);
-  const fbxMetalness = source.userData?.fbxMetalness;
-  pbr.metalness = typeof fbxMetalness === 'number' && Number.isFinite(fbxMetalness)
-    ? Math.min(1, Math.max(0, fbxMetalness))
-    : 0;
-  for (const property of COPIED_PROPERTIES) {
-    pbr[property] = source[property];
-  }
-  pbr.userData = { ...source.userData };
-
-  cache.set(source.uuid, pbr);
-  return pbr;
-}
-
-/**
- * Resolve a material preset id, falling back to the original material.
- *
- * @param {unknown} id Requested preset.
- * @returns {string} A valid preset id.
- */
-export function normalizeMaterialPreset(id) {
-  return id === DEFAULT_MATERIAL || (typeof id === 'string' && MATERIAL_PRESETS[id] !== undefined)
-    ? id
-    : DEFAULT_MATERIAL;
-}
-
-/**
- * Convert every mesh once, then switch between original, preset, and wireframe
- * materials without touching geometry.
- *
- * @param {import('three').Object3D} root Parsed FBX graph.
- * @returns {{
- *   setPreset: (id: unknown) => boolean,
- *   setWireframe: (enabled: boolean) => boolean,
- *   dispose: () => void,
- *   readonly preset: string,
- *   readonly wireframe: boolean,
- * }} Material controls.
- */
-export function createMaterialController(root) {
-  const pbrMaterials = new Map();
-  const presetMaterials = new Map();
-  const meshStates = [];
-  let preset = DEFAULT_MATERIAL;
-  let wireframeActive = false;
-
-  root.traverse((child) => {
-    if (child.isMesh !== true) return;
-
-    child.material = toPbrMaterial(child.material, pbrMaterials);
-    child.castShadow = true;
-    child.receiveShadow = true;
-    meshStates.push({
-      mesh: child,
-      material: child.material,
-      castShadow: true,
-      receiveShadow: true,
-    });
-  });
-
-  const wireframeMaterial = new MeshBasicMaterial({
-    color: 0x4d5561,
-    wireframe: true,
-    side: DoubleSide,
-    toneMapped: false,
-  });
-
-  function getPresetMaterial(id) {
-    const cached = presetMaterials.get(id);
-    if (cached !== undefined) return cached;
-
-    const definition = MATERIAL_PRESETS[id];
-    if (definition === undefined) return null;
-
-    const material = new MeshStandardMaterial({
-      name: `dsh3dv-${id}`,
-      color: definition.color,
-      metalness: definition.metalness,
-      roughness: definition.roughness,
-      side: DoubleSide,
-    });
-    presetMaterials.set(id, material);
-    return material;
-  }
-
-  function apply() {
-    const override = !wireframeActive && preset !== DEFAULT_MATERIAL
-      ? getPresetMaterial(preset)
-      : null;
-
-    for (const state of meshStates) {
-      state.mesh.material = wireframeActive
-        ? wireframeMaterial
-        : (override ?? state.material);
-      state.mesh.castShadow = wireframeActive ? false : state.castShadow;
-      state.mesh.receiveShadow = wireframeActive ? false : state.receiveShadow;
-    }
-  }
-
-  function setPreset(id) {
-    const next = normalizeMaterialPreset(id);
-    if (next === preset) return false;
-
-    preset = next;
-    if (!wireframeActive) apply();
-    return true;
-  }
-
-  function setWireframe(enabled) {
-    const next = Boolean(enabled);
-    if (next === wireframeActive) return false;
-
-    wireframeActive = next;
-    apply();
-    return true;
-  }
-
-  function dispose() {
-    for (const state of meshStates) {
-      state.mesh.material = state.material;
-      state.mesh.castShadow = state.castShadow;
-      state.mesh.receiveShadow = state.receiveShadow;
-    }
-    for (const material of presetMaterials.values()) material.dispose();
-    presetMaterials.clear();
-    wireframeMaterial.dispose();
-  }
-
-  return {
-    setPreset,
-    setWireframe,
-    dispose,
-    get preset() {
-      return preset;
-    },
-    get wireframe() {
-      return wireframeActive;
-    },
-  };
-}

package/src/scene/postprocessing.js

@@ -1,155 +0,0 @@
-import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-import { BLUE_NOISE_SIZE, createBlueNoiseTexture } from './blue-noise.js';
-
-const POST_VERTEX_SHADER = `
-varying vec2 vUv;
-
-void main() {
-  vUv = uv;
-  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-}
-`;
-
-const POST_FRAGMENT_SHADER = `
-uniform sampler2D tDiffuse;
-uniform sampler2D uBlueNoise;
-uniform float uExposure;
-uniform float uBlueNoiseScale;
-
-varying vec2 vUv;
-
-vec3 RRTAndODTFit(vec3 v) {
-  vec3 a = v * (v + 0.0245786) - 0.000090537;
-  vec3 b = v * (0.983729 * v + 0.4329510) + 0.238081;
-  return a / b;
-}
-
-vec3 acesFilmic(vec3 color) {
-  const mat3 ACESInputMat = mat3(
-    vec3(0.59719, 0.07600, 0.02840),
-    vec3(0.35458, 0.90834, 0.13383),
-    vec3(0.04823, 0.01566, 0.83777)
-  );
-  const mat3 ACESOutputMat = mat3(
-    vec3(1.60475, -0.10208, -0.00327),
-    vec3(-0.53108, 1.10813, -0.07276),
-    vec3(-0.07367, -0.00605, 1.07602)
-  );
-  color = ACESInputMat * color;
-  color = RRTAndODTFit(color);
-  color = ACESOutputMat * color;
-  return clamp(color, 0.0, 1.0);
-}
-
-vec3 sRGBTransferOETF(vec3 value) {
-  return mix(
-    pow(value, vec3(0.41666)) * 1.055 - 0.055,
-    value * 12.92,
-    lessThanEqual(value, vec3(0.0031308))
-  );
-}
-
-float ditherNoise(vec2 p) {
-  // Blue-noise mask, sampled at native pixel coordinates. The amplitude is
-  // +/- 1.5 8-bit display steps; the alpha mask below keeps white clean.
-  float noise = texture2D(uBlueNoise, p * uBlueNoiseScale).r;
-  return (noise - 0.5) * (3.0 / 255.0);
-}
-
-void main() {
-  vec4 base = texture2D(tDiffuse, vUv);
-  float alpha = clamp(base.a, 0.0, 1.0);
-  vec3 linear = base.rgb / max(alpha, 1e-4);
-
-  linear *= uExposure / 0.6;
-  linear = acesFilmic(linear);
-  vec3 color = sRGBTransferOETF(linear);
-  vec3 finalColor = mix(vec3(1.0), color, alpha);
-
-  // Keep the pure white background clean; only dither pixels that actually
-  // contain scene content.
-  float ditherMask = smoothstep(0.0, 0.02, alpha);
-  finalColor += ditherNoise(gl_FragCoord.xy) * ditherMask;
-  gl_FragColor = vec4(clamp(finalColor, 0.0, 1.0), 1.0);
-}
-`;
-
-/**
- * Render the transparent scene into an MSAA target, then tone-map and
- * composite it over a pure white background in a single output pass.
- *
- * @param {{
- *   renderer: import('three').WebGLRenderer,
- *   scene: import('three').Scene,
- *   camera: import('three').PerspectiveCamera,
- *   width: number,
- *   height: number,
- *   pixelRatio: number,
- * }} options Renderer, scene, camera, and initial surface size.
- * @returns {{
- *   render: (delta: number) => void,
- *   setSize: (width: number, height: number, pixelRatio: number) => boolean,
- *   dispose: () => void,
- * }} Post-processing controls.
- */
-export function createPostProcessing({ renderer, scene, camera, width, height, pixelRatio }) {
-  const composer = new EffectComposer(renderer);
-  const samples = Math.min(4, renderer.capabilities.maxSamples || 0);
-  if (samples > 0) {
-    composer.renderTarget1.samples = samples;
-    composer.renderTarget2.samples = samples;
-  }
-  composer.setPixelRatio(pixelRatio);
-  composer.setSize(width, height);
-
-  const renderPass = new RenderPass(scene, camera);
-  const blueNoise = createBlueNoiseTexture();
-  const outputPass = new ShaderPass({
-    uniforms: {
-      tDiffuse: { value: null },
-      uBlueNoise: { value: blueNoise },
-      uExposure: { value: renderer.toneMappingExposure },
-      uBlueNoiseScale: { value: 1 / BLUE_NOISE_SIZE },
-    },
-    vertexShader: POST_VERTEX_SHADER,
-    fragmentShader: POST_FRAGMENT_SHADER,
-  });
-  outputPass.material.toneMapped = false;
-  outputPass.renderToScreen = true;
-
-  composer.addPass(renderPass);
-  composer.addPass(outputPass);
-
-  let currentWidth = width;
-  let currentHeight = height;
-  let currentPixelRatio = pixelRatio;
-
-  function setSize(nextWidth, nextHeight, nextPixelRatio) {
-    const sizeChanged = nextWidth !== currentWidth || nextHeight !== currentHeight;
-    const ratioChanged = nextPixelRatio !== currentPixelRatio;
-    if (!sizeChanged && !ratioChanged) return false;
-
-    if (ratioChanged) composer.setPixelRatio(nextPixelRatio);
-    if (sizeChanged) composer.setSize(nextWidth, nextHeight);
-
-    currentWidth = nextWidth;
-    currentHeight = nextHeight;
-    currentPixelRatio = nextPixelRatio;
-    return true;
-  }
-
-  function render(delta) {
-    composer.render(delta);
-  }
-
-  function dispose() {
-    composer.dispose();
-    outputPass.dispose();
-    blueNoise.dispose();
-    renderPass.dispose?.();
-  }
-
-  return { render, setSize, dispose };
-}

package/src/scene/render-loop.js

@@ -1,98 +0,0 @@
-/**
- * A coalescing frame scheduler.
- *
- * Continuous loops run only while requested (auto-rotate or animation).
- * One-off invalidations are merged into a single animation frame, so multiple
- * OrbitControls change events in the same frame render once.
- *
- * @param {(delta: number, timestamp: number) => void} onFrame Frame callback.
- * @returns {{
- *   invalidate: () => void,
- *   start: () => void,
- *   stop: () => void,
- *   setActive: (active: boolean) => void,
- *   dispose: () => void,
- *   readonly looping: boolean,
- * }} Scheduler controls.
- */
-export function createRenderLoop(onFrame) {
-  let looping = false;
-  let active = true;
-  let disposed = false;
-  let dirty = false;
-  let frameHandle = 0;
-  let lastTimestamp = 0;
-
-  function schedule() {
-    if (disposed || !active || frameHandle !== 0) return;
-    frameHandle = requestAnimationFrame(frame);
-  }
-
-  function frame(timestamp) {
-    frameHandle = 0;
-    if (disposed || !active) return;
-
-    const delta = lastTimestamp === 0 ? 0 : Math.min((timestamp - lastTimestamp) / 1000, 0.1);
-    lastTimestamp = timestamp;
-    dirty = false;
-    onFrame(delta, timestamp);
-
-    if (looping) schedule();
-  }
-
-  function invalidate() {
-    if (disposed) return;
-    dirty = true;
-    schedule();
-  }
-
-  function start() {
-    if (disposed || looping) return;
-    looping = true;
-    lastTimestamp = 0;
-    schedule();
-  }
-
-  function stop() {
-    looping = false;
-    lastTimestamp = 0;
-    if (frameHandle !== 0) {
-      cancelAnimationFrame(frameHandle);
-      frameHandle = 0;
-    }
-  }
-
-  function setActive(next) {
-    const value = Boolean(next);
-    if (value === active) return;
-
-    active = value;
-    if (!active) {
-      if (frameHandle !== 0) {
-        cancelAnimationFrame(frameHandle);
-        frameHandle = 0;
-      }
-      lastTimestamp = 0;
-      return;
-    }
-
-    if (looping || dirty) schedule();
-  }
-
-  function dispose() {
-    disposed = true;
-    dirty = false;
-    stop();
-  }
-
-  return {
-    invalidate,
-    start,
-    stop,
-    setActive,
-    dispose,
-    get looping() {
-      return looping;
-    },
-  };
-}

package/src/scene/viewer-error.js

@@ -1,16 +0,0 @@
-/**
- * An error with a stable code the React surface can localize.
- */
-export class ViewerError extends Error {
-  /**
-   * @param {'webgl' | 'scene' | 'parse'} code Failure category.
-   * @param {string} message Technical detail, kept for the disclosure panel.
-   * @param {unknown} [cause] Original error.
-   */
-  constructor(code, message, cause) {
-    super(message);
-    this.name = 'ViewerError';
-    this.code = code;
-    this.cause = cause;
-  }
-}

package/src/ui/AnimationBar.js

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import { PauseIcon, PlayIcon } from './icons.js';
-import { formatSeconds } from './primitives.js';
-
-const h = React.createElement;
-
-/**
- * Animation transport bar.
- *
- * The bar owns playback state and subscribes to the viewer's progress stream,
- * so 30 Hz ticks re-render this small component instead of the whole viewer.
- *
- * @param {{
- *   view: {
- *     setAnimationPlaying: (playing: boolean) => void,
- *     setAnimationClip: (index: number) => void,
- *     seekAnimation: (seconds: number) => void,
- *     subscribeAnimation: (listener: (state: { time: number, duration: number }) => void) => () => void,
- *   },
- *   clips: Array<{ name: string, duration: number }>,
- *   t: (key: string, params?: Record<string, unknown>) => string,
- * }} props Viewer, clip metadata, and translator.
- */
-export function AnimationBar({ view, clips, t }) {
-  const [playing, setPlaying] = React.useState(true);
-  const [index, setIndex] = React.useState(0);
-  const [time, setTime] = React.useState(0);
-
-  React.useEffect(() => {
-    view.setAnimationPlaying(playing);
-  }, [view, playing]);
-
-  React.useEffect(() => {
-    view.setAnimationClip(index);
-    setTime(0);
-  }, [view, index]);
-
-  React.useEffect(() => view.subscribeAnimation((state) => {
-    setTime(state.time);
-  }), [view]);
-
-  const currentClip = clips[Math.min(index, clips.length - 1)];
-  const animationLabel = currentClip !== undefined && currentClip !== null
-    ? (currentClip.name || t('animationFallback', { n: index + 1 }))
-    : '';
-  const animationMax = Number.isFinite(currentClip?.duration)
-    ? Math.max(Number(currentClip.duration), 0)
-    : 0;
-  const currentSeconds = Math.min(Math.max(Number(time) || 0, 0), animationMax);
-  const timeLabel = `${formatSeconds(currentSeconds)}s / ${formatSeconds(animationMax)}s`;
-
-  return h('div', {
-    className: 'dsh3dv-anim',
-    'data-dsh3d-animation': '',
-    role: 'group',
-    'aria-label': t('animation'),
-  },
-  h('button', {
-    type: 'button',
-    className: 'dsh3dv-play',
-    title: playing ? t('pause') : t('play'),
-    'aria-label': playing ? t('pause') : t('play'),
-    'aria-pressed': playing,
-    onClick: () => setPlaying((value) => !value),
-  }, playing ? h(PauseIcon) : h(PlayIcon)),
-  clips.length > 1
-    ? h('select', {
-      className: 'dsh3dv-anim-select',
-      value: index,
-      'aria-label': t('animation'),
-      onChange: (event) => {
-        setIndex(Number(event.currentTarget.value));
-        setTime(0);
-      },
-    }, clips.map((clip, clipIndex) => h('option', {
-      key: clipIndex,
-      value: clipIndex,
-    }, clip.name || t('animationFallback', { n: clipIndex + 1 }))))
-    : h('span', { className: 'dsh3dv-anim-name', title: animationLabel }, animationLabel),
-  h('input', {
-    type: 'range',
-    className: 'dsh3dv-progress',
-    min: 0,
-    max: Math.max(animationMax, 0.01),
-    step: 0.01,
-    value: currentSeconds,
-    'aria-label': t('animationProgress'),
-    onChange: (event) => {
-      const next = Number(event.currentTarget.value);
-      setTime(next);
-      view.seekAnimation(next);
-    },
-  }),
-  h('span', { className: 'dsh3dv-anim-time' }, timeLabel));
-}