Webgl / use the new buffer API in helper & the points renderer

src/ol/renderer/webgl/PointsLayer.js

@@ -211,8 +211,8 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
 
     this.sourceRevision_ = -1;
 
-    this.verticesBuffer_ = new WebGLArrayBuffer([], DYNAMIC_DRAW);
+    this.verticesBuffer_ = new WebGLArrayBuffer(ARRAY_BUFFER, DYNAMIC_DRAW);
-    this.indicesBuffer_ = new WebGLArrayBuffer([], DYNAMIC_DRAW);
+    this.indicesBuffer_ = new WebGLArrayBuffer(ELEMENT_ARRAY_BUFFER, DYNAMIC_DRAW);
 
     this.program_ = this.helper_.getProgram(
       options.fragmentShader || FRAGMENT_SHADER,
@@ -277,16 +277,11 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
     this.worker_ = createWebGLWorker();
     this.worker_.addEventListener('message', function(event) {
       if (event.data.type === 'buffers-generated') {
-        const vertexBuffer = Array.from(new Float32Array(event.data.vertexBuffer));
-        const indexBuffer = Array.from(new Uint32Array(event.data.indexBuffer));
         const projectionTransform = event.data.projectionTransform;
-
+        this.verticesBuffer_.fromArrayBuffer(event.data.vertexBuffer);
-        // TODO: improve the WebGLBuffer private api: we shouldn't need to switch back to plain Arrays
+        this.indicesBuffer_.fromArrayBuffer(event.data.indexBuffer);
-        // also we need to handle the case where Uint32 array cannot be used
+        this.helper_.flushBufferData(this.verticesBuffer_);
-        this.verticesBuffer_.arr_ = vertexBuffer;
+        this.helper_.flushBufferData(this.indicesBuffer_);
-        this.indicesBuffer_.arr_ = indexBuffer;
-        this.helper_.flushBufferData(ARRAY_BUFFER, this.verticesBuffer_);
-        this.helper_.flushBufferData(ELEMENT_ARRAY_BUFFER, this.indicesBuffer_);
 
         // saves the projection transform for the current frame state
         this.renderTransform_ = projectionTransform;
@@ -308,11 +303,12 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
    * @inheritDoc
    */
   renderFrame(frameState) {
-    const layerState = frameState.layerStatesArray[frameState.layerIndex];
+    const renderCount = this.indicesBuffer_.getArray() ? this.indicesBuffer_.getArray().length : 0;
-    this.helper_.drawElements(0, this.indicesBuffer_.getArray().length);
+    this.helper_.drawElements(0, renderCount);
     this.helper_.finalizeDraw(frameState);
     const canvas = this.helper_.getCanvas();
 
+    const layerState = frameState.layerStatesArray[frameState.layerIndex];
     const opacity = layerState.opacity;
     if (opacity !== parseFloat(canvas.style.opacity)) {
       canvas.style.opacity = opacity;
@@ -356,8 +352,8 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
     this.helper_.prepareDraw(frameState);
 
     // write new data
-    this.helper_.bindBuffer(ARRAY_BUFFER, this.verticesBuffer_);
+    this.helper_.bindBuffer(this.verticesBuffer_);
-    this.helper_.bindBuffer(ELEMENT_ARRAY_BUFFER, this.indicesBuffer_);
+    this.helper_.bindBuffer(this.indicesBuffer_);
 
     const bytesPerFloat = Float32Array.BYTES_PER_ELEMENT;
     this.helper_.enableAttributeArray(DefaultAttrib.POSITION, 2, FLOAT, bytesPerFloat * stride, 0);

src/ol/webgl/Helper.js

@@ -7,7 +7,7 @@ import Disposable from '../Disposable.js';
 import {includes} from '../array.js';
 import {listen, unlistenAll} from '../events.js';
 import {clear} from '../obj.js';
-import {ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER, TEXTURE_2D, TEXTURE_WRAP_S, TEXTURE_WRAP_T} from '../webgl.js';
+import {TEXTURE_2D, TEXTURE_WRAP_S, TEXTURE_WRAP_T} from '../webgl.js';
 import ContextEventType from '../webgl/ContextEventType.js';
 import {
   create as createTransform,
@@ -347,11 +347,10 @@ class WebGLHelper extends Disposable {
    * Just bind the buffer if it's in the cache. Otherwise create
    * the WebGL buffer, bind it, populate it, and add an entry to
    * the cache.
-   * @param {number} target Target, either ARRAY_BUFFER or ELEMENT_ARRAY_BUFFER.
    * @param {import("./Buffer").default} buffer Buffer.
    * @api
    */
-  bindBuffer(target, buffer) {
+  bindBuffer(buffer) {
     const gl = this.getGL();
     const bufferKey = getUid(buffer);
     let bufferCache = this.bufferCache_[bufferKey];
@@ -362,28 +361,19 @@ class WebGLHelper extends Disposable {
         webGlBuffer: webGlBuffer
       };
     }
-    gl.bindBuffer(target, bufferCache.webGlBuffer);
+    gl.bindBuffer(buffer.getType(), bufferCache.webGlBuffer);
   }
 
   /**
    * Update the data contained in the buffer array; this is required for the
    * new data to be rendered
-   * @param {number} target Target, either ARRAY_BUFFER or ELEMENT_ARRAY_BUFFER.
    * @param {import("./Buffer").default} buffer Buffer.
    * @api
    */
-  flushBufferData(target, buffer) {
+  flushBufferData(buffer) {
     const gl = this.getGL();
-    const arr = buffer.getArray();
+    this.bindBuffer(buffer);
-    this.bindBuffer(target, buffer);
+    gl.bufferData(buffer.getType(), buffer.getArray(), buffer.getUsage());
-    let /** @type {ArrayBufferView} */ arrayBuffer;
-    if (target == ARRAY_BUFFER) {
-      arrayBuffer = new Float32Array(arr);
-    } else if (target == ELEMENT_ARRAY_BUFFER) {
-      arrayBuffer = this.hasOESElementIndexUint ?
-        new Uint32Array(arr) : new Uint16Array(arr);
-    }
-    gl.bufferData(target, arrayBuffer, buffer.getUsage());
   }
 
   /**