Merge pull request #7210 from processing/fix/webgl

Fix most WebGL tests

Author: davepagurek

eslint.config.mjs

@@ -0,0 +1,12 @@
+export default [
+  {
+    ignores: [
+      "preview/*",
+      "docs/reference/assets/**/*",
+      "docs/assets/**/*",
+      "lib/*",
+      "rollup.config.mjs",
+      "utils/sample-linter.mjs"
+    ]
+  }
+];

src/color/p5.Color.js

@@ -122,7 +122,9 @@ p5.Color = class Color {
       }else if(vals.length === 1){
         vals = [vals[0], vals[0], vals[0]];
       }
-      alpha = alpha ? alpha / pInst._colorMaxes[pInst._colorMode][3] : 1;
+      alpha = alpha !== undefined
+        ? alpha / pInst._colorMaxes[pInst._colorMode][3]
+        : 1;
 
       // _colorMode can be 'rgb', 'hsb', or 'hsl'
       // These should map to color.js color space
@@ -488,6 +490,14 @@ p5.Color = class Color {
       return to(this.color, 'hsl').coords[2] / 100 * this.maxes[this.mode][2];
     }
   }
+
+  get _array() {
+    return [...this.color.coords, this.color.alpha];
+  }
+
+  get levels() {
+    return this._array.map(v => v * 255);
+  }
 };
 
 export default p5.Color;

src/core/friendly_errors/validate_params.js

@@ -215,7 +215,7 @@ if (typeof IS_MINIFIED !== 'undefined') {
   //   if (queryResult.hasOwnProperty('overloads')) {
   //     // add all the overloads
   //     for (let i = 0; i < queryResult.overloads.length; i++) {
-  //       overloads.push({ formats: queryResult.overloads[i].params });
+  //       overloads.push({ formats: queryResult.overloads[i].params || [] });
   //     }
   //   } else {
   //     // no overloads, just add the main method definition

src/core/p5.Renderer.js

@@ -132,7 +132,8 @@ p5.Renderer = class Renderer extends p5.Element {
   }
 
   get (x, y, w, h) {
-    const pd = this._pInst._pixelDensity;
+    const pixelsState = this._pixelsState;
+    const pd = pixelsState._pixelDensity;
     const canvas = this.canvas;
 
     if (typeof x === 'undefined' && typeof y === 'undefined') {

src/core/p5.Renderer2D.js

@@ -414,7 +414,7 @@ class Renderer2D extends Renderer {
   }
 
   loadPixels() {
-    const pixelsState = this._pInst; // if called by p5.Image
+    const pixelsState = this._pixelsState; // if called by p5.Image
 
     const pd = pixelsState._pixelDensity;
     const w = this.width * pd;
@@ -430,7 +430,7 @@ class Renderer2D extends Renderer {
     // round down to get integer numbers
     x = Math.floor(x);
     y = Math.floor(y);
-    const pixelsState = this._pInst;
+    const pixelsState = this._pixelsState;
     if (imgOrCol instanceof p5.Image) {
       this.drawingContext.save();
       this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
@@ -503,7 +503,7 @@ class Renderer2D extends Renderer {
   }
 
   updatePixels(x, y, w, h) {
-    const pixelsState = this._pInst;
+    const pixelsState = this._pixelsState;
     const pd = pixelsState._pixelDensity;
     if (
       x === undefined &&

src/core/rendering.js

@@ -177,6 +177,19 @@ p5.prototype.createCanvas = function (w, h, renderer, canvas) {
         defaultId = `defaultCanvas${i}`;
         c.id = defaultId;
         c.classList.add(defaultClass);
+      } else if (
+        this._renderer &&
+        Object.getPrototypeOf(this._renderer) !== renderers[r].prototype
+      ) {
+        // Handle createCanvas() called with 2D mode after a 3D canvas is made
+        if (this.canvas.parentNode) {
+          this.canvas.parentNode.removeChild(this.canvas); //replace the existing defaultCanvas
+        }
+        const thisRenderer = this._renderer;
+        this._elements = this._elements.filter(e => e !== thisRenderer);
+        c = document.createElement('canvas');
+        c.id = defaultId;
+        c.classList.add(defaultClass);
       } else {
         // resize the default canvas if new one is created
         c = this.canvas;

src/image/loading_displaying.js

@@ -120,7 +120,7 @@ p5.prototype.loadImage = async function(
   });
 
   return fetch(path, req)
-    .then(response => {
+    .then(async response => {
       // GIF section
       const contentType = response.headers.get('content-type');
       if (contentType === null) {
@@ -129,8 +129,8 @@ p5.prototype.loadImage = async function(
         );
       }
       if (contentType && contentType.includes('image/gif')) {
-        response.arrayBuffer().then(
-          arrayBuffer => {
+        await response.arrayBuffer().then(
+          arrayBuffer => new Promise((resolve, reject) => {
             if (arrayBuffer) {
               const byteArray = new Uint8Array(arrayBuffer);
               try{
@@ -141,6 +141,7 @@ p5.prototype.loadImage = async function(
                   failureCallback,
                   (pImg => {
                     self._decrementPreload();
+                    resolve(pImg);
                   }).bind(self)
                 );
               }catch(e){
@@ -151,9 +152,11 @@ p5.prototype.loadImage = async function(
                 } else {
                   console.error(e);
                 }
+                reject(e);
               }
             }
-          },
+          })
+        ).catch(
           e => {
             if (typeof failureCallback === 'function') {
               failureCallback(e);
@@ -167,39 +170,43 @@ p5.prototype.loadImage = async function(
         // Non-GIF Section
         const img = new Image();
 
-        img.onload = () => {
-          pImg.width = pImg.canvas.width = img.width;
-          pImg.height = pImg.canvas.height = img.height;
+        await new Promise((resolve, reject) => {
+          img.onload = () => {
+            pImg.width = pImg.canvas.width = img.width;
+            pImg.height = pImg.canvas.height = img.height;
 
-          // Draw the image into the backing canvas of the p5.Image
-          pImg.drawingContext.drawImage(img, 0, 0);
-          pImg.modified = true;
-          if (typeof successCallback === 'function') {
-            successCallback(pImg);
-          }
-          self._decrementPreload();
-        };
-
-        img.onerror = e => {
-          p5._friendlyFileLoadError(0, img.src);
-          if (typeof failureCallback === 'function') {
-            failureCallback(e);
+            // Draw the image into the backing canvas of the p5.Image
+            pImg.drawingContext.drawImage(img, 0, 0);
+            pImg.modified = true;
+            if (typeof successCallback === 'function') {
+              successCallback(pImg);
+            }
+            resolve();
             self._decrementPreload();
-          } else {
-            console.error(e);
+          };
+
+          img.onerror = e => {
+            p5._friendlyFileLoadError(0, img.src);
+            if (typeof failureCallback === 'function') {
+              failureCallback(e);
+              self._decrementPreload();
+            } else {
+              console.error(e);
+            }
+            reject();
+          };
+
+          // Set crossOrigin in case image is served with CORS headers.
+          // This will let us draw to the canvas without tainting it.
+          // See https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
+          // When using data-uris the file will be loaded locally
+          // so we don't need to worry about crossOrigin with base64 file types.
+          if (path.indexOf('data:image/') !== 0) {
+            img.crossOrigin = 'Anonymous';
           }
-        };
-
-        // Set crossOrigin in case image is served with CORS headers.
-        // This will let us draw to the canvas without tainting it.
-        // See https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
-        // When using data-uris the file will be loaded locally
-        // so we don't need to worry about crossOrigin with base64 file types.
-        if (path.indexOf('data:image/') !== 0) {
-          img.crossOrigin = 'Anonymous';
-        }
-        // start loading the image
-        img.src = path;
+          // start loading the image
+          img.src = path;
+        });
       }
       pImg.modified = true;
       return pImg;

src/webgl/light.js

@@ -1642,24 +1642,23 @@ p5.prototype.spotLight = function (
       );
       return this;
   }
-  this._renderer.spotLightDiffuseColors.push(
+  this._renderer.spotLightDiffuseColors = [
     color._array[0],
     color._array[1],
     color._array[2]
-  );
+  ];
 
-  Array.prototype.push.apply(
-    this._renderer.spotLightSpecularColors,
-    this._renderer.specularColors
-  );
+  this._renderer.spotLightSpecularColors = [
+    ...this._renderer.specularColors
+  ];
 
-  this._renderer.spotLightPositions.push(position.x, position.y, position.z);
+  this._renderer.spotLightPositions = [position.x, position.y, position.z];
   direction.normalize();
-  this._renderer.spotLightDirections.push(
+  this._renderer.spotLightDirections = [
     direction.x,
     direction.y,
     direction.z
-  );
+  ];
 
   if (angle === undefined) {
     angle = Math.PI / 3;
@@ -1675,8 +1674,8 @@ p5.prototype.spotLight = function (
   }
 
   angle = this._renderer._pInst._toRadians(angle);
-  this._renderer.spotLightAngle.push(Math.cos(angle));
-  this._renderer.spotLightConc.push(concentration);
+  this._renderer.spotLightAngle = [Math.cos(angle)];
+  this._renderer.spotLightConc = [concentration];
 
   this._renderer._enableLighting = true;
 

src/webgl/p5.Framebuffer.js

@@ -624,7 +624,7 @@ p5.Framebuffer = class Framebuffer {
     }
 
     if (this.useDepth) {
-      this.depth = new FramebufferTexture(this, 'depthTexture');
+      this.depth = new p5.FramebufferTexture(this, 'depthTexture');
       const depthFilter = gl.NEAREST;
       this.depthP5Texture = new p5.Texture(
         this.target._renderer,
@@ -637,7 +637,7 @@ p5.Framebuffer = class Framebuffer {
       this.target._renderer.textures.set(this.depth, this.depthP5Texture);
     }
 
-    this.color = new FramebufferTexture(this, 'colorTexture');
+    this.color = new p5.FramebufferTexture(this, 'colorTexture');
     const filter = this.textureFiltering === constants.LINEAR
       ? gl.LINEAR
       : gl.NEAREST;
@@ -945,7 +945,7 @@ p5.Framebuffer = class Framebuffer {
    * </div>
    */
   createCamera() {
-    const cam = new FramebufferCamera(this);
+    const cam = new p5.FramebufferCamera(this);
     cam._computeCameraDefaultSettings();
     cam._setDefaultCamera();
     this.target._renderer._curCamera = cam;

src/webgl/p5.Quat.js

@@ -71,7 +71,7 @@ p5.Quat = class {
    * @param {p5.Vector} [p] vector to rotate on the axis quaternion
    */
   rotateVector(p) {
-    return new p5.Vector.mult( p, this.w*this.w - this.vec.dot(this.vec) )
+    return p5.Vector.mult( p, this.w*this.w - this.vec.dot(this.vec) )
       .add( p5.Vector.mult( this.vec, 2 * p.dot(this.vec) ) )
       .add( p5.Vector.mult( this.vec, 2 * this.w ).cross( p ) )
       .clampToZero();

src/webgl/p5.RendererGL.js

@@ -692,6 +692,8 @@ p5.RendererGL = class RendererGL extends Renderer {
       throw new Error('It looks like `beginGeometry()` is being called while another p5.Geometry is already being build.');
     }
     this.geometryBuilder = new GeometryBuilder(this);
+    this.geometryBuilder.prevFillColor = [...this.curFillColor];
+    this.curFillColor = [-1, -1, -1, -1];
   }
 
   /**
@@ -707,6 +709,7 @@ p5.RendererGL = class RendererGL extends Renderer {
       throw new Error('Make sure you call beginGeometry() before endGeometry()!');
     }
     const geometry = this.geometryBuilder.finish();
+    this.curFillColor = this.geometryBuilder.prevFillColor;
     this.geometryBuilder = undefined;
     return geometry;
   }
@@ -793,14 +796,14 @@ p5.RendererGL = class RendererGL extends Renderer {
     }
   }
 
-  _getParam() {
+  _getMaxTextureSize() {
     const gl = this.drawingContext;
     return gl.getParameter(gl.MAX_TEXTURE_SIZE);
   }
 
   _adjustDimensions(width, height) {
     if (!this._maxTextureSize) {
-      this._maxTextureSize = this._getParam();
+      this._maxTextureSize = this._getMaxTextureSize();
     }
     let maxTextureSize = this._maxTextureSize;
     let maxAllowedPixelDimensions = p5.prototype._maxAllowedPixelDimensions;
@@ -1355,7 +1358,7 @@ p5.RendererGL = class RendererGL extends Renderer {
  */
 
   loadPixels() {
-    const pixelsState = this._pInst;
+    const pixelsState = this._pixelsState;
 
     //@todo_FES
     if (this._pInst._glAttributes.preserveDrawingBuffer !== true) {
@@ -1387,7 +1390,7 @@ p5.RendererGL = class RendererGL extends Renderer {
 
   updatePixels() {
     const fbo = this._getTempFramebuffer();
-    fbo.pixels = this._pInst.pixels;
+    fbo.pixels = this._pixelsState.pixels;
     fbo.updatePixels();
     this._pInst.push();
     this._pInst.resetMatrix();
@@ -1452,7 +1455,7 @@ p5.RendererGL = class RendererGL extends Renderer {
     this._curCamera._resize();
 
     //resize pixels buffer
-    const pixelsState = this._pInst;
+    const pixelsState = this._pixelsState;
     if (typeof pixelsState.pixels !== 'undefined') {
       pixelsState._setProperty(
         'pixels',

src/webgl/shaders/light.vert

@@ -33,5 +33,5 @@ void main(void) {
     }
   }
 
-  vColor = (uUseVertexColor ? aVertexColor : uMaterialColor);
+  vColor = ((uUseVertexColor && aVertexColor.x >= 0.0) ? aVertexColor : uMaterialColor);
 }

src/webgl/shaders/normal.vert

@@ -19,5 +19,5 @@ void main(void) {
   gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
   vVertexNormal = normalize(vec3( uNormalMatrix * aNormal ));
   vVertTexCoord = aTexCoord;
-  vColor = (uUseVertexColor ? aVertexColor : uMaterialColor);
+  vColor = ((uUseVertexColor && aVertexColor.x >= 0.0) ? aVertexColor : uMaterialColor);
 }

src/webgl/shaders/phong.vert

@@ -40,5 +40,5 @@ void main(void) {
     }
   }
 
-  vColor = (uUseVertexColor ? aVertexColor : uMaterialColor);
+  vColor = ((uUseVertexColor && aVertexColor.x >= 0.0) ? aVertexColor : uMaterialColor);
 }