Как сделать такой эффект прорисовки изображения из пустоты?

Question

[Лев Александров]

Здравствуйте!
Подскажите, как реализовать подобный эффект:




Реализован на этом сайте с помощью canvas и WebGL (картинки по бокам при скролле прорисовываются, моя на скринах в самом низу в синей секции):
https://citadellegin.com/en/

Answer 1

[RAX7]

Скорее всего этот эффект сделан на основе шума Перлина
Можно сделать примерно так:

Comments

[Лев Александров]

Да, когда шарился в коде того сайта и гуглил натыкался на этот термин. Но там все ооочень сложно. И тоже видел какой-то Сишный код.
Спасибо большое за пример!

[Лев Александров]

А вы не знаете, почему у меня не получается свои картинки подставлять? Они растягиваются как-то странно...

[RAX7]

Лев Александров, потому, что у меня все картинки специально сделаны квадратными, т.е. в пропорциях 1:1. Так же размеры канваса заданы как 300x200px в двух местах renderer.setSize(300, 200); и uResolution: { value: new Vec3(300, 200, 1) }, их можно поменять на другие.

[Лев Александров]

RAX7, не ожидал, что Вы ответите. Завтра попробую.
Еще раз спасибо!

[Лев Александров]

А как использовать изображения с прозрачностью PNG или SVG, например?
Пробовал писать так:

gl.enable(gl.BLEND);
// gl.blendFunc(gl.GL_SRC_ALPHA, gl.GL_ONE_MINUS_SRC_ALPHA);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

И менять расширение при загрузке текстуры, но не срабатывает. И появляется какой-то бордер непонятный:


Тут прозрачность не работает, я просто залил фон картинки цветом как у секции..

И при прорисовке виднеется, что это квадрат


Я еще думал, а нельзя ли подобное проделать с clip-path: разбросать над изображением пару форм и анимировать их расширение пока не покажется вся картинка

[RAX7]

Лев Александров, в шейдере замени строку
gl_FragColor.a = 1.0 - noize; на
gl_FragColor.a = tex.a * (1.0 - noize);

[Лев Александров]

RAX7, получилось, спасибо! Если могу как-то отблагодарить Вас нормально (деньги, например) - только напишите..