From a7c5fc6d856231d0d8785b7bfbf79cd5f9c412fc Mon Sep 17 00:00:00 2001
From: Sander Sink <ozooner@msn.com>
Date: Tue, 31 Oct 2017 22:48:51 +0200
Subject: [PATCH] Downgrading webGL precision if target hardware does not
 support highest (#4433)

* Downgrading webGL precision if target hardware does not support highest

* moved webGlPrecision to fabric property
---
 src/filters/base_filter.class.js   |  4 ++++
 src/filters/webgl_backend.class.js | 25 +++++++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/src/filters/base_filter.class.js b/src/filters/base_filter.class.js
index ca93c16a8e7..89ecea0e0e5 100644
--- a/src/filters/base_filter.class.js
+++ b/src/filters/base_filter.class.js
@@ -66,6 +66,10 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Imag
     if (!this.vertexSource || !this.fragmentSource) {
       return;
     }
+    if(fabric.webGlPrecision !== 'highp'){
+      fragmentSource = fragmentSource.replace(/precision highp float/g, 'precision ' + fabric.webGlPrecision + ' float');
+    }
+
     var vertexShader = gl.createShader(gl.VERTEX_SHADER);
     gl.shaderSource(vertexShader, vertexSource || this.vertexSource);
     gl.compileShader(vertexShader);
diff --git a/src/filters/webgl_backend.class.js b/src/filters/webgl_backend.class.js
index ac462d56a8e..07938c750dd 100644
--- a/src/filters/webgl_backend.class.js
+++ b/src/filters/webgl_backend.class.js
@@ -2,6 +2,24 @@
 
   'use strict';
 
+
+  /**
+   * Tests if webgl supports certain precision
+   * @param {WebGL} Canvas WebGL context to test on
+   * @param {String} Precision to test can be any of following: 'lowp', 'mediump', 'highp'
+   * @returns {Boolean} Whether the user's browser WebGL supports given precision.
+   */
+  function testPrecision(gl, precision){
+    var fragmentSource = 'precision ' + precision + ' float;\nvoid main(){}';
+    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+    gl.shaderSource(fragmentShader, fragmentSource);
+    gl.compileShader(fragmentShader);        
+    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+      return false;
+    }
+    return true;
+  }
+
   /**
    * Indicate whether this filtering backend is supported by the user's browser.
    * @param {Number} tileSize check if the tileSize is supported
@@ -19,6 +37,13 @@
     if (gl) {
       fabric.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
       isSupported = fabric.maxTextureSize >= tileSize;
+      var precisions = ['highp', 'mediump', 'lowp'];
+      for(var i = 0; i < 3; i++){
+        if(testPrecision(gl, precisions[i])){
+          fabric.webGlPrecision = precisions[i];
+          break;
+        };
+      }
     }
     this.isSupported = isSupported;
     return isSupported;