How to resolve the issue of an entity not being fully displayed after adding it and rotating the view?

[MYDJH]

Hello, I am aiming to achieve a flood simulation effect using iTwin.js, similar to the ocean effect in three.js: https://threejs.org/examples/?q=water#webgl_shaders_ocean.

My initial approach was to add a blue rectangular box to the model and control its height to simulate rising and falling water levels. However, after adding the blue box to my model, I noticed that when I rotate the model, the box is not fully visible. I want it to be visible from any angle, just like my model. Is this due to the camera settings?

Here is the reference code I used to add the box: https://www.itwinjs.org/sandboxes/iTwinPlatform/Simple%203d
Here is a screenshot of the issue:

Do you have any alternative approaches or suggestions? I appreciate your help and advice.

[pmconne]

The view's near and far planes are computed from the bounding boxes of the geometry in the view, but this doesn't currently include decorators. So your decoration geometry can get clipped when it extends outside of the iModel's bounding box.

If you were drawing your geometry as a tile tree instead of a decorator, its bounding box would be included in the computation of the view frustum. And IMO the kind of geometry you are trying to draw (something that's supposed to be part of the scene, instead of just "decorating" it) should be drawn as a tile tree.

You can very easily create a tile tree from a graphic and add it to the scene using TileTreeReference.createFromRenderGraphic.

[pmconne]

It will help if you provide details about how you went about attempting to update and what specific errors you encountered.

@GerardasB @aruniverse.

[MYDJH]

Hello ,Here is a detailed description of the problem.
When I execute this code, according to the TypeScript hint, I find that it lacks the createFromRenderGraphic method.

I found that my TileTreeReference class does not have the createFromRenderGraphic method, but this method exists in the latest version of @itwin/core-frontend.
I tried using npm i @itwin/core-frontend@4.7.1.

I also tried npm i @itwin/core-frontend@4.5.0, but it also reported conflicting files.
I tried removing it with npm uninstall @itwin/core-frontend and then reinstalling, but issues still occur.

I also tried manually resolving conflicts as per the peer suggestions mentioned above. When I removed conflicting files, upgraded, and installed the latest dependencies, I encountered conflicts with other packages again. I want to test to find a version that allows me to use the createFromRenderGraphic method.

I want to upgrade all my dependencies comprehensively, but I haven't found a suitable version. The only thing I can think of is testing each version one by one, but that feels like a lot of work. I'm wondering if there's a better suggestion.

[divyashah0510]

@MYDJH the issue might be with the version specification if you try with npm i @itwin/core-frontend the issue would be solved

[aruniverse]

iTwinjs-Core packages are all in lockstep, so you can't just install core-frontend@4.7.1 and leave the rest on 4.3.3, all the core packages would need to be updated to 4.7.1. That should eliminate the conflicting peer deps for appui-abstract.

[MYDJH]

Thank you very much, the issue has indeed been resolved.

[MYDJH]

@pmconne
Hello, I'm sorry to trouble you again. I've tried using TileTreeReference.createFromRenderGraphic to add a rectangle to the view, but I found that when I rotate the view, some parts are not displayed fully. It only displays normally when its size is consistent with the size of my model.

Whenever I zoom in, it causes the display to be incomplete. I suspect this might be related to the frustum, so I made some modifications, but I failed.
This is my code：

  function AddBoxMethod() {
    const viewport = IModelApp.viewManager.selectedView;
    if (viewport) {
      addTiledGraphics(viewport);
      setCustomView(viewport);
    }
    function addTiledGraphics(viewport: Viewport): void {
      const builder = IModelApp.renderSystem.createGraphic({
        type: GraphicType.Scene,
        computeChordTolerance: () => 0.01,
      });
      const rangeCompare = viewport.iModel.projectExtents;
      // increase rangeCompare by two times
      let copyRangeBox = rangeCompare.clone();
      const scale = 2;
      const center = copyRangeBox.center;
      const delta = center.vectorTo(copyRangeBox.high).scale(scale - 1);
      copyRangeBox.low.subtractInPlace(delta);
      copyRangeBox.high.addInPlace(delta);

      builder.addSolidPrimitive(Box.createRange(copyRangeBox, true)!);
      const graphic = builder.finish();
      const treeRef = TileTreeReference.createFromRenderGraphic({
        graphic,
        modelId: viewport.iModel.transientIds.getNext(),
        iModel: viewport.iModel,
      });
      viewport.addTiledGraphicsProvider({
        forEachTileTreeRef: (_vp, func) => func(treeRef),
      });
    }
    function setCustomView(viewport: Viewport): void {
      const range2 = viewport.iModel.projectExtents;
      let copyRange = range2.clone();
      const center = copyRange.center;
      const scale = 3;
      const delta = center.vectorTo(copyRange.high).scale(scale - 1);
      copyRange.low.subtractInPlace(delta);
      copyRange.high.addInPlace(delta);
      const frustum = viewport.getFrustum();
      frustum.setFrom(Frustum.fromRange(copyRange!));
      viewport.setupViewFromFrustum(frustum);
      viewport.changeView(viewport.view);
      viewport.view.lookAtVolume(copyRange!, viewport.viewRect.aspect);
      viewport.synchWithView({ animateFrustumChange: true });
    }
  }

"This is the problematic image. Could you help me analyze what is causing this issue? Thank you."

[pmconne]

Thank you. I see the issue. Filed as #6873. Should be an easy fix.

[pmconne]

Fixed by #6876.

[pmconne]

Fix will be included in 4.7.2. Thanks for your help.

[pmconne]

4.7.2 has been released.

[MYDJH]

Yes, the issue is resolved now. Thank you very much for your help!