Merge pull request #7251 from processing/fix/visual

Get visual tests running in 2.0
processing · Sep 7, 2024 · b1dd449 · b1dd449
2 parents 3a850c6 + 00ad3d1
commit b1dd449
Show file tree

Hide file tree

Showing 20 changed files with 545 additions and 117 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "i18next": "^19.0.2",
     "i18next-browser-languagedetector": "^4.0.1",
     "lint-staged": "^15.1.0",
+    "resemblejs": "^5.0.0",
     "rollup": "^4.9.6",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-visualizer": "^5.12.0",

diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js
@@ -140,15 +140,13 @@ p5.prototype.loadImage = async function(
                   successCallback,
                   failureCallback,
                   (pImg => {
-                    self._decrementPreload();
                     resolve(pImg);
                   }).bind(self)
                 );
               }catch(e){
                 console.error(e.toString(), e.stack);
                 if (typeof failureCallback === 'function') {
                   failureCallback(e);
-                  self._decrementPreload();
                 } else {
                   console.error(e);
                 }
@@ -160,7 +158,6 @@ p5.prototype.loadImage = async function(
           e => {
             if (typeof failureCallback === 'function') {
               failureCallback(e);
-              self._decrementPreload();
             } else {
               console.error(e);
             }
@@ -182,14 +179,12 @@ p5.prototype.loadImage = async function(
               successCallback(pImg);
             }
             resolve();
-            self._decrementPreload();
           };
 
           img.onerror = e => {
             p5._friendlyFileLoadError(0, img.src);
             if (typeof failureCallback === 'function') {
               failureCallback(e);
-              self._decrementPreload();
             } else {
               console.error(e);
             }
@@ -215,7 +210,6 @@ p5.prototype.loadImage = async function(
       p5._friendlyFileLoadError(0, path);
       if (typeof failureCallback === 'function') {
         failureCallback(e);
-        self._decrementPreload();
       } else {
         console.error(e);
       }

diff --git a/src/io/files.js b/src/io/files.js
@@ -240,7 +240,7 @@ import Renderer from '../core/p5.Renderer';
  * </code>
  * </div>
  */
-p5.prototype.loadJSON = function (...args) {
+p5.prototype.loadJSON = async function (...args) {
   p5._validateParameters('loadJSON', args);
   const path = args[0];
   let callback;
@@ -266,8 +266,7 @@ p5.prototype.loadJSON = function (...args) {
     }
   }
 
-  const self = this;
-  this.httpDo(
+  await new Promise(resolve => this.httpDo(
     path,
     'GET',
     options,
@@ -280,7 +279,7 @@ p5.prototype.loadJSON = function (...args) {
         callback(resp);
       }
 
-      self._decrementPreload();
+      resolve()
     },
     err => {
       // Error handling
@@ -292,7 +291,7 @@ p5.prototype.loadJSON = function (...args) {
         throw err;
       }
     }
-  );
+  ));
 
   return ret;
 };
@@ -431,7 +430,7 @@ p5.prototype.loadJSON = function (...args) {
  * </code>
  * </div>
  */
-p5.prototype.loadStrings = function (...args) {
+p5.prototype.loadStrings = async function (...args) {
   p5._validateParameters('loadStrings', args);
 
   const ret = [];
@@ -448,8 +447,7 @@ p5.prototype.loadStrings = function (...args) {
     }
   }
 
-  const self = this;
-  p5.prototype.httpDo.call(
+  await new Promise(resolve => p5.prototype.httpDo.call(
     this,
     args[0],
     'GET',
@@ -476,7 +474,7 @@ p5.prototype.loadStrings = function (...args) {
         callback(ret);
       }
 
-      self._decrementPreload();
+      resolve()
     },
     function (err) {
       // Error handling
@@ -488,7 +486,7 @@ p5.prototype.loadStrings = function (...args) {
         throw err;
       }
     }
-  );
+  ));
 
   return ret;
 };
@@ -563,7 +561,7 @@ p5.prototype.loadStrings = function (...args) {
  * </code>
  * </div>
  */
-p5.prototype.loadTable = function (path) {
+p5.prototype.loadTable = async function (path) {
   // p5._validateParameters('loadTable', arguments);
   let callback;
   let errorCallback;
@@ -604,8 +602,7 @@ p5.prototype.loadTable = function (path) {
 
   const t = new p5.Table();
 
-  const self = this;
-  this.httpDo(
+  await new Promise(resolve => this.httpDo(
     path,
     'GET',
     'table',
@@ -737,7 +734,7 @@ p5.prototype.loadTable = function (path) {
         callback(t);
       }
 
-      self._decrementPreload();
+      resolve()
     },
     err => {
       // Error handling
@@ -749,7 +746,7 @@ p5.prototype.loadTable = function (path) {
         console.error(err);
       }
     }
-  );
+  ));
 
   return t;
 };
@@ -929,7 +926,7 @@ function makeObject(row, headers) {
  * </code>
  * </div>
  */
-p5.prototype.loadXML = function (...args) {
+p5.prototype.loadXML = async function (...args) {
   const ret = new p5.XML();
   let callback, errorCallback;
 
@@ -944,8 +941,7 @@ p5.prototype.loadXML = function (...args) {
     }
   }
 
-  const self = this;
-  this.httpDo(
+  await new Promise(resolve => this.httpDo(
     args[0],
     'GET',
     'xml',
@@ -957,7 +953,7 @@ p5.prototype.loadXML = function (...args) {
         callback(ret);
       }
 
-      self._decrementPreload();
+      resolve()
     },
     function (err) {
       // Error handling
@@ -969,7 +965,7 @@ p5.prototype.loadXML = function (...args) {
         throw err;
       }
     }
-  );
+  ));
 
   return ret;
 };
@@ -1000,11 +996,10 @@ p5.prototype.loadXML = function (...args) {
  * }
  * </code></div>
  */
-p5.prototype.loadBytes = function (file, callback, errorCallback) {
+p5.prototype.loadBytes = async function (file, callback, errorCallback) {
   const ret = {};
 
-  const self = this;
-  this.httpDo(
+  await new Promise(resolve => this.httpDo(
     file,
     'GET',
     'arrayBuffer',
@@ -1015,7 +1010,7 @@ p5.prototype.loadBytes = function (file, callback, errorCallback) {
         callback(ret);
       }
 
-      self._decrementPreload();
+      resolve();
     },
     err => {
       // Error handling
@@ -1027,7 +1022,7 @@ p5.prototype.loadBytes = function (file, callback, errorCallback) {
         throw err;
       }
     }
-  );
+  ));
   return ret;
 };
 

diff --git a/src/typography/loading_displaying.js b/src/typography/loading_displaying.js
@@ -126,12 +126,11 @@ import '../core/friendly_errors/fes_core';
  * </code>
  * </div>
  */
-p5.prototype.loadFont = function(path, onSuccess, onError) {
+p5.prototype.loadFont = async function(path, onSuccess, onError) {
   p5._validateParameters('loadFont', arguments);
   const p5Font = new p5.Font(this);
 
-  const self = this;
-  opentype.load(path, (err, font) => {
+  await new Promise(resolve => opentype.load(path, (err, font) => {
     if (err) {
       p5._friendlyFileLoadError(4, path);
       if (typeof onError !== 'undefined') {
@@ -146,8 +145,7 @@ p5.prototype.loadFont = function(path, onSuccess, onError) {
     if (typeof onSuccess !== 'undefined') {
       onSuccess(p5Font);
     }
-
-    self._decrementPreload();
+    resolve();
 
     // check that we have an acceptable font type
     const validFontTypes = ['ttf', 'otf', 'woff', 'woff2'];
@@ -174,7 +172,7 @@ p5.prototype.loadFont = function(path, onSuccess, onError) {
       );
       document.head.appendChild(newStyle);
     }
-  });
+  }));
 
   return p5Font;
 };

diff --git a/src/webgl/loading.js b/src/webgl/loading.js
@@ -335,7 +335,7 @@ import './p5.Geometry';
  * @param  {Boolean} [options.flipV]
  * @return {p5.Geometry} new <a href="#/p5.Geometry">p5.Geometry</a> object.
  */
-p5.prototype.loadModel = function (path, options) {
+p5.prototype.loadModel = async function (path, options) {
   p5._validateParameters('loadModel', arguments);
   let normalize = false;
   let successCallback;
@@ -420,7 +420,7 @@ p5.prototype.loadModel = function (path, options) {
     }
   }
   if (fileType.match(/\.stl$/i)) {
-    this.httpDo(
+    await new Promise(resolve => this.httpDo(
       path,
       'GET',
       'arrayBuffer',
@@ -439,15 +439,15 @@ p5.prototype.loadModel = function (path, options) {
           model.flipV();
         }
 
-        self._decrementPreload();
+        resolve();
         if (typeof successCallback === 'function') {
           successCallback(model);
         }
       },
       failureCallback
-    );
+    ));
   } else if (fileType.match(/\.obj$/i)) {
-    this.loadStrings(
+    await new Promise(resolve => this.loadStrings(
       path,
       async lines => {
         try {
@@ -474,14 +474,14 @@ p5.prototype.loadModel = function (path, options) {
             model.flipV();
           }
 
-          self._decrementPreload();
+          resolve();
           if (typeof successCallback === 'function') {
             successCallback(model);
           }
         }
       },
       failureCallback
-    );
+    ));
   } else {
     p5._friendlyFileLoadError(3, path);
     if (failureCallback) {
@@ -665,6 +665,7 @@ function parseObj(model, lines, materials = {}) {
                 model.vertexColors.push(materialDiffuseColor[0]);
                 model.vertexColors.push(materialDiffuseColor[1]);
                 model.vertexColors.push(materialDiffuseColor[2]);
+                model.vertexColors.push(1);
               }
             } else {
               hasColorlessVertices = true;

diff --git a/test/unit/visual/cases/webgl.js b/test/unit/visual/cases/webgl.js
@@ -87,7 +87,7 @@ visualSuite('WebGL', function() {
     visualTest('OBJ model with MTL file displays diffuse colors correctly', function(p5, screenshot) {
       return new Promise(resolve => {
         p5.createCanvas(50, 50, p5.WEBGL);
-        p5.loadModel('unit/assets/octa-color.obj', model => {
+        p5.loadModel('/unit/assets/octa-color.obj', model => {
           p5.background(255);
           p5.rotateX(10 * 0.01);
           p5.rotateY(10 * 0.01);
@@ -101,7 +101,7 @@ visualSuite('WebGL', function() {
     visualTest('Object with no colors takes on fill color', function(p5, screenshot) {
       return new Promise(resolve => {
         p5.createCanvas(50, 50, p5.WEBGL);
-        p5.loadModel('unit/assets/cube.obj', model => {
+        p5.loadModel('/unit/assets/cube.obj', model => {
           p5.background(255);
           p5.fill('blue'); // Setting a fill color
           p5.rotateX(p5.frameCount * 0.01);
@@ -117,8 +117,8 @@ visualSuite('WebGL', function() {
       'Object with different texture coordinates per use of vertex keeps the coordinates intact',
       async function(p5, screenshot) {
         p5.createCanvas(50, 50, p5.WEBGL);
-        const tex = await new Promise(resolve => p5.loadImage('unit/assets/cat.jpg', resolve));
-        const cube = await new Promise(resolve => p5.loadModel('unit/assets/cube-textures.obj', resolve));
+        const tex = await new Promise(resolve => p5.loadImage('/unit/assets/cat.jpg', resolve));
+        const cube = await new Promise(resolve => p5.loadModel('/unit/assets/cube-textures.obj', resolve));
         cube.normalize();
         p5.background(255);
         p5.texture(tex);

diff --git a/...eenshots/Typography/textFont() with default fonts/With the default font/000.png b/...eenshots/Typography/textFont() with default fonts/With the default font/000.png
diff --git a/...ypography/textFont() with default fonts/With the default monospace font/000.png b/...ypography/textFont() with default fonts/With the default monospace font/000.png
diff --git a/...WebGL/3DModel/OBJ model with MTL file displays diffuse colors correctly/000.png b/...WebGL/3DModel/OBJ model with MTL file displays diffuse colors correctly/000.png
diff --git a/...rent texture coordinates per use of vertex keeps the coordinates intact/000.png b/...rent texture coordinates per use of vertex keeps the coordinates intact/000.png
diff --git a/...ual/screenshots/WebGL/3DModel/Object with no colors takes on fill color/000.png b/...ual/screenshots/WebGL/3DModel/Object with no colors takes on fill color/000.png
diff --git a/test/unit/visual/screenshots/WebGL/Camera/2D objects maintain correct size/000.png b/test/unit/visual/screenshots/WebGL/Camera/2D objects maintain correct size/000.png
diff --git a/...t/visual/screenshots/WebGL/Camera/Custom camera before and after resize/000.png b/...t/visual/screenshots/WebGL/Camera/Custom camera before and after resize/000.png
diff --git a/...t/visual/screenshots/WebGL/Camera/Custom camera before and after resize/001.png b/...t/visual/screenshots/WebGL/Camera/Custom camera before and after resize/001.png
diff --git a/...visual/screenshots/WebGL/Lights/Fill color and default ambient material/000.png b/...visual/screenshots/WebGL/Lights/Fill color and default ambient material/000.png
diff --git a/...ts/WebGL/filter/On a framebuffer sized differently from the main canvas/000.png b/...ts/WebGL/filter/On a framebuffer sized differently from the main canvas/000.png
diff --git a/test/unit/visual/screenshots/WebGL/filter/On a framebuffer/000.png b/test/unit/visual/screenshots/WebGL/filter/On a framebuffer/000.png