# How to render multiple ranges of BufferGeometry?

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!

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

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