I find myself in a situation where I need to create a Line with holes, essentially a discontinuous line. This entails my Line being composed of multiple segments that are visually separate but conceptually connected. These segments contain more than just two points, unlike how THREE.LinePieces operates.
Currently, I am utilizing a BufferGeometry to hold my vertices. A colleague mentioned that in WebGL, it is feasible to generate two extra arrays alongside the vertices: one for the vertex indices and one for defining the order in which vertices should be connected. Here's an illustration of what I mean:
indices = [0, 1, 2, 3, 4, 5]
vertices = [x0, y0, z0, x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4, x5, y5, z5]
order = [0, 1, 1, 2, 3, 4, 4, 5]
By employing this method, I would be able to create two lines: the initial one from Point 0 to 1 and then to 2, followed by a hole, and finally, a second line from 3 to 4 and then to 5.
Essentially, it would look like this:
.___.___. .___.___.
0 1 2 3 4 5
Although I lack expertise in WebGL, I am relying on my colleague's assurance that such a structure is possible. However, I am curious if this can also be achieved using Three.js. If so, what would be the process?
UPDATE: After a further discussion with my colleague, he provided me with the following code snippet
indexBufferData = [0, 1, 1, 2, 3, 4, 4, 5];
gl.glBindBuffer(GL.GL_ELEMENT_ARRAY_BUFFER, indexBufferID);
gl.glBufferData(GL.GL_ELEMENT_ARRAY_BUFFER,
indexBufferData.limit() * Buffers.SIZEOF_INT,
indexBufferData, GL.GL_STATIC_DRAW);
He mentioned that duplicating the indices and not the vertices (although possible but not recommended) would result in line segments.
I delved into the WebGLRenderer and observed on line 2380 that if there is an attribute index in my BufferGeometry, the necessary buffer will be established. However, setting this attribute did not yield the expected outcome. When utilizing THREE.LinePieces, it still only connects two points.