Merge pull request #301 from zhuxudong/feat/outline-auto-reisze

Outline support auto resize
galacean · Aug 16, 2024 · 6067600 · 6067600
2 parents 2328c31 + b411ab2
commit 6067600
Showing 1 changed file with 34 additions and 15 deletions.
diff --git a/packages/outline/src/OutlineManager.ts b/packages/outline/src/OutlineManager.ts
@@ -107,22 +107,9 @@ export class OutlineManager extends Script {
 
   set size(value: number) {
     value = Math.max(1, Math.min(value, 6));
-    this._size = value;
 
-    if (this._renderTarget) {
-      this._renderTarget.getColorTexture().destroy(true);
-      this._renderTarget.destroy();
-    }
-    const { width, height } = this.engine.canvas;
-    const offWidth = width / value;
-    const offHeight = height / value;
-    const renderColorTexture = new Texture2D(this.engine, offWidth, offHeight);
-    const renderTarget = new RenderTarget(this.engine, offWidth, offHeight, renderColorTexture);
-
-    this._outlineMaterial.shaderData.setTexture(OutlineManager._outlineTextureProp, renderColorTexture);
-    this._outlineMaterial.shaderData.setVector2(OutlineManager._texSizeProp, new Vector2(1 / offWidth, 1 / offHeight));
-    renderColorTexture.wrapModeU = renderColorTexture.wrapModeV = TextureWrapMode.Clamp;
-    this._renderTarget = renderTarget;
+    this._checkFrameBufferSize(value);
+    this._size = value;
   }
 
   constructor(entity: Entity) {
@@ -185,6 +172,8 @@ export class OutlineManager extends Script {
   override onEndRender(camera: Camera): void {
     const outlineEntities = this._outlineEntities;
     if (!outlineEntities.length) return;
+    // Check frame buffer size
+    this._checkFrameBufferSize(this._size);
     this._renderEntity(camera, this.subColor, this._subLineEntities);
     this._renderEntity(camera, this.mainColor, outlineEntities);
   }
@@ -293,6 +282,36 @@ export class OutlineManager extends Script {
       });
     }
   }
+
+  private _checkFrameBufferSize(size: number): void {
+    const lastSize = this._size;
+    const { width, height } = this.engine.canvas;
+    const offWidth = width / size;
+    const offHeight = height / size;
+
+    if (
+      !this._renderTarget ||
+      size !== lastSize ||
+      this._renderTarget.width !== offWidth ||
+      this._renderTarget.height !== offHeight
+    ) {
+      if (this._renderTarget) {
+        this._renderTarget.getColorTexture().destroy(true);
+        this._renderTarget.destroy();
+      }
+
+      const renderColorTexture = new Texture2D(this.engine, offWidth, offHeight);
+      const renderTarget = new RenderTarget(this.engine, offWidth, offHeight, renderColorTexture);
+
+      this._outlineMaterial.shaderData.setTexture(OutlineManager._outlineTextureProp, renderColorTexture);
+      this._outlineMaterial.shaderData.setVector2(
+        OutlineManager._texSizeProp,
+        new Vector2(1 / offWidth, 1 / offHeight)
+      );
+      renderColorTexture.wrapModeU = renderColorTexture.wrapModeV = TextureWrapMode.Clamp;
+      this._renderTarget = renderTarget;
+    }
+  }
 }
 
 Shader.create("outline-postprocess-shader", outlineVs, outlineFs);