Menu
Hi there.
Let’s say I have some animations in a canvas, and I want to have the animations reflected (like as if the animations are hovering over a glass surface of sorts).
First idea I had: I thought “no problem, lets just distort and copy some stuff within the canvas (= a circle gets calculated again as an ellipse)”, but that was quickly getting too troublesome.
Second idea: “let’s just create a second canvas, copy the contents of the first canvas into the second, and perspectively distort it with css”. That was a lot easier and looked nice, but with the reduced opacity and such the FPS dropped on an old MacBook to just about 25FPS.
Third idea: “let’s turn the content of the canvas into an image and apply the CSS to that, as having an image and a canvas might be more performant than having two canvases”. Did that, looked the same, but the FPS dropped to 22.
I guess another possibility would be to use three.js or babylon.js to create the animation in a 3d environment and add a reflective surface. But I’m unsure if this would improve the performance.
If anybody would have any ideas how to achieve this effect in a more performant way, that would be great.