add noisy components

src/components/index.js

@@ -1,4 +1,6 @@
-export { default as NoisyText } from './NoisyText.js';
+export { default as NoisyImage } from './noisy/NoisyImage.js';
+export { default as NoisyPlane } from './noisy/NoisyPlane.js';
+export { default as NoisyText } from './noisy/NoisyText.js';
 
 export { default as Slider1 } from './sliders/Slider1.vue';
 

src/components/noisy/NoisyImage.js

@@ -0,0 +1,85 @@
+import { DoubleSide, MeshBasicMaterial, PlaneBufferGeometry } from 'three';
+import { watch } from 'vue';
+import Image from '../../meshes/Image.js';
+import snoise2 from '../../glsl/snoise2.glsl.js';
+
+export default {
+  extends: Image,
+  props: {
+    widthSegments: { type: Number, default: 20 },
+    heightSegments: { type: Number, default: 20 },
+    timeCoef: { type: Number, default: 0.001 },
+    noiseCoef: { type: Number, default: 1 },
+    zCoef: { type: Number, default: 5 },
+    dispCoef: { type: Number, default: 0.05 },
+  },
+  setup(props) {
+    // uniforms
+    const uTime = { value: 0 };
+    const uNoiseCoef = { value: props.noiseCoef };
+    watch(() => props.noiseCoef, (value) => { uNoiseCoef.value = value; });
+    const uZCoef = { value: props.zCoef };
+    watch(() => props.zCoef, (value) => { uZCoef.value = value; });
+    const uDispCoef = { value: props.dispCoef };
+    watch(() => props.dispCoef, (value) => { uDispCoef.value = value; });
+
+    return {
+      uTime, uNoiseCoef, uZCoef, uDispCoef,
+    };
+  },
+  created() {
+    const startTime = Date.now();
+    this.three.onBeforeRender(() => {
+      this.uTime.value = (Date.now() - startTime) * this.timeCoef;
+    });
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new PlaneBufferGeometry(1, 1, this.widthSegments, this.heightSegments);
+    },
+    createMaterial() {
+      this.material = new MeshBasicMaterial({ side: DoubleSide, map: this.loadTexture() });
+      this.material.onBeforeCompile = (shader) => {
+        shader.uniforms.uTime = this.uTime;
+        shader.uniforms.uNoiseCoef = this.uNoiseCoef;
+        shader.uniforms.uZCoef = this.uZCoef;
+        shader.uniforms.uDispCoef = this.uDispCoef;
+        shader.vertexShader = `
+          uniform float uTime;
+          uniform float uNoiseCoef;
+          uniform float uZCoef;
+          varying float vNoise;
+          ${snoise2}
+        ` + shader.vertexShader;
+
+        shader.vertexShader = shader.vertexShader.replace(
+          '#include <begin_vertex>',
+          `         
+            vec3 p = vec3(position * uNoiseCoef);
+            p.x += uTime;
+            vNoise = snoise(p.xy);
+            vec3 transformed = vec3(position);
+            transformed.z += vNoise * uZCoef;
+          `
+        );
+
+        shader.fragmentShader = `
+          uniform float uDispCoef;
+          varying float vNoise;
+        ` + shader.fragmentShader;
+
+        shader.fragmentShader = shader.fragmentShader.replace(
+          '#include <map_fragment>',
+          `
+            vec4 texelColor = texture2D(map, vUv);
+            vec4 dispTexel = texture2D(map, vUv + vec2(vNoise * uDispCoef, 0));
+            texelColor.r = dispTexel.r;
+            diffuseColor = texelColor;
+          `
+        );
+        this.materialShader = shader;
+      };
+    },
+  },
+  __hmrId: 'NoisyImage',
+};

src/components/noisy/NoisyPlane.js

@@ -0,0 +1,62 @@
+import { MeshLambertMaterial } from 'three';
+import { watch } from 'vue';
+import Plane from '../../meshes/Plane.js';
+import snoise3 from '../../glsl/snoise3.glsl.js';
+
+export default {
+  extends: Plane,
+  props: {
+    timeCoef: { type: Number, default: 0.001 },
+    noiseCoef: { type: Number, default: 1 },
+    zCoef: { type: Number, default: 5 },
+  },
+  setup(props) {
+    // uniforms
+    const uTime = { value: 0 };
+    const uNoiseCoef = { value: props.noiseCoef };
+    watch(() => props.noiseCoef, (value) => { uNoiseCoef.value = value; });
+    const uZCoef = { value: props.zCoef };
+    watch(() => props.zCoef, (value) => { uZCoef.value = value; });
+
+    return {
+      uTime, uNoiseCoef, uZCoef,
+    };
+  },
+  created() {
+    this.createMaterial();
+    const startTime = Date.now();
+    this.three.onBeforeRender(() => {
+      this.uTime.value = (Date.now() - startTime) * this.timeCoef;
+    });
+  },
+  methods: {
+    createMaterial() {
+      this.material = new MeshLambertMaterial({});
+      this.material.onBeforeCompile = (shader) => {
+        shader.uniforms.uTime = this.uTime;
+        shader.uniforms.uNoiseCoef = this.uNoiseCoef;
+        shader.uniforms.uZCoef = this.uZCoef;
+        shader.vertexShader = `
+          uniform float uTime;
+          uniform float uNoiseCoef;
+          uniform float uZCoef;
+          varying float vNoise;
+          ${snoise3}
+        ` + shader.vertexShader;
+
+        shader.vertexShader = shader.vertexShader.replace(
+          '#include <begin_vertex>',
+          `         
+            vec3 p = vec3(position * uNoiseCoef);
+            vNoise = snoise(vec3(p.x, p.y, uTime));
+            vec3 transformed = vec3(position);
+            transformed.z += vNoise * uZCoef;
+          `
+        );
+
+        this.materialShader = shader;
+      };
+    },
+  },
+  __hmrId: 'NoisyPlane',
+};

src/components/noisy/NoisyText.js

@@ -1,8 +1,8 @@
-import { FontLoader, MeshStandardMaterial, TextBufferGeometry } from 'three';
+import { FontLoader, MeshPhongMaterial, MeshStandardMaterial, TextBufferGeometry } from 'three';
 import { watch } from 'vue';
-import Mesh from '../meshes/Mesh.js';
-import TextProps from '../meshes/TextProps.js';
-import snoise2 from '../glsl/snoise2.glsl.js';
+import Mesh from '../../meshes/Mesh.js';
+import TextProps from '../../meshes/TextProps.js';
+import snoise2 from '../../glsl/snoise2.glsl.js';
 
 export default {
   extends: Mesh,
@@ -28,12 +28,10 @@ export default {
 
     // uniforms
     this.uTime = { value: 0 };
-
     this.uNoiseCoef = { value: this.noiseCoef };
-    watch(() => this.noiseCoef, () => { this.uNoiseCoef.value = this.noiseCoef; });
-
+    watch(() => this.noiseCoef, (value) => { this.uNoiseCoef.value = value; });
     this.uZCoef = { value: this.zCoef };
-    watch(() => this.zCoef, () => { this.uZCoef.value = this.zCoef; });
+    watch(() => this.zCoef, (value) => { this.uZCoef.value = value; });
 
     const loader = new FontLoader();
     loader.load(this.fontSrc, (font) => {
@@ -50,7 +48,7 @@ export default {
   },
   methods: {
     createMaterial() {
-      this.material = new MeshStandardMaterial({ color: this.color, metalness: 0.8, roughness: 0.5 });
+      this.material = new MeshPhongMaterial({ color: this.color });
       this.material.onBeforeCompile = (shader) => {
         shader.uniforms.uTime = this.uTime;
         shader.uniforms.uNoiseCoef = this.uNoiseCoef;
@@ -94,4 +92,5 @@ export default {
       }
     },
   },
+  __hmrId: 'NoisyText',
 };

src/glsl/snoise3.glsl.js

@@ -0,0 +1,86 @@
+export default `
+//
+// Description : Array and textureless GLSL 2D/3D/4D simplex
+//               noise functions.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : ijm
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//
+
+vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
+vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+
+float snoise(vec3 v)
+{
+  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  // First corner
+  vec3 i  = floor(v + dot(v, C.yyy) );
+  vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+  // Other corners
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min( g.xyz, l.zxy );
+  vec3 i2 = max( g.xyz, l.zxy );
+
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+  // Permutations
+  i = mod289(i);
+  vec4 p = permute( permute( permute(
+             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+           + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+  // Gradients: 7x7 points over a square, mapped onto an octahedron.
+  // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+  float n_ = 0.142857142857; // 1.0/7.0
+  vec3  ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+  vec4 x = x_ *ns.x + ns.yyyy;
+  vec4 y = y_ *ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4( x.xy, y.xy );
+  vec4 b1 = vec4( x.zw, y.zw );
+
+  vec4 s0 = floor(b0)*2.0 + 1.0;
+  vec4 s1 = floor(b1)*2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+  vec3 p0 = vec3(a0.xy,h.x);
+  vec3 p1 = vec3(a0.zw,h.y);
+  vec3 p2 = vec3(a1.xy,h.z);
+  vec3 p3 = vec3(a1.zw,h.w);
+
+  // Normalise gradients
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+  // Mix final noise value
+  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
+                                dot(p2,x2), dot(p3,x3) ) );
+}
+`;

src/glsl/snoise4.glsl.js

@@ -0,0 +1,108 @@
+export default `
+//
+// Description : Array and textureless GLSL 2D/3D/4D simplex
+//               noise functions.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : ijm
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//
+
+vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+float mod289(float x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
+float permute(float x) { return mod289(((x*34.0)+1.0)*x); }
+vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+float taylorInvSqrt(float r) { return 1.79284291400159 - 0.85373472095314 * r; }
+
+vec4 grad4(float j, vec4 ip)
+{
+  const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
+  vec4 p,s;
+
+  p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
+  p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
+  s = vec4(lessThan(p, vec4(0.0)));
+  p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;
+
+  return p;
+}
+
+// (sqrt(5) - 1)/4 = F4, used once below
+#define F4 0.309016994374947451
+
+float snoise(vec4 v)
+{
+  const vec4  C = vec4( 0.138196601125011,  // (5 - sqrt(5))/20  G4
+                        0.276393202250021,  // 2 * G4
+                        0.414589803375032,  // 3 * G4
+                        -0.447213595499958); // -1 + 4 * G4
+
+  // First corner
+  vec4 i  = floor(v + dot(v, vec4(F4)) );
+  vec4 x0 = v -   i + dot(i, C.xxxx);
+
+  // Other corners
+
+  // Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)
+  vec4 i0;
+  vec3 isX = step( x0.yzw, x0.xxx );
+  vec3 isYZ = step( x0.zww, x0.yyz );
+  //  i0.x = dot( isX, vec3( 1.0 ) );
+  i0.x = isX.x + isX.y + isX.z;
+  i0.yzw = 1.0 - isX;
+  //  i0.y += dot( isYZ.xy, vec2( 1.0 ) );
+  i0.y += isYZ.x + isYZ.y;
+  i0.zw += 1.0 - isYZ.xy;
+  i0.z += isYZ.z;
+  i0.w += 1.0 - isYZ.z;
+
+  // i0 now contains the unique values 0,1,2,3 in each channel
+  vec4 i3 = clamp( i0, 0.0, 1.0 );
+  vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );
+  vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );
+
+  vec4 x1 = x0 - i1 + C.xxxx;
+  vec4 x2 = x0 - i2 + C.yyyy;
+  vec4 x3 = x0 - i3 + C.zzzz;
+  vec4 x4 = x0 + C.wwww;
+
+  // Permutations
+  i = mod289(i);
+  float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);
+  vec4 j1 = permute( permute( permute( permute (
+             i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))
+           + i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))
+           + i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))
+           + i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));
+
+  // Gradients: 7x7x6 points over a cube, mapped onto a 4-cross polytope
+  // 7*7*6 = 294, which is close to the ring size 17*17 = 289.
+  vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;
+
+  vec4 p0 = grad4(j0,   ip);
+  vec4 p1 = grad4(j1.x, ip);
+  vec4 p2 = grad4(j1.y, ip);
+  vec4 p3 = grad4(j1.z, ip);
+  vec4 p4 = grad4(j1.w, ip);
+
+  // Normalise gradients
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+  p4 *= taylorInvSqrt(dot(p4,p4));
+
+  // Mix contributions from the five corners
+  vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);
+  vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4)            ), 0.0);
+  m0 = m0 * m0;
+  m1 = m1 * m1;
+  return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))
+               + dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;
+
+}
+`;

src/meshes/Image.js

@@ -1,26 +1,69 @@
 import { DoubleSide, MeshBasicMaterial, PlaneBufferGeometry, TextureLoader } from 'three';
+import { watch } from 'vue';
 import Mesh from './Mesh.js';
 
 export default {
+  emits: ['loaded'],
   extends: Mesh,
   props: {
     src: String,
-    width: {
-      type: Number,
-      default: 1,
-    },
-    height: {
-      type: Number,
-      default: 1,
-    },
+    width: Number,
+    height: Number,
+    keepSize: Boolean,
   },
   created() {
-    this.geometry = new PlaneBufferGeometry(this.width, this.height, 1, 1);
-    this.material = new MeshBasicMaterial({ map: new TextureLoader().load(this.src), side: DoubleSide });
+    this.createGeometry();
+    this.createMaterial();
+    this.initMesh();
+
+    watch(() => this.src, this.refreshTexture);
+
+    ['width', 'height'].forEach(p => {
+      watch(() => this[p], this.resize);
+    });
+
+    if (this.keepSize) this.three.onAfterResize(this.resize);
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new PlaneBufferGeometry(1, 1, 1, 1);
+    },
+    createMaterial() {
+      this.material = new MeshBasicMaterial({ side: DoubleSide, map: this.loadTexture() });
+    },
+    loadTexture() {
+      return new TextureLoader().load(this.src, this.onLoaded);
+    },
+    refreshTexture() {
+      if (this.texture) this.texture.dispose();
+      this.material.map = this.loadTexture();
+      this.material.needsUpdate = true;
+    },
+    onLoaded(texture) {
+      this.texture = texture;
+      this.resize();
+      this.$emit('loaded');
+    },
+    resize() {
+      if (!this.texture) return;
+      const screen = this.three.size;
+      const iW = this.texture.image.width;
+      const iH = this.texture.image.height;
+      const iRatio = iW / iH;
+      let w, h;
+      if (this.width && this.height) {
+        w = this.width * screen.wWidth / screen.width;
+        h = this.height * screen.wHeight / screen.height;
+      } else if (this.width) {
+        w = this.width * screen.wWidth / screen.width;
+        h = w / iRatio;
+      } else if (this.height) {
+        h = this.height * screen.wHeight / screen.height;
+        w = h * iRatio;
+      }
+      this.mesh.scale.x = w;
+      this.mesh.scale.y = h;
     },
-  unmounted() {
-    // this material is not mounted, it won't be auto dispose
-    this.material.dispose();
   },
   __hmrId: 'Image',
 };