Is there really no way to use gl.TRIANGLE_STRIP?

Questions
1

Hi there,
I’m currently porting a geometry line shader with miter/bevels etc to WebGL, which is hard enough as is, but now I’m realizing, that there seems to be no way to change the drawmode to gl.TRIANGLE_STRIP.
Not changing the drawmode to triangle strips would make it even harder to port the shader and even more inefficient.
Is there really no way to hack into this to allow gl.TRIANGLE_STRIP as draw mode?

2

three.js only supports the default triangle draw mode. The idea is to use BufferGeometryUtils.toTrianglesDrawMode() to convert a strip or fan definition to plain triangles. If you can’t go that route for whatever reasons, you have to modify the engine. However, I recommend to not doing that and rather update other logic of your app so you actually render triangles.

3

I suppose triangle strip takes somewhat less memory, so it would be nice to support it for the large files. But right, every piece of code that relies on attribute data layout would fall apart.

4

Thanks for the quick answer!
Well, for me since I’m trying to imitate a geometry shader, its not really about memory, but more about redoing all the calculations even more often …
My vertex shader looks like this:

        if (position == 5.0f) {
            emit_vertex(p1, +miter_a, v1, vec2(u1, -thickness_aa1), true);
            return;
        }
        if (position == 6.0f) {
            emit_vertex(p1, -miter_a, v1, vec2(u1, thickness_aa1), true);
            return;
        }
        if (position == 7.0f) {
            emit_vertex(p2, +miter_b, v1, vec2(u2, -thickness_aa2), false);
            return;
        }
        if (position == 8.0f) {
            emit_vertex(p2, -miter_b, v1, vec2(u2, thickness_aa2), false);
            return;
        }

So, no triangle_strip makes this go from bad to worse :smiley:

5

I think mugen’s link should work for you with no extra effort

6

But there are no triangles in the buffer, since i’m generating them in the vertex shader.
I have something like that to emulate the geometry shader:

    const geometry = new THREE.InstancedBufferGeometry();
    const instance_positions = [0, 1, 2, 3, 4, 5];
    geometry.setAttribute(
        "position",
        new THREE.Float32BufferAttribute(instance_positions, 1)
    );
    const instanceBuffer = new THREE.InstancedInterleavedBuffer(points, 4, 1); // xy1, xy2

    geometry.setAttribute(
        "linepoint_prev",
        new THREE.InterleavedBufferAttribute(instanceBuffer, 2, 0)
    ); // xyz1
    geometry.setAttribute(
        "linepoint_start",
        new THREE.InterleavedBufferAttribute(instanceBuffer, 2, 2)
    ); // xyz1
    geometry.setAttribute(
        "linepoint_end",
        new THREE.InterleavedBufferAttribute(instanceBuffer, 2, 4)
    ); // xyz1
    geometry.setAttribute(
        "linepoint_next",
        new THREE.InterleavedBufferAttribute(instanceBuffer, 2, 6)
    ); // xyz2

I think I can change the indices of the instance geometry to change the order from strip to just triangles, but that will make this approach perform even worse (and its already kind of ridiculous to redo most calculations per vertex, which should only be done per line segment)…