fix capture at high quality

script.js

@@ -1,3 +1,27 @@
+/*
+MIT License
+
+Copyright (c) 2017 Pavel Dobryakov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
 'use strict';
 
 const canvas = document.getElementsByTagName('canvas')[0];
@@ -6,6 +30,7 @@ resizeCanvas();
 let config = {
     SIM_RESOLUTION: 128,
     DYE_RESOLUTION: 1024,
+    CAPTURE_RESOLUTION: 512,
     DENSITY_DISSIPATION: 2,
     VELOCITY_DISSIPATION: 2,
     PRESSURE: 0.8,
@@ -49,7 +74,6 @@ const { gl, ext } = getWebGLContext(canvas);
 
 if (isMobile()) {
     config.DYE_RESOLUTION = 512;
-    config.SHADING = false;
 }
 if (!ext.supportLinearFiltering) {
     config.DYE_RESOLUTION = 512;
@@ -97,10 +121,7 @@ function getWebGLContext (canvas) {
         formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
     }
 
-    if (formatRGBA == null)
+    ga('send', 'event', isWebGL2 ? 'webgl2' : 'webgl', formatRGBA == null ? 'not supported' : 'supported');
-        ga('send', 'event', isWebGL2 ? 'webgl2' : 'webgl', 'not supported');
-    else
-        ga('send', 'event', isWebGL2 ? 'webgl2' : 'webgl', 'supported');
 
     return {
         gl,
@@ -149,9 +170,7 @@ function supportRenderTextureFormat (gl, internalFormat, format, type) {
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
 
     const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
-    if (status != gl.FRAMEBUFFER_COMPLETE)
+    return status == gl.FRAMEBUFFER_COMPLETE;
-        return false;
-    return true;
 }
 
 function startGUI () {
@@ -225,51 +244,65 @@ function startGUI () {
         gui.close();
 }
 
+function isMobile () {
+    return /Mobi|Android/i.test(navigator.userAgent);
+}
+
 function captureScreenshot () {
-    colorProgram.bind();
+    let res = getResolution(config.CAPTURE_RESOLUTION);
-    gl.uniform4f(colorProgram.uniforms.color, 0, 0, 0, 1);
+    let target = createFBO(res.width, res.height, ext.formatRGBA.internalFormat, ext.formatRGBA.format, ext.halfFloatTexType, gl.NEAREST);
-    blit(density.write.fbo);
+    render(target);
 
-    render(density.write.fbo);
+    let texture = framebufferToTexture(target);
-    gl.bindFramebuffer(gl.FRAMEBUFFER, density.write.fbo);
+    texture = normalizeTexture(texture, target.width, target.height);
 
-    let length = dyeWidth * dyeHeight * 4;
+    let captureCanvas = textureToCanvas(texture, target.width, target.height);
-    let pixels = new Float32Array(length);
+    let datauri = captureCanvas.toDataURL();
-    gl.readPixels(0, 0, dyeWidth, dyeHeight, gl.RGBA, gl.FLOAT, pixels);
+    downloadURI('fluid.png', datauri);
+    URL.revokeObjectURL(datauri);
+}
 
-    let newPixels = new Uint8Array(length);
+function framebufferToTexture (target) {
+    gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo);
+    let length = target.width * target.height * 4;
+    let texture = new Float32Array(length);
+    gl.readPixels(0, 0, target.width, target.height, gl.RGBA, gl.FLOAT, texture);
+    return texture;
+}
 
+function normalizeTexture (texture, width, height) {
+    let result = new Uint8Array(texture.length);
     let id = 0;
-    for (let i = dyeHeight - 1; i >= 0; i--) {
+    for (let i = height - 1; i >= 0; i--) {
-        for (let j = 0; j < dyeWidth; j++) {
+        for (let j = 0; j < width; j++) {
-            let nid = i * dyeWidth * 4 + j * 4;
+            let nid = i * width * 4 + j * 4;
-            newPixels[nid + 0] = clamp01(pixels[id + 0]) * 255;
+            result[nid + 0] = clamp01(texture[id + 0]) * 255;
-            newPixels[nid + 1] = clamp01(pixels[id + 1]) * 255;
+            result[nid + 1] = clamp01(texture[id + 1]) * 255;
-            newPixels[nid + 2] = clamp01(pixels[id + 2]) * 255;
+            result[nid + 2] = clamp01(texture[id + 2]) * 255;
-            newPixels[nid + 3] = clamp01(pixels[id + 3]) * 255;
+            result[nid + 3] = clamp01(texture[id + 3]) * 255;
             id += 4;
         }
     }
-
+    return result;
-    let captureCanvas = document.createElement('canvas');
-    let ctx = captureCanvas.getContext('2d');
-    captureCanvas.width = dyeWidth;
-    captureCanvas.height = dyeHeight;
-
-    let imageData = ctx.createImageData(dyeWidth, dyeHeight);
-    imageData.data.set(newPixels);
-    ctx.putImageData(imageData, 0, 0);
-    let datauri = captureCanvas.toDataURL();
-
-    downloadURI('fluid.png', datauri);
-
-    URL.revokeObjectURL(datauri);
 }
 
 function clamp01 (input) {
     return Math.min(Math.max(input, 0), 1);
 }
 
+function textureToCanvas (texture, width, height) {
+    let captureCanvas = document.createElement('canvas');
+    let ctx = captureCanvas.getContext('2d');
+    captureCanvas.width = width;
+    captureCanvas.height = height;
+
+    let imageData = ctx.createImageData(width, height);
+    imageData.data.set(texture);
+    ctx.putImageData(imageData, 0, 0);
+
+    return captureCanvas;
+}
+
 function downloadURI (filename, uri) {
     let link = document.createElement('a');
     link.download = filename;
@@ -279,10 +312,6 @@ function downloadURI (filename, uri) {
     document.body.removeChild(link);
 }
 
-function isMobile () {
-    return /Mobi|Android/i.test(navigator.userAgent);
-}
-
 class GLProgram {
     constructor (vertexShader, fragmentShader) {
         this.uniforms = {};
@@ -721,11 +750,7 @@ const blit = (() => {
     }
 })();
 
-let simWidth;
+let dye;
-let simHeight;
-let dyeWidth;
-let dyeHeight;
-let density;
 let velocity;
 let divergence;
 let curl;
@@ -757,30 +782,25 @@ function initFramebuffers () {
     let simRes = getResolution(config.SIM_RESOLUTION);
     let dyeRes = getResolution(config.DYE_RESOLUTION);
 
-    simWidth  = simRes.width;
-    simHeight = simRes.height;
-    dyeWidth  = dyeRes.width;
-    dyeHeight = dyeRes.height;
-
     const texType = ext.halfFloatTexType;
     const rgba    = ext.formatRGBA;
     const rg      = ext.formatRG;
     const r       = ext.formatR;
     const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST;
 
-    if (density == null)
+    if (dye == null)
-        density = createDoubleFBO(dyeWidth, dyeHeight, rgba.internalFormat, rgba.format, texType, filtering);
+        dye = createDoubleFBO(dyeRes.width, dyeRes.height, rgba.internalFormat, rgba.format, texType, filtering);
     else
-        density = resizeDoubleFBO(density, dyeWidth, dyeHeight, rgba.internalFormat, rgba.format, texType, filtering);
+        dye = resizeDoubleFBO(dye, dyeRes.width, dyeRes.height, rgba.internalFormat, rgba.format, texType, filtering);
 
     if (velocity == null)
-        velocity = createDoubleFBO(simWidth, simHeight, rg.internalFormat, rg.format, texType, filtering);
+        velocity = createDoubleFBO(simRes.width, simRes.height, rg.internalFormat, rg.format, texType, filtering);
     else
-        velocity = resizeDoubleFBO(velocity, simWidth, simHeight, rg.internalFormat, rg.format, texType, filtering);
+        velocity = resizeDoubleFBO(velocity, simRes.width, simRes.height, rg.internalFormat, rg.format, texType, filtering);
 
-    divergence = createFBO      (simWidth, simHeight, r.internalFormat, r.format, texType, gl.NEAREST);
+    divergence = createFBO      (simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST);
-    curl       = createFBO      (simWidth, simHeight, r.internalFormat, r.format, texType, gl.NEAREST);
+    curl       = createFBO      (simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST);
-    pressure   = createDoubleFBO(simWidth, simHeight, r.internalFormat, r.format, texType, gl.NEAREST);
+    pressure   = createDoubleFBO(simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST);
 
     initBloomFramebuffers();
 }
@@ -840,7 +860,14 @@ function createDoubleFBO (w, h, internalFormat, format, type, param) {
     let fbo1 = createFBO(w, h, internalFormat, format, type, param);
     let fbo2 = createFBO(w, h, internalFormat, format, type, param);
 
+    let texelSizeX = 1.0 / w;
+    let texelSizeY = 1.0 / h;
+
     return {
+        width: w,
+        height: h,
+        texelSizeX,
+        texelSizeY,
         get read () {
             return fbo1;
         },
@@ -870,8 +897,14 @@ function resizeFBO (target, w, h, internalFormat, format, type, param) {
 }
 
 function resizeDoubleFBO (target, w, h, internalFormat, format, type, param) {
+    if (target.width == w && target.height == h)
+        return target;
     target.read = resizeFBO(target.read, w, h, internalFormat, format, type, param);
     target.write = createFBO(w, h, internalFormat, format, type, param);
+    target.width = w;
+    target.height = h;
+    target.texelSizeX = 1.0 / w;
+    target.texelSizeY = 1.0 / h;
     return target;
 }
 
@@ -971,15 +1004,15 @@ function applyInputs () {
 
 function step (dt) {
     gl.disable(gl.BLEND);
-    gl.viewport(0, 0, simWidth, simHeight);
+    gl.viewport(0, 0, velocity.width, velocity.height);
 
     curlProgram.bind();
-    gl.uniform2f(curlProgram.uniforms.texelSize, 1.0 / simWidth, 1.0 / simHeight);
+    gl.uniform2f(curlProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
     gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read.attach(0));
     blit(curl.fbo);
 
     vorticityProgram.bind();
-    gl.uniform2f(vorticityProgram.uniforms.texelSize, 1.0 / simWidth, 1.0 / simHeight);
+    gl.uniform2f(vorticityProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
     gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read.attach(0));
     gl.uniform1i(vorticityProgram.uniforms.uCurl, curl.attach(1));
     gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL);
@@ -988,7 +1021,7 @@ function step (dt) {
     velocity.swap();
 
     divergenceProgram.bind();
-    gl.uniform2f(divergenceProgram.uniforms.texelSize, 1.0 / simWidth, 1.0 / simHeight);
+    gl.uniform2f(divergenceProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
     gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read.attach(0));
     blit(divergence.fbo);
 
@@ -999,7 +1032,7 @@ function step (dt) {
     pressure.swap();
 
     pressureProgram.bind();
-    gl.uniform2f(pressureProgram.uniforms.texelSize, 1.0 / simWidth, 1.0 / simHeight);
+    gl.uniform2f(pressureProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
     gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence.attach(0));
     for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) {
         gl.uniform1i(pressureProgram.uniforms.uPressure, pressure.read.attach(1));
@@ -1008,16 +1041,16 @@ function step (dt) {
     }
 
     gradienSubtractProgram.bind();
-    gl.uniform2f(gradienSubtractProgram.uniforms.texelSize, 1.0 / simWidth, 1.0 / simHeight);
+    gl.uniform2f(gradienSubtractProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
     gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressure.read.attach(0));
     gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.read.attach(1));
     blit(velocity.write.fbo);
     velocity.swap();
 
     advectionProgram.bind();
-    gl.uniform2f(advectionProgram.uniforms.texelSize, 1.0 / simWidth, 1.0 / simHeight);
+    gl.uniform2f(advectionProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
     if (!ext.supportLinearFiltering)
-        gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, 1.0 / simWidth, 1.0 / simHeight);
+        gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, velocity.texelSizeX, velocity.texelSizeY);
     let velocityId = velocity.read.attach(0);
     gl.uniform1i(advectionProgram.uniforms.uVelocity, velocityId);
     gl.uniform1i(advectionProgram.uniforms.uSource, velocityId);
@@ -1026,20 +1059,20 @@ function step (dt) {
     blit(velocity.write.fbo);
     velocity.swap();
 
-    gl.viewport(0, 0, dyeWidth, dyeHeight);
+    gl.viewport(0, 0, dye.width, dye.height);
 
     if (!ext.supportLinearFiltering)
-        gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, 1.0 / dyeWidth, 1.0 / dyeHeight);
+        gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, dye.texelSizeX, dye.texelSizeY);
     gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read.attach(0));
-    gl.uniform1i(advectionProgram.uniforms.uSource, density.read.attach(1));
+    gl.uniform1i(advectionProgram.uniforms.uSource, dye.read.attach(1));
     gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION);
-    blit(density.write.fbo);
+    blit(dye.write.fbo);
-    density.swap();
+    dye.swap();
 }
 
 function render (target) {
     if (config.BLOOM)
-        applyBloom(density.read, bloom);
+        applyBloom(dye.read, bloom);
 
     if (target == null || !config.TRANSPARENT) {
         gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
@@ -1049,42 +1082,43 @@ function render (target) {
         gl.disable(gl.BLEND);
     }
 
-    let width = target == null ? gl.drawingBufferWidth : dyeWidth;
+    let width = target == null ? gl.drawingBufferWidth : target.width;
-    let height = target == null ? gl.drawingBufferHeight : dyeHeight;
+    let height = target == null ? gl.drawingBufferHeight : target.height;
     gl.viewport(0, 0, width, height);
 
+    let fbo = target == null ? null : target.fbo;
     if (!config.TRANSPARENT)
-        drawColor(target, normalizeColor(config.BACK_COLOR));
+        drawColor(fbo, normalizeColor(config.BACK_COLOR));
     if (target == null && config.TRANSPARENT)
-        drawCheckerboard(target);
+        drawCheckerboard(fbo);
-    drawDisplay(target, width, height);
+    drawDisplay(fbo, width, height);
 }
 
-function drawColor (target, color) {
+function drawColor (fbo, color) {
     colorProgram.bind();
     gl.uniform4f(colorProgram.uniforms.color, color.r, color.g, color.b, 1);
-    blit(target);
+    blit(fbo);
 }
 
-function drawCheckerboard (target) {
+function drawCheckerboard (fbo) {
     checkerboardProgram.bind();
     gl.uniform1f(checkerboardProgram.uniforms.aspectRatio, canvas.width / canvas.height);
-    blit(target);
+    blit(fbo);
 }
 
-function drawDisplay (target, width, height) {
+function drawDisplay (fbo, width, height) {
     let program = pickDisplayProgram();
     program.bind();
     if (config.SHADING)
         gl.uniform2f(program.uniforms.texelSize, 1.0 / width, 1.0 / height);
-    gl.uniform1i(program.uniforms.uTexture, density.read.attach(0));
+    gl.uniform1i(program.uniforms.uTexture, dye.read.attach(0));
     if (config.BLOOM) {
         gl.uniform1i(program.uniforms.uBloom, bloom.attach(1));
         gl.uniform1i(program.uniforms.uDithering, ditheringTexture.attach(2));
         let scale = getTextureScale(ditheringTexture, width, height);
         gl.uniform2f(program.uniforms.ditherScale, scale.x, scale.y);
     }
-    blit(target);
+    blit(fbo);
 }
 
 function pickDisplayProgram () {
@@ -1162,7 +1196,7 @@ function multipleSplats (amount) {
 }
 
 function splat (x, y, dx, dy, color) {
-    gl.viewport(0, 0, simWidth, simHeight);
+    gl.viewport(0, 0, velocity.width, velocity.height);
     splatProgram.bind();
     gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read.attach(0));
     gl.uniform1f(splatProgram.uniforms.aspectRatio, canvas.width / canvas.height);
@@ -1172,11 +1206,11 @@ function splat (x, y, dx, dy, color) {
     blit(velocity.write.fbo);
     velocity.swap();
 
-    gl.viewport(0, 0, dyeWidth, dyeHeight);
+    gl.viewport(0, 0, dye.width, dye.height);
-    gl.uniform1i(splatProgram.uniforms.uTarget, density.read.attach(0));
+    gl.uniform1i(splatProgram.uniforms.uTarget, dye.read.attach(0));
     gl.uniform3f(splatProgram.uniforms.color, color.r, color.g, color.b);
-    blit(density.write.fbo);
+    blit(dye.write.fbo);
-    density.swap();
+    dye.swap();
 }
 
 function correctRadius (radius) {