How to use SPS correctly?

Hello everyone

I am using SPS in my project in order to optimize the performance, But when I wanted to modified position of each cube I got an error.
this is my PG:

This is because this is not the correct format for initParticles.

Please read the SPS docs from the start at least until section 3 Summary. There are example templates for how to use initParticles() [no parameter] and updateParticles(particle) [particle parameter] both of which you will need and also PGs such as this one that shows working examples.


Also note that your integers are stored as strings, you need to parseFloat() them before using as position, scale, etc.

Seeing as you only have integers, this should be ok;

// Convert strings to integers, e.g. cubes[0].key = 1 instead of "1"
cubes.forEach(cube=>{ // forEach cube in cubes array
  let prop;
  for(prop in cube){ // for each property in cube
	cube[prop] = parseFloat(cube[prop]); // conversion
1 Like

Hi @JohnK
Thank you for your helping, I read all the SPS docs but I couldn’t solve the problem, I don’t know how to use SPS in my code.

Hi @aWeirdo
Thank you for your helping.

There are major problems with your code.


particle.position.x = cubes.X;
particle.position.y = cubes.Y;
particle.position.z = cubes.Z;

cubes is an array so an index is needed


var myAttributeFunction = function (particle) {

You need to pass an index for the cubes and as @aWeirdo says use parseFloat



particles are help in SPS not here



No index to particle passed

5 You build the mesh twicw

In this PG I have played with the numbers so the particles are visible. You will need to play around with cube sizes and camera positions so they are visible where you want them.


Thank you so much JohnK, I deleted SPS.initParticles and set SPS.billboard = true , then the cubes appear , but I didn’t understand where should I locate arrCubes.push because in the rest of my code I want to select each cube with the help of arrCubes array.


SPS.particles array

1 Like

Hi @aWeirdo
Thank you a lot.
should I put arrCubes in SPS.initParticles?

The PG#35 does not work for me

NO do not use it at all - see this PG I posted earlier and how updateParticle is used to change properties of a particle, i.e. your one of the cubes

1 Like

Thanks a lot for your helps , I did it in this way:

SPS.updateParticle = function (particle) {

but It does not work properly.

How can I get arrCubes array like array of cubes, because I need to use etBoundingInfo()

you’re not supposed to use arrCubes.
SPS.particles is already an array containing all particles.

1 Like

and then how can I access to getBoundingInfo() of each cube?
Because after that I need to selected each cube and also deleted some cubes.

particles does not have boundingInfo, they’re part of the SPS mesh boundingInfo.

SPS.particles.forEach(particle => {
  // Do something with each particle

If you need to select / “pick” cubes by clicking them see SPS docs about picking. :slight_smile:

1 Like

this is my PG without SPS:

I wanted to use SPS to improve the speed of rendering.
because in my original project I have 4000 cubes and one Gizmo Box that can be move on the Block Model and if I wanted selected inside the Gizmo Box or outside Gizmo Box, I needed SPS to optimize my project, If I couldn’t use boundingInfo, is it another alternative for SPS to improve the speed of rendering in my project?
before that I use instances but in Instances I couldn’t use ColorLerp, because of that I try to use SPS, I need to Optimize my Block Model but I don’t know how

Sorry but PG has errors.

It is really unclear what your project is trying to do. Please take a step back. How about if you generate a PG say 5 cubes all close to the origin with an arc rotate camera targeting (0, 0, 0) with a reasonable radius. All the JSON stuff and long distance viewing can be dealt with later. Let us know how you intend to interact with the cubes. What do you need the gizmo box for?

1 Like

@JohnK , @aWeirdo
Thank you so much, I’ve done it.