How to render multiple ranges of BufferGeometry?

Questions
,
1

Hi,

Let’s say I have N points in my geometry of my THREE.Points.
I would like to render multiple ranges of the THREE.Points.
Furthermore, the number of ranges and the limit of each range are dynamic

With BufferGeometry.setDrawRange ( start : Integer, count : Integer )
we can only render one range.

function randomPoints(count,range, color= 0xffffff, size = 0.05){
    const vertices = [];
    for ( let i = 0; i < count; i ++ ) {
        const x = THREE.MathUtils.randFloatSpread( range );
        const y = THREE.MathUtils.randFloatSpread( range );
        const z = THREE.MathUtils.randFloatSpread( range );
        vertices.push( x, y, z );
    }
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
    const material = new THREE.PointsMaterial( { color, size } );
    const points   = new THREE.Points( geometry, material );
    return points
}
const points =  randomPoints(N)

How can I render for example at

  • t1 => [0,3] AND [4,2]
  • t2 => [2,3] AND [6,1] AND [7,2]

with the first value of each array being the start and the second value being the count ( same meaning of BufferGeometry.setDrawRange parameters )

Is there a way of achieving this?

Thanks!

2

The draw range is based on WebGL’s drawRangeElements, so you can’t draw multiple ranges within the same draw call.

I think you might get better results rearranging the vertices in the geometry on the fly. Or for triangle meshes you can just rearrange the index and not the vertex data.

1 Like
3

Yes I will take that as a solution, it will do the job.

Thanks for your quick answer !