java - 着色高度图的面而不是顶点

Question

我正在尝试创建一个按面而不是顶点着色的高度图。例如，这是我目前拥有的:

但这就是我想要的:

我读到我必须将每个顶点拆分为多个顶点，然后为三角形分别索引每个顶点。我也知道 blender 的模型有这样的功能(拆分顶点或其他东西？)，但我不确定我会为此遵循哪种算法。这将是最后的手段，因为除了颜色之外，无缘无故地增加网格中的顶点数量似乎效率不高。

我还发现了一种称为平面着色的东西(在着色器中对像素颜色使用 flat 限定符)，但它似乎只绘制正方形而不是三角形。有没有办法让它遮住三角形？

作为引用，这是我当前的高度图生成代码:

public class HeightMap extends GameModel {

private static final float START_X = -0.5f;
private static final float START_Z = -0.5f;
private static final float REFLECTANCE = .1f;

public HeightMap(float minY, float maxY, float persistence, int width, int height, float spikeness) {
    super(createMesh(minY, maxY, persistence, width, height, spikeness), REFLECTANCE);
}

protected static Mesh createMesh(final float minY, final float maxY, final float persistence, final int width,
        final int height, float spikeness) {
    SimplexNoise noise = new SimplexNoise(128, persistence, 2);// Utils.getRandom().nextInt());

    float xStep = Math.abs(START_X * 2) / (width - 1);
    float zStep = Math.abs(START_Z * 2) / (height - 1);

    List<Float> positions = new ArrayList<>();
    List<Integer> indices = new ArrayList<>();

    for (int z = 0; z < height; z++) {
        for (int x = 0; x < width; x++) {
            // scale from [-1, 1] to [minY, maxY]
            float heightY = (float) ((noise.getNoise(x * xStep * spikeness, z * zStep * spikeness) + 1f) / 2
                    * (maxY - minY) + minY);

            positions.add(START_X + x * xStep);
            positions.add(heightY);
            positions.add(START_Z + z * zStep);

            // Create indices
            if (x < width - 1 && z < height - 1) {
                int leftTop = z * width + x;
                int leftBottom = (z + 1) * width + x;
                int rightBottom = (z + 1) * width + x + 1;
                int rightTop = z * width + x + 1;

                indices.add(leftTop);
                indices.add(leftBottom);
                indices.add(rightTop);

                indices.add(rightTop);
                indices.add(leftBottom);
                indices.add(rightBottom);
            }
        }
    }

    float[] verticesArr = Utils.listToArray(positions);
    Color c = new Color(147, 105, 59);
    float[] colorArr = new float[positions.size()];
    for (int i = 0; i < colorArr.length; i += 3) {
        float brightness = (Utils.getRandom().nextFloat() - 0.5f) * 0.5f;
        colorArr[i] = (float) c.getRed() / 255f + brightness;
        colorArr[i + 1] = (float) c.getGreen() / 255f + brightness;
        colorArr[i + 2] = (float) c.getBlue() / 255f + brightness;
    }
    int[] indicesArr = indices.stream().mapToInt((i) -> i).toArray();

    float[] normalArr = calcNormals(verticesArr, width, height);

    return new Mesh(verticesArr, colorArr, normalArr, indicesArr);
}

private static float[] calcNormals(float[] posArr, int width, int height) {
    Vector3f v0 = new Vector3f();
    Vector3f v1 = new Vector3f();
    Vector3f v2 = new Vector3f();
    Vector3f v3 = new Vector3f();
    Vector3f v4 = new Vector3f();
    Vector3f v12 = new Vector3f();
    Vector3f v23 = new Vector3f();
    Vector3f v34 = new Vector3f();
    Vector3f v41 = new Vector3f();
    List<Float> normals = new ArrayList<>();
    Vector3f normal = new Vector3f();
    for (int row = 0; row < height; row++) {
        for (int col = 0; col < width; col++) {
            if (row > 0 && row < height - 1 && col > 0 && col < width - 1) {
                int i0 = row * width * 3 + col * 3;
                v0.x = posArr[i0];
                v0.y = posArr[i0 + 1];
                v0.z = posArr[i0 + 2];

                int i1 = row * width * 3 + (col - 1) * 3;
                v1.x = posArr[i1];
                v1.y = posArr[i1 + 1];
                v1.z = posArr[i1 + 2];
                v1 = v1.sub(v0);

                int i2 = (row + 1) * width * 3 + col * 3;
                v2.x = posArr[i2];
                v2.y = posArr[i2 + 1];
                v2.z = posArr[i2 + 2];
                v2 = v2.sub(v0);

                int i3 = (row) * width * 3 + (col + 1) * 3;
                v3.x = posArr[i3];
                v3.y = posArr[i3 + 1];
                v3.z = posArr[i3 + 2];
                v3 = v3.sub(v0);

                int i4 = (row - 1) * width * 3 + col * 3;
                v4.x = posArr[i4];
                v4.y = posArr[i4 + 1];
                v4.z = posArr[i4 + 2];
                v4 = v4.sub(v0);

                v1.cross(v2, v12);
                v12.normalize();

                v2.cross(v3, v23);
                v23.normalize();

                v3.cross(v4, v34);
                v34.normalize();

                v4.cross(v1, v41);
                v41.normalize();

                normal = v12.add(v23).add(v34).add(v41);
                normal.normalize();
            } else {
                normal.x = 0;
                normal.y = 1;
                normal.z = 0;
            }
            normal.normalize();
            normals.add(normal.x);
            normals.add(normal.y);
            normals.add(normal.z);
        }
    }
    return Utils.listToArray(normals);
}

}

编辑

我试过做几件事。我尝试用平面阴影重新排列索引，但这并没有给我想要的外观。我尝试使用 uniform vec3 colors 并使用 gl_VertexID 或 gl_InstanceID 对其进行索引(我不完全确定其中的区别)，但我无法编译数组。 Here顺便说一句，是 github 仓库。

Answer 1

flat 合格的片段着色器输入将接收相同图元的相同值。在你的例子中，一个三角形。

当然，一个三角形是由3个顶点组成的。如果顶点着色器输出 3 个不同值，片段着色器如何知道要获取哪个值？

这归结为所谓的“provoking vertex”。渲染时，您指定要在 glDraw* 调用中使用的特定图元(GL_TRIANGLE_STRIP、GL_TRIANGLES 等)。这些图元类型将根据您提供的顶点数量生成许多基本图元(即:单个三角形)。

当生成基本图元时，该基本图元中的一个顶点被称为“激发顶点”。所有 flat 参数都使用该顶点的数据。

你之所以看到你所看到的是因为两个相邻的三角形恰好使用相同的激发顶点。您的网格是平滑的，因此两个相邻的三角形共享 2 个顶点。您的网格生成恰好生成了一个网格，使得每个三角形的激发顶点在它们之间共享。这意味着这两个三角形将获得相同的 flat 值。

您将需要调整索引列表或以其他方式更改网格生成，以免发生这种情况。或者你可以把你的网格划分成单独的三角形；这可能要容易得多。