commit bundle to master

Author: mourner

.gitignore

@@ -1,2 +1 @@
-demo/bundle.js
 yarn.lock

demo/bundle.js

@@ -0,0 +1,392 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (factory());
+}(this, (function () { 'use strict';
+
+function createShader(gl, type, source) {
+    var shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        throw new Error(gl.getShaderInfoLog(shader));
+    }
+
+    return shader;
+}
+
+function createProgram(gl, vertexSource, fragmentSource) {
+    var program = gl.createProgram();
+
+    var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
+    var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        throw new Error(gl.getProgramInfoLog(program));
+    }
+
+    var wrapper = {program: program};
+
+    var numAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
+    for (var i = 0; i < numAttributes; i++) {
+        var attribute = gl.getActiveAttrib(program, i);
+        wrapper[attribute.name] = gl.getAttribLocation(program, attribute.name);
+    }
+    var numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+    for (i = 0; i < numUniforms; i++) {
+        var uniform = gl.getActiveUniform(program, i);
+        wrapper[uniform.name] = gl.getUniformLocation(program, uniform.name);
+    }
+
+    return wrapper;
+}
+
+function createTexture(gl, filter, data, width, height) {
+    var texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+    if (data instanceof Uint8Array) {
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+    } else {
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, data);
+    }
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    return texture;
+}
+
+function bindTexture(gl, texture, unit) {
+    gl.activeTexture(gl.TEXTURE0 + unit);
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+}
+
+function createBuffer(gl, data) {
+    var buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    return buffer;
+}
+
+function bindAttribute(gl, buffer, attribute, numComponents) {
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.enableVertexAttribArray(attribute);
+    gl.vertexAttribPointer(attribute, numComponents, gl.FLOAT, false, 0, 0);
+}
+
+function bindFramebuffer(gl, framebuffer, texture) {
+    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+    if (texture) {
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+    }
+}
+
+var drawVert = "precision mediump float;\n\nattribute float a_index;\n\nuniform sampler2D u_particles;\nuniform float u_particles_res;\n\nvarying vec2 v_particle_pos;\n\nvoid main() {\n    vec4 color = texture2D(u_particles, vec2(\n        fract(a_index / u_particles_res),\n        floor(a_index / u_particles_res) / u_particles_res));\n\n    // decode current particle position from the pixel's RGBA value\n    v_particle_pos = vec2(\n        color.r / 255.0 + color.b,\n        color.g / 255.0 + color.a);\n\n    gl_PointSize = 1.0;\n    gl_Position = vec4(2.0 * v_particle_pos.x - 1.0, 1.0 - 2.0 * v_particle_pos.y, 0, 1);\n}\n";
+
+var drawFrag = "precision mediump float;\n\nuniform sampler2D u_wind;\nuniform vec2 u_wind_min;\nuniform vec2 u_wind_max;\nuniform sampler2D u_color_ramp;\n\nvarying vec2 v_particle_pos;\n\nvoid main() {\n    vec2 velocity = mix(u_wind_min, u_wind_max, texture2D(u_wind, v_particle_pos).rg);\n    float speed_t = length(velocity) / length(u_wind_max);\n\n    // color ramp is encoded in a 16x16 texture\n    vec2 ramp_pos = vec2(\n        fract(16.0 * speed_t),\n        floor(16.0 * speed_t) / 16.0);\n\n    gl_FragColor = texture2D(u_color_ramp, ramp_pos);\n}\n";
+
+var quadVert = "precision mediump float;\n\nattribute vec2 a_pos;\n\nvarying vec2 v_tex_pos;\n\nvoid main() {\n    v_tex_pos = a_pos;\n    gl_Position = vec4(1.0 - 2.0 * a_pos, 0, 1);\n}\n";
+
+var screenFrag = "precision mediump float;\n\nuniform sampler2D u_screen;\nuniform float u_opacity;\n\nvarying vec2 v_tex_pos;\n\nvoid main() {\n    vec4 color = texture2D(u_screen, 1.0 - v_tex_pos);\n    // a hack to guarantee opacity fade out even with a value close to 1.0\n    gl_FragColor = vec4(floor(255.0 * color * u_opacity) / 255.0);\n}\n";
+
+var updateFrag = "precision highp float;\n\nuniform sampler2D u_particles;\nuniform sampler2D u_wind;\nuniform vec2 u_wind_res;\nuniform vec2 u_wind_min;\nuniform vec2 u_wind_max;\nuniform float u_rand_seed;\nuniform float u_speed_factor;\nuniform float u_drop_rate;\nuniform float u_drop_rate_bump;\n\nvarying vec2 v_tex_pos;\n\n// pseudo-random generator\nconst vec3 rand_constants = vec3(12.9898, 78.233, 4375.85453);\nfloat rand(const vec2 co) {\n    float t = dot(rand_constants.xy, co);\n    return fract(sin(t) * (rand_constants.z + t));\n}\n\n// wind speed lookup; use manual bilinear filtering based on 4 adjacent pixels for smooth interpolation\nvec2 lookup_wind(const vec2 uv) {\n    // return texture2D(u_wind, uv).rg; // lower-res hardware filtering\n    vec2 px = 1.0 / u_wind_res;\n    vec2 vc = (floor(uv * u_wind_res)) * px;\n    vec2 f = fract(uv * u_wind_res);\n    vec2 tl = texture2D(u_wind, vc).rg;\n    vec2 tr = texture2D(u_wind, vc + vec2(px.x, 0)).rg;\n    vec2 bl = texture2D(u_wind, vc + vec2(0, px.y)).rg;\n    vec2 br = texture2D(u_wind, vc + px).rg;\n    return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);\n}\n\nvoid main() {\n    vec4 color = texture2D(u_particles, v_tex_pos);\n    vec2 pos = vec2(\n        color.r / 255.0 + color.b,\n        color.g / 255.0 + color.a); // decode particle position from pixel RGBA\n\n    vec2 velocity = mix(u_wind_min, u_wind_max, lookup_wind(pos));\n    float speed_t = length(velocity) / length(u_wind_max);\n\n    // take EPSG:4236 distortion into account for calculating where the particle moved\n    float distortion = max(0.1, cos(radians(pos.y * 180.0 - 90.0)));\n    vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;\n\n    // a random seed to use for the particle drop\n    vec2 seed = (pos + v_tex_pos) * u_rand_seed;\n\n    // drop rate is a chance a particle will restart at random position, to avoid degeneration\n    float dropRate = u_drop_rate + speed_t * u_drop_rate_bump;\n    float drop = step(1.0 - dropRate, rand(seed));\n    pos = mix(fract(1.0 + pos + offset), vec2(rand(seed + 1.3), rand(seed + 2.1)), drop);\n\n    // encode the new particle position back into RGBA\n    gl_FragColor = vec4(\n        fract(pos * 255.0),\n        floor(pos * 255.0) / 255.0);\n}\n";
+
+var defaultRampColors = {
+    0.0: '#3288bd',
+    0.1: '#66c2a5',
+    0.2: '#abdda4',
+    0.3: '#e6f598',
+    0.4: '#fee08b',
+    0.5: '#fdae61',
+    0.6: '#f46d43',
+    1.0: '#d53e4f'
+};
+
+class WindGL {
+    constructor(gl) {
+        this.gl = gl;
+
+        this.fadeOpacity = 0.996; // how fast the particle trails fade on each frame
+        this.speedFactor = 0.25; // how fast the particles move
+        this.dropRate = 0.003; // how often the particles move to a random place
+        this.dropRateBump = 0.01; // drop rate increase relative to individual particle speed
+
+        this.drawProgram = createProgram(gl, drawVert, drawFrag);
+        this.screenProgram = createProgram(gl, quadVert, screenFrag);
+        this.updateProgram = createProgram(gl, quadVert, updateFrag);
+
+        this.quadBuffer = createBuffer(gl, new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]));
+        this.framebuffer = gl.createFramebuffer();
+
+        this.setColorRamp(defaultRampColors);
+        this.resize();
+    }
+
+    resize() {
+        var gl = this.gl;
+        var emptyPixels = new Uint8Array(gl.canvas.width * gl.canvas.height * 4);
+        // screen textures to hold the drawn screen for the previous and the current frame
+        this.backgroundTexture = createTexture(gl, gl.NEAREST, emptyPixels, gl.canvas.width, gl.canvas.height);
+        this.screenTexture = createTexture(gl, gl.NEAREST, emptyPixels, gl.canvas.width, gl.canvas.height);
+    }
+
+    setColorRamp(colors) {
+        // lookup texture for colorizing the particles according to their speed
+        this.colorRampTexture = createTexture(this.gl, this.gl.LINEAR, getColorRamp(colors), 16, 16);
+    }
+
+    set numParticles(numParticles) {
+        var gl = this.gl;
+
+        // we create a square texture where each pixel will hold a particle position encoded as RGBA
+        var particleRes = this.particleStateResolution = Math.ceil(Math.sqrt(numParticles));
+        this._numParticles = particleRes * particleRes;
+
+        var particleState = new Uint8Array(this._numParticles * 4);
+        for (var i = 0; i < particleState.length; i++) {
+            particleState[i] = Math.floor(Math.random() * 256); // randomize the initial particle positions
+        }
+        // textures to hold the particle state for the current and the next frame
+        this.particleStateTexture0 = createTexture(gl, gl.NEAREST, particleState, particleRes, particleRes);
+        this.particleStateTexture1 = createTexture(gl, gl.NEAREST, particleState, particleRes, particleRes);
+
+        var particleIndices = new Float32Array(this._numParticles);
+        for (i = 0; i < this._numParticles; i++) particleIndices[i] = i;
+        this.particleIndexBuffer = createBuffer(gl, particleIndices);
+    }
+    get numParticles() {
+        return this._numParticles;
+    }
+
+    setWind(windData) {
+        this.windData = windData;
+        this.windTexture = createTexture(this.gl, this.gl.LINEAR, windData.image);
+    }
+
+    draw() {
+        var gl = this.gl;
+        gl.disable(gl.DEPTH_TEST);
+        gl.disable(gl.STENCIL_TEST);
+
+        bindTexture(gl, this.windTexture, 0);
+        bindTexture(gl, this.particleStateTexture0, 1);
+
+        this.drawScreen();
+        this.updateParticles();
+    }
+
+    drawScreen() {
+        var gl = this.gl;
+        // draw the screen into a temporary framebuffer to retain it as the background on the next frame
+        bindFramebuffer(gl, this.framebuffer, this.screenTexture);
+        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+
+        this.drawTexture(this.backgroundTexture, this.fadeOpacity);
+        this.drawParticles();
+
+        bindFramebuffer(gl, null);
+        // enable blending to support drawing on top of an existing background (e.g. a map)
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        this.drawTexture(this.screenTexture, 1.0);
+        gl.disable(gl.BLEND);
+
+        // save the current screen as the background for the next frame
+        var temp = this.backgroundTexture;
+        this.backgroundTexture = this.screenTexture;
+        this.screenTexture = temp;
+    }
+
+    drawTexture(texture, opacity) {
+        var gl = this.gl;
+        var program = this.screenProgram;
+        gl.useProgram(program.program);
+
+        bindAttribute(gl, this.quadBuffer, program.a_pos, 2);
+        bindTexture(gl, texture, 2);
+        gl.uniform1i(program.u_screen, 2);
+        gl.uniform1f(program.u_opacity, opacity);
+
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+    }
+
+    drawParticles() {
+        var gl = this.gl;
+        var program = this.drawProgram;
+        gl.useProgram(program.program);
+
+        bindAttribute(gl, this.particleIndexBuffer, program.a_index, 1);
+        bindTexture(gl, this.colorRampTexture, 2);
+
+        gl.uniform1i(program.u_wind, 0);
+        gl.uniform1i(program.u_particles, 1);
+        gl.uniform1i(program.u_color_ramp, 2);
+
+        gl.uniform1f(program.u_particles_res, this.particleStateResolution);
+        gl.uniform2f(program.u_wind_min, this.windData.uMin, this.windData.vMin);
+        gl.uniform2f(program.u_wind_max, this.windData.uMax, this.windData.vMax);
+
+        gl.drawArrays(gl.POINTS, 0, this._numParticles);
+    }
+
+    updateParticles() {
+        var gl = this.gl;
+        bindFramebuffer(gl, this.framebuffer, this.particleStateTexture1);
+        gl.viewport(0, 0, this.particleStateResolution, this.particleStateResolution);
+
+        var program = this.updateProgram;
+        gl.useProgram(program.program);
+
+        bindAttribute(gl, this.quadBuffer, program.a_pos, 2);
+
+        gl.uniform1i(program.u_wind, 0);
+        gl.uniform1i(program.u_particles, 1);
+
+        gl.uniform1f(program.u_rand_seed, Math.random());
+        gl.uniform2f(program.u_wind_res, this.windData.width, this.windData.height);
+        gl.uniform2f(program.u_wind_min, this.windData.uMin, this.windData.vMin);
+        gl.uniform2f(program.u_wind_max, this.windData.uMax, this.windData.vMax);
+        gl.uniform1f(program.u_speed_factor, this.speedFactor);
+        gl.uniform1f(program.u_drop_rate, this.dropRate);
+        gl.uniform1f(program.u_drop_rate_bump, this.dropRateBump);
+
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+        // swap the particle state textures so the new one becomes the current one
+        var temp = this.particleStateTexture0;
+        this.particleStateTexture0 = this.particleStateTexture1;
+        this.particleStateTexture1 = temp;
+    }
+}
+
+function getColorRamp(colors) {
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+
+    canvas.width = 256;
+    canvas.height = 1;
+
+    var gradient = ctx.createLinearGradient(0, 0, 256, 0);
+    for (var stop in colors) {
+        gradient.addColorStop(+stop, colors[stop]);
+    }
+
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, 256, 1);
+
+    return new Uint8Array(ctx.getImageData(0, 0, 256, 1).data);
+}
+
+var canvas = document.getElementById('canvas');
+
+var pxRatio = Math.max(Math.floor(window.devicePixelRatio) || 1, 2);
+canvas.width = canvas.clientWidth;
+canvas.height = canvas.clientHeight;
+
+var gl = canvas.getContext('webgl', {antialiasing: false});
+
+var wind = window.wind = new WindGL(gl);
+wind.numParticles = 65536;
+
+function frame() {
+    if (wind.windData) {
+        wind.draw();
+    }
+    requestAnimationFrame(frame);
+}
+frame();
+
+var gui = new dat.GUI();
+gui.add(wind, 'numParticles', 1024, 589824);
+gui.add(wind, 'fadeOpacity', 0.96, 0.999).step(0.001).updateDisplay();
+gui.add(wind, 'speedFactor', 0.05, 1.0);
+gui.add(wind, 'dropRate', 0, 0.1);
+gui.add(wind, 'dropRateBump', 0, 0.2);
+
+var windFiles = {
+    0: '2016112000',
+    6: '2016112006',
+    12: '2016112012',
+    18: '2016112018',
+    24: '2016112100',
+    30: '2016112106',
+    36: '2016112112',
+    42: '2016112118',
+    48: '2016112200'
+};
+
+var meta = {
+    '2016-11-20+h': 0,
+    'retina resolution': false,
+    'github.com/mapbox/webgl-wind': function () {
+        window.location = 'https://github.com/mapbox/webgl-wind';
+    }
+};
+gui.add(meta, '2016-11-20+h', 0, 48, 6).onFinishChange(updateWind);
+if (pxRatio !== 1) {
+    gui.add(meta, 'retina resolution').onFinishChange(updateRetina);
+}
+gui.add(meta, 'github.com/mapbox/webgl-wind');
+updateWind(0);
+
+function updateRetina() {
+    var ratio = meta['retina resolution'] ? pxRatio : 1;
+    canvas.width = canvas.clientWidth * ratio;
+    canvas.height = canvas.clientHeight * ratio;
+    wind.resize();
+}
+
+getJSON('https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_coastline.geojson', function (data) {
+    var canvas = document.getElementById('coastline');
+    canvas.width = canvas.clientWidth * pxRatio;
+    canvas.height = canvas.clientHeight * pxRatio;
+
+    var ctx = canvas.getContext('2d');
+    ctx.lineWidth = pxRatio;
+    ctx.lineJoin = ctx.lineCap = 'round';
+    ctx.strokeStyle = 'white';
+    ctx.beginPath();
+
+    for (var i = 0; i < data.features.length; i++) {
+        var line = data.features[i].geometry.coordinates;
+        for (var j = 0; j < line.length; j++) {
+            ctx[j ? 'lineTo' : 'moveTo'](
+                (line[j][0] + 180) * canvas.width / 360,
+                (-line[j][1] + 90) * canvas.height / 180);
+        }
+    }
+    ctx.stroke();
+});
+
+function updateWind(name) {
+    getJSON('wind/' + windFiles[name] + '.json', function (windData) {
+        var windImage = new Image();
+        windData.image = windImage;
+        windImage.src = 'wind/' + windFiles[name] + '.png';
+        windImage.onload = function () {
+            wind.setWind(windData);
+        };
+    });
+}
+
+function getJSON(url, callback) {
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = 'json';
+    xhr.open('get', url, true);
+    xhr.onload = function () {
+        if (xhr.status >= 200 && xhr.status < 300) {
+            callback(xhr.response);
+        } else {
+            throw new Error(xhr.statusText);
+        }
+    };
+    xhr.send();
+}
+
+})));