fix: sorting

samples/test_e2e/WebGpuGltf/main.ts

@@ -28,6 +28,7 @@ cameraComponent.aspect = 1;
 cameraEntity.getTransform().localPosition = Rn.Vector3.fromCopyArray([0.0, 0, 0.5]);
 const cameraControllerComponent = cameraEntity.getCameraController();
 cameraControllerComponent.controller.setTarget(rootGroup);
+(cameraControllerComponent.controller as Rn.OrbitCameraController).autoUpdate = false;
 
 // Light
 const light = Rn.EntityHelper.createLightEntity();
@@ -59,6 +60,7 @@ const draw = function () {
   }
 
   if (window.isAnimating) {
+    Rn.AnimationComponent.isAnimating = true;
     const date = new Date();
     const rotation = 0.001 * (date.getTime() - startTime);
     //rotationVec3._v[0] = 0.1;
@@ -69,6 +71,8 @@ const draw = function () {
     if (time > Rn.AnimationComponent.endInputValue) {
       startTime = date.getTime();
     }
+  } else {
+    Rn.AnimationComponent.isAnimating = false;
   }
 
   //      console.log(date.getTime());

src/foundation/cameras/ICameraController.ts

@@ -8,4 +8,5 @@ export interface ICameraController {
   setTarget(targetEntity: ISceneGraphEntity): void;
   setTargets(targetEntities: ISceneGraphEntity[]): void;
   getTargets(): ISceneGraphEntity[];
+  updateCount: number;
 }

src/foundation/cameras/OrbitCameraController.ts

@@ -24,6 +24,7 @@ export class OrbitCameraController extends AbstractCameraController implements I
   public autoUpdate = true;
 
   private __updated = false;
+  private __updateCount = 0;
   private __fixedLengthOfCenterToEye = 1;
   private __isMouseDown = false;
   private __lastMouseDownTimeStamp = 0;
@@ -110,6 +111,10 @@ export class OrbitCameraController extends AbstractCameraController implements I
     this.registerEventListeners();
   }
 
+  get updateCount() {
+    return this.__updateCount;
+  }
+
   resetDollyAndTranslation() {
     this.__dolly = 0.5;
     this.__mouse_translate_x = 0;
@@ -125,6 +130,7 @@ export class OrbitCameraController extends AbstractCameraController implements I
     this.__targetEntities = targetEntities;
     this.__initialTargetAABB = undefined;
     this.__updated = false;
+    this.__updateCount++;
   }
 
   getTargets(): ISceneGraphEntity[] {
@@ -155,6 +161,7 @@ export class OrbitCameraController extends AbstractCameraController implements I
     console.log('original', this.__originalX, this.__originalY);
 
     this.__updated = false;
+    this.__updateCount++;
   }
 
   __mouseMove(e: MouseEvent) {
@@ -201,6 +208,7 @@ export class OrbitCameraController extends AbstractCameraController implements I
     this.__originalX = currentMouseX;
     this.__originalY = currentMouseY;
     this.__updated = false;
+    this.__updateCount++;
   }
 
   __mouseUp(e: MouseEvent) {
@@ -211,6 +219,7 @@ export class OrbitCameraController extends AbstractCameraController implements I
     this.__isMouseDown = false;
     this.__lastMouseUpTimeStamp = e.timeStamp;
     this.__updated = false;
+    this.__updateCount++;
   }
 
   __touchDown(e: TouchEvent) {
@@ -403,6 +412,7 @@ export class OrbitCameraController extends AbstractCameraController implements I
     this.__tryToPreventDefault(evt);
     this.dolly += Math.sign(evt.deltaY) / 200;
     this.__updated = false;
+    this.__updateCount++;
   }
 
   __contextMenu(evt: Event) {

src/foundation/cameras/WalkThroughCameraController.ts

@@ -24,6 +24,7 @@ export class WalkThroughCameraController
   extends AbstractCameraController
   implements ICameraController
 {
+  private __updateCount = 0;
   private _horizontalSpeed: number;
   private _verticalSpeed: number;
   private _turnSpeed: number;
@@ -106,6 +107,10 @@ export class WalkThroughCameraController
     this.registerEventListeners(eventTargetDom);
   }
 
+  get updateCount() {
+    return this.__updateCount;
+  }
+
   registerEventListeners(eventTargetDom: Document = document) {
     this._eventTargetDom = eventTargetDom;
 
@@ -241,6 +246,8 @@ export class WalkThroughCameraController
     );
     this._currentPos.add(deltaVec);
     this._currentCenter.add(deltaVec);
+
+    this.__updateCount++;
   }
 
   _mouseDown(evt: MouseEvent) {
@@ -251,6 +258,7 @@ export class WalkThroughCameraController
     this._clickedMouseXOnCanvas = evt.clientX - rect.left;
     this._clickedMouseYOnCanvas = evt.clientY - rect.top;
 
+    this.__updateCount++;
     return false;
   }
 
@@ -268,6 +276,7 @@ export class WalkThroughCameraController
     this._deltaMouseYOnCanvas = this._draggedMouseYOnCanvas - this._clickedMouseYOnCanvas;
 
     this._isMouseDrag = true;
+    this.__updateCount++;
   }
 
   _mouseUp(evt: MouseEvent) {
@@ -282,6 +291,7 @@ export class WalkThroughCameraController
     const rect = target.getBoundingClientRect();
     this._clickedMouseXOnCanvas = evt.clientX - rect.left;
     this._clickedMouseYOnCanvas = evt.clientY - rect.top;
+    this.__updateCount++;
   }
 
   tryReset() {}
@@ -493,6 +503,7 @@ export class WalkThroughCameraController
 
     this.__targetEntities = targetEntities;
     this._needInitialize = true;
+    this.__updateCount++;
   }
 
   getTargets(): ISceneGraphEntity[] {

src/foundation/components/CameraController/CameraControllerComponent.ts

@@ -21,6 +21,7 @@ import { ComponentToComponentMethods } from '../ComponentTypes';
 export class CameraControllerComponent extends Component {
   private __cameraComponent?: CameraComponent;
   private __cameraController: ICameraController;
+  private static __updateCount = 0;
 
   constructor(
     entityUid: EntityUID,
@@ -75,9 +76,14 @@ export class CameraControllerComponent extends Component {
   $logic() {
     if (this.__cameraController) {
       this.__cameraController.logic(this.__cameraComponent!);
+      CameraControllerComponent.__updateCount = this.__cameraController.updateCount;
     }
   }
 
+  static get updateCount() {
+    return CameraControllerComponent.__updateCount;
+  }
+
   addThisComponentToEntity<EntityBase extends IEntity, SomeComponentClass extends typeof Component>(
     base: EntityBase,
     _componentClass: SomeComponentClass

src/foundation/components/MeshRenderer/MeshRendererComponent.ts

@@ -25,6 +25,8 @@ import { Primitive } from '../../geometry/Primitive';
 import { isSkipDrawing } from '../../renderer/RenderingCommonMethods';
 import { CGAPIStrategy } from '../../renderer/CGAPIStrategy';
 import { RnXR } from '../../../xr/main';
+import { TransformComponent } from '../Transform/TransformComponent';
+import { CameraControllerComponent } from '../CameraController/CameraControllerComponent';
 
 export class MeshRendererComponent extends Component {
   private __diffuseCubeMap?: CubeTexture;
@@ -36,11 +38,6 @@ export class MeshRendererComponent extends Component {
   private __meshComponent?: MeshComponent;
 
   private static __webglRenderingStrategy?: CGAPIStrategy;
-  public static _lastOpaqueIndex = -1;
-  public static _lastTransparentIndex = -1;
-  public static _firstTransparentSortKey = -1;
-  public static _lastTransparentSortKey = -1;
-  public static isViewFrustumCullingEnabled = true;
   public static isDepthMaskTrueForTransparencies = false;
   static __shaderProgramHandleOfPrimitiveObjectUids: Map<ObjectUID, CGAPIResourceHandle> =
     new Map();
@@ -156,6 +153,14 @@ export class MeshRendererComponent extends Component {
   }
 
   private static sort_$render_inner(renderPass: RenderPass) {
+    if (
+      TransformComponent.updateCount === renderPass._lastTransformComponentsUpdateCount &&
+      CameraControllerComponent.updateCount ===
+        renderPass._lastCameraControllerComponentsUpdateCount
+    ) {
+      return renderPass._lastPrimitiveUids;
+    }
+
     // get CameraComponent
     let cameraComponent = renderPass.cameraComponent;
     // If the renderPass doesn't have a cameraComponent, then we get it of the main camera
@@ -200,26 +205,31 @@ export class MeshRendererComponent extends Component {
     const primitiveUids = primitives.map((primitive) => primitive.primitiveUid);
     primitiveUids.push(-1);
 
-    MeshRendererComponent._lastOpaqueIndex = primitives.length - 1;
-    MeshRendererComponent._lastTransparentIndex = -1;
-    MeshRendererComponent._firstTransparentSortKey = -1;
-    MeshRendererComponent._lastTransparentSortKey = -1;
+    renderPass._lastOpaqueIndex = primitives.length - 1;
+    renderPass._lastTransparentIndex = -1;
+    renderPass._firstTransparentSortKey = -1;
+    renderPass._lastTransparentSortKey = -1;
+
     for (let i = 0; i < primitives.length; i++) {
       const primitive = primitives[i];
       const bitOffset = PrimitiveSortKey_BitOffset_TranslucencyType + 1;
       const isTranslucency = (primitive._sortkey >> bitOffset) & 1;
       if (isTranslucency) {
-        MeshRendererComponent._lastOpaqueIndex = i - 1;
-        MeshRendererComponent._firstTransparentSortKey = primitive._sortkey;
+        renderPass._lastOpaqueIndex = i - 1;
+        renderPass._firstTransparentSortKey = primitive._sortkey;
         break;
       }
     }
 
     if (primitives.length > 0) {
-      MeshRendererComponent._lastTransparentIndex = primitives.length - 1;
-      MeshRendererComponent._lastTransparentSortKey = primitives[primitives.length - 1]._sortkey;
+      renderPass._lastTransparentIndex = primitives.length - 1;
+      renderPass._lastTransparentSortKey = primitives[primitives.length - 1]._sortkey;
     }
 
+    renderPass._lastTransformComponentsUpdateCount = TransformComponent.updateCount;
+    renderPass._lastCameraControllerComponentsUpdateCount = CameraControllerComponent.updateCount;
+    renderPass._lastPrimitiveUids = primitiveUids;
+
     return primitiveUids;
   }
 
@@ -229,7 +239,7 @@ export class MeshRendererComponent extends Component {
     renderPass: RenderPass
   ) {
     let filteredMeshComponents: MeshComponent[] = [];
-    if (cameraComponent && MeshRendererComponent.isViewFrustumCullingEnabled) {
+    if (cameraComponent) {
       cameraComponent.updateFrustum();
 
       // const whetherContainsSkeletal = (sg: SceneGraphComponent): boolean => {

src/foundation/components/Transform/TransformComponent.ts

@@ -15,14 +15,15 @@ import { ITransformEntity } from '../../helpers';
 import { MutableQuaternion, Transform3D } from '../../math';
 import { Is } from '../../misc';
 import { SceneGraphComponent } from '../SceneGraph';
-import { OimoPhysicsStrategy } from '../../physics/Oimo/OimoPhysicsStrategy';
 
 export class TransformComponent extends Component {
   private __rest: Transform3D | undefined;
   private __pose = new Transform3D();
   private __updateCountAtLastLogic = 0;
   private __sceneGraphComponent?: SceneGraphComponent;
 
+  private static __updateCount = 0;
+
   constructor(
     entityUid: EntityUID,
     componentSid: ComponentSID,
@@ -58,6 +59,10 @@ export class TransformComponent extends Component {
     }
   }
 
+  static get updateCount() {
+    return this.__updateCount;
+  }
+
   _backupTransformAsRest() {
     if (this.__rest === undefined) {
       this.__rest = this.__pose.clone();
@@ -324,6 +329,7 @@ export class TransformComponent extends Component {
     if (this.__updateCountAtLastLogic !== this.__pose.updateCount) {
       this.__sceneGraphComponent!.setWorldMatrixDirty();
       this.__updateCountAtLastLogic = this.__pose.updateCount;
+      TransformComponent.__updateCount++;
     }
   }
 

src/foundation/renderer/RenderPass.ts

@@ -46,6 +46,14 @@ export class RenderPass extends RnObject {
   public isVrRendering = true;
   public isOutputForVr = false;
 
+  public _lastOpaqueIndex = -1;
+  public _lastTransparentIndex = -1;
+  public _firstTransparentSortKey = -1;
+  public _lastTransparentSortKey = -1;
+  public _lastPrimitiveUids: number[] = [];
+  public _lastTransformComponentsUpdateCount = -1;
+  public _lastCameraControllerComponentsUpdateCount = -1;
+
   /** Whether or not to draw opaque primitives contained in this render pass. */
   public toRenderOpaquePrimitives = true;
 

src/webgl/WebGLStrategyCommonMethod.ts

@@ -166,17 +166,21 @@ function setAlphaToCoverage(material: Material, gl: WebGLRenderingContext) {
   }
 }
 
-function startDepthMasking(primitive: Primitive, gl: WebGLRenderingContext) {
+function startDepthMasking(
+  primitive: Primitive,
+  gl: WebGLRenderingContext,
+  renderPass: RenderPass
+) {
   if (MeshRendererComponent.isDepthMaskTrueForTransparencies) {
     return;
   }
-  if (primitive._sortkey === MeshRendererComponent._firstTransparentSortKey) {
+  if (primitive._sortkey === renderPass._firstTransparentSortKey) {
     gl.depthMask(false);
   }
 }
 
-function endDepthMasking(primitive: Primitive, gl: WebGLRenderingContext) {
-  if (primitive._sortkey === MeshRendererComponent._lastTransparentSortKey) {
+function endDepthMasking(primitive: Primitive, gl: WebGLRenderingContext, renderPass: RenderPass) {
+  if (primitive._sortkey === renderPass._lastTransparentSortKey) {
     gl.depthMask(true);
   }
 }

src/webgl/WebGLStrategyDataTexture.ts

@@ -44,6 +44,7 @@ import { ShaderSemanticsInfo } from '../foundation/definitions/ShaderSemanticsIn
 import { MaterialRepository } from '../foundation/materials/core/MaterialRepository';
 import { isSkipDrawing, updateVBOAndVAO } from '../foundation/renderer/RenderingCommonMethods';
 import { CGAPIStrategy } from '../foundation/renderer/CGAPIStrategy';
+import { render } from 'react-dom';
 
 declare const spector: any;
 
@@ -755,7 +756,7 @@ ${returnType} get_${methodName}(highp float _instanceId, const int idxOfArray) {
 
         // For opaque primitives
         if (renderPass.toRenderOpaquePrimitives) {
-          for (let i = 0; i <= MeshRendererComponent._lastOpaqueIndex; i++) {
+          for (let i = 0; i <= renderPass._lastOpaqueIndex; i++) {
             const primitiveUid = primitiveUids[i];
             this.renderInner(primitiveUid, glw, renderPass, isVRMainPass, displayIdx);
           }
@@ -769,8 +770,8 @@ ${returnType} get_${methodName}(highp float _instanceId, const int idxOfArray) {
           }
 
           for (
-            let i = MeshRendererComponent._lastOpaqueIndex + 1;
-            i <= MeshRendererComponent._lastTransparentIndex;
+            let i = renderPass._lastOpaqueIndex + 1;
+            i <= renderPass._lastTransparentIndex;
             i++
           ) {
             const primitiveUid = primitiveUids[i];

src/webgl/WebGLStrategyUniform.ts

@@ -403,7 +403,7 @@ bool get_isBillboard(float instanceId) {
 
         // For opaque primitives
         if (renderPass.toRenderOpaquePrimitives) {
-          for (let i = 0; i <= MeshRendererComponent._lastOpaqueIndex; i++) {
+          for (let i = 0; i <= renderPass._lastOpaqueIndex; i++) {
             const primitiveUid = primitiveUids[i];
             this.renderInner(
               primitiveUid,
@@ -424,8 +424,8 @@ bool get_isBillboard(float instanceId) {
           }
 
           for (
-            let i = MeshRendererComponent._lastOpaqueIndex + 1;
-            i <= MeshRendererComponent._lastTransparentIndex;
+            let i = renderPass._lastOpaqueIndex + 1;
+            i <= renderPass._lastTransparentIndex;
             i++
           ) {
             const primitiveUid = primitiveUids[i];