From 3209be1b5a0526c4a0396fa23527926753ea590b Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Thu, 8 Oct 2020 20:31:03 +0200 Subject: [PATCH] wip --- src/components/sliders/Slider2.vue | 17 +++++++------- src/effects/ZoomBlurPass.js | 6 +---- src/meshes/MirrorMesh.js | 1 - src/shaders/ZoomBlur.js | 8 +++---- src/use/useTextures.js | 37 +++++++++++++++++++----------- 5 files changed, 36 insertions(+), 33 deletions(-) diff --git a/src/components/sliders/Slider2.vue b/src/components/sliders/Slider2.vue index de1389c..944ab79 100644 --- a/src/components/sliders/Slider2.vue +++ b/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; diff --git a/src/effects/ZoomBlurPass.js b/src/effects/ZoomBlurPass.js index 4330a0e..2fa7f2a 100644 --- a/src/effects/ZoomBlurPass.js +++ b/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', }; diff --git a/src/meshes/MirrorMesh.js b/src/meshes/MirrorMesh.js index 4601228..3e0d930 100644 --- a/src/meshes/MirrorMesh.js +++ b/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; diff --git a/src/shaders/ZoomBlur.js b/src/shaders/ZoomBlur.js index f96f87b..fcdf8d1 100644 --- a/src/shaders/ZoomBlur.js +++ b/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; diff --git a/src/use/useTextures.js b/src/use/useTextures.js index 26d0ad5..d9924d8 100644 --- a/src/use/useTextures.js +++ b/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()); + } };