Three.js - Strange lines on custom mesh

Questions
, ,
1

Hello there,
I’m trying to make a custom mesh in order to have a lot of customizable planes in the scene.

Here is some code:

geometry = new THREE.BufferGeometry();

geometry.addAttribute( 'position',  new THREE.BufferAttribute( vertexPositions, 3 ).setDynamic( true ) );
geometry.addAttribute( 'color',     new THREE.BufferAttribute( colors, 3 ).setDynamic( true ) );
geometry.addAttribute( 'opacity',   new THREE.BufferAttribute( opacity, 1 ).setDynamic( true ) );

// Initialize material
var material = new THREE.ShaderMaterial( { vertexColors: THREE.VertexColors, transparent: true, vertexShader: vertexShader, fragmentShader: fragmentShader } );

// Create something like a Wireframe of the planes
var Pgeometry = new THREE.BufferGeometry();
Pgeometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( ApointsPositions ), 3 ).setDynamic( true ) );
var points = new THREE.LineSegments( Pgeometry, new THREE.PointsMaterial( { color: 0x353535 } ) );
scene.add( points );

// Create planes and add to scene
planeMeshes = new THREE.Mesh( geometry, material );
planeMeshes.setDrawMode( THREE.TriangleStripDrawMode );
scene.add( planeMeshes );

My custom material is working fine and let me to use opacity on every vertex. Every plane is created and everything works fine.

The problem is that, when I render the scene, there are some strange lines on every planes row, here’s a full working Codepen: Codepen Link

Do you see those diagonal lines there? Are you able to tell me what’s happening? I didn’t find their origin.

Thank you in advance!

EDIT: Nice reply on StackOverflow: https://stackoverflow.com/questions/52729762/three-js-strange-lines-on-custom-mesh
I partially solved the problem and updated the Codepen.

2

To me it looks like the diagonal line is where the triangle strip wraps onto the next line. For example, one of the diagonal lines in the following image:
image

In your example, the line fades out from opacity of 1 to 0. Maybe you can fix it by setting the first points opacity to 0 as well?

I’m not sure of how to implement a proper solution to have multiple separate strips other than use several meshes with separate geometries rather than merging them all as one. This article may help though .http://www.learnopengles.com/tag/triangle-strips/

3

Crossposting:

4

Is it forbidden?! I thought these are 2 totally different places. I’m sorry, I can delete this one

5

It’s not forbidden. Posting the link to stackoverflow makes it easier to follow the whole discussion.

1 Like