fix(WebGLProbe): regression enableGLFiltering config + init bug (#…

…8301)
fabricjs · Sep 19, 2022 · f291945 · f291945
1 parent 71193d3
commit f291945
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ## [next]
 
+- fix(`WebGLProbe`): regression caused by [#8199](https://github.com/fabricjs/fabric.js/pull/8199), [#8301](https://github.com/fabricjs/fabric.js/pull/8301)
 - fix(fabric.utils) added missing import in dom_misc [#8293](https://github.com/fabricjs/fabric.js/pull/8293)
 - fix(Object): `extraParam` should not be passed to options [#8295](https://github.com/fabricjs/fabric.js/pull/8295)
 - test(): add `globalCompositeOperation` tests [#8271](https://github.com/fabricjs/fabric.js/pull/8271)
@@ -32,7 +33,7 @@
 - chore(TS): extract `initFilterBackend` from HEADER [#8199](https://github.com/fabricjs/fabric.js/pull/8199)
 - chore(TS): extract caches from HEADER [#8198](https://github.com/fabricjs/fabric.js/pull/8198)
 - Chore(TS): migrate Intersection [#8121](https://github.com/fabricjs/fabric.js/pull/8121)
-- chore(TS): es6 for  util/path.ts and more utils converted [#8201](https://github.com/fabricjs/fabric.js/pull/8201)
+- chore(TS): es6 for util/path.ts and more utils converted [#8201](https://github.com/fabricjs/fabric.js/pull/8201)
 - fix(ci): report build script failure + fix missing logs [#8188](https://github.com/fabricjs/fabric.js/pull/8188)
 - fix(): update window => fabric.window [#8209](https://github.com/fabricjs/fabric.js/pull/8209)
 - chore(TS): extract const `reNonWord` from HEADER [#8197](https://github.com/fabricjs/fabric.js/pull/8197)
@@ -88,7 +89,7 @@
 - fix(Canvas): flipped viewport transform coords [#7515](https://github.com/fabricjs/fabric.js/pull/7515)
 - fix(): cleanup merge conflict resolution artifact [#7956](https://github.com/fabricjs/fabric.js/pull/7956)
 - fix(Group): part 2 minors changes [#7916](https://github.com/fabricjs/fabric.js/pull/7916)
-- feat(fabric.Image.filter): Alpha support  for Invert filter [#7933](https://github.com/fabricjs/fabric.js/pull/7933)
+- feat(fabric.Image.filter): Alpha support for Invert filter [#7933](https://github.com/fabricjs/fabric.js/pull/7933)
 - fix(EraserBrush): visual trace while erasing [#7991](https://github.com/fabricjs/fabric.js/pull/7991)
 - fix(Point): safeguard initialization [#7961](https://github.com/fabricjs/fabric.js/pull/7961)
 - fix(Textbox): flipped `changeWidth` control behavior [#7980](https://github.com/fabricjs/fabric.js/pull/7980)
@@ -115,14 +116,14 @@
 - chore(canvas): minor cleanup [#7851](https://github.com/fabricjs/fabric.js/pull/7851)
 - docs(): fix typo, fix JSDOC for website, minors [#7853](https://github.com/fabricjs/fabric.js/pull/7853)
 - fix(Canvas): safeguard dispose [#7775](https://github.com/fabricjs/fabric.js/pull/7775)
-- fix(Polyline): safegurad _setPositionDimensions [#7850](https://github.com/fabricjs/fabric.js/pull/7850)
-- feat(ci): CLI logging and `filter` option  [#7844](https://github.com/fabricjs/fabric.js/pull/7844)
+- fix(Polyline): safegurad \_setPositionDimensions [#7850](https://github.com/fabricjs/fabric.js/pull/7850)
+- feat(ci): CLI logging and `filter` option [#7844](https://github.com/fabricjs/fabric.js/pull/7844)
 - fix(itext): stop cursor on blur [#7784](https://github.com/fabricjs/fabric.js/pull/7784)
 - fix(itext): `set` during text editing [#7837](https://github.com/fabricjs/fabric.js/pull/7837)
 - fix(Canvas): Safeguard from multiple initialization [#7776](https://github.com/fabricjs/fabric.js/pull/7776)
 - feat(): fire `contextmenu` event [#7714](https://github.com/fabricjs/fabric.js/pull/7714)
-- docs(Text):  add proper type for GraphemeBBox [#7834](https://github.com/fabricjs/fabric.js/pull/7834)
-- chore(): create an alias for getSelectionContext as  `getTopContext` [#7711](https://github.com/fabricjs/fabric.js/pull/7711)
+- docs(Text): add proper type for GraphemeBBox [#7834](https://github.com/fabricjs/fabric.js/pull/7834)
+- chore(): create an alias for getSelectionContext as `getTopContext` [#7711](https://github.com/fabricjs/fabric.js/pull/7711)
 - fix(EraserBrush): inverted erasing [#7689](https://github.com/fabricjs/fabric.js/pull/7689)
 - fix(ci): CLI `debug` and `recreate` options [#7833](https://github.com/fabricjs/fabric.js/pull/7833)
 - feat(ci): better cli [#7825](https://github.com/fabricjs/fabric.js/pull/7825)

diff --git a/src/filters/WebGLProbe.ts b/src/filters/WebGLProbe.ts
@@ -1,6 +1,7 @@
 //@ts-nocheck
 
 import { fabric } from '../../HEADER';
+import { createCanvasElement } from '../util/misc/dom';
 
 export const enum TWebGLPrecision {
   low = 'lowp',
@@ -57,10 +58,10 @@ class WebGLProbe {
    * @returns config object if true
    */
   private queryWebGL() {
-    if (this.initialized || !fabric.isLikelyNode) {
+    if (this.initialized || fabric.isLikelyNode) {
       return;
     }
-    const canvas = fabric.document.createElement('canvas');
+    const canvas = createCanvasElement();
     const gl =
       canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
     if (gl) {

diff --git a/src/filters/webgl_backend.class.ts b/src/filters/webgl_backend.class.ts
@@ -7,7 +7,10 @@ import { webGLProbe } from './WebGLProbe';
   var fabric = global.fabric;
 
   fabric.initFilterBackend = function () {
-    if (webGLProbe.isSupported(config.textureSize)) {
+    if (
+      config.enableGLFiltering &&
+      webGLProbe.isSupported(config.textureSize)
+    ) {
       return new fabric.WebglFilterBackend({ tileSize: config.textureSize });
     } else if (fabric.Canvas2dFilterBackend) {
       return new fabric.Canvas2dFilterBackend();

diff --git a/src/util/dom_misc.ts b/src/util/dom_misc.ts
@@ -1,6 +1,6 @@
 //@ts-nocheck
 
-import { fabric } from "../../HEADER";
+import { fabric } from '../../HEADER';
 
 /**
  * Wraps element with another element

diff --git a/test/unit/header.js b/test/unit/header.js
@@ -9,9 +9,4 @@
     assert.equal(fabric.SHARED_ATTRIBUTES.length, 19, 'SHARED_ATTRIBUTES is set');
   });
 
-  QUnit.test('initFilterBackend', function(assert) {
-    assert.ok(typeof fabric.initFilterBackend === 'function', 'initFilterBackend is a function');
-    assert.ok(typeof fabric.maxTextureSize === 'undefined', 'maxTextureSize is not set yet');
-    fabric.initFilterBackend();
-  });
 })();
diff --git a/test/unit/webgl.js b/test/unit/webgl.js
@@ -0,0 +1,25 @@
+
+QUnit.module('WebGL', hooks => {
+    const isNode = fabric.isLikelyNode;
+
+    hooks.afterEach(() => {
+        fabric.config.restoreDefaults();
+    });
+
+    QUnit.test('initFilterBackend exists', function (assert) {
+        assert.ok(typeof fabric.initFilterBackend === 'function', 'initFilterBackend is a function');
+    })
+
+    QUnit[isNode ? 'test' : 'skip']('initFilterBackend node', function (assert) {
+        assert.ok(fabric.initFilterBackend() instanceof fabric.Canvas2dFilterBackend, 'should init 2d backend on node');
+    });
+
+    QUnit[!isNode ? 'test' : 'skip']('initFilterBackend browser', function (assert) {
+        assert.ok(fabric.config.enableGLFiltering, 'enableGLFiltering should be enabled by default');
+        assert.ok(fabric.initFilterBackend() instanceof fabric.WebglFilterBackend, 'should init webGL backend on browser');
+        fabric.config.configure({ textureSize: Infinity });
+        assert.ok(fabric.initFilterBackend() instanceof fabric.Canvas2dFilterBackend, 'should fallback to 2d backend if textureSize is too big');
+        fabric.config.configure({ enableGLFiltering: false });
+        assert.ok(fabric.initFilterBackend() instanceof fabric.Canvas2dFilterBackend, 'should init 2d backend if enableGLFiltering is false');
+    });
+})