dsh-3d-viewer 0.1.0 → 0.2.0

package/src/scene/environment.js

@@ -1,187 +0,0 @@
-import {
-  DataTexture,
-  EquirectangularReflectionMapping,
-  PMREMGenerator,
-  RGBAFormat,
-} from 'three';
-import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
-import { decodeBase64 } from '../bytes.js';
-import { HDRI_DATA_URLS } from '../generated/hdri-data.js';
-
-/** Environment used when an unknown id is requested. */
-export const DEFAULT_ENVIRONMENT = 'nature';
-
-/** Per-environment IBL strength. */
-export const ENVIRONMENT_INTENSITIES = Object.freeze({
-  nature: 1.0,
-  city: 1.0,
-  indoor: 0.8,
-  studio: 0.9,
-});
-
-/**
- * Resolve an environment id against the embedded HDRI map.
- *
- * @param {unknown} id Requested environment id.
- * @param {Record<string, string>} dataUrls Embedded data URLs.
- * @returns {string} A known environment id.
- */
-export function normalizeEnvironmentId(id, dataUrls = HDRI_DATA_URLS) {
-  return typeof id === 'string' && Object.hasOwn(dataUrls, id)
-    ? id
-    : DEFAULT_ENVIRONMENT;
-}
-
-/**
- * Decode the base64 payload of an embedded data URL.
- *
- * @param {unknown} dataUrl Embedded data URL.
- * @returns {ArrayBuffer | null} Decoded bytes, or null when the input is not a data URL.
- */
-export function dataUrlToArrayBuffer(dataUrl) {
-  if (typeof dataUrl !== 'string') return null;
-  const comma = dataUrl.indexOf(',');
-  if (comma < 0) return null;
-
-  try {
-    const bytes = decodeBase64(dataUrl.slice(comma + 1));
-    // Reuse the decoder's buffer when it covers the whole payload; copying
-    // multi-megabyte HDRIs is otherwise pure waste.
-    return bytes.byteOffset === 0 && bytes.byteLength === bytes.buffer.byteLength
-      ? bytes.buffer
-      : bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Turn raw RGBE data into an equirectangular, non-mipmapped DataTexture.
- *
- * @param {ArrayBuffer} buffer Raw HDR bytes.
- * @param {HDRLoader} loader Reusable HDR parser.
- * @returns {DataTexture} Linear RGBE texture.
- */
-export function createEquirectangularTexture(buffer, loader = new HDRLoader()) {
-  const texData = loader.parse(buffer);
-  const texture = new DataTexture(
-    texData.data,
-    texData.width,
-    texData.height,
-    RGBAFormat,
-    texData.type,
-  );
-  texture.colorSpace = texData.colorSpace;
-  texture.minFilter = texData.minFilter;
-  texture.magFilter = texData.magFilter;
-  texture.generateMipmaps = texData.generateMipmaps;
-  texture.flipY = texData.flipY;
-  texture.unpackAlignment = 1;
-  texture.mapping = EquirectangularReflectionMapping;
-  texture.needsUpdate = true;
-  return texture;
-}
-
-/**
- * Lazily build and cache PMREM environment maps for the embedded HDRIs.
- *
- * Only the environments the user selects are decoded; the first environment
- * is built on first use, and repeated selections reuse the cached target.
- *
- * @param {{
- *   renderer: import('three').WebGLRenderer,
- *   scene: import('three').Scene,
- *   dataUrls?: Record<string, string>,
- *   intensities?: Record<string, number>,
- * }} options Renderer, target scene, embedded HDRIs, and per-environment IBL strengths.
- * @returns {{
- *   set: (id: unknown) => boolean,
- *   dispose: () => void,
- *   readonly activeId: string | null,
- * }} Environment controls.
- */
-export function createEnvironment({
-  renderer,
-  scene,
-  dataUrls = HDRI_DATA_URLS,
-  intensities = ENVIRONMENT_INTENSITIES,
-}) {
-  const targets = new Map();
-  const loader = new HDRLoader();
-  let pmremGenerator = null;
-  let activeId = null;
-  let disposed = false;
-
-  function getPmremGenerator() {
-    if (pmremGenerator === null) pmremGenerator = new PMREMGenerator(renderer);
-    return pmremGenerator;
-  }
-
-  function buildTarget(id) {
-    const dataUrl = dataUrls[id];
-    if (typeof dataUrl !== 'string') return null;
-
-    const buffer = dataUrlToArrayBuffer(dataUrl);
-    if (buffer === null) return null;
-
-    const texture = createEquirectangularTexture(buffer, loader);
-    try {
-      return getPmremGenerator().fromEquirectangular(texture);
-    } finally {
-      texture.dispose();
-    }
-  }
-
-  function getTarget(id) {
-    const cached = targets.get(id);
-    if (cached !== undefined) return cached;
-
-    let target = null;
-    try {
-      target = buildTarget(id);
-    } catch (error) {
-      console.warn(`[dsh-3d-viewer] Could not build the "${id}" environment.`, error);
-    }
-
-    if (target === null && id !== DEFAULT_ENVIRONMENT) {
-      target = getTarget(DEFAULT_ENVIRONMENT);
-    }
-    if (target !== null) targets.set(id, target);
-    return target;
-  }
-
-  function set(id) {
-    if (disposed) return false;
-
-    const next = normalizeEnvironmentId(id, dataUrls);
-    if (next === activeId) return false;
-
-    const target = getTarget(next);
-    if (target === null) return false;
-
-    scene.environment = target.texture;
-    scene.environmentIntensity = intensities[next] ?? intensities[DEFAULT_ENVIRONMENT] ?? 1.0;
-    activeId = next;
-    return true;
-  }
-
-  function dispose() {
-    if (disposed) return;
-    disposed = true;
-    activeId = null;
-    scene.environment = null;
-
-    for (const target of new Set(targets.values())) target.dispose();
-    targets.clear();
-    pmremGenerator?.dispose();
-    pmremGenerator = null;
-  }
-
-  return {
-    set,
-    dispose,
-    get activeId() {
-      return activeId;
-    },
-  };
-}

package/src/scene/ground.js

@@ -1,286 +0,0 @@
-import {
-  Color,
-  DataTexture,
-  DoubleSide,
-  LinearFilter,
-  LinearMipmapLinearFilter,
-  Mesh,
-  NoColorSpace,
-  PlaneGeometry,
-  RGBAFormat,
-  RepeatWrapping,
-  ShaderMaterial,
-  ShadowMaterial,
-  UnsignedByteType,
-  Vector4,
-} from 'three';
-
-const GRID_TEXTURE_SIZE = 512;
-const GRID_TEXTURE_CELLS = 5;
-const GRID_MINOR_HALF_WIDTH_RATIO = 0.016;
-const GRID_MAJOR_HALF_WIDTH_RATIO = 0.022;
-const GRID_TEXTURE_AA = 0.75;
-
-const GRID_VERTEX_SHADER = `
-varying vec3 vWorldPosition;
-
-void main() {
-  vec4 worldPosition = modelMatrix * vec4(position, 1.0);
-  vWorldPosition = worldPosition.xyz;
-  gl_Position = projectionMatrix * viewMatrix * worldPosition;
-}
-`;
-
-const GRID_FRAGMENT_SHADER = `
-uniform sampler2D uGridMap;
-uniform vec3 uColor;
-uniform float uGridScale;
-uniform float uMinorAlpha;
-uniform float uMajorAlpha;
-uniform float uFogStart;
-uniform float uFogEnd;
-
-varying vec3 vWorldPosition;
-
-void main() {
-  // One normalized projection-depth factor drives fog color, transparency,
-  // and the final disappearance together.
-  float depthT = clamp(
-    (gl_FragCoord.z - uFogStart) / max(uFogEnd - uFogStart, 1e-6),
-    0.0,
-    1.0
-  );
-  if (depthT >= 0.998) discard;
-
-  float opacity = 1.0 - depthT;
-  vec2 gridUv = vWorldPosition.xz * uGridScale;
-  vec2 lines = texture2D(uGridMap, gridUv).rg;
-  float alpha = max(lines.r * uMinorAlpha, lines.g * uMajorAlpha) * opacity;
-  vec3 color = mix(uColor, vec3(1.0), depthT);
-
-  if (alpha <= 0.002) discard;
-  gl_FragColor = vec4(color, alpha);
-  #include <colorspace_fragment>
-}
-`;
-
-const _depthProbe = new Vector4();
-
-/** Rasterized grid pixels, shared by every viewer on the page. */
-let gridPixelCache = null;
-
-/**
- * Pick a decimal grid step near one twelfth of the model's largest dimension.
- *
- * @param {number} size Largest model dimension.
- * @returns {number} A 1/2/5 x 10^n world-space spacing.
- */
-export function niceGridStep(size) {
-  const raw = size / 12;
-  if (!Number.isFinite(raw) || raw <= 0) return 1;
-  const power = 10 ** Math.floor(Math.log10(raw));
-  const normalized = raw / power;
-  const multiplier = normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10;
-  return multiplier * power;
-}
-
-/**
- * Convert a camera-space distance into the projection-window depth used by the
- * grid shader. The value is independent of the viewport size.
- *
- * @param {import('three').PerspectiveCamera} camera Active camera.
- * @param {number} viewDistance Distance from the camera along -Z.
- * @returns {number} Depth in [0, 1].
- */
-function projectionWindowDepth(camera, viewDistance) {
-  _depthProbe.set(0, 0, -viewDistance, 1).applyMatrix4(camera.projectionMatrix);
-  return (_depthProbe.z / _depthProbe.w) * 0.5 + 0.5;
-}
-
-/**
- * Build the repeating 5x5-cell grid map used by the mipmapped grid shader.
- *
- * R stores minor-line coverage and G stores major-line coverage. The texture is
- * sampled with mipmaps and maximum anisotropy instead of screen-space
- * derivatives, so distant lines fade smoothly rather than breaking into dashes.
- *
- * The pixel data is deterministic, so it is rasterized once per page and
- * reused by every viewer; only the GPU texture object is per-renderer.
- *
- * @returns {Uint8Array} RGBA grid coverage pixels.
- */
-function gridPixelData() {
-  if (gridPixelCache !== null) return gridPixelCache;
-
-  const size = GRID_TEXTURE_SIZE;
-  const cellSize = size / GRID_TEXTURE_CELLS;
-  const minorHalfWidth = cellSize * GRID_MINOR_HALF_WIDTH_RATIO;
-  const majorHalfWidth = cellSize * GRID_MAJOR_HALF_WIDTH_RATIO;
-  const data = new Uint8Array(size * size * 4);
-
-  const coverage = (distance, halfWidth) => {
-    const inner = Math.max(halfWidth - GRID_TEXTURE_AA, 0);
-    const outer = halfWidth + GRID_TEXTURE_AA;
-    if (distance <= inner) return 1;
-    if (distance >= outer) return 0;
-    const t = (distance - inner) / (outer - inner);
-    return 1 - t * t * (3 - 2 * t);
-  };
-
-  for (let y = 0; y < size; y += 1) {
-    const yPos = y + 0.5;
-    const minorY = yPos % cellSize;
-    const minorDistanceY = Math.min(minorY, cellSize - minorY);
-    const majorDistanceY = Math.min(yPos, size - yPos);
-
-    for (let x = 0; x < size; x += 1) {
-      const xPos = x + 0.5;
-      const minorX = xPos % cellSize;
-      const minorDistanceX = Math.min(minorX, cellSize - minorX);
-      const majorDistanceX = Math.min(xPos, size - xPos);
-
-      const minor = Math.max(
-        coverage(minorDistanceX, minorHalfWidth),
-        coverage(minorDistanceY, minorHalfWidth),
-      );
-      const major = Math.max(
-        coverage(majorDistanceX, majorHalfWidth),
-        coverage(majorDistanceY, majorHalfWidth),
-      );
-
-      const offset = (y * size + x) * 4;
-      data[offset] = Math.round(minor * 255);
-      data[offset + 1] = Math.round(major * 255);
-      data[offset + 2] = 0;
-      data[offset + 3] = 255;
-    }
-  }
-
-  gridPixelCache = data;
-  return data;
-}
-
-/**
- * Wrap the shared grid pixels in a mipmapped, repeating DataTexture.
- *
- * @param {number} anisotropy Maximum anisotropy supported by the renderer.
- * @returns {DataTexture} Repeating grid coverage texture.
- */
-function createGridTexture(anisotropy) {
-  const size = GRID_TEXTURE_SIZE;
-  const texture = new DataTexture(gridPixelData(), size, size, RGBAFormat, UnsignedByteType);
-  texture.name = 'dsh3dv-grid';
-  texture.colorSpace = NoColorSpace;
-  texture.wrapS = RepeatWrapping;
-  texture.wrapT = RepeatWrapping;
-  texture.magFilter = LinearFilter;
-  texture.minFilter = LinearMipmapLinearFilter;
-  texture.generateMipmaps = true;
-  texture.anisotropy = Math.max(1, Math.floor(anisotropy));
-  texture.needsUpdate = true;
-  return texture;
-}
-
-/**
- * Build the procedural infinite grid and the transparent shadow receiver.
- *
- * @param {{
- *   scene: import('three').Scene,
- *   stats: ReturnType<import('../model.js').collectModelStats>,
- *   maxDimension: number,
- *   maxAnisotropy?: number,
- * }} options Target scene, model bounds, and renderer anisotropy support.
- * @returns {{
- *   update: (camera: import('three').PerspectiveCamera, target: import('three').Vector3, distance: number) => void,
- *   setGridVisible: (visible: boolean) => boolean,
- *   setShadowVisible: (visible: boolean) => boolean,
- *   dispose: () => void,
- * }} Ground controls.
- */
-export function createGround({ scene, stats, maxDimension, maxAnisotropy = 1 }) {
-  const floorY = Number.isFinite(stats.box.min.y)
-    ? stats.box.min.y - maxDimension * 0.003
-    : -maxDimension * 0.003;
-  const gridCell = niceGridStep(maxDimension);
-  const gridTexture = createGridTexture(maxAnisotropy);
-
-  const gridGeometry = new PlaneGeometry(maxDimension * 10000, maxDimension * 10000);
-  gridGeometry.rotateX(-Math.PI / 2);
-  const gridUniforms = {
-    uGridMap: { value: gridTexture },
-    uColor: { value: new Color(0x7b8087) },
-    uGridScale: { value: 1 / (gridCell * GRID_TEXTURE_CELLS) },
-    uMinorAlpha: { value: 0.25 },
-    uMajorAlpha: { value: 0.5 },
-    uFogStart: { value: 0.9 },
-    uFogEnd: { value: 0.99 },
-  };
-  const gridMaterial = new ShaderMaterial({
-    uniforms: gridUniforms,
-    vertexShader: GRID_VERTEX_SHADER,
-    fragmentShader: GRID_FRAGMENT_SHADER,
-    transparent: true,
-    depthWrite: false,
-    side: DoubleSide,
-    toneMapped: false,
-  });
-  const grid = new Mesh(gridGeometry, gridMaterial);
-  grid.position.set(stats.center.x, floorY, stats.center.z);
-  grid.renderOrder = 0;
-  scene.add(grid);
-
-  const shadowGeometry = new PlaneGeometry(maxDimension * 20, maxDimension * 20);
-  shadowGeometry.rotateX(-Math.PI / 2);
-  const shadowMaterial = new ShadowMaterial({
-    color: 0x000000,
-    opacity: 0.24,
-    transparent: true,
-    depthWrite: false,
-  });
-  const shadowPlane = new Mesh(shadowGeometry, shadowMaterial);
-  shadowPlane.position.set(stats.center.x, floorY + maxDimension * 0.0002, stats.center.z);
-  shadowPlane.receiveShadow = true;
-  shadowPlane.renderOrder = 1;
-  scene.add(shadowPlane);
-
-  function update(camera, target, distance) {
-    grid.position.x = target.x;
-    grid.position.z = target.z;
-    grid.updateMatrixWorld();
-
-    const fogEndWorld = Math.min(distance * 6, maxDimension * 4000);
-    const fogStartWorld = Math.min(distance * 1.8, fogEndWorld * 0.3);
-    gridUniforms.uFogStart.value = projectionWindowDepth(camera, fogStartWorld);
-    gridUniforms.uFogEnd.value = projectionWindowDepth(camera, fogEndWorld);
-  }
-
-  function setGridVisible(visible) {
-    const next = Boolean(visible);
-    if (grid.visible === next) return false;
-    grid.visible = next;
-    return true;
-  }
-
-  function setShadowVisible(visible) {
-    const next = Boolean(visible);
-    if (shadowPlane.visible === next) return false;
-    shadowPlane.visible = next;
-    return true;
-  }
-
-  function dispose() {
-    scene.remove(grid, shadowPlane);
-    gridGeometry.dispose();
-    gridTexture.dispose();
-    gridMaterial.dispose();
-    shadowGeometry.dispose();
-    shadowMaterial.dispose();
-  }
-
-  return {
-    update,
-    setGridVisible,
-    setShadowVisible,
-    dispose,
-  };
-}

package/src/scene/lighting.js

@@ -1,41 +0,0 @@
-import { DirectionalLight, Vector3 } from 'three';
-
-const KEY_OFFSET = new Vector3(-3.2, 5.0, 3.0);
-
-/**
- * Add the shadow-casting key light used by the preview.
- *
- * @param {{
- *   scene: import('three').Scene,
- *   center: import('three').Vector3,
- *   maxDimension: number,
- * }} options Target scene and model bounds.
- * @returns {{ dispose: () => void }} Lighting controls.
- */
-export function createLighting({ scene, center, maxDimension }) {
-  const key = new DirectionalLight(0xffffff, 5.0);
-
-  key.position.copy(center).addScaledVector(KEY_OFFSET, maxDimension);
-  key.target.position.copy(center);
-  key.castShadow = true;
-  key.shadow.mapSize.set(2048, 2048);
-  key.shadow.camera.left = -maxDimension * 2;
-  key.shadow.camera.right = maxDimension * 2;
-  key.shadow.camera.top = maxDimension * 2;
-  key.shadow.camera.bottom = -maxDimension * 2;
-  key.shadow.camera.near = maxDimension * 2;
-  key.shadow.camera.far = maxDimension * 12;
-  key.shadow.bias = -0.0001;
-  key.shadow.normalBias = maxDimension * 0.002;
-  key.shadow.radius = 2;
-  key.shadow.camera.updateProjectionMatrix();
-
-  scene.add(key, key.target);
-
-  function dispose() {
-    scene.remove(key, key.target);
-    key.dispose();
-  }
-
-  return { dispose };
-}