Polygons edges are hilighted how to make it as sharp edges

Questions
,
1

Created a buffer geometry with polygons normals and colors along with mesh lambert material like this below

geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ));
geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ));      
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ));

const material = new THREE.MeshLambertMaterial( {
  color: 0xd5d5d5, vertexColors: true, side: THREE.DoubleSide
} );

const mesh = new THREE.Mesh( geometry, material );

But using multiple colors are not looking sharp instead it is hilighted in edges of triangle and looking like stars. How to stop that hilighted borders? Needs only that color maps not higlighted triangle borders. Any help…

colormerge
colormerge968×410 42.9 KB

2

Most likely you use indexed geometry – vertices are shared by triangles. Sharing means that all properties of vertices are shared, not only coordinates, but also colors.

If you use non-indexed geometry, then each triangle will have its own copy of vertices, that are independent on vertices of other triangles. To convert indexed to non-indexed geometry use method toNonIndexed.

Here is a demo with indexed (left) and non-indexed (right) subdivided cube:

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

image

1 Like
4

Thanks for you reply, I tried your example like this

let geometry = new THREE.BufferGeometry().toNonIndexed();    
//setting bufferattributes
    geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ));
    geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ));      
    geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ));

colormerge-1
colormerge-11001×492 98.3 KB

Still some star kind of highlight borders visible in edges.

5

if you want color gradients, my guess would be that your best bet is nice uv map and interpolating color in 2d texture space. otherwise the pixels within a triangle would not know the colors of their neighbor triangles, thus inevitably producing rapid color change along the edges.

if your colors are actually random, maybe try a 3d noise -based shader, there will be no edges then.

6

You have to inspect the data for some of the problematic triangles – each triangle should have the same color for all 3 vertices. If not, then webGL will interpolate intermediate colors (which appears as gradient).