HTML-анимация холста с помощью GSAP / d3.js - PullRequest
Новая
       54

HTML-анимация холста с помощью GSAP / d3.js

0 голосов
/ 24 августа 2018

Я хочу создать HTML5-анимацию холста, скорее всего, на этом сайте: https://flowstudio.co/.

Я начал с GSAP, но похоже, что создать что-то вроде этого - действительно большая задача. Я должен создавать в основном каждую точку / ход единственного числа, и я понятия не имею, есть ли более быстрый / лучший способ. В настоящее время я смотрел только на GSAP без плагинов. Есть ли какой-нибудь специальный инструмент / (GSAP) плагин, который может помочь создать это? Или мне стоит использовать d3.js?

Я также пытался найти учебник для этого, но похоже, что для этого более сложного случая ничего нет.

Спасибо за помощь!

1 Ответ

0 голосов
/ 28 сентября 2018

  1. В приведенном вами примере используется THREE.js , и я бы посоветовал вам использовать его также, поскольку вы хотите работать и в трехмерном пространстве.

  2. Если вы хотите анимировать большое количество точек, вам нужно будет использовать вершинный шейдер . Это связано с тем, что вершинный шейдер позволит вам вычислить все положения точек за один шаг (благодаря параллельным вычислениям на GPU), тогда как выполнение «обычного способа» (на процессоре) очень плохо сказывается на производительности, поскольку каждая отдельная точка должен быть рассчитан один за другим. (здесь вы можете увидеть разницу )

  3. Способ, которым вы анимируете точки, немного отличается от того, что вы думаете - вы не хотите применять анимацию к каждому. не замужем. точка ... Вместо этого вам понадобятся три вещи, которые вы передадите шейдеру:

    - массив, содержащий положение начальных точек,

    - массив, содержащий положение конечных точек,

    - параметр blend (просто переменная типа float, принимающая значения от 0 до 1).

    Затем вы используете GSAP , чтобы анимировать только параметр blend , а шейдер делает все остальное (например, когда параметр blend равен 0,5, точка находится точно на полпути между начальной позицией и конечная позиция, которую вы указали шейдеру)

  4. В приведенном вами примере также используется какая-то функция Perlin Noise, которую вы также должны будете реализовать в шейдере.

    Много кусать за один раз, но вот несколько замечательных уроков от Юрий Артюх , которые помогут вам достичь чего-то похожего:

    https://www.youtube.com/watch?v=XjZ9iu_Z9G8&t=5713s

    https://www.youtube.com/watch?v=QGMygnzlifk

    https://www.youtube.com/watch?v=RKjfryYz1qY

    https://www.youtube.com/watch?v=WVTLnYL84hQ&t=4452s

    Надеюсь, это поможет и ... удачи!

...