Black lines on geometry with colored vertices

Questions
1

I’m porting this tutorial Low Poly style Terrain Generation to r3f But since their code is really old, I’m having some issue with the colors of the vertices suspicious-benji-kphzfv - CodeSandbox I’m calculating the colors based on the z index of the vertice and then assigning them all to the geometry like: geo.setAttribute('color', new THREE.BufferAttribute(colors, 3))
However the end result is the geometry appearing with black stripes between the colors

image
image1920×949 191 KB

2

This code sets the color of one vertex of each triangle:

colors[i * 3] = color.r
colors[i * 3 + 1] = color.g
colors[i * 3 + 2] = color.b

To set the same color to all three vertices, try:

colors[i * 3] = color.r
colors[i * 3 + 1] = color.g
colors[i * 3 + 2] = color.b

colors[(i+1) * 3] = color.r
colors[(i+1) * 3 + 1] = color.g
colors[(i+1) * 3 + 2] = color.b

colors[(i+2) * 3] = color.r
colors[(i+2) * 3 + 1] = color.g
colors[(i+2) * 3 + 2] = color.b

The result should look like this:

image
image1568×480 128 KB

3 Likes
3

Thank you for the answer it worked nicely. Do you happen to know why the colors appear blurred though? Does it have to do with the indexed array of the buffer geometry, in the documentation it says the color will be a gradient, is this causing the blurring?
I’ve tried to set the magFilter to NearestFilter on the texture but it didn’t have any effect. I’ve also set the antialias to false in the renderer but again no effect.

4

The blurring is caused by triangles with different colors in their vertices. If you want each triangle to be a flat color, its vertices must have the same color. This means you need to use non-index geometry.

Also, I did not mention in my previous pose (because it was not asked), there are a few other bugs in the code:

  • if the geometry is indexed, then the vertices of a triangle may not be consecutive data in the position attribute – your code assumes the geometry is non-indexed, but it is actually indexed.
  • if you turn the geometry into non-index, most likely you will get cracks in the terrain, because the calculation of Z coordinate of the terrain is as it the geometry is indexed

So, if you want triangles with flat colors (no blurs), you have to convert the geometry to non-indexed and fix the calculation of Z coordinate.

5

Thanks for the input, is there a guide on how to work with indexed and non-indexed geometries? I’m assuming that what I’m trying to achieve can be done with either method right?

6

If color is stored in vertex colors, you must use non-indexed geometry, if you want to avoid color gradients.

However, other approaches for coloring (across the triangles) is to use texture for elevation colors, or to use a custom shader. They will work with both indexed and non-indexed geometries. My personal preference is for a texture.

7

Oh wait that texture approach is interesting, so I can add a texture where I’m passing the colors? Is there an example of this somewhere?

8

Just made an example. The texture colors are set in lines 48-55.

https://codepen.io/boytchev/full/mdaKJQR

image

1 Like
9

If anyone searching, this example also might be of some merit
https://threejs.org/examples/#misc_controls_pointerlock