[3d] performance improvement by using threejs setViewport (#4079)

Author: jtydhr88

src/extensions/core/load3d/Load3d.ts

@@ -160,22 +160,48 @@ class Load3d {
     this.viewHelperManager.update(delta)
     this.controlsManager.update()
 
+    this.renderMainScene()
+
+    if (this.previewManager.showPreview) {
+      this.renderPreviewScene()
+    }
+
+    this.resetViewport()
+
+    if (this.viewHelperManager.viewHelper.render) {
+      this.viewHelperManager.viewHelper.render(this.renderer)
+    }
+
+    this.INITIAL_RENDER_DONE = true
+  }
+
+  renderMainScene(): void {
+    const width = this.renderer.domElement.clientWidth
+    const height = this.renderer.domElement.clientHeight
+
+    this.renderer.setViewport(0, 0, width, height)
+    this.renderer.setScissor(0, 0, width, height)
+    this.renderer.setScissorTest(true)
+
     this.renderer.clear()
     this.sceneManager.renderBackground()
     this.renderer.render(
       this.sceneManager.scene,
       this.cameraManager.activeCamera
     )
+  }
 
-    if (this.viewHelperManager.viewHelper.render) {
-      this.viewHelperManager.viewHelper.render(this.renderer)
-    }
+  renderPreviewScene(): void {
+    this.previewManager.renderPreview()
+  }
 
-    if (this.previewManager.showPreview) {
-      this.previewManager.updatePreviewRender()
-    }
+  resetViewport(): void {
+    const width = this.renderer.domElement.clientWidth
+    const height = this.renderer.domElement.clientHeight
 
-    this.INITIAL_RENDER_DONE = true
+    this.renderer.setViewport(0, 0, width, height)
+    this.renderer.setScissor(0, 0, width, height)
+    this.renderer.setScissorTest(false)
   }
 
   private getActiveCamera(): THREE.Camera {
@@ -198,20 +224,17 @@ class Load3d {
         return
       }
 
-      if (this.previewManager.showPreview) {
-        this.previewManager.updatePreviewRender()
-      }
-
       const delta = this.clock.getDelta()
       this.viewHelperManager.update(delta)
       this.controlsManager.update()
 
-      this.renderer.clear()
-      this.sceneManager.renderBackground()
-      this.renderer.render(
-        this.sceneManager.scene,
-        this.cameraManager.activeCamera
-      )
+      this.renderMainScene()
+
+      if (this.previewManager.showPreview) {
+        this.renderPreviewScene()
+      }
+
+      this.resetViewport()
 
       if (this.viewHelperManager.viewHelper.render) {
         this.viewHelperManager.viewHelper.render(this.renderer)
@@ -304,22 +327,17 @@ class Load3d {
   async setBackgroundImage(uploadPath: string): Promise<void> {
     await this.sceneManager.setBackgroundImage(uploadPath)
 
-    if (this.previewManager.previewRenderer) {
-      this.previewManager.updateBackgroundTexture(
-        this.sceneManager.backgroundTexture
-      )
-    }
+    this.previewManager.updateBackgroundTexture(
+      this.sceneManager.backgroundTexture
+    )
 
     this.forceRender()
   }
 
   removeBackgroundImage(): void {
     this.sceneManager.removeBackgroundImage()
 
-    if (
-      this.previewManager.previewRenderer &&
-      this.previewManager.previewCamera
-    ) {
+    if (this.previewManager.previewCamera) {
       this.previewManager.updateBackgroundTexture(null)
     }
 

src/extensions/core/load3d/Load3dAnimation.ts

@@ -42,10 +42,6 @@ class Load3dAnimation extends Load3d {
         return
       }
 
-      if (this.previewManager.showPreview) {
-        this.previewManager.updatePreviewRender()
-      }
-
       const delta = this.clock.getDelta()
 
       this.animationManager.update(delta)
@@ -54,12 +50,13 @@ class Load3dAnimation extends Load3d {
 
       this.controlsManager.update()
 
-      this.renderer.clear()
-      this.sceneManager.renderBackground()
-      this.renderer.render(
-        this.sceneManager.scene,
-        this.cameraManager.activeCamera
-      )
+      this.renderMainScene()
+
+      if (this.previewManager.showPreview) {
+        this.renderPreviewScene()
+      }
+
+      this.resetViewport()
 
       if (this.viewHelperManager.viewHelper.render) {
         this.viewHelperManager.viewHelper.render(this.renderer)