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

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

    @Froggyweb
    Это therejs вот урок к примеру https://varun.ca/three-js-particles/
    Ответ написан
    Комментировать