Where to start learning webgl to do this?

Question

JavaScript

There is an interesting solution https://3d.syrup-aerius.ru/ animation of the bottle when scrolling the site.
Kind of like webgl or something.
I don’t understand where to start studying like this in order to do the same, repeat and do similar animations.
What resources and materials are needed for this?

Answer 1

The whole essence of such animations is a lot of pre-prepared frames, which we show in turn. The more frames, the smoother the animation. They can be in separate pictures or many frames in one. On your site, all this is still divided - each part of the bottle has its own sequence of frames:
I do not see any specific advantages of this approach compared to one frame for everything. Should I use WebGL for this? Well, you can. Just like regular canvas. You can easily google how to display pictures on it, it remains only to calculate the coordinates of the location of the frames in the picture (in theory, the designer should arrange them there neatly on the grid) and display them one by one.
PS: In theory, you can render a video and instead of manually switching frames, scroll it in different directions at different speeds depending on the scroll. But in practice, something is not visible, that this is massively done, usually it is individual frames that are used.

Answer 2

This is SVG

Answer 3

To prepare such content, you first need to study some kind of modeling package. The most popular and well-known are Blender and 3ds Max. And then google for engines / plugins that export from these packages to WebGL. For example blend4web mentioned above (but I don't really like it lately) or verge 3d.