Imagine having a sleek spaceship visualized in your scene. As you zoom out, the ship shrinks proportionally, which is a fairly simple task. However, at some point, you may want to swap the detailed spaceship model with a basic triangle that symbolizes the ship. In this scenario, the triangle representation should follow the ship's movements and camera adjustments accurately. It must maintain its orientation regardless of any rotations or camera rolls applied. While achieving this on a canvas might seem straightforward by plotting the x and y coordinates of the 3D object to draw the triangle, the challenge lies in drawing directly on the WebGL canvas itself. Is it even possible? If not, are there alternative strategies or techniques you can suggest to accomplish this task effectively? Any guidance would be greatly appreciated as I navigate my way through this issue. Thank you in advance.
Update: After careful consideration, I have decided to adopt the orthographic camera overlay method as recommended below and in various other sources.