ngx-acuw
Version:
Angular components using WEBGL (threejs)
182 lines (147 loc) • 13.5 kB
JavaScript
export class Shaders {
constructor() {
this.particleVertex = `
// @author brunoimbrizi / http://brunoimbrizi.com
precision highp float;
attribute float pindex;
attribute vec3 position;
attribute vec3 offset;
attribute vec2 uv;
attribute float angle;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform float uTime;
uniform float uRandom;
uniform float uDepth;
uniform float uSize;
uniform vec2 uTextureSize;
uniform sampler2D uTexture;
uniform sampler2D uTouch;
varying vec2 vPUv;
varying vec2 vUv;
//
// Description : Array and textureless GLSL 2D simplex noise function.
// 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_1_0(vec3 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec2 mod289_1_0(vec2 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec3 permute_1_1(vec3 x) {
return mod289_1_0(((x*34.0)+1.0)*x);
}
float snoise_1_2(vec2 v)
{
const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0
0.366025403784439, // 0.5*(sqrt(3.0)-1.0)
-0.577350269189626, // -1.0 + 2.0 * C.x
0.024390243902439); // 1.0 / 41.0
// First corner
vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);
// Other corners
vec2 i1;
//i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
//i1.y = 1.0 - i1.x;
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
// x0 = x0 - 0.0 + 0.0 * C.xx ;
// x1 = x0 - i1 + 1.0 * C.xx ;
// x2 = x0 - 1.0 + 2.0 * C.xx ;
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
// Permutations
i = mod289_1_0(i); // Avoid truncation effects in permutation
vec3 p = permute_1_1( permute_1_1( i.y + vec3(0.0, i1.y, 1.0 ))
+ i.x + vec3(0.0, i1.x, 1.0 ));
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
m = m*m ;
m = m*m ;
// Gradients: 41 points uniformly over a line, mapped onto a diamond.
// The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
// Normalise gradients implicitly by scaling m
// Approximation of: m *= inversesqrt( a0*a0 + h*h );
m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
// Compute final noise value at P
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
float random(float n) {
return fract(sin(n) * 43758.5453123);
}
void main() {
vUv = uv;
// particle uv
vec2 puv = offset.xy / uTextureSize;
vPUv = puv;
// pixel color
vec4 colA = texture2D(uTexture, puv);
float grey = colA.r * 0.21 + colA.g * 0.71 + colA.b * 0.07;
// displacement
vec3 displaced = offset;
// randomise
displaced.xy += vec2(random(pindex) - 0.5, random(offset.x + pindex) - 0.5) * uRandom;
float rndz = (random(pindex) + snoise_1_2(vec2(pindex * 0.1, uTime * 0.1)));
displaced.z += rndz * (random(pindex) * 2.0 * uDepth);
// center
displaced.xy -= uTextureSize * 0.5;
// touch
float t = texture2D(uTouch, puv).r;
displaced.z += t * 20.0 * rndz;
displaced.x += cos(angle) * t * 20.0 * rndz;
displaced.y += sin(angle) * t * 20.0 * rndz;
// particle size
float psize = (snoise_1_2(vec2(uTime, pindex) * 0.5) + 2.0);
psize *= max(grey, 0.2);
psize *= uSize;
// final position
vec4 mvPosition = modelViewMatrix * vec4(displaced, 1.0);
mvPosition.xyz += position * psize;
vec4 finalPosition = projectionMatrix * mvPosition;
gl_Position = finalPosition;
}
`;
this.particleFragment = `
// @author brunoimbrizi / http://brunoimbrizi.com
precision highp float;
uniform sampler2D uTexture;
varying vec2 vPUv;
varying vec2 vUv;
void main() {
vec4 color = vec4(0.0);
vec2 uv = vUv;
vec2 puv = vPUv;
// pixel color
vec4 colA = texture2D(uTexture, puv);
// greyscale
float grey = colA.r * 0.21 + colA.g * 0.71 + colA.b * 0.07;
//vec4 colB = vec4(grey, grey, grey, 1.0);
vec4 colB = vec4(colA.r, colA.g, colA.b, 1.0);
// circle
float border = 0.3;
float radius = 0.5;
float dist = radius - distance(uv, vec2(0.5));
float t = smoothstep(0.0, border, dist);
// final color
color = colB;
color.a = t;
gl_FragColor = color;
}
`;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhZGVycy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1hY3V3L3NyYy9saWIvaW1hZ2UtYXMtcGFydGljbGVzL3NjcmlwdHMvc2hhZGVycy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sT0FBTztJQUFwQjtRQUNJLG1CQUFjLEdBQUc7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0EySWhCLENBQUM7UUFFRixxQkFBZ0IsR0FBRzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBb0NsQixDQUFDO0lBQ04sQ0FBQztDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNsYXNzIFNoYWRlcnMge1xyXG4gICAgcGFydGljbGVWZXJ0ZXggPSBgXHJcbiAgICAvLyBAYXV0aG9yIGJydW5vaW1icml6aSAvIGh0dHA6Ly9icnVub2ltYnJpemkuY29tXHJcblxyXG4gICAgcHJlY2lzaW9uIGhpZ2hwIGZsb2F0O1xyXG4gICAgI2RlZmluZSBHTFNMSUZZIDFcclxuXHJcbiAgICBhdHRyaWJ1dGUgZmxvYXQgcGluZGV4O1xyXG4gICAgYXR0cmlidXRlIHZlYzMgcG9zaXRpb247XHJcbiAgICBhdHRyaWJ1dGUgdmVjMyBvZmZzZXQ7XHJcbiAgICBhdHRyaWJ1dGUgdmVjMiB1djtcclxuICAgIGF0dHJpYnV0ZSBmbG9hdCBhbmdsZTtcclxuXHJcbiAgICB1bmlmb3JtIG1hdDQgbW9kZWxWaWV3TWF0cml4O1xyXG4gICAgdW5pZm9ybSBtYXQ0IHByb2plY3Rpb25NYXRyaXg7XHJcblxyXG4gICAgdW5pZm9ybSBmbG9hdCB1VGltZTtcclxuICAgIHVuaWZvcm0gZmxvYXQgdVJhbmRvbTtcclxuICAgIHVuaWZvcm0gZmxvYXQgdURlcHRoO1xyXG4gICAgdW5pZm9ybSBmbG9hdCB1U2l6ZTtcclxuICAgIHVuaWZvcm0gdmVjMiB1VGV4dHVyZVNpemU7XHJcbiAgICB1bmlmb3JtIHNhbXBsZXIyRCB1VGV4dHVyZTtcclxuICAgIHVuaWZvcm0gc2FtcGxlcjJEIHVUb3VjaDtcclxuXHJcbiAgICB2YXJ5aW5nIHZlYzIgdlBVdjtcclxuICAgIHZhcnlpbmcgdmVjMiB2VXY7XHJcblxyXG4gICAgLy9cclxuICAgIC8vIERlc2NyaXB0aW9uIDogQXJyYXkgYW5kIHRleHR1cmVsZXNzIEdMU0wgMkQgc2ltcGxleCBub2lzZSBmdW5jdGlvbi5cclxuICAgIC8vICAgICAgQXV0aG9yIDogSWFuIE1jRXdhbiwgQXNoaW1hIEFydHMuXHJcbiAgICAvLyAgTWFpbnRhaW5lciA6IGlqbVxyXG4gICAgLy8gICAgIExhc3Rtb2QgOiAyMDExMDgyMiAoaWptKVxyXG4gICAgLy8gICAgIExpY2Vuc2UgOiBDb3B5cmlnaHQgKEMpIDIwMTEgQXNoaW1hIEFydHMuIEFsbCByaWdodHMgcmVzZXJ2ZWQuXHJcbiAgICAvLyAgICAgICAgICAgICAgIERpc3RyaWJ1dGVkIHVuZGVyIHRoZSBNSVQgTGljZW5zZS4gU2VlIExJQ0VOU0UgZmlsZS5cclxuICAgIC8vICAgICAgICAgICAgICAgaHR0cHM6Ly9naXRodWIuY29tL2FzaGltYS93ZWJnbC1ub2lzZVxyXG4gICAgLy9cclxuXHJcbiAgICB2ZWMzIG1vZDI4OV8xXzAodmVjMyB4KSB7XHJcbiAgICAgIHJldHVybiB4IC0gZmxvb3IoeCAqICgxLjAgLyAyODkuMCkpICogMjg5LjA7XHJcbiAgICB9XHJcblxyXG4gICAgdmVjMiBtb2QyODlfMV8wKHZlYzIgeCkge1xyXG4gICAgICByZXR1cm4geCAtIGZsb29yKHggKiAoMS4wIC8gMjg5LjApKSAqIDI4OS4wO1xyXG4gICAgfVxyXG5cclxuICAgIHZlYzMgcGVybXV0ZV8xXzEodmVjMyB4KSB7XHJcbiAgICAgIHJldHVybiBtb2QyODlfMV8wKCgoeCozNC4wKSsxLjApKngpO1xyXG4gICAgfVxyXG5cclxuICAgIGZsb2F0IHNub2lzZV8xXzIodmVjMiB2KVxyXG4gICAgICB7XHJcbiAgICAgIGNvbnN0IHZlYzQgQyA9IHZlYzQoMC4yMTEzMjQ4NjU0MDUxODcsICAvLyAoMy4wLXNxcnQoMy4wKSkvNi4wXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgMC4zNjYwMjU0MDM3ODQ0MzksICAvLyAwLjUqKHNxcnQoMy4wKS0xLjApXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAtMC41NzczNTAyNjkxODk2MjYsICAvLyAtMS4wICsgMi4wICogQy54XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgMC4wMjQzOTAyNDM5MDI0MzkpOyAvLyAxLjAgLyA0MS4wXHJcbiAgICAvLyBGaXJzdCBjb3JuZXJcclxuICAgICAgdmVjMiBpICA9IGZsb29yKHYgKyBkb3QodiwgQy55eSkgKTtcclxuICAgICAgdmVjMiB4MCA9IHYgLSAgIGkgKyBkb3QoaSwgQy54eCk7XHJcblxyXG4gICAgLy8gT3RoZXIgY29ybmVyc1xyXG4gICAgICB2ZWMyIGkxO1xyXG4gICAgICAvL2kxLnggPSBzdGVwKCB4MC55LCB4MC54ICk7IC8vIHgwLnggPiB4MC55ID8gMS4wIDogMC4wXHJcbiAgICAgIC8vaTEueSA9IDEuMCAtIGkxLng7XHJcbiAgICAgIGkxID0gKHgwLnggPiB4MC55KSA/IHZlYzIoMS4wLCAwLjApIDogdmVjMigwLjAsIDEuMCk7XHJcbiAgICAgIC8vIHgwID0geDAgLSAwLjAgKyAwLjAgKiBDLnh4IDtcclxuICAgICAgLy8geDEgPSB4MCAtIGkxICsgMS4wICogQy54eCA7XHJcbiAgICAgIC8vIHgyID0geDAgLSAxLjAgKyAyLjAgKiBDLnh4IDtcclxuICAgICAgdmVjNCB4MTIgPSB4MC54eXh5ICsgQy54eHp6O1xyXG4gICAgICB4MTIueHkgLT0gaTE7XHJcblxyXG4gICAgIC8vIFBlcm11dGF0aW9uc1xyXG4gICAgICBpID0gbW9kMjg5XzFfMChpKTsgLy8gQXZvaWQgdHJ1bmNhdGlvbiBlZmZlY3RzIGluIHBlcm11dGF0aW9uXHJcbiAgICAgIHZlYzMgcCA9IHBlcm11dGVfMV8xKCBwZXJtdXRlXzFfMSggaS55ICsgdmVjMygwLjAsIGkxLnksIDEuMCApKVxyXG4gICAgICAgICsgaS54ICsgdmVjMygwLjAsIGkxLngsIDEuMCApKTtcclxuXHJcbiAgICAgIHZlYzMgbSA9IG1heCgwLjUgLSB2ZWMzKGRvdCh4MCx4MCksIGRvdCh4MTIueHkseDEyLnh5KSwgZG90KHgxMi56dyx4MTIuencpKSwgMC4wKTtcclxuICAgICAgbSA9IG0qbSA7XHJcbiAgICAgIG0gPSBtKm0gO1xyXG5cclxuICAgIC8vIEdyYWRpZW50czogNDEgcG9pbnRzIHVuaWZvcm1seSBvdmVyIGEgbGluZSwgbWFwcGVkIG9udG8gYSBkaWFtb25kLlxyXG4gICAgLy8gVGhlIHJpbmcgc2l6ZSAxNyoxNyA9IDI4OSBpcyBjbG9zZSB0byBhIG11bHRpcGxlIG9mIDQxICg0MSo3ID0gMjg3KVxyXG5cclxuICAgICAgdmVjMyB4ID0gMi4wICogZnJhY3QocCAqIEMud3d3KSAtIDEuMDtcclxuICAgICAgdmVjMyBoID0gYWJzKHgpIC0gMC41O1xyXG4gICAgICB2ZWMzIG94ID0gZmxvb3IoeCArIDAuNSk7XHJcbiAgICAgIHZlYzMgYTAgPSB4IC0gb3g7XHJcblxyXG4gICAgLy8gTm9ybWFsaXNlIGdyYWRpZW50cyBpbXBsaWNpdGx5IGJ5IHNjYWxpbmcgbVxyXG4gICAgLy8gQXBwcm94aW1hdGlvbiBvZjogbSAqPSBpbnZlcnNlc3FydCggYTAqYTAgKyBoKmggKTtcclxuICAgICAgbSAqPSAxLjc5Mjg0MjkxNDAwMTU5IC0gMC44NTM3MzQ3MjA5NTMxNCAqICggYTAqYTAgKyBoKmggKTtcclxuXHJcbiAgICAvLyBDb21wdXRlIGZpbmFsIG5vaXNlIHZhbHVlIGF0IFBcclxuICAgICAgdmVjMyBnO1xyXG4gICAgICBnLnggID0gYTAueCAgKiB4MC54ICArIGgueCAgKiB4MC55O1xyXG4gICAgICBnLnl6ID0gYTAueXogKiB4MTIueHogKyBoLnl6ICogeDEyLnl3O1xyXG4gICAgICByZXR1cm4gMTMwLjAgKiBkb3QobSwgZyk7XHJcbiAgICB9XHJcblxyXG4gICAgZmxvYXQgcmFuZG9tKGZsb2F0IG4pIHtcclxuICAgICAgcmV0dXJuIGZyYWN0KHNpbihuKSAqIDQzNzU4LjU0NTMxMjMpO1xyXG4gICAgfVxyXG5cclxuICAgIHZvaWQgbWFpbigpIHtcclxuICAgICAgdlV2ID0gdXY7XHJcblxyXG4gICAgICAvLyBwYXJ0aWNsZSB1dlxyXG4gICAgICB2ZWMyIHB1diA9IG9mZnNldC54eSAvIHVUZXh0dXJlU2l6ZTtcclxuICAgICAgdlBVdiA9IHB1djtcclxuXHJcbiAgICAgIC8vIHBpeGVsIGNvbG9yXHJcbiAgICAgIHZlYzQgY29sQSA9IHRleHR1cmUyRCh1VGV4dHVyZSwgcHV2KTtcclxuICAgICAgZmxvYXQgZ3JleSA9IGNvbEEuciAqIDAuMjEgKyBjb2xBLmcgKiAwLjcxICsgY29sQS5iICogMC4wNztcclxuXHJcbiAgICAgIC8vIGRpc3BsYWNlbWVudFxyXG4gICAgICB2ZWMzIGRpc3BsYWNlZCA9IG9mZnNldDtcclxuICAgICAgLy8gcmFuZG9taXNlXHJcbiAgICAgIGRpc3BsYWNlZC54eSArPSB2ZWMyKHJhbmRvbShwaW5kZXgpIC0gMC41LCByYW5kb20ob2Zmc2V0LnggKyBwaW5kZXgpIC0gMC41KSAqIHVSYW5kb207XHJcbiAgICAgIGZsb2F0IHJuZHogPSAocmFuZG9tKHBpbmRleCkgKyBzbm9pc2VfMV8yKHZlYzIocGluZGV4ICogMC4xLCB1VGltZSAqIDAuMSkpKTtcclxuICAgICAgZGlzcGxhY2VkLnogKz0gcm5keiAqIChyYW5kb20ocGluZGV4KSAqIDIuMCAqIHVEZXB0aCk7XHJcbiAgICAgIC8vIGNlbnRlclxyXG4gICAgICBkaXNwbGFjZWQueHkgLT0gdVRleHR1cmVTaXplICogMC41O1xyXG5cclxuICAgICAgLy8gdG91Y2hcclxuICAgICAgZmxvYXQgdCA9IHRleHR1cmUyRCh1VG91Y2gsIHB1dikucjtcclxuICAgICAgZGlzcGxhY2VkLnogKz0gdCAqIDIwLjAgKiBybmR6O1xyXG4gICAgICBkaXNwbGFjZWQueCArPSBjb3MoYW5nbGUpICogdCAqIDIwLjAgKiBybmR6O1xyXG4gICAgICBkaXNwbGFjZWQueSArPSBzaW4oYW5nbGUpICogdCAqIDIwLjAgKiBybmR6O1xyXG5cclxuICAgICAgLy8gcGFydGljbGUgc2l6ZVxyXG4gICAgICBmbG9hdCBwc2l6ZSA9IChzbm9pc2VfMV8yKHZlYzIodVRpbWUsIHBpbmRleCkgKiAwLjUpICsgMi4wKTtcclxuICAgICAgcHNpemUgKj0gbWF4KGdyZXksIDAuMik7XHJcbiAgICAgIHBzaXplICo9IHVTaXplO1xyXG5cclxuICAgICAgLy8gZmluYWwgcG9zaXRpb25cclxuICAgICAgdmVjNCBtdlBvc2l0aW9uID0gbW9kZWxWaWV3TWF0cml4ICogdmVjNChkaXNwbGFjZWQsIDEuMCk7XHJcbiAgICAgIG12UG9zaXRpb24ueHl6ICs9IHBvc2l0aW9uICogcHNpemU7XHJcbiAgICAgIHZlYzQgZmluYWxQb3NpdGlvbiA9IHByb2plY3Rpb25NYXRyaXggKiBtdlBvc2l0aW9uO1xyXG5cclxuICAgICAgZ2xfUG9zaXRpb24gPSBmaW5hbFBvc2l0aW9uO1xyXG4gICAgfVxyXG4gICAgYDtcclxuXHJcbiAgICBwYXJ0aWNsZUZyYWdtZW50ID0gYFxyXG4gICAgLy8gQGF1dGhvciBicnVub2ltYnJpemkgLyBodHRwOi8vYnJ1bm9pbWJyaXppLmNvbVxyXG5cclxuICAgIHByZWNpc2lvbiBoaWdocCBmbG9hdDtcclxuICAgICNkZWZpbmUgR0xTTElGWSAxXHJcblxyXG4gICAgdW5pZm9ybSBzYW1wbGVyMkQgdVRleHR1cmU7XHJcblxyXG4gICAgdmFyeWluZyB2ZWMyIHZQVXY7XHJcbiAgICB2YXJ5aW5nIHZlYzIgdlV2O1xyXG5cclxuICAgIHZvaWQgbWFpbigpIHtcclxuICAgICAgdmVjNCBjb2xvciA9IHZlYzQoMC4wKTtcclxuICAgICAgdmVjMiB1diA9IHZVdjtcclxuICAgICAgdmVjMiBwdXYgPSB2UFV2O1xyXG5cclxuICAgICAgLy8gcGl4ZWwgY29sb3JcclxuICAgICAgdmVjNCBjb2xBID0gdGV4dHVyZTJEKHVUZXh0dXJlLCBwdXYpO1xyXG5cclxuICAgICAgLy8gZ3JleXNjYWxlXHJcbiAgICAgIGZsb2F0IGdyZXkgPSBjb2xBLnIgKiAwLjIxICsgY29sQS5nICogMC43MSArIGNvbEEuYiAqIDAuMDc7XHJcbiAgICAgIC8vdmVjNCBjb2xCID0gdmVjNChncmV5LCBncmV5LCBncmV5LCAxLjApO1xyXG4gICAgICB2ZWM0IGNvbEIgPSB2ZWM0KGNvbEEuciwgY29sQS5nLCBjb2xBLmIsIDEuMCk7XHJcblxyXG4gICAgICAvLyBjaXJjbGVcclxuICAgICAgZmxvYXQgYm9yZGVyID0gMC4zO1xyXG4gICAgICBmbG9hdCByYWRpdXMgPSAwLjU7XHJcbiAgICAgIGZsb2F0IGRpc3QgPSByYWRpdXMgLSBkaXN0YW5jZSh1diwgdmVjMigwLjUpKTtcclxuICAgICAgZmxvYXQgdCA9IHNtb290aHN0ZXAoMC4wLCBib3JkZXIsIGRpc3QpO1xyXG5cclxuICAgICAgLy8gZmluYWwgY29sb3JcclxuICAgICAgY29sb3IgPSBjb2xCO1xyXG4gICAgICBjb2xvci5hID0gdDtcclxuXHJcbiAgICAgIGdsX0ZyYWdDb2xvciA9IGNvbG9yO1xyXG4gICAgfVxyXG4gICAgYDtcclxufVxyXG4iXX0=