Skip to content

FastModelPicker#renderPickPass bug #773

Description

@ShaMan123

Describe the bug 📝

#737 #747
I think I managed to isolate the bug to FastModelPicker#renderPickPass
My initial triage suggested the background was rendering over existing content masking the hit target suggesting it was also related to multiple loaded models.
It seems that rendering the entire scene it wrong.

Also iterating all frags list is wrong/redundant because the consumer may have not added the frag.object to the scene.

Reproduction ▶️

No response

Steps to reproduce 🔢

On main open the Outliner example

Edit the example:

- world.scene.three.background = null;
+ world.scene.three.background = new THREE.Color("red");

const fragPaths = [
  "https://thatopen.github.io/engine_components/resources/frags/school_arq.frag",
+  "https://thatopen.github.io/engine_components/resources/frags/small_road.frag",
];

Outlining (on any raycasting) will not work.
Additionally the first frag (school_arq) will not show up, probably covered by the red background.

Toggle the background color to null:
Outlining works but school_arq still is not visible

Debug mode

Running in debug mode shows the canvas as black always even when the outliner works (another bug).

const pickers = components.get(OBC.FastModelPickers);
const picker = pickers.get(world);

/* MD
  ### 🎨 Enabling Debug Mode
  Debug mode shows a small canvas in the top-right corner displaying the color-coded render. This is useful for understanding how the component works:
*/

picker.setDebugMode(true);

System Info 💻

System:
    OS: macOS 26.5.2
    CPU: (12) arm64 Apple M2 Max
    Memory: 668.80 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.12.0 - /Users/shaman123/.nvm/versions/node/v24.12.0/bin/node
    Yarn: 3.2.1 - /opt/homebrew/bin/yarn
    npm: 11.12.0 - /Users/shaman123/.nvm/versions/node/v24.12.0/bin/npm
  Browsers:
    Chrome: 150.0.7871.182
    Safari: 26.5.2

Used Package Manager 📦

npm

Error Trace/Logs 📃

I have patched the caller of renderPickPass to workaround this issue (works on 3.4.6, but doesn't seem to work on 3.4.7 unless I didn't start the dev server or build the repo properly)

  private renderIdPass(byteToModel: Map<number, string>, _ndc: THREE.Vector2) {
    const renderer = this.world.renderer!.three;
    const camera = this.world.camera.three;
    const material = this._idMaterial;
    const fragments = this.components.get(FragmentsManager);
    const planes = renderer.clippingPlanes ?? [];
    material.clippingPlanes = planes;
    material.clipping = planes.length > 0;
    const prevTarget = renderer.getRenderTarget();
    const prevAutoClear = renderer.autoClear;
    const prevClearColor = renderer.getClearColor(new THREE.Color());
    const prevClearAlpha = renderer.getClearAlpha();
    const prevScissorTest = renderer.getScissorTest();
    renderer.setRenderTarget(this._renderTarget!);
    renderer.setClearColor(0, 0);
    renderer.autoClear = false;
    renderer.setScissorTest(false);
    renderer.clear(true, true, false);
    for (const [byte, modelId] of byteToModel) {
      const model = fragments.list.get(modelId);
      if (!model) continue;
      material.uniforms.modelByte.value = byte;
      renderer.render(model.object, camera);
    }
    renderer.setScissorTest(prevScissorTest);
    renderer.setRenderTarget(prevTarget);
    renderer.autoClear = prevAutoClear;
    renderer.setClearColor(prevClearColor, prevClearAlpha);
  }

Validations ✅

  • Read the docs.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Make sure this is a repository issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
  • Check that this is a concrete bug. For Q&A join our Community.
  • The provided reproduction is a minimal reproducible example of the bug.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions