My own "displacementMap" Image

[cimt]

Hello,

I use the slideshow with this transition (and it works): https://gl-transitions.com/editor/displacement

But how can I create my own "displacementMap" image for this transition

like this: texture: 'images/displacement-image.png'

My goal is a slideshow like this: https://tympanus.net/Development/webGLImageTransitions/index6.html

Be happy about any answer

[yomotsu]

Currently, the lib allows only float and vectors in uniforms. https://github.com/yomotsu/gl-slideshow/blob/846b554c7667327d63bfbd205297d2b669480168/src/GLSlideshow.ts#L432-L453

Add sampler2D above, then images can be uploaded as uniform. (feel free to submit pull requests)

[cimt]

Thank you for your answer. I am not a developer and i don't understand what you mean... Sorry

My starting point is the "shader.html" template.

with the script: `const uniforms = { texture2D: 'localhost/test/assets/images/displacement.png', strength: 0.2, }; const shader = [
'uniform sampler2D displacementMap;', 'uniform float strength; // = 0.2',

'vec4 transition (vec2 uv) {', ' float displacement = texture2D(displacementMap, uv).r * strength;',

' vec2 uvFrom = vec2(uv.x + progress displacement, uv.y);', ' vec2 uvTo = vec2(uv.x - (1.0 - progress) displacement, uv.y);',

' return mix(', ' getFromColor(uvFrom),', ' getToColor(uvTo),', ' progress', ' );', '}',`

[yomotsu]

I'm sorry, I don't have much time... Please ask your developer team.

[cimt]

Thank you for your answer. I was hoping it wouldn't be complicated.

I would be glad if you could build it in in the future!?

Great work so far

[yomotsu]

Custom-texture was just supported. http://yomotsu.github.io/gl-slideshow/examples/shader-image.html

closing this issue.