Three.js 百万级别的粒子动画测试

1 million particles using curl noise + fbo on ThreeJS 关于动画性能的测试用例。 Source: https://gist.github.com/paulirish/523692

three, 性能

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3699
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(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) {
        // shim for using process in browser

var process = module.exports = {};
        var queue = [];
        var draining = false;
        var currentQueue;
        var queueIndex = -1;

function drainQueue() {
            if (draining) {
                return;
            }
            var timeout = setTimeout(cleanUpNextTick);
            draining = true;

var len = queue.length;
            while (len) {
                currentQueue = queue;
                queue = [];
                while (++queueIndex < len) {
                    currentQueue[queueIndex].run();
                }
                queueIndex = -1;
                len = queue.length;
            }
            currentQueue = null;
            draining = false;
            clearTimeout(timeout);
        }

process.nextTick = function(fun) {
            var args = new Array(arguments.length - 1);
            if (arguments.length > 1) {
                for (var i = 1; i < arguments.length; i++) {
                    args[i - 1] = arguments[i];
                }
            }
            queue.push(new Item(fun, args));
            if (queue.length === 1 && !draining) {
                setTimeout(drainQueue, 0);
            }
        };

// v8 likes predictible objects
        function Item(fun, array) {
            this.fun = fun;
            this.array = array;
        }
        Item.prototype.run = function() {
            this.fun.apply(null, this.array);
        };
        process.title = 'browser';
        process.browser = true;
        process.env = {};
        process.argv = [];
        process.version = ''; // empty string to avoid regexp issues
        process.versions = {};

function noop() {}

process.on = noop;
        process.addListener = noop;
        process.once = noop;
        process.off = noop;
        process.removeListener = noop;
        process.removeAllListeners = noop;
        process.emit = noop;

process.binding = function(name) {
            throw new Error('process.binding is not supported');
        };

// TODO(shtylman)
        process.cwd = function() {
            return '/'
        };
        process.chdir = function(dir) {
            throw new Error('process.chdir is not supported');
        };
        process.umask = function() {
            return 0;
        };

}, {}],
    2: [function(require, module, exports) {
        var prefix = require('prefix-style')
        var toCamelCase = require('to-camel-case')
        var cache = {
            'float': 'cssFloat'
        }

var suffixMap = {};
        ['top', 'right', 'bottom', 'left',
            'width', 'height', 'fontSize',
            'paddingLeft', 'paddingRight',
            'paddingTop', 'paddingBottom',
            'marginLeft', 'marginRight',
            'marginTop', 'marginBottom',
            'padding', 'margin', 'perspective'
        ].forEach(function(prop) {
            suffixMap[prop] = 'px'
        })

function style(element, property, value) {
            var camel = cache[property]
            if (typeof camel === 'undefined')
                camel = detect(property)

//may be false if CSS prop is unsupported
            if (camel) {
                if (value === undefined)
                    return element.style[camel]

if (typeof value === 'number')
                    value = value + (suffixMap[camel] || '')
                element.style[camel] = value
            }
        }

function each(element, properties) {
            for (var k in properties) {
                if (properties.hasOwnProperty(k)) {
                    style(element, k, properties[k])
                }
            }
        }

function detect(cssProp) {
            var camel = toCamelCase(cssProp)
            var result = prefix(camel)
            cache[camel] = cache[cssProp] = cache[result] = result
            return result
        }

function set() {
            'use strict';
            if (arguments.length === 2) {
                each(arguments[0], arguments[1])
            } else
                style(arguments[0], arguments[1], arguments[2])
        }

module.exports = set
        module.exports.set = set

module.exports.get = function(element, properties) {
            if (Array.isArray(properties))
                return properties.reduce(function(obj, prop) {
                    obj[prop] = style(element, prop || '')
                    return obj
                }, {})
            else
                return style(element, properties || '')
        }

}, {
        "prefix-style": 3,
        "to-camel-case": 4
    }],
    3: [function(require, module, exports) {
        var elem = null

module.exports = function prefix(prop) {
            var prefixes = ['Moz', 'Khtml', 'Webkit', 'O', 'ms'],
                upper = prop.charAt(0).toUpperCase() + prop.slice(1)

if (!elem)
                elem = document.createElement('div')

if (prop in elem.style)
                return prop

for (var len = prefixes.length; len--;) {
                if ((prefixes[len] + upper) in elem.style)
                    return (prefixes[len] + upper)
            }
            return false
        }
    }, {}],
    4: [function(require, module, exports) {

var toSpace = require('to-space-case');

/**
         * Expose `toCamelCase`.
         */

module.exports = toCamelCase;

/**
         * Convert a `string` to camel case.
         *
         * @param {String} string
         * @return {String}
         */

function toCamelCase(string) {
            return toSpace(string).replace(/\s(\w)/g, function(matches, letter) {
                return letter.toUpperCase();
            });
        }
    }, {
        "to-space-case": 5
    }],
    5: [function(require, module, exports) {

var clean = require('to-no-case');

/**
         * Expose `toSpaceCase`.
         */

module.exports = toSpaceCase;

/**
         * Convert a `string` to space case.
         *
         * @param {String} string
         * @return {String}
         */

function toSpaceCase(string) {
            return clean(string).replace(/[\W_]+(.|$)/g, function(matches, match) {
                return match ? ' ' + match : '';
            });
        }
    }, {
        "to-no-case": 6
    }],
    6: [function(require, module, exports) {

/**
         * Expose `toNoCase`.
         */

module.exports = toNoCase;

/**
         * Test whether a string is camel-case.
         */

var hasSpace = /\s/;
        var hasCamel = /[a-z][A-Z]/;
        var hasSeparator = /[\W_]/;

/**
         * Remove any starting case from a `string`, like camel or snake, but keep
         * spaces and punctuation that may be important otherwise.
         *
         * @param {String} string
         * @return {String}
         */

function toNoCase(string) {
            if (hasSpace.test(string)) return string.toLowerCase();

if (hasSeparator.test(string)) string = unseparate(string);
            if (hasCamel.test(string)) string = uncamelize(string);
            return string.toLowerCase();
        }

/**
         * Separator splitter.
         */

var separatorSplitter = /[\W_]+(.|$)/g;

/**
         * Un-separate a `string`.
         *
         * @param {String} string
         * @return {String}
         */

function unseparate(string) {
            return string.replace(separatorSplitter, function(m, next) {
                return next ? ' ' + next : '';
            });
        }

/**
         * Camelcase splitter.
         */

var camelSplitter = /(.)([A-Z]+)/g;

/**
         * Un-camelcase a `string`.
         *
         * @param {String} string
         * @return {String}
         */

function uncamelize(string) {
            return string.replace(camelSplitter, function(m, previous, uppers) {
                return previous + ' ' + uppers.toLowerCase().split('').join(' ');
            });
        }
    }, {}],
    7: [function(require, module, exports) {
        var now = require('performance-now'),
            global = typeof window === 'undefined' ? {} : window,
            vendors = ['moz', 'webkit'],
            suffix = 'AnimationFrame',
            raf = global['request' + suffix],
            caf = global['cancel' + suffix] || global['cancelRequest' + suffix]

for (var i = 0; i < vendors.length && !raf; i++) {
            raf = global[vendors[i] + 'Request' + suffix]
            caf = global[vendors[i] + 'Cancel' + suffix] || global[vendors[i] + 'CancelRequest' + suffix]
        }

// Some versions of FF have rAF but not cAF
        if (!raf || !caf) {
            var last = 0,
                id = 0,
                queue = [],
                frameDuration = 1000 / 60

raf = function(callback) {
                if (queue.length === 0) {
                    var _now = now(),
                        next = Math.max(0, frameDuration - (_now - last))
                    last = next + _now
                    setTimeout(function() {
                        var cp = queue.slice(0)
                            // Clear queue here to prevent
                            // callbacks from appending listeners
                            // to the current frame's queue
                        queue.length = 0
                        for (var i = 0; i < cp.length; i++) {
                            if (!cp[i].cancelled) {
                                try {
                                    cp[i].callback(last)
                                } catch (e) {
                                    setTimeout(function() {
                                        throw e
                                    }, 0)
                                }
                            }
                        }
                    }, Math.round(next))
                }
                queue.push({
                    handle: ++id,
                    callback: callback,
                    cancelled: false
                })
                return id
            }

caf = function(handle) {
                for (var i = 0; i < queue.length; i++) {
                    if (queue[i].handle === handle) {
                        queue[i].cancelled = true
                    }
                }
            }
        }

module.exports = function(fn) {
            // Wrap in a new function to prevent
            // `cancel` potentially being assigned
            // to the native rAF function
            return raf.call(global, fn)
        }
        module.exports.cancel = function() {
            caf.apply(global, arguments)
        }

}, {
        "performance-now": 8
    }],
    8: [function(require, module, exports) {
        (function(process) {
            // Generated by CoffeeScript 1.6.3
            (function() {
                var getNanoSeconds, hrtime, loadTime;

if ((typeof performance !== "undefined" && performance !== null) && performance.now) {
                    module.exports = function() {
                        return performance.now();
                    };
                } else if ((typeof process !== "undefined" && process !== null) && process.hrtime) {
                    module.exports = function() {
                        return (getNanoSeconds() - loadTime) / 1e6;
                    };
                    hrtime = process.hrtime;
                    getNanoSeconds = function() {
                        var hr;
                        hr = hrtime();
                        return hr[0] * 1e9 + hr[1];
                    };
                    loadTime = getNanoSeconds();
                } else if (Date.now) {
                    module.exports = function() {
                        return Date.now() - loadTime;
                    };
                    loadTime = Date.now();
                } else {
                    module.exports = function() {
                        return new Date().getTime() - loadTime;
                    };
                    loadTime = new Date().getTime();
                }

}).call(this);

/*
            //@ sourceMappingURL=performance-now.map
            */

}).call(this, require('_process'))
    }, {
        "_process": 1
    }],
    9: [function(require, module, exports) {
        // var inputController = require('./controllers/inputController');
        // var quickLoader = require('./loader/quickLoader');

// var dat = require('dat-gui');
        // var Stats = require('stats.js');
        var css = require('dom-css');
        var raf = require('raf');

// var THREE = require('three');
        var OrbitControls = require('./controls/OrbitControls');

var gui;
        var stats;
        var now = Date.now();

var width = 0;
        var height = 0;

var TEXTURE_SIZE = 1024;
        var AMOUNT = TEXTURE_SIZE * TEXTURE_SIZE;

var camera;
        var scene;
        var renderer;
        var control;

var particles;

var copyShader;
        var velocityShader;
        var positionShader;
        var velocityRenderTarget;
        var positionRenderTarget;
        var positionRenderTarget2;
        var fboMesh;
        var fboScene;
        var fboCamera;

var config = {
            color1: '#421f54',
            color2: '#259198'
        };

function preInit() {

// inputController.init();

stats = new Stats();
            css(stats.domElement, {
                position: 'absolute',
                left: '0px',
                top: '0px',
                zIndex: 2048
            });

document.body.appendChild(stats.domElement);

renderer = new THREE.WebGLRenderer({

});
            var gl = renderer.getContext();
            if (!gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS)) {
                alert('No support for vertex shader textures!');
                return;
            }
            // high precision
            if (!gl.getExtension('OES_texture_float')) {
                alert('No OES_texture_float support for float textures!');
                return;
            }

camera = new THREE.PerspectiveCamera(45, width / height, 1, 3000);
            camera.position.z = 1000;
            scene = new THREE.Scene();

//     quickLoader.start(onPreloading);
            // }

// function onPreloading(percent) {
            //     if(percent === 1) {
            //         init();
            //     }
            // }

// function init() {
            document.body.appendChild(renderer.domElement);

var geometry = new THREE.BufferGeometry();
            geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(AMOUNT * 3), 3));

var fboUV = new Float32Array(AMOUNT * 2);
            geometry.addAttribute('fboUV', new THREE.BufferAttribute(fboUV, 2));
            for (var i = 0; i < AMOUNT; i++) {
                fboUV[i * 2] = (i % TEXTURE_SIZE) / TEXTURE_SIZE;
                fboUV[i * 2 + 1] = ~~(i / TEXTURE_SIZE) / TEXTURE_SIZE;
            }

particles = new THREE.PointCloud(geometry, material);
            scene.add(particles);

control = new OrbitControls(camera);

initFbo();

gui = new dat.GUI();
            gui.addColor(config, 'color1').onChange(onColorChange.bind(material.uniforms.color1.value));
            gui.addColor(config, 'color2').onChange(onColorChange.bind(material.uniforms.color2.value));
            gui.add(material.uniforms.opacity, 'value', 0, 1).name('opacity');
            gui.add(material.uniforms.sizeBase, 'value', 0, 8).name('sizeBase');
            gui.add(material.uniforms.sizeExtra, 'value', 0, 48).name('sizeExtra');
            gui.add(material.uniforms.hardness, 'value', 0, 1).name('hardness');
            gui.add(velocityShader.uniforms.speed, 'value', 0, 3).name('speed');
            css(gui.domElement.parentNode, {
                zIndex: 2048
            });

window.addEventListener('resize', onResize);
            onResize();
            loop();
        }

function onColorChange(value) {
            this.setHex(value.replace('#', '0x'));
        }

function initFbo() {

fboScene = new THREE.Scene();
            fboCamera = new THREE.Camera();
            fboCamera.position.z = 1;

copyShader = new THREE.ShaderMaterial({
                uniforms: {
                    resolution: {
                        type: 'v2',
                        value: new THREE.Vector2(TEXTURE_SIZE, TEXTURE_SIZE)
                    },
                    texture: {
                        type: 't',
                        value: null
                    }
                },
                vertexShader: "#define GLSLIFY 1\n\nvoid main() {\n    gl_Position = vec4( position, 1.0 );\n}\n",
                fragmentShader: "#define GLSLIFY 1\n\nuniform vec2 resolution;\nuniform sampler2D texture;\n\nvoid main() {\n    vec2 uv = gl_FragCoord.xy / resolution.xy;\n    vec3 color = texture2D( texture, uv ).xyz;\n    gl_FragColor = vec4( color, 1.0 );\n}\n"
            });

velocityShader = new THREE.ShaderMaterial({
                uniforms: {
                    speed: {
                        type: 'f',
                        value: 1.0
                    },
                    resolution: {
                        type: 'v2',
                        value: new THREE.Vector2(TEXTURE_SIZE, TEXTURE_SIZE)
                    },
                    texturePosition: {
                        type: 't',
                        value: null
                    }
                },
                vertexShader: "#define GLSLIFY 1\n\nvoid main() {\n    gl_Position = vec4( position, 1.0 );\n}\n",
                fragmentShader: "#define GLSLIFY 1\n\nuniform vec2 resolution;\n\nuniform sampler2D texturePosition;\n\nuniform float speed;\n\n//\n// Description : Array and textureless GLSL 2D/3D/4D simplex\n//               noise functions.\n//      Author : Ian McEwan, Ashima Arts.\n//  Maintainer : ijm\n//     Lastmod : 20110822 (ijm)\n//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n//               Distributed under the MIT License. See LICENSE file.\n//               https://github.com/ashima/webgl-noise\n//\n\nvec3 mod289_3_0(vec3 x) {\n  return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 mod289_3_0(vec4 x) {\n  return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 permute_3_1(vec4 x) {\n     return mod289_3_0(((x*34.0)+1.0)*x);\n}\n\nvec4 taylorInvSqrt_3_2(vec4 r)\n{\n  return 1.79284291400159 - 0.85373472095314 * r;\n}\n\nfloat snoise_3_3(vec3 v)\n  {\n  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;\n  const vec4  D_3_4 = vec4(0.0, 0.5, 1.0, 2.0);\n\n// First corner\n  vec3 i  = floor(v + dot(v, C.yyy) );\n  vec3 x0 =   v - i + dot(i, C.xxx) ;\n\n// Other corners\n  vec3 g_3_5 = step(x0.yzx, x0.xyz);\n  vec3 l = 1.0 - g_3_5;\n  vec3 i1 = min( g_3_5.xyz, l.zxy );\n  vec3 i2 = max( g_3_5.xyz, l.zxy );\n\n  //   x0 = x0 - 0.0 + 0.0 * C.xxx;\n  //   x1 = x0 - i1  + 1.0 * C.xxx;\n  //   x2 = x0 - i2  + 2.0 * C.xxx;\n  //   x3 = x0 - 1.0 + 3.0 * C.xxx;\n  vec3 x1 = x0 - i1 + C.xxx;\n  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y\n  vec3 x3 = x0 - D_3_4.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y\n\n// Permutations\n  i = mod289_3_0(i);\n  vec4 p = permute_3_1( permute_3_1( permute_3_1(\n             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))\n           + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))\n           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));\n\n// Gradients: 7x7 points over a square, mapped onto an octahedron.\n// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)\n  float n_ = 0.142857142857; // 1.0/7.0\n  vec3  ns = n_ * D_3_4.wyz - D_3_4.xzx;\n\n  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)\n\n  vec4 x_ = floor(j * ns.z);\n  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)\n\n  vec4 x = x_ *ns.x + ns.yyyy;\n  vec4 y = y_ *ns.x + ns.yyyy;\n  vec4 h = 1.0 - abs(x) - abs(y);\n\n  vec4 b0 = vec4( x.xy, y.xy );\n  vec4 b1 = vec4( x.zw, y.zw );\n\n  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;\n  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;\n  vec4 s0 = floor(b0)*2.0 + 1.0;\n  vec4 s1 = floor(b1)*2.0 + 1.0;\n  vec4 sh = -step(h, vec4(0.0));\n\n  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;\n  vec4 a1_3_6 = b1.xzyw + s1.xzyw*sh.zzww ;\n\n  vec3 p0_3_7 = vec3(a0.xy,h.x);\n  vec3 p1 = vec3(a0.zw,h.y);\n  vec3 p2 = vec3(a1_3_6.xy,h.z);\n  vec3 p3 = vec3(a1_3_6.zw,h.w);\n\n//Normalise gradients\n  vec4 norm = taylorInvSqrt_3_2(vec4(dot(p0_3_7,p0_3_7), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n  p0_3_7 *= norm.x;\n  p1 *= norm.y;\n  p2 *= norm.z;\n  p3 *= norm.w;\n\n// Mix final noise value\n  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n  m = m * m;\n  return 42.0 * dot( m*m, vec4( dot(p0_3_7,x0), dot(p1,x1),\n                                dot(p2,x2), dot(p3,x3) ) );\n  }\n\n\n\n\nvec3 snoiseVec3_1_8( vec3 x ){\n\n  float s  = snoise_3_3(vec3( x ));\n  float s1 = snoise_3_3(vec3( x.y - 19.1 , x.z + 33.4 , x.x + 47.2 ));\n  float s2 = snoise_3_3(vec3( x.z + 74.2 , x.x - 124.5 , x.y + 99.4 ));\n  vec3 c = vec3( s , s1 , s2 );\n  return c;\n\n}\n\n\nvec3 curlNoise_1_9( vec3 p ){\n  \n  const float e = .1;\n  vec3 dx = vec3( e   , 0.0 , 0.0 );\n  vec3 dy = vec3( 0.0 , e   , 0.0 );\n  vec3 dz = vec3( 0.0 , 0.0 , e   );\n\n  vec3 p_x0 = snoiseVec3_1_8( p - dx );\n  vec3 p_x1 = snoiseVec3_1_8( p + dx );\n  vec3 p_y0 = snoiseVec3_1_8( p - dy );\n  vec3 p_y1 = snoiseVec3_1_8( p + dy );\n  vec3 p_z0 = snoiseVec3_1_8( p - dz );\n  vec3 p_z1 = snoiseVec3_1_8( p + dz );\n\n  float x = p_y1.z - p_y0.z - p_z1.y + p_z0.y;\n  float y = p_z1.x - p_z0.x - p_x1.z + p_x0.z;\n  float z = p_x1.y - p_x0.y - p_y1.x + p_y0.x;\n\n  const float divisor = 1.0 / ( 2.0 * e );\n  return normalize( vec3( x , y , z ) * divisor );\n\n}\n\n\n\nhighp float random_2_10(vec2 co)\n{\n    highp float a = 12.9898;\n    highp float b = 78.233;\n    highp float c = 43758.5453;\n    highp float dt= dot(co.xy ,vec2(a,b));\n    highp float sn= mod(dt,3.14);\n    return fract(sin(sn) * c);\n}\n\n\n\nvoid main() {\n\n    vec2 uv = gl_FragCoord.xy / resolution.xy;\n    vec3 position = texture2D( texturePosition, uv ).xyz;\n\n    vec3 velocity = curlNoise_1_9(position * 0.02) * 0.1;\n\n    float l = pow(smoothstep(500.0, -500.0,  position.x), 2.0);\n\n    velocity.x += -0.05 + l * - (0.2 + random_2_10(uv) * 0.2);\n\n    velocity.x = clamp(velocity.x, -5.0, -0.01);\n\n    velocity *= speed;\n\n    gl_FragColor = vec4( velocity, 1.0 );\n\n}\n"
            });

positionShader = new THREE.ShaderMaterial({
                uniforms: {
                    delta: {
                        type: 'f',
                        value: 0.0
                    },
                    resolution: {
                        type: 'v2',
                        value: new THREE.Vector2(TEXTURE_SIZE, TEXTURE_SIZE)
                    },
                    texturePosition: {
                        type: 't',
                        value: null
                    },
                    textureVelocity: {
                        type: 't',
                        value: null
                    }
                },
                vertexShader: "#define GLSLIFY 1\n\nvoid main() {\n    gl_Position = vec4( position, 1.0 );\n}\n",
                fragmentShader: "#define GLSLIFY 1\n\nuniform vec2 resolution;\nuniform sampler2D textureVelocity;\nuniform sampler2D texturePosition;\n\nuniform float delta;\n\nhighp float random_1_0(vec2 co)\n{\n    highp float a = 12.9898;\n    highp float b = 78.233;\n    highp float c = 43758.5453;\n    highp float dt= dot(co.xy ,vec2(a,b));\n    highp float sn= mod(dt,3.14);\n    return fract(sin(sn) * c);\n}\n\n\n\nvoid main() {\n\n    vec2 uv = gl_FragCoord.xy / resolution.xy;\n    vec3 position = texture2D( texturePosition, uv ).xyz;\n    vec3 velocity = texture2D( textureVelocity, uv ).xyz;\n\n    position += velocity * delta * 1.0;\n\n    if(position.x < -500.0) {\n        position.x = 500.0 + random_1_0(uv + vec2(21.3, 63.21)) * 300.0;\n        position.y = random_1_0(uv + vec2(32.3, 734.21));\n        position.z = random_1_0(uv + vec2(127.3, 31.21));\n    }\n\n    gl_FragColor = vec4( position, 1.0 );\n\n}\n"
            });

fboMesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), copyShader);
            fboScene.add(fboMesh);

velocityRenderTarget = new THREE.WebGLRenderTarget(TEXTURE_SIZE, TEXTURE_SIZE, {
                wrapS: THREE.RepeatWrapping,
                wrapT: THREE.RepeatWrapping,
                minFilter: THREE.NearestFilter,
                magFilter: THREE.NearestFilter,
                format: THREE.RGBAFormat,
                type: THREE.FloatType,
                stencilBuffer: false
            });

positionRenderTarget = velocityRenderTarget.clone();
            positionRenderTarget2 = velocityRenderTarget.clone();
            copyTexture(createVelocityTexture(), velocityRenderTarget);
            copyTexture(createPositionTexture(), positionRenderTarget);
            copyTexture(positionRenderTarget, positionRenderTarget2);
        }

function updatePosition(dt) {

fboMesh.material = velocityShader;
            velocityShader.uniforms.texturePosition.value = positionRenderTarget;
            renderer.render(fboScene, fboCamera, velocityRenderTarget);

fboMesh.material = positionShader;
            positionShader.uniforms.texturePosition.value = positionRenderTarget;
            positionShader.uniforms.textureVelocity.value = velocityRenderTarget;
            positionShader.uniforms.delta.value = dt || 0;
            renderer.render(fboScene, fboCamera, positionRenderTarget2);

// swap
            var tmp = positionRenderTarget;
            positionRenderTarget = positionRenderTarget2;
            positionRenderTarget2 = tmp;
        }

function copyTexture(input, output) {
            fboMesh.material = copyShader;
            copyShader.uniforms.texture.value = input;
            renderer.render(fboScene, fboCamera, output);
        }

function createVelocityTexture() {
            var a = new Float32Array(AMOUNT * 4);
            var texture = new THREE.DataTexture(a, TEXTURE_SIZE, TEXTURE_SIZE, THREE.RGBAFormat, THREE.FloatType);
            texture.minFilter = THREE.NearestFilter;
            texture.magFilter = THREE.NearestFilter;
            texture.needsUpdate = true;
            texture.flipY = false;
            return texture;
        }

function createPositionTexture() {
            var a = new Float32Array(AMOUNT * 4);
            for (var i = 0, len = a.length; i < len; i += 4) {
                a[i + 0] = -1000;
                a[i + 1] = (Math.random() - 0.5) - 1000;
                a[i + 2] = (Math.random() - 0.5) - 1000;
            }
            var texture = new THREE.DataTexture(a, TEXTURE_SIZE, TEXTURE_SIZE, THREE.RGBAFormat, THREE.FloatType);
            texture.minFilter = THREE.NearestFilter;
            texture.magFilter = THREE.NearestFilter;
            texture.needsUpdate = true;
            texture.flipY = false;
            return texture;
        }

function onResize() {
            width = window.innerWidth;
            height = window.innerHeight;

camera.aspect = width / height;
            camera.updateProjectionMatrix();
            renderer.setSize(width, height);
        }

function loop() {
            stats.begin();
            var newNow = Date.now();
            var dt = newNow - now;
            now = newNow;
            render(Math.min(dt, 16));
            stats.end();
            raf(loop);
        }

function render(dt) {
            dt = dt || 0;

control.update();

updatePosition(dt);

particles.material.uniforms.texturePosition.value = positionRenderTarget;

renderer.render(scene, camera);
        }

preInit();

}, {
        "./controls/OrbitControls": 10,
        "dom-css": 2,
        "raf": 7
    }],
    10: [function(require, module, exports) {
        // var THREE = require('three');

/**
         * @author qiao / https://github.com/qiao
         * @author mrdoob / http://mrdoob.com
         * @author alteredq / http://alteredqualia.com/
         * @author WestLangley / http://github.com/WestLangley
         * @author erich666 / http://erichaines.com
         */
        /*global THREE, console */

// This set of controls performs orbiting, dollying (zooming), and panning. It maintains
        // the "up" direction as +Y, unlike the TrackballControls. Touch on tablet and phones is
        // supported.
        //
        //    Orbit - left mouse / touch: one finger move
        //    Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
        //    Pan - right mouse, or arrow keys / touch: three finter swipe

THREE.OrbitControls = function(object, domElement) {

this.object = object;
            this.domElement = (domElement !== undefined) ? domElement : document;

// API

// Set to false to disable this control
            this.enabled = true;

// "target" sets the location of focus, where the control orbits around
            // and where it pans with respect to.
            this.target = new THREE.Vector3();

// center is old, deprecated; use "target" instead
            this.center = this.target;

// This option actually enables dollying in and out; left as "zoom" for
            // backwards compatibility
            this.noZoom = false;
            this.zoomSpeed = 1.0;

// Limits to how far you can dolly in and out ( PerspectiveCamera only )
            this.minDistance = 0;
            this.maxDistance = Infinity;

// Limits to how far you can zoom in and out ( OrthographicCamera only )
            this.minZoom = 0;
            this.maxZoom = Infinity;

// Set to true to disable this control
            this.noRotate = false;
            this.rotateSpeed = 1.0;

// Set to true to disable this control
            this.noPan = false;
            this.keyPanSpeed = 7.0; // pixels moved per arrow key push

// Set to true to automatically rotate around the target
            this.autoRotate = false;
            this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60

// How far you can orbit vertically, upper and lower limits.
            // Range is 0 to Math.PI radians.
            this.minPolarAngle = 0; // radians
            this.maxPolarAngle = Math.PI; // radians

// How far you can orbit horizontally, upper and lower limits.
            // If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
            this.minAzimuthAngle = -Infinity; // radians
            this.maxAzimuthAngle = Infinity; // radians

// Set to true to disable use of the keys
            this.noKeys = false;

// The four arrow keys
            this.keys = {
                LEFT: 37,
                UP: 38,
                RIGHT: 39,
                BOTTOM: 40
            };

// Mouse buttons
            this.mouseButtons = {
                ORBIT: THREE.MOUSE.LEFT,
                ZOOM: THREE.MOUSE.MIDDLE,
                PAN: THREE.MOUSE.RIGHT
            };

////////////
            // internals

var scope = this;

var EPS = 0.000001;

var rotateStart = new THREE.Vector2();
            var rotateEnd = new THREE.Vector2();
            var rotateDelta = new THREE.Vector2();

var panStart = new THREE.Vector2();
            var panEnd = new THREE.Vector2();
            var panDelta = new THREE.Vector2();
            var panOffset = new THREE.Vector3();

var offset = new THREE.Vector3();

var dollyStart = new THREE.Vector2();
            var dollyEnd = new THREE.Vector2();
            var dollyDelta = new THREE.Vector2();

var theta;
            var phi;
            var phiDelta = 0;
            var thetaDelta = 0;
            var scale = 1;
            var pan = new THREE.Vector3();

var lastPosition = new THREE.Vector3();
            var lastQuaternion = new THREE.Quaternion();

var STATE = {
                NONE: -1,
                ROTATE: 0,
                DOLLY: 1,
                PAN: 2,
                TOUCH_ROTATE: 3,
                TOUCH_DOLLY: 4,
                TOUCH_PAN: 5
            };

var state = STATE.NONE;

// for reset

this.target0 = this.target.clone();
            this.position0 = this.object.position.clone();
            this.zoom0 = this.object.zoom;

// so camera.up is the orbit axis

var quat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0));
            var quatInverse = quat.clone().inverse();

// events

this.rotateLeft = function(angle) {

if (angle === undefined) {

angle = getAutoRotationAngle();

}

thetaDelta -= angle;

};

this.rotateUp = function(angle) {

if (angle === undefined) {

angle = getAutoRotationAngle();

}

phiDelta -= angle;

};

// pass in distance in world space to move left
            this.panLeft = function(distance) {

var te = this.object.matrix.elements;

// get X column of matrix
                panOffset.set(te[0], te[1], te[2]);
                panOffset.multiplyScalar(-distance);

pan.add(panOffset);

};

// pass in distance in world space to move up
            this.panUp = function(distance) {

var te = this.object.matrix.elements;

// get Y column of matrix
                panOffset.set(te[4], te[5], te[6]);
                panOffset.multiplyScalar(distance);

pan.add(panOffset);

};

// pass in x,y of change desired in pixel space,
            // right and down are positive
            this.pan = function(deltaX, deltaY) {

var element = scope.domElement === document ? scope.domElement.body : scope.domElement;

if (scope.object instanceof THREE.PerspectiveCamera) {

// perspective
                    var position = scope.object.position;
                    var offset = position.clone().sub(scope.target);
                    var targetDistance = offset.length();

// half of the fov is center to top of screen
                    targetDistance *= Math.tan((scope.object.fov / 2) * Math.PI / 180.0);

// we actually don't use screenWidth, since perspective camera is fixed to screen height
                    scope.panLeft(2 * deltaX * targetDistance / element.clientHeight);
                    scope.panUp(2 * deltaY * targetDistance / element.clientHeight);

} else if (scope.object instanceof THREE.OrthographicCamera) {

// orthographic
                    scope.panLeft(deltaX * (scope.object.right - scope.object.left) / element.clientWidth);
                    scope.panUp(deltaY * (scope.object.top - scope.object.bottom) / element.clientHeight);

} else {

// camera neither orthographic or perspective
                    console.warn('WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.');

}

};

this.dollyIn = function(dollyScale) {

if (dollyScale === undefined) {

dollyScale = getZoomScale();

}

if (scope.object instanceof THREE.PerspectiveCamera) {

scale /= dollyScale;

} else if (scope.object instanceof THREE.OrthographicCamera) {

scope.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom * dollyScale));
                    scope.object.updateProjectionMatrix();
                    scope.dispatchEvent(changeEvent);

} else {

console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.');

}

};

this.dollyOut = function(dollyScale) {

if (dollyScale === undefined) {

dollyScale = getZoomScale();

}

if (scope.object instanceof THREE.PerspectiveCamera) {

scale *= dollyScale;

} else if (scope.object instanceof THREE.OrthographicCamera) {

scope.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom / dollyScale));
                    scope.object.updateProjectionMatrix();
                    scope.dispatchEvent(changeEvent);

} else {

console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.');

}

};

this.update = function() {

var position = this.object.position;

offset.copy(position).sub(this.target);

// rotate offset to "y-axis-is-up" space
                offset.applyQuaternion(quat);

// angle from z-axis around y-axis

theta = Math.atan2(offset.x, offset.z);

// angle from y-axis

phi = Math.atan2(Math.sqrt(offset.x * offset.x + offset.z * offset.z), offset.y);

if (this.autoRotate && state === STATE.NONE) {

this.rotateLeft(getAutoRotationAngle());

}

theta += thetaDelta;
                phi += phiDelta;

// restrict theta to be between desired limits
                theta = Math.max(this.minAzimuthAngle, Math.min(this.maxAzimuthAngle, theta));

// restrict phi to be between desired limits
                phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, phi));

// restrict phi to be betwee EPS and PI-EPS
                phi = Math.max(EPS, Math.min(Math.PI - EPS, phi));

var radius = offset.length() * scale;

// restrict radius to be between desired limits
                radius = Math.max(this.minDistance, Math.min(this.maxDistance, radius));

// move target to panned location
                this.target.add(pan);

offset.x = radius * Math.sin(phi) * Math.sin(theta);
                offset.y = radius * Math.cos(phi);
                offset.z = radius * Math.sin(phi) * Math.cos(theta);

// rotate offset back to "camera-up-vector-is-up" space
                offset.applyQuaternion(quatInverse);

position.copy(this.target).add(offset);

this.object.lookAt(this.target);

thetaDelta = 0;
                phiDelta = 0;
                scale = 1;
                pan.set(0, 0, 0);

// update condition is:
                // min(camera displacement, camera rotation in radians)^2 > EPS
                // using small-angle approximation cos(x/2) = 1 - x^2 / 8

if (lastPosition.distanceToSquared(this.object.position) > EPS || 8 * (1 - lastQuaternion.dot(this.object.quaternion)) > EPS) {

this.dispatchEvent(changeEvent);

lastPosition.copy(this.object.position);
                    lastQuaternion.copy(this.object.quaternion);

}

};

this.reset = function() {

state = STATE.NONE;

this.target.copy(this.target0);
                this.object.position.copy(this.position0);
                this.object.zoom = this.zoom0;

this.object.updateProjectionMatrix();
                this.dispatchEvent(changeEvent);

this.update();

};

this.getPolarAngle = function() {

return phi;

};

this.getAzimuthalAngle = function() {

return theta

};

function getAutoRotationAngle() {

return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;

}

function getZoomScale() {

return Math.pow(0.95, scope.zoomSpeed);

}

function onMouseDown(event) {

if (scope.enabled === false) return;
                event.preventDefault();

if (event.button === scope.mouseButtons.ORBIT) {
                    if (scope.noRotate === true) return;

state = STATE.ROTATE;

rotateStart.set(event.clientX, event.clientY);

} else if (event.button === scope.mouseButtons.ZOOM) {
                    if (scope.noZoom === true) return;

state = STATE.DOLLY;

dollyStart.set(event.clientX, event.clientY);

} else if (event.button === scope.mouseButtons.PAN) {
                    if (scope.noPan === true) return;

state = STATE.PAN;

panStart.set(event.clientX, event.clientY);

}

if (state !== STATE.NONE) {
                    document.addEventListener('mousemove', onMouseMove, false);
                    document.addEventListener('mouseup', onMouseUp, false);
                    scope.dispatchEvent(startEvent);
                }

}

function onMouseMove(event) {

if (scope.enabled === false) return;

event.preventDefault();

var element = scope.domElement === document ? scope.domElement.body : scope.domElement;

if (state === STATE.ROTATE) {

if (scope.noRotate === true) return;

rotateEnd.set(event.clientX, event.clientY);
                    rotateDelta.subVectors(rotateEnd, rotateStart);

// rotating across whole screen goes 360 degrees around
                    scope.rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed);

// rotating up and down along whole screen attempts to go 360, but limited to 180
                    scope.rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed);

rotateStart.copy(rotateEnd);

} else if (state === STATE.DOLLY) {

if (scope.noZoom === true) return;

dollyEnd.set(event.clientX, event.clientY);
                    dollyDelta.subVectors(dollyEnd, dollyStart);

if (dollyDelta.y > 0) {

scope.dollyIn();

} else if (dollyDelta.y < 0) {

scope.dollyOut();

}

dollyStart.copy(dollyEnd);

} else if (state === STATE.PAN) {

if (scope.noPan === true) return;

panEnd.set(event.clientX, event.clientY);
                    panDelta.subVectors(panEnd, panStart);

scope.pan(panDelta.x, panDelta.y);

panStart.copy(panEnd);

}

if (state !== STATE.NONE) scope.update();

}

function onMouseUp( /* event */ ) {

if (scope.enabled === false) return;

document.removeEventListener('mousemove', onMouseMove, false);
                document.removeEventListener('mouseup', onMouseUp, false);
                scope.dispatchEvent(endEvent);
                state = STATE.NONE;

}

function onMouseWheel(event) {

if (scope.enabled === false || scope.noZoom === true || state !== STATE.NONE) return;

event.preventDefault();
                event.stopPropagation();

var delta = 0;

if (event.wheelDelta !== undefined) { // WebKit / Opera / Explorer 9

delta = event.wheelDelta;

} else if (event.detail !== undefined) { // Firefox

delta = -event.detail;

}

if (delta > 0) {

scope.dollyOut();

} else if (delta < 0) {

scope.dollyIn();

}

scope.update();
                scope.dispatchEvent(startEvent);
                scope.dispatchEvent(endEvent);

}

function onKeyDown(event) {

if (scope.enabled === false || scope.noKeys === true || scope.noPan === true) return;

switch (event.keyCode) {

case scope.keys.UP:
                        scope.pan(0, scope.keyPanSpeed);
                        scope.update();
                        break;

case scope.keys.BOTTOM:
                        scope.pan(0, -scope.keyPanSpeed);
                        scope.update();
                        break;

case scope.keys.LEFT:
                        scope.pan(scope.keyPanSpeed, 0);
                        scope.update();
                        break;

case scope.keys.RIGHT:
                        scope.pan(-scope.keyPanSpeed, 0);
                        scope.update();
                        break;

}

function touchstart(event) {

if (scope.enabled === false) return;

switch (event.touches.length) {

case 1: // one-fingered touch: rotate

if (scope.noRotate === true) return;

state = STATE.TOUCH_ROTATE;

rotateStart.set(event.touches[0].pageX, event.touches[0].pageY);
                        break;

case 2: // two-fingered touch: dolly

if (scope.noZoom === true) return;

state = STATE.TOUCH_DOLLY;

var dx = event.touches[0].pageX - event.touches[1].pageX;
                        var dy = event.touches[0].pageY - event.touches[1].pageY;
                        var distance = Math.sqrt(dx * dx + dy * dy);
                        dollyStart.set(0, distance);
                        break;

case 3: // three-fingered touch: pan

if (scope.noPan === true) return;

state = STATE.TOUCH_PAN;

panStart.set(event.touches[0].pageX, event.touches[0].pageY);
                        break;

default:

state = STATE.NONE;

}

if (state !== STATE.NONE) scope.dispatchEvent(startEvent);

}

function touchmove(event) {

if (scope.enabled === false) return;

event.preventDefault();
                event.stopPropagation();

var element = scope.domElement === document ? scope.domElement.body : scope.domElement;

switch (event.touches.length) {

case 1: // one-fingered touch: rotate

if (scope.noRotate === true) return;
                        if (state !== STATE.TOUCH_ROTATE) return;

rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY);
                        rotateDelta.subVectors(rotateEnd, rotateStart);

// rotating across whole screen goes 360 degrees around
                        scope.rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed);
                        // rotating up and down along whole screen attempts to go 360, but limited to 180
                        scope.rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed);

rotateStart.copy(rotateEnd);

scope.update();
                        break;

case 2: // two-fingered touch: dolly

if (scope.noZoom === true) return;
                        if (state !== STATE.TOUCH_DOLLY) return;

var dx = event.touches[0].pageX - event.touches[1].pageX;
                        var dy = event.touches[0].pageY - event.touches[1].pageY;
                        var distance = Math.sqrt(dx * dx + dy * dy);

dollyEnd.set(0, distance);
                        dollyDelta.subVectors(dollyEnd, dollyStart);

if (dollyDelta.y > 0) {

scope.dollyOut();

} else if (dollyDelta.y < 0) {

scope.dollyIn();

}

dollyStart.copy(dollyEnd);

scope.update();
                        break;

case 3: // three-fingered touch: pan

if (scope.noPan === true) return;
                        if (state !== STATE.TOUCH_PAN) return;

panEnd.set(event.touches[0].pageX, event.touches[0].pageY);
                        panDelta.subVectors(panEnd, panStart);

scope.pan(panDelta.x, panDelta.y);

panStart.copy(panEnd);

scope.update();
                        break;

default:

state = STATE.NONE;

}

function touchend( /* event */ ) {

if (scope.enabled === false) return;

scope.dispatchEvent(endEvent);
                state = STATE.NONE;

}

this.domElement.addEventListener('contextmenu', function(event) {
                event.preventDefault();
            }, false);
            this.domElement.addEventListener('mousedown', onMouseDown, false);
            this.domElement.addEventListener('mousewheel', onMouseWheel, false);
            this.domElement.addEventListener('DOMMouseScroll', onMouseWheel, false); // firefox

this.domElement.addEventListener('touchstart', touchstart, false);
            this.domElement.addEventListener('touchend', touchend, false);
            this.domElement.addEventListener('touchmove', touchmove, false);

window.addEventListener('keydown', onKeyDown, false);

// force an update at start
            this.update();

};

THREE.OrbitControls.prototype = Object.create(THREE.EventDispatcher.prototype);
        THREE.OrbitControls.prototype.constructor = THREE.OrbitControls;

module.exports = THREE.OrbitControls;

}, {}]
}, {}, [9]);

编译

CSS

HTML

1 million particles using curl noise + fbo on ThreeJS 关于动画性能的测试用例。 Source: https://gist.github.com/paulirish/523692

three, 性能

编辑器支持Emmet

快捷键

1 million particles using curl noise + fbo on ThreeJS 关于动画性能的测试用例。 Source: https://gist.github.com/paulirish/523692

three, 性能

Three.js 粒子溶解动画/显微镜下的细菌活动图

HTML5/Three.js 百万粒子构成的云图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：