Как можно повторить на своем сайте 3D-анимацию с чужого сайта?

Question

[alexis_berg]

Для контекста:
Я в данный момент переделываю старый сайт компании родственника. Знаю html, css, php, javascript, также немного училась 3d - собрать задуманные модельки, думаю, смогу. Пока что решила собирать сайт на тильде (для облегчения задачи и визуального представления), а следом уже выгрузить готовый код и подредактировать его.

К сути вопроса:
Очень понравилась анимация при скролле на данном сайте (https://3dfy.ai), поэтому хотела бы ее повторить с видоизменениями (заменить модели, цветовые решения, но в целом, логику анимации оставить хотелось бы ту же - текстуры моделей состоят из движущихся точек, и при скролле они разлетаются, потом снова собираются уже в другую модель).
В связи с этим вопрос - как это можно реализовать (код или может даже средствами тильды такое возможно)? Может, вы видели подобные видео-уроки/статьи, либо можете на пальцах объяснить механизм действия. В любом случае, буду рада любой помощи и советам.

Comments

[szQocks]

https://github.com/ektogamat/threejs-particle-skull

Answer 1

[Александр Павлюк]

1. Разобраться как работает WebGL, как работают вертексные буферы, как работают шейдеры.
2. Написать на WebGL вертексный шейдер, который интерполирует позицию между координатами из двух буферов. Таким образом можно будет передать в шейдер два буфера и параметр плавного перехода между ними (число между 0 и 1).
3. Добавить в шейдер управление цветом (на указанном сайте чем точка дальше от камеры, тем она ближе к серому по цвету).
4. Добавить в шейдер еще один числовой параметр для случайного отклонения точек от своих координат для эффекта "разваливания" модели при действиях мыши.
5. Собрать весь пайплайн рендеринга, рендеря точки как спрайты с текстурой или же генерируя текстуру кружка во фрагментном шейдере (тут надо посмотреть, что из этого будет быстрее работать).
6. Написать программу, которая распределит N точек случайным образом внутри нескольких предоставленных моделях и сохранит данные всех расположений точек в файлы, которые будет потом грузить веб-приложение. Можно использовать Blender и геоноды там, у них есть уже готовая функция заполнения модели точками. Главное потом сохранить в таком формате, чтобы было удобно читать в вебе.
7. Собрать все компоненты вместе, чтобы при скролле и движениях мыши отправлялись нужные параметры в шейдер (две текущие модельки, бленд между ними, случайное отклонение точек, углы камеры)

Answer 2

[Froggyweb]

Это therejs вот урок к примеру https://varun.ca/three-js-particles/