diff --git a/src/builders/wireframe.js b/src/builders/wireframe.js new file mode 100644 index 000000000..6f3310849 --- /dev/null +++ b/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; +} diff --git a/src/gl/vbo_mesh.js b/src/gl/vbo_mesh.js index 58c0890dc..0401165d9 100644 --- a/src/gl/vbo_mesh.js +++ b/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; diff --git a/src/styles/style.js b/src/styles/style.js index b78f9e2ce..ed9f06d66 100644 --- a/src/styles/style.js +++ b/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) {