FPS: THREE.Mesh VS THREE.Geometry

Questions
1

Hey all, I’ve been using ThreeJS for a long time now, but still not a ‘3d programmer’ by any means.

I have this MMO:

image
image857×778 85.3 KB

I’ve had to do a LOT of crazy stuff to get my Three.Mesh objects loading a 2d png and make space ships, my CPU has always been crap. I’ve got some things I consider now like ‘render distance’ to delete ‘sprites not seen by the camera’. I’ve finally got a stable FPS.

I am limited to about 100 ‘sprites’ on the screen.

I finally got good enough to try a particle system and I’m FLOORED by it’s CPU value, I can easily do 10,000 items on screen with 75 FPS:

image
image1640×884 70.9 KB

WHY is this? As a noobie entry guy trying to do some basics with graphics, why isn’t this better documented?

Literally just comparing these two codes, why is there THAT much cpu difference? (Man once I’m done my game is gonna be smooooooth)

	// Build Sprite
							var object_sprite = new THREE.Mesh(
								new THREE.PlaneGeometry(object_image.image.width, object_image.image.height,1,1),
								new THREE.MeshBasicMaterial({
									map: object_image,
									transparent:true,
									depthWrite: true,
									depthTest: true,
									alphaTest: 0.1,
									side: THREE.DoubleSide,
									opacity: 1,
									//color: 0xFF0000
								})
							);

VS

particles = new THREE.Geometry();
var pMaterial = new THREE.ParticleBasicMaterial({
  color: 0xFFFFFF,
  size: 2000,
  map: THREE.ImageUtils.loadTexture(
    "https://wpdev.solarwarheroes.com/cdn/ships/Cargax.png"
  ),
  //blending: THREE.AdditiveBlending,
  transparent: true
});
2

It seems you are using an outdated three.js version. In latest releases THREE.Geometry has been removed and ParticleBasicMaterial has been renamed to PointsMaterial.

In any event, rendering a sprite or a flat plane mesh means a draw call per instance. When you implement your sprites via a single point cloud (an instance of THREE.Points), you draw everything with a single draw call. That can make a huge performance difference.

2 Likes