Question

是否可以仅使用一个GL_TRIANGLE_STRIP来绘制整个多维数据集？

显然，这只是我在这里关注的立方体组合，它可能会被拉伸到任何类型的盒子或类似物体中。

Answer 1

来自Evans，Skiena和Varshney的论文Optimizing Triangle Strips for Fast Rendering：

Answer 2

对于那些懒惰的人（像我一样），这里是rob mayoff答案的复制粘贴版本;）

function windowOpen(event)
{
    window.open("https://www.microsoft.com");
    event.completed();
}

Answer 3

是的，经过一些实验后，我自己找到了答案。想象一下，你的立方体的角是交替着色的黑色和白色。沿两个黑角之间的每个面绘制一个三角形边。这样，对角线在立方体内形成四面体。对于[0,1]³立方体，可能的坐标序列如下：

Vertex  Triangle    Face
------+-----------+-----
0 0 0
0 1 0
1 0 0  000 010 100  **0
1 1 0  100 010 110  **0
1 1 1  100 110 111  1**
0 1 0  111 110 010  *1*
0 1 1  111 010 011  *1*
0 0 1  011 010 001  0**
1 1 1  011 001 111  **1
1 0 1  111 001 101  **1
1 0 0  111 101 100  1**
0 0 1  100 101 001  *0*
0 0 0  100 001 000  *0*
0 1 0  000 001 010  0**

Answer 4

可能对某些人有用，这是一个几何着色器，它将获取一个点并输出一个单位立方体的三角形带

#version 410

layout(points) in;
layout(triangle_strip, max_vertices = 12) out;

uniform mat4 mvp;

void main() {
    vec4 center = gl_in[0].gl_Position;

    vec4 dx = mvp[0];
    vec4 dy = mvp[1];
    vec4 dz = mvp[2];

    vec4 p1 = center;
    vec4 p2 = center + dx;
    vec4 p3 = center + dy;
    vec4 p4 = p2 + dy;
    vec4 p5 = p1 + dz;
    vec4 p6 = p2 + dz;
    vec4 p7 = p3 + dz;
    vec4 p8 = p4 + dz;

    gl_Position = p7;
    EmitVertex();

    gl_Position = p8;
    EmitVertex();

    gl_Position = p5;
    EmitVertex();

    gl_Position = p6;
    EmitVertex();

    gl_Position = p2;
    EmitVertex();

    gl_Position = p8;
    EmitVertex();

    gl_Position = p4;
    EmitVertex();

    gl_Position = p7;
    EmitVertex();

    gl_Position = p3;
    EmitVertex();

    gl_Position = p5;
    EmitVertex();

    gl_Position = p1;
    EmitVertex();

    gl_Position = p2;
    EmitVertex();

    gl_Position = p3;
    EmitVertex();

    gl_Position = p4;
    EmitVertex();

}

Answer 5

这个版本还有纹理坐标和法线，以防万一。

我使用 WebGL 对此进行了测试，立方体的纹理映射正确，但由于每个角确实需要三个纹理坐标 - 每个面一个，因此具有特殊性。因此，您可以使用这些 UV 对立方体的 4 个侧面进行纹理贴图，但顶部和底部将没有适当的纹理。

const Cube = function () {
    const u0 = 0;
    const u1 = 1;

    const v0 = 0;
    const v1 = 1 / 3;
    const v2 = 2 / 3;
    const v3 = 1;

    const verticies = [
        +1, +1, -1,
        -1, +1, -1,
        +1, -1, -1,
        -1, -1, -1,
        +1, +1, +1,
        -1, +1, +1,
        -1, -1, +1,
        +1, -1, +1,
    ];

    const uvs = [
        u0, v3,
        u0, v0,
        u0, v2,
        u0, v1,
        u1, v3,
        u1, v0,
        u1, v1,
        u1, v2,
    ];

    const indexes = [3, 2, 6, 7, 4, 2, 0, 3, 1, 6, 5, 4, 1, 0];

    const v = [];
    const u = [];
    for (var i = 0; i < indexes.length; i++) {
        const corner = indexes[i];
        v.push(verticies[corner * 3 + 0]);
        v.push(verticies[corner * 3 + 1]);
        v.push(verticies[corner * 3 + 2]);

        u.push(uvs[corner * 2 + 0]);
        u.push(uvs[corner * 2 + 1]);
    }

    return {
        verticies: v, 
        uvs: u,
        normals: v
    };
};```

多维数据集使用单个GL_TRIANGLE_STRIP

5 个答案: