wip

src/components/sliders/Slider2.vue

@@ -20,11 +20,11 @@ export default {
   },
   setup() {
     const center = new Vector2();
-    const { textures, loadTextures } = useTextures();
+    const loader = useTextures();
+
     return {
+      loader,
       center,
-      textures,
-      loadTextures,
       progress: 0,
       targetProgress: 0,
     };
@@ -35,10 +35,11 @@ export default {
     if (this.images.length < 2) {
       console.error('This slider needs at least 2 images.');
     } else {
-      this.loadTextures(this.images, this.init);
+      this.loader.loadTextures(this.images, this.init);
     }
   },
   unmounted() {
+    this.loader.dispose();
     document.removeEventListener('click', this.onClick);
     document.removeEventListener('keyup', this.onKeyup);
     window.removeEventListener('wheel', this.onWheel);
@@ -67,9 +68,9 @@ export default {
       const scene = this.$refs.scene.scene;
 
       this.image1 = new ZoomBlurImage(this.three);
-      this.image1.setMap(this.textures[0]);
+      this.image1.setMap(this.loader.textures[0]);
       this.image2 = new ZoomBlurImage(this.three);
-      this.image2.setMap(this.textures[1]);
+      this.image2.setMap(this.loader.textures[1]);
       this.setImagesProgress(0);
 
       scene.add(this.image1.mesh);
@@ -134,8 +135,8 @@ export default {
       if ((pdiff > 0 && p1 < p0) || (pdiff < 0 && p0 < p1)) {
         const i = Math.floor(progress1) % this.images.length;
         const j = (i + 1) % this.images.length;
-        this.image1.setMap(this.textures[i]);
-        this.image2.setMap(this.textures[j]);
+        this.image1.setMap(this.loader.textures[i]);
+        this.image2.setMap(this.loader.textures[j]);
       }
 
       this.progress = progress1;

src/effects/ZoomBlurPass.js

@@ -7,7 +7,7 @@ import useBindPropValue from '../use/useBindPropValue.js';
 export default {
   extends: EffectPass,
   props: {
-    center: { type: Object, default: { x: 0, y: 0 } },
+    center: { type: Object, default: { x: 0.5, y: 0.5 } },
     strength: { type: Number, default: 0.5 },
   },
   mounted() {
@@ -17,10 +17,6 @@ export default {
     const uniforms = this.uniforms = this.pass.uniforms;
     useBindProp(this, 'center', uniforms.center.value);
     useBindPropValue(this, 'strength', uniforms.strength);
-
-    this.pass.setSize = (width, height) => {
-      uniforms.texSize.value.set(width, height);
-    };
   },
   __hmrId: 'ZoomBlurPass',
 };

src/meshes/MirrorMesh.js

@@ -28,7 +28,6 @@ export default {
     initMirrorMesh() {
       const cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter });
       this.cubeCamera = new CubeCamera(this.cubeCameraNear, this.cubeCameraFar, cubeRT);
-      useBindProp(this, 'position', this.cubeCamera.position);
       this.scene.add(this.cubeCamera);
 
       this.material.envMap = cubeRT.texture;

src/shaders/ZoomBlur.js

@@ -5,16 +5,14 @@ import DefaultShader from './default';
 export default {
   uniforms: {
     tDiffuse: { value: null },
-    center: { value: new Vector2() },
+    center: { value: new Vector2(0.5, 0.5) },
     strength: { value: 0 },
-    texSize: { value: new Vector2() },
   },
   vertexShader: DefaultShader.vertexShader,
   fragmentShader: `
     uniform sampler2D tDiffuse;
     uniform vec2 center;
     uniform float strength;
-    uniform vec2 texSize;
     varying vec2 vUv;
 
     float random(vec3 scale, float seed) {
@@ -25,7 +23,7 @@ export default {
     void main() {
       vec4 color = vec4(0.0);
       float total = 0.0;
-      vec2 toCenter = center - vUv * texSize;
+      vec2 toCenter = center - vUv;
       
       /* randomize the lookup values to hide the fixed number of samples */
       float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
@@ -33,7 +31,7 @@ export default {
       for (float t = 0.0; t <= 40.0; t++) {
         float percent = (t + offset) / 40.0;
         float weight = 4.0 * (percent - percent * percent);
-        vec4 texel = texture2D(tDiffuse, vUv + toCenter * percent * strength / texSize);
+        vec4 texel = texture2D(tDiffuse, vUv + toCenter * percent * strength);
 
         /* switch to pre-multiplied alpha to correctly blur transparent images */
         texel.rgb *= texel.a;

src/use/useTextures.js

@@ -1,28 +1,37 @@
 import { TextureLoader } from 'three';
 
 export default function useTextures() {
-  const loader = new TextureLoader();
-  const textures = [];
+  const obj = {
+    loader: new TextureLoader(),
+    count: 0,
+    textures: [],
+    loadProgress: 0,
+    loadTextures,
+    dispose,
+  };
+  return obj;
 
-  const loadTexture = (img, index) => {
+  function loadTextures(images, cb) {
+    obj.count = images.length;
+    obj.textures.splice(0);
+    obj.loadProgress = 0;
+    Promise.all(images.map(loadTexture)).then(cb);
+  };
+
+  function loadTexture(img, index) {
     return new Promise(resolve => {
-      loader.load(
+      obj.loader.load(
         img.src,
         texture => {
-          textures[index] = texture;
+          obj.loadProgress += 1 / obj.count;
+          obj.textures[index] = texture;
           resolve(texture);
         }
       );
     });
   };
 
-  const loadTextures = (images, cb) => {
-    textures.splice(0);
-    Promise.all(images.map(loadTexture)).then(cb);
-  };
-
-  return {
-    textures,
-    loadTextures,
-  };
+  function dispose() {
+    obj.textures.forEach(t => t.dispose());
+  }
 };