Performance Issues with Aframe Cursor

[emmanent]

Hi there!

I'm using the scatterplot to plot 15000 data points, but when the data is mapped out, the overall performance of the entire aframe environment starts slowing down. It only slows down when I "look" at the scatterplot (for example, if the scatterplot was positioned behind me, there are no performance issues). Chrome's "Inspect element" window outputs the error [Violation] 'requestAnimationFrame' handler took 88ms, and it outputs this error message multiple times a second (with different values for how long it took; it's not always 88ms). Is this a known issue, and is there something I can do to resolve this? Thanks! 😃

Benji

[emmanent]

I found my solution. I have a cursor in my aframe world. Disabling the cursor resolves the performance issue 😅

[zcanter]

Not sure why that would happen, but glad it worked!

[emmanent]

I looked into the cursor issue some more. The cursor is Aframe's default cursor, a-cursor. I only added cursor color and position; everything else is set to the cursor default. With no cursor, my Aframe environment runs at 60 fps, no matter how many data points I plot (I plotted up to 100000 data points with four data values per data point).

I started experimenting when I get frame drops with the cursor on. All data points have four data values each (three spatial dimensions, one for color), and I tracked the fps with Aframe's stats component. Here's what I've found: With 1000 data points, we have 60 fps. With 5000 data points, around 50 fps. With 10000 data points, around 40 fps. With 13000 data points, 32 fps. With 15000 data points, 27 fps. With 100000 data points, 1.7 fps (this was really fun to do 😛 ).

These frame drops only occur when the cursor is placed over the scatterplot. Once the cursor is no longer on top of the scatterplot, we return to 60 fps.

Trying this experiment in Safari yielded similar results. The numbers might be different, but overall, the addition of a cursor created frame drops that scaled with the number of data points plotted.

My guess is that, because the cursor has raycasting behavior, it struggles to identify what it is pointing at, hence the performance issues.

Reopened the issue in hopes to hear if this issue could be fixed. I can't eliminate the cursor because I'll need it later for menu selection. Thanks! 😃

[emmanent]

Update: I found a fix to allow cursors and scatterplots to coexist in peace.

1. For the cursor, add raycaster="objects: .clickable" inside. This will make the cursor's raycasting only consider objects that are given the "clickable" property. After this addition, the cursor should look something like this in the html file: <a-cursor raycaster="objects: .clickable"></a-cursor>.
2. In the scatterplot, add class="not-clickable", making the scatterplot a non-clickable entity. Now the cursor won't consider this object. This should look like: <a-scatterplot src="thing.json" class="not-clickable"></a-scatterplot>.
3. If you want your other objects to be clickable, you would add class="clickable", in a similar fashion as what we did with the scatterplot. I'm not sure what class defaults to (are items clickable by default?), but you can add it just to be safe/explicit.

With these additions, all my frame issues are resolved! 🎉

Whether we want performance-friendly clickable scatterplots is something for @zcanter to consider, but in the meantime, this will be a sufficient solution for those that don't need a selectable scatterplot 😃

[zcanter]

I really appreciate the work on this! I think you've definitely made a strong case for improving click-ability performance. I'm going to keep this as an open issue, and will also think about some solutions. In the meantime thank you for your workarounds!