Webgl points / handle using short instead of int for indices

This is controlled by the availability of the OES_element_index_uint
webgl extension.

src/ol/renderer/webgl/Layer.js

@@ -20,9 +20,10 @@ export const WebGLWorkerMessageType = {
  * Note that any addition properties present in the message *will* be sent back to the main thread.
  * @property {WebGLWorkerMessageType} type Message type
  * @property {ArrayBuffer} renderInstructions Render instructions raw binary buffer.
- * @property {ArrayBuffer=} vertexBuffer Vertices array raw binary buffer (sent by the worker).
+ * @property {ArrayBuffer} [vertexBuffer] Vertices array raw binary buffer (sent by the worker).
- * @property {ArrayBuffer=} indexBuffer Indices array raw binary buffer (sent by the worker).
+ * @property {ArrayBuffer} [indexBuffer] Indices array raw binary buffer (sent by the worker).
- * @property {number=} customAttributesCount Amount of custom attributes count in the render instructions.
+ * @property {number} [customAttributesCount] Amount of custom attributes count in the render instructions.
+ * @property {boolean} [useShortIndices] If true, Uint16Array will be used instead of Uint32Array for index buffers.
  */
 
 /**

src/ol/renderer/webgl/PointsLayer.js

@@ -2,7 +2,7 @@
  * @module ol/renderer/webgl/PointsLayer
  */
 import WebGLArrayBuffer from '../../webgl/Buffer.js';
-import {DYNAMIC_DRAW, ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER, FLOAT} from '../../webgl.js';
+import {DYNAMIC_DRAW, ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER, FLOAT, EXTENSIONS as WEBGL_EXTENSIONS} from '../../webgl.js';
 import {DefaultAttrib, DefaultUniform} from '../../webgl/Helper.js';
 import GeometryType from '../../geom/GeometryType.js';
 import WebGLLayerRenderer, {
@@ -19,6 +19,7 @@ import {
   apply as applyTransform
 } from '../../transform.js';
 import {create as createWebGLWorker} from '../../worker/webgl.js';
+import {includes} from '../../array.js';
 
 const VERTEX_SHADER = `
   precision mediump float;
@@ -419,7 +420,8 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
     /** @type import('./Layer').WebGLWorkerGenerateBuffersMessage */
     const message = {
       type: WebGLWorkerMessageType.GENERATE_BUFFERS,
-      renderInstructions: this.renderInstructions_.buffer
+      renderInstructions: this.renderInstructions_.buffer,
+      useShortIndices: !includes(WEBGL_EXTENSIONS, 'OES_element_index_uint')
     };
     // additional properties will be sent back as-is by the worker
     message['projectionTransform'] = projectionTransform;

src/ol/worker/webgl.js

@@ -16,10 +16,13 @@ onmessage = event => {
     const renderInstructions = new Float32Array(received.renderInstructions);
     const customAttributesCount = received.customAttributesCount || 0;
     const instructionsCount = POINT_INSTRUCTIONS_COUNT + customAttributesCount;
+    const useShort = received.useShortIndices;
 
     const elementsCount = renderInstructions.length / instructionsCount;
-    const indexBuffer = new Uint32Array(elementsCount * 6);
+    const indicesCount = elementsCount * 6;
-    const vertexBuffer = new Float32Array(elementsCount * 4 * (POINT_VERTEX_STRIDE + customAttributesCount));
+    const verticesCount = elementsCount * 4 * (POINT_VERTEX_STRIDE + customAttributesCount);
+    const indexBuffer = useShort ? new Uint16Array(indicesCount) : new Uint32Array(indicesCount);
+    const vertexBuffer = new Float32Array(verticesCount);
 
     let bufferPositions = null;
     for (let i = 0; i < renderInstructions.length; i += instructionsCount) {

test/spec/ol/worker/webgl.test.js

@@ -1,5 +1,8 @@
 import {create} from '../../../../src/ol/worker/webgl.js';
-import {WebGLWorkerMessageType, writePointFeatureInstructions} from '../../../../src/ol/renderer/webgl/Layer';
+import {
+  POINT_INSTRUCTIONS_COUNT,
+  WebGLWorkerMessageType
+} from '../../../../src/ol/renderer/webgl/Layer.js';
 
 
 describe('ol/worker/webgl', function() {
@@ -17,29 +20,50 @@ describe('ol/worker/webgl', function() {
   });
 
   describe('messaging', function() {
-    it('responds to GENERATE_BUFFERS message type', function(done) {
+    describe('GENERATE_BUFFERS', function() {
-      worker.addEventListener('error', done);
+      it('responds with buffer data', function(done) {
+        worker.addEventListener('error', done);
 
-      worker.addEventListener('message', function(event) {
+        worker.addEventListener('message', function(event) {
-        expect(event.data.type).to.eql(WebGLWorkerMessageType.GENERATE_BUFFERS);
+          expect(event.data.type).to.eql(WebGLWorkerMessageType.GENERATE_BUFFERS);
-        expect(event.data.renderInstructions.byteLength).to.greaterThan(0);
+          expect(event.data.renderInstructions.byteLength).to.greaterThan(0);
-        expect(event.data.indexBuffer.byteLength).to.greaterThan(0);
+          expect(event.data.indexBuffer.byteLength).to.greaterThan(0);
-        expect(event.data.vertexBuffer.byteLength).to.greaterThan(0);
+          expect(event.data.vertexBuffer.byteLength).to.greaterThan(0);
-        expect(event.data.testInt).to.be(101);
+          expect(event.data.testInt).to.be(101);
-        expect(event.data.testString).to.be('abcd');
+          expect(event.data.testString).to.be('abcd');
-        done();
+          done();
+        });
+
+        const instructions = new Float32Array(POINT_INSTRUCTIONS_COUNT);
+
+        const message = {
+          type: WebGLWorkerMessageType.GENERATE_BUFFERS,
+          renderInstructions: instructions,
+          testInt: 101,
+          testString: 'abcd'
+        };
+
+        worker.postMessage(message);
       });
 
-      const instructions = new Float32Array(100);
+      it('responds with buffer data (fallback to Uint16Array)', function(done) {
+        worker.addEventListener('error', done);
 
-      const message = {
+        worker.addEventListener('message', function(event) {
-        type: WebGLWorkerMessageType.GENERATE_BUFFERS,
+          expect(event.data.indexBuffer).to.eql(Uint16Array.BYTES_PER_ELEMENT * 6);
-        renderInstructions: instructions,
+          done();
-        testInt: 101,
+        });
-        testString: 'abcd'
-      };
 
-      worker.postMessage(message);
+        const instructions = new Float32Array(POINT_INSTRUCTIONS_COUNT);
+
+        const message = {
+          type: WebGLWorkerMessageType.GENERATE_BUFFERS,
+          renderInstructions: instructions,
+          useShortIndices: true
+        };
+
+        worker.postMessage(message);
+      });
     });
   });