Shader example

[WideCircle]

Hi! I'm trying to make my own transition effect. So I checked out the shader.html I noticed it makes no difference what value I write in the variabel 'uniforms' for the smoothness. It always has sharp edges.

const uniforms = {
    smoothness: { value: 1,  type: 'float' }
};

So I went to https://gl-transitions.com/editor/ and pasted in the code there. In the editor it works as expected with smooth edges.

Am I doing something wrong?

Really like the slider by the way. Good job!

Best, Niklas

[yomotsu]

thanks for using the lib. actually, uniforms must be like this.

const uniforms = {
    smoothness: 1,
};

Sorry for the confusion. I updated the example.

[WideCircle]

Aha! Thank you & no problem. I will check this out!

One more question: :) Are the imgs preloaded (good at slower connections) or is that something I should take care of myself?

[yomotsu]

regarding your second question, the slider will load the images if it is not loaded. ~But I just realized, if images have been already loaded, might not work.~ <- I tested and that's no matter.

If an image is not loaded, the slider will show in black for the image, and replace it to the loaded image after loading. You can also pass loaded images to the constructor.

Slider constructor takes

• path string
• Preloaded HTMLImage
• HTMLImage but in loading progress.

[WideCircle]

Works like a charm!! Thanks for your help!

[WideCircle]

Hi again! :-) Hmm - I'm trying use this effect https://gl-transitions.com/editor/randomsquares I can't figure out how to deal with ivec2. If I use this:

const uniforms = {
    smoothness: 0.5,
    size: ivec2(10, 10)
};

I get an error message that ivec2 is undefined...how do I deal with this?

Best, Niklas

[yomotsu]

Pass an array