Description
I should switch to WebGL to render the notes more efficiently, and to make it easier to implement fancy effects.
I don't know if a framework like PIXI.js would be helpful here, probably I can do it in raw WebGL. Well, might as well use THREE.js, and have 3D possibilities, both for effects, and for controls for lining up with a camera's view of a piano. Well, I'm not sure what controls that would be, but at any rate I'm familiar with THREE.js and know how I could implement note drawing efficiently (filling data in a BufferAttribute, and extending the draw range of the BufferGeometry for new notes. Notes are basically lines, or if I want to draw them as an extruded square, I believe I can do that with a vertex shader, so I'm still passing only the note data to the GPU. Not sure that 4x would matter though.)