@navaramap/three 0.0.0

package/src/passes/NormalCopyPass.ts

@@ -0,0 +1,125 @@
+import PostProcessingCommon from "@shaders/glsl/postprocessingCommon.vert.glsl";
+import { Pass } from "postprocessing";
+import {
+  HalfFloatType,
+  LinearFilter,
+  NoBlending,
+  RGBAFormat,
+  ShaderMaterial,
+  Texture,
+  WebGLRenderTarget,
+  type WebGLRenderer,
+} from "three";
+
+import { packing } from "../shaders";
+
+const fragmentShader = `
+#include <packing>
+
+${packing}
+
+uniform sampler2D tNormal;
+varying vec2 vUv;
+
+void main() {
+  #ifdef UNPACK_NORMAL
+  gl_FragColor = vec4(unpackVec2ToNormal(texture2D(tNormal, vUv).xy), 1.0);
+  #else
+  gl_FragColor = texture2D(tNormal, vUv);
+  #endif
+}
+`;
+
+/**
+ * A pass that copies normal buffer contents to a render target.
+ */
+export class NormalCopyPass extends Pass {
+  private _renderTarget: WebGLRenderTarget;
+  private _material: ShaderMaterial;
+  private _autoResize: boolean;
+
+  constructor(renderTarget?: WebGLRenderTarget, autoResize = true) {
+    super("NormalCopyPass");
+
+    this.needsSwap = false;
+
+    this._material = new ShaderMaterial({
+      uniforms: {
+        tNormal: { value: null },
+      },
+      vertexShader: PostProcessingCommon,
+      fragmentShader,
+      blending: NoBlending,
+      toneMapped: false,
+      depthWrite: false,
+      depthTest: false,
+      defines: {
+        UNPACK_NORMAL: false,
+      },
+    });
+
+    this._autoResize = autoResize;
+
+    if (renderTarget) {
+      this._renderTarget = renderTarget;
+    } else {
+      this._renderTarget = new WebGLRenderTarget(1, 1, {
+        format: RGBAFormat,
+        type: HalfFloatType,
+        minFilter: LinearFilter,
+        magFilter: LinearFilter,
+        generateMipmaps: false,
+        stencilBuffer: false,
+        depthBuffer: false,
+      });
+    }
+
+    this.fullscreenMaterial = this._material;
+  }
+
+  get texture(): Texture {
+    return this._renderTarget.texture;
+  }
+
+  get autoResize(): boolean {
+    return this._autoResize;
+  }
+
+  set autoResize(value: boolean) {
+    this._autoResize = value;
+  }
+
+  set unpackNormal(v: boolean) {
+    if (v) {
+      this._material.defines.UNPACK_NORMAL = "1";
+    } else {
+      delete this._material.defines.UNPACK_NORMAL;
+    }
+  }
+
+  setNormalTexture(texture: Texture): void {
+    this._material.uniforms.tNormal.value = texture;
+  }
+
+  setSize(width: number, height: number): void {
+    if (this._autoResize) {
+      this._renderTarget.setSize(width, height);
+    }
+  }
+
+  render(
+    renderer: WebGLRenderer,
+    _inputBuffer: WebGLRenderTarget | null,
+    _outputBuffer: WebGLRenderTarget | null,
+  ): void {
+    const renderTarget = this.renderToScreen ? null : this._renderTarget;
+
+    renderer.setRenderTarget(renderTarget);
+    renderer.render(this.scene, this.camera);
+  }
+
+  dispose(): void {
+    this._renderTarget.dispose();
+    this._material.dispose();
+  }
+}

package/src/passes/RenderTargetCopyPass.ts

@@ -0,0 +1,91 @@
+import PostProcessingCommon from "@shaders/glsl/postprocessingCommon.vert.glsl";
+import { Pass } from "postprocessing";
+import {
+  NoBlending,
+  ShaderMaterial,
+  Texture,
+  WebGLRenderTarget,
+  type WebGLRenderer,
+} from "three";
+
+const fragmentShader = `
+uniform sampler2D color;
+uniform sampler2D depth;
+
+varying vec2 vUv;
+
+void main() {
+  gl_FragColor = texture2D(color, vUv);
+  gl_FragDepth = texture2D(color, vUv).r;
+}
+`;
+
+/**
+ * A pass that copies normal buffer contents to a render target.
+ */
+export class RenderTargetCopyPass extends Pass {
+  private _renderTarget: WebGLRenderTarget;
+  private _material: ShaderMaterial;
+  private _autoResize: boolean;
+
+  constructor(renderTarget: WebGLRenderTarget, autoResize = true) {
+    super("RenderTargetCopyPass");
+
+    this.needsSwap = false;
+
+    this._material = new ShaderMaterial({
+      uniforms: {
+        color: { value: null },
+        depth: { value: null },
+      },
+      vertexShader: PostProcessingCommon,
+      fragmentShader,
+      blending: NoBlending,
+      toneMapped: false,
+      depthWrite: false,
+      depthTest: false,
+    });
+
+    this._autoResize = autoResize;
+
+    this._renderTarget = renderTarget;
+
+    this.fullscreenMaterial = this._material;
+
+    this.setTexture(renderTarget.texture);
+  }
+
+  get texture(): Texture {
+    return this._renderTarget.texture;
+  }
+
+  get autoResize(): boolean {
+    return this._autoResize;
+  }
+
+  set autoResize(value: boolean) {
+    this._autoResize = value;
+  }
+
+  setTexture(texture: Texture): void {
+    this._material.uniforms.color.value = texture;
+  }
+
+  setDepthTexture(texture: Texture): void {
+    this._material.uniforms.depth.value = texture;
+  }
+
+  render(
+    renderer: WebGLRenderer,
+    inputBuffer: WebGLRenderTarget | null,
+    _outputBuffer: WebGLRenderTarget | null,
+  ): void {
+    renderer.setRenderTarget(inputBuffer);
+    renderer.render(this.scene, this.camera);
+  }
+
+  dispose(): void {
+    this._renderTarget.dispose();
+    this._material.dispose();
+  }
+}

package/src/passes/SkyEnvMapPass.ts

@@ -0,0 +1,58 @@
+import {
+  CubeCamera,
+  HalfFloatType,
+  WebGLCubeRenderTarget,
+  type PerspectiveCamera,
+  type WebGLRenderer,
+  type WebGLRenderTarget,
+} from "three";
+
+import { RenderPass } from "../effects";
+import type { Scenes } from "../scene";
+
+export class SkyEnvMapPass extends RenderPass {
+  private _scenes: Scenes;
+  private _camera: PerspectiveCamera;
+  private cubeCamera: CubeCamera;
+  public cubeRenderTarget: WebGLCubeRenderTarget;
+
+  constructor(scenes: Scenes, camera: PerspectiveCamera, resolution = 64) {
+    super();
+
+    this._scenes = scenes;
+    this._camera = camera;
+
+    this.cubeRenderTarget = new WebGLCubeRenderTarget(resolution, {
+      generateMipmaps: true,
+      type: HalfFloatType,
+    });
+
+    this.cubeCamera = new CubeCamera(0.1, 1000, this.cubeRenderTarget);
+  }
+
+  render(
+    renderer: WebGLRenderer,
+    _inputBuffer: WebGLRenderTarget | null,
+    _outputBuffer: WebGLRenderTarget | null,
+  ) {
+    // Nothing requests the env map (no sky mesh with `envMap` enabled), so skip
+    // the expensive 6-face cube render entirely.
+    if (this._scenes.skyEnvMap.children.length === 0) return;
+
+    this.cubeCamera.position.copy(this._camera.position);
+
+    this.cubeCamera.update(renderer, this._scenes.skyEnvMap);
+  }
+
+  getEnvMapTexture(): WebGLCubeRenderTarget["texture"] | undefined {
+    // Don't hand a stale/cleared cube texture to meshes when nothing populates
+    // the env map scene; callers fall back to `null`.
+    if (this._scenes.skyEnvMap.children.length === 0) return undefined;
+
+    return this.cubeRenderTarget.texture;
+  }
+
+  dispose() {
+    this.cubeRenderTarget.dispose();
+  }
+}

package/src/passes/index.ts

@@ -0,0 +1,5 @@
+export * from "./AllDepthCopyPass";
+export * from "./NormalCopyPass";
+export * from "./RenderTargetCopyPass";
+export * from "./CustomRenderPass";
+export * from "./SkyEnvMapPass";

package/src/pick/pickHelper.ts

@@ -0,0 +1,273 @@
+import {
+  WebGLRenderer,
+  WebGLRenderTarget,
+  PerspectiveCamera,
+  Object3D,
+  RGBAFormat,
+  Color,
+  Scene,
+  Vector2,
+} from "three";
+
+import { BufferView } from "../bufferView";
+import { isPickableMesh, type PickableMesh } from "../mesh/pickableMesh";
+import { TileScene } from "../scene";
+import type { MeshCache } from "../type";
+
+export type PickHelperOptions = {
+  debug: boolean;
+};
+
+/**
+ * GPU picking using a dedicated single-pixel render pass.
+ *
+ * The pick pass does NOT reuse the main render pipeline (globe / MRT /
+ * draped / copy passes). Instead, every pickable raw — regardless of
+ * which pass scene (opaque, mrt, ...) it normally lives in — is
+ * temporarily re-parented into a dedicated `pickScene` for the render
+ * and then restored to its original parent afterwards. This guarantees
+ * the pick buffer contains exactly the pickable content and nothing
+ * else can leak in (globe tiles, outlines, draped features, sky, etc.).
+ *
+ * Re-parenting is safe because pass scenes all have identity world
+ * transforms, so world matrices of the re-parented objects are
+ * unaffected.
+ */
+export class PickHelper {
+  private element: HTMLElement;
+  private pixelBuffer: Uint8Array;
+  private _renderer: WebGLRenderer;
+  private _camera: PerspectiveCamera;
+  private _meshes: MeshCache;
+  private onPickCallback: (pickArr: number[]) => void;
+
+  /** Dedicated scene used only during the pick render. */
+  private readonly pickScene = new Scene();
+
+  private debugBufferView?: BufferView;
+  private debugRenderTarget?: WebGLRenderTarget;
+  /** Full-size render target used for click picking with scissor restriction. */
+  private pickRenderTarget: WebGLRenderTarget;
+
+  private mouseMoved: boolean;
+  private mouseDownHandler: (event: MouseEvent) => void;
+  private mouseMoveHandler: (event: MouseEvent) => void;
+  private mouseUpHandler: (event: MouseEvent) => void;
+
+  constructor(
+    element: HTMLElement,
+    renderer: WebGLRenderer,
+    camera: PerspectiveCamera,
+    meshes: MeshCache,
+    onPickCallback: (pickArr: number[]) => void,
+    options?: PickHelperOptions,
+  ) {
+    this.element = element;
+    this.pixelBuffer = new Uint8Array(4);
+    this._renderer = renderer;
+    this._camera = camera;
+    this._meshes = meshes;
+    this.onPickCallback = onPickCallback;
+
+    this.mouseMoved = false;
+    this.mouseDownHandler = (event: MouseEvent) => this.onMouseDown(event);
+    this.mouseMoveHandler = (event: MouseEvent) => this.onMouseMove(event);
+    this.mouseUpHandler = (event: MouseEvent) => this.onMouseUp(event);
+
+    const width = this._renderer.getContext().drawingBufferWidth;
+    const height = this._renderer.getContext().drawingBufferHeight;
+
+    this.pickRenderTarget = new WebGLRenderTarget(width, height, {
+      format: RGBAFormat,
+      depthBuffer: true,
+      stencilBuffer: false,
+    });
+
+    if (options?.debug) {
+      this.debugBufferView = new BufferView(width, height);
+      this.debugRenderTarget = new WebGLRenderTarget(width, height, {
+        format: RGBAFormat,
+        depthBuffer: true,
+        stencilBuffer: false,
+      });
+    }
+  }
+
+  private onMouseDown(_event: MouseEvent) {
+    this.mouseMoved = false;
+  }
+
+  private onMouseMove(_event: MouseEvent) {
+    this.mouseMoved = true;
+  }
+
+  private onMouseUp(event: MouseEvent) {
+    if (!this.mouseMoved) {
+      this.onMouseClick(event);
+    }
+  }
+
+  enablePick(bPick: boolean) {
+    if (bPick) {
+      this.element.addEventListener("mousedown", this.mouseDownHandler);
+      this.element.addEventListener("mousemove", this.mouseMoveHandler);
+      this.element.addEventListener("mouseup", this.mouseUpHandler);
+    } else {
+      this.element.removeEventListener("mousedown", this.mouseDownHandler);
+      this.element.removeEventListener("mousemove", this.mouseMoveHandler);
+      this.element.removeEventListener("mouseup", this.mouseUpHandler);
+    }
+  }
+
+  /**
+   * Moves every pickable raw (visible, currently parented) into the
+   * dedicated `pickScene` and activates the picking uniforms on its
+   * wrapper. Returns a teardown callback that restores original parents
+   * and deactivates the uniforms.
+   */
+  private stagePickables(pickingCoord?: Vector2): () => void {
+    const restoreParents: [Object3D, Object3D][] = [];
+    const activated: PickableMesh[] = [];
+
+    for (const [_key, obj] of this._meshes) {
+      if (!isPickableMesh(obj)) continue;
+
+      const raw = obj.getRenderable();
+      const originalParent = raw.parent;
+
+      // Only pick visible, currently-parented renderables. A mesh that's
+      // hidden or detached isn't rendered in the main view, so picking
+      // it would be surprising.
+      if (!originalParent || !raw.visible) continue;
+
+      obj.onBeforePicking(pickingCoord);
+      activated.push(obj);
+
+      // Draped vector-tile meshes live inside a TileScene and are picked
+      // through their owning TileMesh's composite atlas — the per-layer RT
+      // is re-rendered with pick mode active (the onBeforePicking above
+      // flipped the mesh's own enhancer into pick mode) and the atlas then
+      // carries the pick IDs into the main pick render. Reparenting them
+      // here would (a) empty the TileScene so the per-layer RT renders
+      // nothing and (b) make them draw at their un-draped 3D position in
+      // pickScene, where they depth-fight with the terrain.
+      if (originalParent instanceof TileScene) continue;
+
+      // Scene.add auto-removes from the previous parent. Both parents
+      // are pass scenes with identity world transforms, so the raw's
+      // world matrix is unaffected.
+      this.pickScene.add(raw);
+      restoreParents.push([raw, originalParent]);
+    }
+
+    return () => {
+      for (const [raw, parent] of restoreParents) parent.add(raw);
+      for (const w of activated) w.onAfterPicking();
+    };
+  }
+
+  /**
+   * Dedicated picking render: clears the target to black (batchId=0) and
+   * renders only the pickable raws, regardless of which pass scene they
+   * normally live in.
+   */
+  public processRender(target: WebGLRenderTarget, pickingCoord?: Vector2) {
+    const origClearColor = new Color();
+    this._renderer.getClearColor(origClearColor);
+    const origClearAlpha = this._renderer.getClearAlpha();
+    const origRenderTarget = this._renderer.getRenderTarget();
+    const origAutoClear = this._renderer.autoClear;
+
+    const teardown = this.stagePickables(pickingCoord);
+
+    this._renderer.setClearColor(0x000000, 1);
+    this._renderer.setRenderTarget(target);
+    this._renderer.autoClear = true;
+    this._renderer.clear(true, true, false);
+    this._renderer.render(this.pickScene, this._camera);
+
+    teardown();
+
+    this._renderer.setRenderTarget(origRenderTarget);
+    this._renderer.setClearColor(origClearColor, origClearAlpha);
+    this._renderer.autoClear = origAutoClear;
+  }
+
+  public setSize(width: number, height: number) {
+    this.pickRenderTarget.setSize(width, height);
+    this.debugRenderTarget?.setSize(width, height);
+    if (this.debugBufferView) {
+      this.debugBufferView.canvas.width = width;
+      this.debugBufferView.canvas.height = height;
+      this.debugBufferView.canvasForImage.width = width;
+      this.debugBufferView.canvasForImage.height = height;
+    }
+  }
+
+  public renderDebugCanvas() {
+    if (!this.debugBufferView || !this.debugRenderTarget) return;
+
+    // Full-screen debug view: no view-offset so we can see everything.
+    this.processRender(this.debugRenderTarget);
+    this.debugBufferView.render(this._renderer, this.debugRenderTarget);
+  }
+
+  private onMouseClick(event: MouseEvent) {
+    const rect = this.element.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    const pixelRatio = this._renderer.getPixelRatio();
+    const fullWidth = this._renderer.getContext().drawingBufferWidth;
+    const fullHeight = this._renderer.getContext().drawingBufferHeight;
+
+    // gl_FragCoord-style pixel-space coords (centers at 0.5, 1.5, ...).
+    // Clamp to valid viewport bounds.
+    const pixelX = Math.max(
+      0,
+      Math.min(Math.floor(x * pixelRatio), fullWidth - 1),
+    );
+    const pixelY = Math.max(
+      0,
+      Math.min(Math.floor(y * pixelRatio), fullHeight - 1),
+    );
+    const pickingCoord = new Vector2(
+      pixelX + 0.5,
+      fullHeight - pixelY - 0.5, // flip Y for WebGL
+    );
+    const readY = fullHeight - 1 - pixelY;
+
+    // Keep the camera projection unchanged for wide lines / screen-space
+    // expanded shaders, and limit fragment work to one pixel via scissor.
+    this._renderer.setScissor(pixelX, readY, 1, 1);
+    this._renderer.setScissorTest(true);
+
+    this.processRender(this.pickRenderTarget, pickingCoord);
+
+    this._renderer.readRenderTargetPixels(
+      this.pickRenderTarget,
+      pixelX,
+      readY,
+      1,
+      1,
+      this.pixelBuffer,
+    );
+
+    this._renderer.setScissorTest(false);
+
+    const batchId =
+      (this.pixelBuffer[0] << 16) +
+      (this.pixelBuffer[1] << 8) +
+      this.pixelBuffer[2];
+
+    const pickArr = batchId > 0 ? [batchId] : [];
+    this.onPickCallback(pickArr);
+  }
+
+  public dispose() {
+    this.enablePick(false);
+    this.pickRenderTarget.dispose();
+    this.debugRenderTarget?.dispose();
+    this.debugBufferView?.dispose();
+  }
+}