pass ready events on all pass types

src/effects/BokehPass.js

@@ -37,8 +37,7 @@ export default {
       height: this.three.size.height,
     };
     const pass = new BokehPass(this.three.scene, this.three.camera, params);
-    this.passes.push(pass);
+    this.completePass(pass);
-    this.pass = pass;
   },
   __hmrId: 'BokehPass',
 };

src/effects/EffectPass.js

@@ -1,5 +1,6 @@
 export default {
   inject: ['three', 'passes'],
+  events: ['ready'],
   beforeMount() {
     if (!this.passes) {
       console.error('Missing parent EffectComposer');
@@ -8,6 +9,13 @@ export default {
   unmounted() {
     if (this.pass.dispose) this.pass.dispose();
   },
+  methods: {
+    completePass(pass) {
+      this.passes.push(pass);
+      this.pass = pass;
+      this.$emit('ready', pass);
+    }
+  },
   render() {
     return [];
   },

src/effects/FXAAPass.js

@@ -6,8 +6,7 @@ export default {
   extends: EffectPass,
   mounted() {
     const pass = new ShaderPass(FXAAShader);
-    this.passes.push(pass);
+    this.completePass(pass);
-    this.pass = pass;
 
     // resize will be called in three init
     this.three.onAfterResize(this.resize);

src/effects/FilmPass.js

@@ -29,8 +29,7 @@ export default {
   },
   mounted() {
     const pass = new FilmPass(this.noiseIntensity, this.scanlinesIntensity, this.scanlinesCount, this.grayscale);
-    this.passes.push(pass);
+    this.completePass(pass);
-    this.pass = pass;
   },
   __hmrId: 'FilmPass',
 };

src/effects/HalftonePass.js

@@ -22,8 +22,7 @@ export default {
       });
     });
 
-    this.passes.push(pass);
+    this.completePass(pass);
-    this.pass = pass;
   },
   __hmrId: 'HalftonePass',
 };

src/effects/RenderPass.js

@@ -11,8 +11,7 @@ export default {
       console.error('Missing Camera');
     }
     const pass = new RenderPass(this.three.scene, this.three.camera);
-    this.passes.push(pass);
+    this.completePass(pass);
-    this.pass = pass;
   },
   __hmrId: 'RenderPass',
 };

src/effects/SMAAPass.js

@@ -6,8 +6,7 @@ export default {
   mounted() {
     // three size is not set yet, but this pass will be resized by effect composer
     const pass = new SMAAPass(this.three.size.width, this.three.size.height);
-    this.passes.push(pass);
+    this.completePass(pass);
-    this.pass = pass;
   },
   __hmrId: 'SMAAPass',
 };

src/effects/SSAOPass.js

@@ -18,8 +18,7 @@ export default {
       this.three.size.width,
       this.three.size.height
     );
-    this.passes.push(pass);
+    this.completePass(pass);
-    this.pass = pass;
 
     for (let key of Object.keys(this.options)) {
       this.pass[key] = this.options[key];

src/effects/TiltShiftPass.js

@@ -39,6 +39,9 @@ export default {
     this.pass.setSize = (width, height) => {
       uniforms.texSize.value.set(width, height);
     };
+
+    this.completePass(pass);
+    this.completePass(pass1);
   },
   methods: {
     updateFocusLine() {

src/effects/UnrealBloomPass.js

@@ -17,8 +17,7 @@ export default {
   mounted() {
     const size = new Vector2(this.three.size.width, this.three.size.height);
     const pass = new UnrealBloomPass(size, this.strength, this.radius, this.threshold);
-    this.passes.push(pass);
+    this.completePass(pass);
-    this.pass = pass;
   },
   __hmrId: 'UnrealBloomPass',
 };

src/effects/ZoomBlurPass.js

@@ -10,12 +10,13 @@ export default {
     strength: { type: Number, default: 0.5 },
   },
   mounted() {
-    this.pass = new ShaderPass(ZoomBlur);
+    const pass = new ShaderPass(ZoomBlur);
-    this.passes.push(this.pass);
 
-    const uniforms = this.uniforms = this.pass.uniforms;
+    const uniforms = this.uniforms = pass.uniforms;
     bindProp(this, 'center', uniforms.center, 'value');
     bindProp(this, 'strength', uniforms.strength, 'value');
+
+    this.completePass(pass);
   },
   __hmrId: 'ZoomBlurPass',
 };