android扩散波动动画,使用WebGL制作图片的像素脉冲波（粒子化扩散波动）动画特效...

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

/**

* Modules in this bundle

* @license

*

* particle-picture:

*

* This header is generated by licensify (https://github.com/twada/licensify)

*/

(function e(t, n, r) {

function s(o, u) {

if (!n[o]) {

if (!t[o]) {

var a = typeof require == "function" && require;

if (!u && a) return a(o, !0);

if (i) return i(o, !0);

var f = new Error("Cannot find module '" + o + "'");

throw f.code = "MODULE_NOT_FOUND", f

}

var l = n[o] = {

exports: {}

};

t[o][0].call(l.exports, function(e) {

var n = t[o][1][e];

return s(n ? n : e)

}, l, l.exports, e, t, n, r)

}

return n[o].exports

}

var i = typeof require == "function" && require;

for (var o = 0; o < r.length; o++) s(r[o]);

return s

})({

1: [function(require, module, exports) {

'use strict';

var _ParticlePicture = require('./modules/ParticlePicture.js');

var _ParticlePicture2 = _interopRequireDefault(_ParticlePicture);

function _interopRequireDefault(obj) {

return obj && obj.__esModule ? obj : {

default: obj

};

}

var canvas = document.getElementById('canvas-webgl');

var renderer = new THREE.WebGLRenderer({

antialias: false,

canvas: canvas

});

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);

var clock = new THREE.Clock();

var images = [

'https://ykob.github.io/particle-picture/img/image01.jpg',

'https://ykob.github.io/particle-picture/img/image02.jpg',

'https://ykob.github.io/particle-picture/img/image03.jpg',

'https://ykob.github.io/particle-picture/img/image04.jpg'

];

var particlePicture = new _ParticlePicture2.default();

var resizeWindow = function resizeWindow() {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

};

var setEvent = function setEvent() {

$(window).on('resize', function() {

resizeWindow();

}).on('mousemove', function(event) {

particlePicture.uniforms.rotate.value.set(event.clientX, event.clientY);

});

};

var render = function render() {

particlePicture.render(clock.getDelta());

renderer.render(scene, camera);

};

var renderLoop = function renderLoop() {

render();

requestAnimationFrame(renderLoop);

};

var init = function init() {

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.setClearColor(0xeeeeee, 1.0);

renderer.render(scene, camera);

camera.position.set(0, 0, 1024);

camera.lookAt(new THREE.Vector3());

particlePicture.loadTexture(images, function() {

setTimeout(function() {

$('.p-preloader').addClass('is-hidden').on('transitionend', function() {

$(this).addClass('is-stoped');

});

scene.add(particlePicture.obj);

setEvent();

resizeWindow();

renderLoop();

}, 200);

});

};

init();

}, {

"./modules/ParticlePicture.js": 2

}],

2: [function(require, module, exports) {

'use strict';

Object.defineProperty(exports, "__esModule", {

value: true

});

var _createClass = function() {

function defineProperties(target, props) {

for (var i = 0; i < props.length; i++) {

var descriptor = props[i];

descriptor.enumerable = descriptor.enumerable || false;

descriptor.configurable = true;

if ("value" in descriptor) descriptor.writable = true;

Object.defineProperty(target, descriptor.key, descriptor);

}

}

return function(Constructor, protoProps, staticProps) {

if (protoProps) defineProperties(Constructor.prototype, protoProps);

if (staticProps) defineProperties(Constructor, staticProps);

return Constructor;

};

}();

function _classCallCheck(instance, Constructor) {

if (!(instance instanceof Constructor)) {

throw new TypeError("Cannot call a class as a function");

}

}

var ParticlePicture = function() {

function ParticlePicture() {

_classCallCheck(this, ParticlePicture);

this.textures = [];

this.uniforms = {};

this.interval = 2;

this.prevNum = 0;

this.nextNum = 1;

this.obj = null;

}

_createClass(ParticlePicture, [{

key: 'loadTexture',

value: function loadTexture(images, callback) {

var _this = this;

var count = 0;

var _loop = function _loop() {

var index = i;

var loader = new THREE.TextureLoader();

loader.load(images[index], function(texture) {

_this.textures[index] = texture;

count++;

if (count == images.length) {

var texBrank = new THREE.DataTexture(new Uint8Array([255, 255, 255, 0]), 1, 1, THREE.RGBAFormat, THREE.UnsignedByteType);

texBrank.needsUpdate = true;

_this.obj = _this.createPoints(_this.textures[_this.prevNum], _this.textures[_this.nextNum]);

callback();

}

});

};

for (var i = 0; i < images.length; i++) {

_loop();

}

}

}, {

key: 'createPoints',

value: function createPoints(texPrev, texNext) {

var geometry = new THREE.BufferGeometry();

var baseVertices1 = [];

var baseVertices2 = [];

var baseUvs = [];

for (var x = 0; x < 512; x++) {

for (var y = 0; y < 512; y++) {

baseVertices1.push(x - 256, (y - 256) * -1, 0);

var rad1 = (Math.random() * 90 + Math.random() * 90) * Math.PI / 180;

var rad2 = Math.random() * 360 * Math.PI / 180;

var radius = 2000 * Math.random() * Math.random() / 2 + 100;

baseVertices2.push(Math.sin(rad1) * Math.cos(rad2) * radius, Math.cos(rad1) * radius, Math.sin(rad1) * Math.sin(rad2) * radius);

baseUvs.push(x / 512, 1 - y / 512);

}

}

geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(baseVertices1), 3));

geometry.addAttribute('position2', new THREE.BufferAttribute(new Float32Array(baseVertices2), 3));

geometry.addAttribute('uv', new THREE.BufferAttribute(new Float32Array(baseUvs), 2));

this.uniforms = {

time: {

type: 'f',

value: 0

},

interval: {

type: 'f',

value: this.interval

},

resolution: {

type: 'v2',

value: new THREE.Vector2(window.innerWidth, window.innerHeight)

},

texPrev: {

type: 't',

value: texPrev

},

texNext: {

type: 't',

value: texNext

},

rotate: {

type: 'v2',

value: new THREE.Vector2(window.innerWidth / 2, window.innerHeight / 2)

}

};

return new THREE.Points(geometry, new THREE.RawShaderMaterial({

uniforms: this.uniforms,

vertexShader: "#define GLSLIFY 1\nattribute vec3 position;\nattribute vec3 position2;\nattribute vec2 uv;\n\nuniform float time;\nuniform mat4 projectionMatrix;\nuniform mat4 modelViewMatrix;\nuniform vec2 resolution;\nuniform vec2 rotate;\n\nvarying vec2 vUv;\nvarying float vStepPrev;\nvarying float vStepNext;\n\nmat4 rotateMatrixX(float radian) {\n return mat4(\n 1.0, 0.0, 0.0, 0.0,\n 0.0, cos(radian), -sin(radian), 0.0,\n 0.0, sin(radian), cos(radian), 0.0,\n 0.0, 0.0, 0.0, 1.0\n );\n}\n\nmat4 rotateMatrixY(float radian) {\n return mat4(\n cos(radian), 0.0, sin(radian), 0.0,\n 0.0, 1.0, 0.0, 0.0,\n -sin(radian), 0.0, cos(radian), 0.0,\n 0.0, 0.0, 0.0, 1.0\n );\n}\n\nmat4 rotateMatrixZ(float radian) {\n return mat4(\n cos(radian), -sin(radian), 0.0, 0.0,\n sin(radian), cos(radian), 0.0, 0.0,\n 0.0, 0.0, 1.0, 0.0,\n 0.0, 0.0, 0.0, 1.0\n );\n}\n\nmat4 rotateMatrix(float radX, float radY, float radZ) {\n return rotateMatrixX(radX) * rotateMatrixY(radY) * rotateMatrixZ(radZ);\n}\n\n//\n// GLSL textureless classic 3D noise \"cnoise\",\n// with an RSL-style periodic variant \"pnoise\".\n// Author: Stefan Gustavson (stefan.gustavson@liu.se)\n// Version: 2011-10-11\n//\n// Many thanks to Ian McEwan of Ashima Arts for the\n// ideas for permutation and gradient selection.\n//\n// Copyright (c) 2011 Stefan Gustavson. All rights reserved.\n// Distributed under the MIT license. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n//\n\nvec3 mod289(vec3 x)\n{\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 mod289(vec4 x)\n{\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 permute(vec4 x)\n{\n return mod289(((x*34.0)+1.0)*x);\n}\n\nvec4 taylorInvSqrt(vec4 r)\n{\n return 1.79284291400159 - 0.85373472095314 * r;\n}\n\nvec3 fade(vec3 t) {\n return t*t*t*(t*(t*6.0-15.0)+10.0);\n}\n\n// Classic Perlin noise\nfloat cnoise(vec3 P)\n{\n vec3 Pi0 = floor(P); // Integer part for indexing\n vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1\n Pi0 = mod289(Pi0);\n Pi1 = mod289(Pi1);\n vec3 Pf0 = fract(P); // Fractional part for interpolation\n vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\n vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\n vec4 iy = vec4(Pi0.yy, Pi1.yy);\n vec4 iz0 = Pi0.zzzz;\n vec4 iz1 = Pi1.zzzz;\n\n vec4 ixy = permute(permute(ix) + iy);\n vec4 ixy0 = permute(ixy + iz0);\n vec4 ixy1 = permute(ixy + iz1);\n\n vec4 gx0 = ixy0 * (1.0 / 7.0);\n vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;\n gx0 = fract(gx0);\n vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\n vec4 sz0 = step(gz0, vec4(0.0));\n gx0 -= sz0 * (step(0.0, gx0) - 0.5);\n gy0 -= sz0 * (step(0.0, gy0) - 0.5);\n\n vec4 gx1 = ixy1 * (1.0 / 7.0);\n vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;\n gx1 = fract(gx1);\n vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\n vec4 sz1 = step(gz1, vec4(0.0));\n gx1 -= sz1 * (step(0.0, gx1) - 0.5);\n gy1 -= sz1 * (step(0.0, gy1) - 0.5);\n\n vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\n vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\n vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\n vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\n vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\n vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\n vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\n vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\n\n vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\n g000 *= norm0.x;\n g010 *= norm0.y;\n g100 *= norm0.z;\n g110 *= norm0.w;\n vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\n g001 *= norm1.x;\n g011 *= norm1.y;\n g101 *= norm1.z;\n g111 *= norm1.w;\n\n float n000 = dot(g000, Pf0);\n float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\n float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\n float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\n float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\n float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\n float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\n float n111 = dot(g111, Pf1);\n\n vec3 fade_xyz = fade(Pf0);\n vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\n vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\n float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);\n return 2.2 * n_xyz;\n}\n\nfloat quadraticOut(float t) {\n return -t * (t - 2.0);\n}\n\nvoid main(void) {\n float stepBase = quadraticOut(min(time, 1.0));\n float width = 0.1;\n // float diff = (1.0 - (position.y / 256.0 + 1.0) / 2.0) * (1.0 - width);\n float diff = length(position.xy) / sqrt(pow(256.0, 2.0) * 2.0) * (1.0 - width);\n float stepPrev = clamp((1.0 - (stepBase - diff + (1.0 - width))) / (width * 0.5), 0.0, 1.0);\n float stepNext = clamp((stepBase - diff) / (width * 0.5), 0.0, 1.0);\n float noise = cnoise(vec3(\n position.x / 2.0,\n position.y / 2.0,\n position.z\n ));\n float radius = 92.0 * noise;\n float vcos = cos(time * 128.0);\n float vsin = sin(time * 256.0);\n vec3 updatePosition = position + vec3(\n vsin * vcos * radius * stepPrev * stepNext,\n vcos * radius * stepPrev * stepNext,\n vsin * vsin * radius * stepPrev * stepNext\n );\n mat4 rotateMat = rotateMatrix(\n radians((rotate.y / resolution.y * 2.0 - 1.0) * -20.0),\n radians((rotate.x / resolution.x * 2.0 - 1.0) * -20.0),\n 0.0\n );\n vUv = uv;\n vStepPrev = stepPrev;\n vStepNext = stepNext;\n vec4 mvPosition = modelViewMatrix * rotateMat * vec4(updatePosition, 1.0);\n gl_PointSize = 2.0 + stepPrev * stepNext * (2000.0 / length(mvPosition.xyz));\n gl_Position = projectionMatrix * mvPosition;\n}\n",

fragmentShader: "precision highp float;\n#define GLSLIFY 1\n\nuniform sampler2D texPrev;\nuniform sampler2D texNext;\n\nvarying vec2 vUv;\nvarying float vStepPrev;\nvarying float vStepNext;\n\nvoid main(void) {\n vec3 n;\n n.xy = gl_PointCoord * 2.0 - 1.0;\n n.z = 1.0 - dot(n.xy, n.xy);\n if (n.z < 0.0) discard;\n vec4 colorPrev = texture2D(texPrev, vUv);\n vec4 colorNext = texture2D(texNext, vUv);\n gl_FragColor = vStepPrev * colorPrev + vStepNext * colorNext;\n}\n"

}));

}

}, {

key: 'addToScene',

value: function addToScene(scene) {

scene.add(this.points.obj);

}

}, {

key: 'render',

value: function render(time) {

this.uniforms.time.value += time / this.interval;

if (this.uniforms.time.value > 1) {

this.uniforms.time.value = 0;

this.prevNum = this.nextNum;

this.uniforms.texPrev.value = this.textures[this.prevNum];

while (this.nextNum == this.prevNum) {

this.nextNum = Math.floor(Math.random() * this.textures.length);

}

this.uniforms.texNext.value = this.textures[this.nextNum];

}

}

}]);

return ParticlePicture;

}();

exports.default = ParticlePicture;

}, {}]

}, {}, [1]);