Please add some detail explanation about the most important 2 lines of code

[star8ks]

Thank you for your demo, it helped me. But I don't fully understand why.

I think as a demo, it's important to explain the thinking process of the key thing you demonstrate, for the learners who come to find technical detail instead of just "shader magic".

Would you please comment this 2 lines?

three.js-demos/crossfade/js/transition.js

Lines 73 to 74 in 40a8ec1

	"float r = mixRatio * (1.0 + threshold * 2.0) - threshold;",
	"float mixf=clamp((transitionTexel.r - r)*(1.0/threshold), 0.0, 1.0);",

I understand that as third parm of mix, mixf have to clamp from 0.0 to 1.0, but what does float r = mixRatio * (1.0 + threshold * 2.0) - threshold; means?

And why we have to (transitionTexel.r - r)*(1.0/threshold)?

Is this your own invention or you see from somewhere?

I'm really enjoy shader programming, and really feel a door closed when I see magic uncommented shader code like this.