Merge pull request #9896 from jahow/fix-webgl-warnings

Misc. WebGL fixes

examples/icon-sprite-webgl.js

@@ -17,7 +17,7 @@ const vectorSource = new Vector({
   attributions: 'National UFO Reporting Center'
 });
 
-const texture = document.createElement('img');
+const texture = new Image();
 texture.src = 'data/ufo_shapes.png';
 
 // This describes the content of the associated sprite sheet
@@ -136,3 +136,7 @@ map.on('pointermove', function(evt) {
     info.innerText = 'On ' + datetime + ', lasted ' + duration + ' seconds and had a "' + shape + '" shape.';
   });
 });
+
+texture.addEventListener('load', function() {
+  map.render();
+});

src/ol/renderer/webgl/PointsLayer.js

@@ -245,7 +245,7 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
     );
     this.hitProgram_ = this.helper.getProgram(
       HIT_FRAGMENT_SHADER,
-      options.vertexShader || VERTEX_SHADER
+      VERTEX_SHADER
     );
 
     this.sizeCallback_ = options.sizeCallback || function() {
@@ -336,6 +336,8 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
         } else {
           this.renderInstructions_ = new Float32Array(event.data.renderInstructions);
         }
+
+        this.getLayer().changed();
       }
     }.bind(this));
   }
@@ -344,7 +346,7 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
    * @inheritDoc
    */
   renderFrame(frameState) {
-    const renderCount = this.indicesBuffer_.getArray() ? this.indicesBuffer_.getArray().length : 0;
+    const renderCount = this.indicesBuffer_.getSize();
     this.helper.drawElements(0, renderCount);
     this.helper.finalizeDraw(frameState);
     const canvas = this.helper.getCanvas();
@@ -544,6 +546,12 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
    * @param {import("../../PluggableMap.js").FrameState} frameState current frame state
    */
   renderHitDetection(frameState) {
+    // skip render entirely if vertices buffers for display & hit detection have different sizes
+    // this typically means both buffers are temporarily out of sync
+    if (this.hitVerticesBuffer_.getSize() !== this.verticesBuffer_.getSize()) {
+      return;
+    }
+
     this.hitRenderTarget_.setSize(frameState.size);
 
     this.helper.useProgram(this.hitProgram_);
@@ -561,7 +569,7 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
     this.helper.enableAttributeArray(DefaultAttrib.ROTATE_WITH_VIEW, 1, FLOAT, bytesPerFloat * stride, bytesPerFloat * 7);
     this.helper.enableAttributeArray(DefaultAttrib.COLOR, 4, FLOAT, bytesPerFloat * stride, bytesPerFloat * 8);
 
-    const renderCount = this.indicesBuffer_.getArray() ? this.indicesBuffer_.getArray().length : 0;
+    const renderCount = this.indicesBuffer_.getSize();
     this.helper.drawElements(0, renderCount);
   }
 }

src/ol/webgl/Buffer.js

@@ -95,6 +95,7 @@ class WebGLArrayBuffer {
   }
 
   /**
+   * Will return null if the buffer was not initialized
    * @return {Float32Array|Uint32Array} Array.
    */
   getArray() {
@@ -107,6 +108,14 @@ class WebGLArrayBuffer {
   getUsage() {
     return this.usage;
   }
+
+  /**
+   * Will return 0 if the buffer is not initialized
+   * @return {number} Array size
+   */
+  getSize() {
+    return this.array ? this.array.length : 0;
+  }
 }
 
 /**

src/ol/webgl/Helper.js

@@ -539,7 +539,6 @@ class WebGLHelper extends Disposable {
     let textureSlot = 0;
     this.uniforms_.forEach(function(uniform) {
       value = typeof uniform.value === 'function' ? uniform.value(frameState) : uniform.value;
-
       // apply value based on type
       if (value instanceof HTMLCanvasElement || value instanceof HTMLImageElement || value instanceof ImageData) {
         // create a texture & put data
@@ -551,7 +550,11 @@ class WebGLHelper extends Disposable {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, value);
+
+        const imageReady = !(value instanceof HTMLImageElement) || /** @type {HTMLImageElement} */(value).complete;
+        if (imageReady) {
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, value);
+        }
 
         // fill texture slots by increasing index
         gl.uniform1i(this.getUniformLocation(uniform.name), textureSlot++);

test/spec/ol/webgl/buffer.test.js

@@ -75,4 +75,21 @@ describe('ol.webgl.Buffer', function() {
 
   });
 
+  describe('#getSize', function() {
+    let b;
+    beforeEach(function() {
+      b = new WebGLArrayBuffer(ARRAY_BUFFER);
+    });
+
+    it('returns 0 when the buffer array is not initialized', function() {
+      expect(b.getSize()).to.be(0);
+    });
+
+    it('returns the size of the array otherwise', function() {
+      b.ofSize(12);
+      expect(b.getSize()).to.be(12);
+    });
+
+  });
+
 });