Use a floating label style for HUD and Update Cloud Particle Sprite

[codeincarnate]

This PR updates the HUD to a floating style reminiscent of many sci-fi movies and games. It also applies Grafana styling to the HUD and cross-hairs. Additionally I changed the point sprite to one that is cleaner.

Currently placement is pretty naive and doesn't respect the viewing frustum at all. Would need an update to take care of that.

https://user-images.githubusercontent.com/199847/185707454-1b4c220a-faf4-42ca-af2f-b15b80cad895.mov

[mdvictor]

This is a really cool touch and it makes it look awesome! I think the positioning though will prove problematic. I would suggest using the transform: translate3d() and adding the line through CSS instead of a <Line> component and keep the entire tooltip in HTML.

[codeincarnate]

Alright, finally managed to figure out a good way to do this. Floating the HTML above the canvas currently. Code calculates the location of the HUD center point on the camera's plane and uses this to draw a line from the hovered point to the point on the plane. See below:

Currently the hover/unhover performance is pretty terrible so we'll probably want to figure that out.

https://user-images.githubusercontent.com/199847/187794514-bb7b166d-cc69-450d-8ce6-00351ebd2cee.mov

[codeincarnate]

Found the performance issue, looks like axis labels are being redrawn on hover events and this is taking a lot of time. Not exactly sure why they're being redrawn (and I don't think they should be). Here's how things look when they're not displayed:

https://user-images.githubusercontent.com/199847/187799249-7ef23b79-089a-4929-a1bd-e3a0d210e5f4.mov

[mdvictor]

Found the performance issue, looks like axis labels are being redrawn on hover events and this is taking a lot of time. Not exactly sure why they're being redrawn (and I don't think they should be). Here's how things look when they're not displayed:

Screen.Recording.2022-08-31.at.5.54.47.PM.mov

This looks cool! My only question is if the tooltip will always be fixed on the bottom right corner of the screen.

As for the performance issue, that's interesting. Something probably triggers a rerender of everything... quite weird.

[codeincarnate]

Think I may have figured out the performance issue. Currently Grid and Axis components are creating new Vector3 objects at each render which is an expensive operation. We should change these to use mutation instead. See here for info: https://www.youtube.com/watch?v=DPl34H2ISsk&t=1517s

[codeincarnate]

OK, this code has become a complete mess 😆. I think I'm going to leave it for a bit and refactor some things we need to in order to ensure performance first.

[mdvictor]

Think this is quite a bit stale :D