Significant performance drop with raycaster

Questions
1

I am using a raycaster on a simple grid of cubes and am encountering 2 FPS:

The grid is 20 x 20 box geometries with a hover raycaster and I only need the first intersected object.

2

20x20 grid of cubes should not be a problem.

Could you try to remove the console.log in line 61? Does the performance improve? Sometimes online systems are notoriously slow with capturing the console output.

console.log(x);
3 Likes
3

Have you also tried reusing one material instead of creating 400, one for each and every box? This crashes on mobile likely because of this…

2 Likes
4

… and one geometry

3 Likes
5

It might be better to store the mouse coordinates in the ‘mousemove’ event, and only do raycasting once before rendering. This seems to perform fine:

You’ll see the same pattern used in examples with more complex geometry, too:

https://threejs.org/examples/?q=ray#webgl_instancing_raycast

There is some limit in terms of number of objects and triangles the raycaster can do in one frame, but the example doesn’t currently seem to be near that limit, I think it is just doing too much on mousemove.

4 Likes
6

Deleting console.log(x); FPS 60

1 Like
7

It does appear that the console.log was causing raycasting issues.

@dominikjasek optimization also helped with only doing hover events.

The objects were not instanced meshed or material because the program that this is being used for deals with unique models.

8

Throttling and Debouncing can also help

1 Like