Как разработать слайдер на WEBGL с distortion эффектом?

Question

[Dan111]

Подскажите пожалуйста как можно разработать слайдер с таймером, автопрокруткой, сменой слайдов стрелками, колесиком мыши и по нажатию на стрелки, с нумерацией слайда (к примеру 03/06) с distortion эффектом как здесь: https://tympanus.net/Development/webGLImageTransit... ?

Я нашел исходники, кто-то сумел интегрировать webgl c swipers.js (https://github.com/actarian/swiper-webgl) и на swiper js у меня получилось реализовать всё что нужно, но в этом примере сама анимация костыльная, она как-то работает не правильно иногда с задержкой, иногда наоборот быстро (это можно на самом исходнике видеть: https://actarian.github.io/swiper-webgl/)

Comments

[RAX7]

А зачем там вообще swipers? чтобы только стрелочки и пагинацию нарисовать

[Dan111]

RAX7, Я просто не знаю как слайдер создать, а в swiper проще настроить слайдер с нужным функционалом

[Dan111]

В общем я хочу сделать слайдер примерно как здесь:
https://tagree.agency/cases/
https://talia.su/

[RAX7]

Dan111, нечто подобное здесь уже было
Что за эффект при скролле?

[Dan111]

RAX7, Эффект похожий, но мне слайдер нужен. У Юрия Артюха не было видео со слайдером, кстати пример который я указывал он разрабатывал. А слайдер, который в ответе указан очень сложный, я так и не понял как добавить нужные мне опции, при том что я его практически весь разобрал

[RAX7]

Dan111, нету готового слайдера в точности такого как тебе нужен, а пытаться прикрутить какой-то готовый слайдер к webgl бессмысленно и бесполезно. Слайдеры типа swiper/slic/etc работают с DOM элементами и CSS свойствами и весь функционал у них заточен под это, все их настройки бесполезны для webgl и приносят больше хаоса и путаницы, чем пользы.
Webgl слайдеры работают на следующем принципе:

• Есть две текстуры (картинки)
  в статье на tympanus это:
  

  uniform sampler2D texture1;
  uniform sampler2D texture2;

  
  в дэмке на codepen:
  

  uniform sampler2D currentImage;
  uniform sampler2D nextImage;

  
  
  
• Есть переменная значение которой меняется от 0 до 1 в процессе смены слайда (текстуры)
  uniform float progress; или uniform float dispFactor;
  
  
• Для смены слайда нужно передать в uniform переменные нужные текстуры (из какой в какую картинку происходит переход) и проанимировать значение переменной progress (от 0 до 1)
  
  
• Тебе же остается дорисовать кнопочки/стрелочки и ловить нужные события (click, mousewheel)
  
  

P.S. можешь вот это посмотреть https://www.youtube.com/watch?v=I9A4xTT2rh0 (там Юра делает fullpage слайдер)

[Dan111]

RAX7, блин спасибо! Очень подробно объяснил, а то я вообще в этом не разбираюсь и голова уже закипают, не знаю даже куда копать, вроде есть исходники нужной анимации, но как их настроить для слайдера вообще не понимаю. Можешь посоветовать как это лучше реализовать, мне нужен именно слайдер с таймером, автопрокруткой, сменой слайдов стрелками, колесиком мыши и по нажатию на стрелки, с нумерацией слайда (к примеру 03/06). Я так понял их нужно на webgl использовать? Или webgl только для анимации используется? А то вообще webgl не разбираюсь, думал смогу изучить и ничего не могу понять)

[RAX7]

Или webgl только для анимации используется?

да, он используется только для создания эффекта перехода между картинками.

А то вообще webgl не разбираюсь, думал смогу изучить и ничего не могу понять)

это нормально, webgl сильно отличается привычных браузерный api, если хочешь разобраться в нем то придется приложить усилия.
https://webglfundamentals.org/webgl/lessons/ru/

мне нужен именно слайдер с ...

как и говорил до этого: готового и похожего, который можно было бы быстро переделать под твои запросы мне найти не удалось. Так что придется тебе во все это вникать и разбираться.