If you encounter problems that you cannot solve, and they are described below — I hope I helped you:
Always compress GLTF models using draco (files are compressed to 90% of the original size).
Reduce the number of draw calls — the fewer of them, the higher the FPS.
(obviously) Try to reuse everything you can, do not create unnecessary objects in JS and on the GPU — save CPU resources and memory.
In general, keep an eye on memory when working with models and WebGL in general — it is very easy to leak.
Try to avoid enabling antialiasing when creating a WebGLRenderer — this greatly improves performance.
Take out calculations that are not tied to the DOM to web workers – this really improves the performance of the main program execution thread in the browser.
Pasha together with a bottle of More!milk make up the site
Was it worth the time and effort spent?
In general, most of the time was spent on two processes:
- 1. Finding a balance of high-quality performance of the site on any device and preserving the technologies that were laid down during creation.
- 2. Achieving the most natural appearance of bottles and their contents without loss of productivity.
Because of all these technical difficulties, we went into a serious minus on the project budget, given that we took it on special conditions. I had to postpone the launch date of the site 3 times.
Of course, we didn’t plan to spend so much time on this project, but we also aimed to make it as cool as possible and climb to a new level in working with WebGL technology.
After the launch, we received a lot of positive feedback. This, of course, is very pleasing and invigorating.
When a project lasts for a long time, the “eye gets blurred”, fatigue appears both from the visual and from the process. We all love fresh and new, and when a person looks at the same pictures for several months, it gradually seems to him that everything is wrong and wrong. This is a natural human craving for the new.
Checking the correctness of the decision is not at all about changing and redoing everything. It is to show someone who has never seen and see his reflex, the first reaction. If this is a wow effect, if he does not twist his mouth at first glance, then the project is successful.
And what about the contests?
Our MoreMilk project has already received 3 ribbons at Behance: Interaction, AIGA, AdobeXD, Website of The Day at CSS Design Awards and honorable mention at Awwwards. Do you think it will be possible to take Russian awards like Tagline and the Golden Website with this project?
We receive a huge part of the traffic from contest sites that directly affect our fame not only in Russia, but also abroad. It’s really nice to understand that, working in Krasnoyarsk, our team receives awards from prestigious design awards of the world.
At such moments, you realize that it’s not so important where you are, but what you do is important. In addition, against the background of all the events, it will be very useful to focus on working with the foreign market, and the awards of such awards as CSSDA, Awwwards, FWA are a good indicator for foreign clients.
To summarize
On New Year’s Eve, our team received a gift from More!milk under the Christmas tree — a whole box of soy milk. It turns out that we tried not in vain! As a token of gratitude, we arranged a small photo shoot and left feedback about a useful product.
Our studio has reached a new level in working with WebGL technology. The experience gained and the stuffed “bumps” indicate that the next steps will be started from an already higher bar, and we will make projects with 3D graphics even cooler, faster and more interesting.
We believe that ideas are the most valuable thing in the world right now. Therefore, creating a website for us is an opportunity to convey our message to many people through many techniques.
We were lucky that the team we entrusted with the site brought their original ideas and presented our company exactly as we wanted.