move wireframe mesh transform into separate file

Author: bcamper

src/builders/wireframe.js

@@ -0,0 +1,26 @@
+// Rearranges element array for triangles into a new element array that draws a wireframe
+// Used for debugging
+export default function makeWireframeForTriangleElementData (element_data) {
+    const wireframe_data = new Uint16Array(element_data.length * 2);
+
+    // Draw triangles as lines:
+    // Make a copy of element_data, and for every group of three vertices, duplicate
+    // each vertex according to the following pattern:
+    // [1, 2, 3] => [1, 2, 2, 3, 3, 1]
+    // This takes three vertices which would have been interpreted as a triangle,
+    // and converts them into three 2-vertex line segments.
+    for (let i = 0; i < element_data.length; i += 3) {
+        wireframe_data.set(
+            [
+                element_data[i],
+                element_data[i+1],
+                element_data[i+1],
+                element_data[i+2],
+                element_data[i+2],
+                element_data[i]
+            ],
+            i * 2
+        );
+    }
+    return wireframe_data;
+}

src/gl/vbo_mesh.js

@@ -15,7 +15,7 @@ export default class VBOMesh  {
         this.vertex_layout = vertex_layout;
         this.vertex_buffer = this.gl.createBuffer();
         this.buffer_size = this.vertex_data.byteLength;
-        this.draw_mode = options.wireframe ? this.gl.LINES : (options.draw_mode || this.gl.TRIANGLES);
+        this.draw_mode = options.draw_mode || this.gl.TRIANGLES;
         this.data_usage = options.data_usage || this.gl.STATIC_DRAW;
         this.vertices_per_geometry = 3; // TODO: support lines, strip, fan, etc.
         this.uniforms = options.uniforms;
@@ -29,31 +29,7 @@ export default class VBOMesh  {
         this.vaos = {}; // map of VertexArrayObjects, keyed by program
 
         this.toggle_element_array = false;
-
         if (this.element_data) {
-            // NB: wireframe mode only works with triangles, provided as element data
-            // undefined results if passing in vertex buffer only, or non-triangle draw mode
-            if (options.wireframe) {
-                const wireframe_data = new Uint16Array(this.element_data.length * 2);
-                // Draw triangles as lines:
-                // Make a copy of element_data, and for every group of three vertices, duplicate
-                // each vertex according to the following pattern:
-                // [1, 2, 3] => [1, 2, 2, 3, 3, 1]
-                // This takes three vertices which would have been interpreted as a triangle,
-                // and converts them into three 2-vertex line segments.
-                for (let i = 0; i < this.element_data.length; i += 3) {
-                    wireframe_data.set([
-                        this.element_data[i],
-                        this.element_data[i+1],
-                        this.element_data[i+1],
-                        this.element_data[i+2],
-                        this.element_data[i+2],
-                        this.element_data[i]
-                    ], i * 2
-                    );
-                }
-                this.element_data = wireframe_data;
-            }
             this.toggle_element_array = true;
             this.element_count = this.element_data.length;
             this.geometry_count = this.element_count / this.vertices_per_geometry;

src/styles/style.js

@@ -13,6 +13,7 @@ import log from '../utils/log';
 import mergeObjects from '../utils/merge';
 import Thread from '../utils/thread';
 import WorkerBroker from '../utils/worker_broker';
+import makeWireframeForTriangleElementData from '../builders/wireframe';
 import debugSettings from '../utils/debug_settings';
 
 import selection_fragment_source from '../selection/selection_fragment.glsl';
@@ -411,10 +412,15 @@ export var Style = {
 
     makeMesh (vertex_data, vertex_elements, options = {}) {
         let vertex_layout = this.vertexLayoutForMeshVariant(options.variant);
-        return new VBOMesh(this.gl,
-            vertex_data, vertex_elements, vertex_layout,
-            { ...options, wireframe: debugSettings.wireframe }
-        );
+
+        if (debugSettings.wireframe) {
+            // In wireframe debug mode, transform mesh into lines
+            vertex_elements = makeWireframeForTriangleElementData(vertex_elements);
+            return new VBOMesh(this.gl, vertex_data, vertex_elements, vertex_layout,
+                { ...options, draw_mode: this.gl.LINES });
+        }
+
+        return new VBOMesh(this.gl, vertex_data, vertex_elements, vertex_layout, options);
     },
 
     render (mesh) {