model-preview 0.1.0

package/src/viewport/WorldAxes.ts

@@ -0,0 +1,131 @@
+import {
+  BufferGeometry,
+  Color,
+  Float32BufferAttribute,
+  Group,
+  Line,
+  ShaderMaterial,
+  Vector3,
+  type Line as ThreeLine,
+} from 'three';
+
+import { AXIS_X_COLOR, AXIS_Y_COLOR, AXIS_Z_COLOR, HELPER_OBJECT_TYPE } from '../constants.js';
+import { getViewAspect, getViewHeightAtDistance, type ViewCamera } from './ViewportUtils.js';
+
+const _origin = new Vector3();
+
+const AXIS_VERTEX_SHADER = `
+varying vec3 vWorldPos;
+
+void main() {
+  vWorldPos = (modelMatrix * vec4(position, 1.0)).xyz;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+
+const AXIS_FRAGMENT_SHADER = `
+uniform vec3 uColor;
+uniform float uExtent;
+
+varying vec3 vWorldPos;
+
+void main() {
+  float axisDist = max(abs(vWorldPos.x), max(abs(vWorldPos.y), abs(vWorldPos.z)));
+  float vDist = axisDist / max(uExtent, 0.0001);
+
+  float alpha = 1.0 - smoothstep(0.06, 1.0, vDist);
+  if (alpha < 0.004) {
+    discard;
+  }
+
+  float core = 1.0 - smoothstep(0.0, 0.1, vDist);
+  vec3 color = mix(uColor, uColor * 1.12, core * 0.35);
+
+  gl_FragColor = vec4(color, alpha);
+}
+`;
+
+function calcAxisExtent(camera: ViewCamera, origin = _origin) {
+  const distance = camera.position.distanceTo(origin);
+  if (!Number.isFinite(distance) || distance <= 0) {
+    return 50;
+  }
+
+  const visibleHeight = getViewHeightAtDistance(camera, distance);
+  const aspect = getViewAspect(camera);
+  const visibleWidth = visibleHeight * aspect;
+  const frustumSpan = Math.hypot(visibleWidth, visibleHeight);
+
+  const extent = frustumSpan * 2.5;
+  const farLimit = Number.isFinite(camera.far) && (camera.far ?? 0) > 0 ? (camera.far as number) * 0.98 : 1000;
+
+  return Math.min(farLimit, Math.max(extent, 20));
+}
+
+function createAxisLine(color: number) {
+  const geometry = new BufferGeometry();
+  geometry.setAttribute('position', new Float32BufferAttribute(new Float32Array(6), 3));
+
+  const material = new ShaderMaterial({
+    uniforms: {
+      uColor: { value: new Color(color) },
+      uExtent: { value: 1 },
+    },
+    vertexShader: AXIS_VERTEX_SHADER,
+    fragmentShader: AXIS_FRAGMENT_SHADER,
+    transparent: true,
+    depthTest: true,
+    depthWrite: false,
+    toneMapped: false,
+  });
+
+  const line = new Line(geometry, material);
+  line.renderOrder = 999;
+  line.frustumCulled = false;
+  line.raycast = () => {};
+  line.userData.objectType = HELPER_OBJECT_TYPE;
+  return line;
+}
+
+export class WorldAxes {
+  axes: Group | null = null;
+  lines: ThreeLine[] = [];
+  private camera: ViewCamera | null = null;
+
+  getObject() {
+    return this.axes;
+  }
+
+  create(camera: ViewCamera) {
+    this.camera = camera;
+
+    const x = createAxisLine(AXIS_X_COLOR);
+    x.userData.getEndpoints = (extent: number) => [-extent, 0, 0, extent, 0, 0];
+
+    const y = createAxisLine(AXIS_Y_COLOR);
+    y.userData.getEndpoints = (extent: number) => [0, -extent, 0, 0, extent, 0];
+
+    const z = createAxisLine(AXIS_Z_COLOR);
+    z.userData.getEndpoints = (extent: number) => [0, 0, -extent, 0, 0, extent];
+
+    this.lines = [x, y, z];
+
+    this.axes = new Group();
+    this.axes.add(...this.lines);
+    this.axes.userData.objectType = HELPER_OBJECT_TYPE;
+    return this.axes;
+  }
+
+  update() {
+    if (!this.camera) return;
+
+    const extent = calcAxisExtent(this.camera);
+    this.lines.forEach((line) => {
+      const positions = line.userData.getEndpoints(extent) as number[];
+      line.geometry.attributes.position.array.set(positions);
+      line.geometry.attributes.position.needsUpdate = true;
+      line.geometry.computeBoundingSphere();
+      (line.material as ShaderMaterial).uniforms.uExtent.value = extent;
+    });
+  }
+}

package/src/viewport/renderQuality.ts

@@ -0,0 +1,53 @@
+import {
+  ACESFilmicToneMapping,
+  PCFSoftShadowMap,
+  PMREMGenerator,
+  SRGBColorSpace,
+  type Scene,
+  type Texture,
+  type WebGLRenderer,
+} from 'three';
+import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+
+export const DEFAULT_TONE_MAPPING_EXPOSURE = 1;
+
+/** Configure renderer color management, tone mapping, and shadows. */
+export function configureRenderer(
+  renderer: WebGLRenderer,
+  options: { exposure?: number; pixelRatio?: number } = {},
+) {
+  renderer.outputColorSpace = SRGBColorSpace;
+  renderer.toneMapping = ACESFilmicToneMapping;
+  renderer.toneMappingExposure = Number.isFinite(options.exposure)
+    ? (options.exposure as number)
+    : DEFAULT_TONE_MAPPING_EXPOSURE;
+  renderer.shadowMap.enabled = true;
+  renderer.shadowMap.type = PCFSoftShadowMap;
+
+  if (Number.isFinite(options.pixelRatio)) {
+    renderer.setPixelRatio(options.pixelRatio as number);
+  }
+}
+
+/** Generate PMREM environment map from RoomEnvironment for scene IBL. */
+export function createRoomEnvironmentMap(renderer: WebGLRenderer) {
+  const environment = new RoomEnvironment();
+  const pmremGenerator = new PMREMGenerator(renderer);
+  const envMap = pmremGenerator.fromScene(environment, 0.04).texture;
+  pmremGenerator.dispose();
+
+  return {
+    envMap,
+    dispose() {
+      envMap.dispose();
+    },
+  };
+}
+
+/** Apply environment map to scene (PBR reflections; does not replace background). */
+export function applySceneEnvironment(scene: Scene, envMap: Texture | null, intensity = 1) {
+  scene.environment = envMap;
+  if ('environmentIntensity' in scene) {
+    (scene as Scene & { environmentIntensity: number }).environmentIntensity = intensity;
+  }
+}