I would like to make a GLSL shader for warping an image/texture using the TPS algorithm. How would I write the GLSL vertex shader for that?
Asked
Active
Viewed 335 times
-1
-
1what have you tried? where are you stuck? – tucuxi Oct 29 '19 at 14:54
-
Unfortunately I'm stuck at trying to understand the TPS algorithm. In GLSL I managed to make 2 matrices of control points: a source and a destination, and I'm guessing that I have to infer some kind of interpolation between the control points. Then to adjust the coordinates of the textures from where I'm reading. I have a very rough test, that is not doing what I want yet, here: https://jsfiddle.net/codingdude/ak3bveuj/ – coding-dude.com Oct 30 '19 at 09:23
-
I found an interesting article: https://testdrive-archive.azurewebsites.net/Graphics/Warp/Default.html that does pretty much what I need. Now I have to adjust it to my needs – coding-dude.com Oct 31 '19 at 11:58
1 Answers
0
The answer was that I needed to make a vertex shader, not a fragment shader.
What I needed was to actually warp an image with GLSL and it seems this article describes how to do it: https://testdrive-archive.azurewebsites.net/Graphics/Warp/Default.html
attribute vec2 aPosition;
varying vec2 vTexCoord;
#define MAXPOINTS 9
uniform vec2 p1[MAXPOINTS]; // where the reference points
uniform vec2 p2[MAXPOINTS]; // where the warp points
void main() {
vTexCoord = aPosition;
vec2 position = aPosition * 2.0 - 1.0; // convert 0 - 1 range to -1 to +1 range
for (int i = 0; i < MAXPOINTS; i++)
{
float dragdistance = distance(p1[i], p2[i]);
float mydistance = distance(p1[i], position);
if (mydistance < dragdistance)
{
vec2 maxdistort = (p2[i] - p1[i]) / 4.0;
float normalizeddistance = mydistance / dragdistance;
float normalizedimpact = (cos(normalizeddistance*3.14159265359)+1.0)/2.0;
position += (maxdistort * normalizedimpact);
}
}
//gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);
gl_Position = vec4(position, 0.0, 1.0);
}

coding-dude.com
- 758
- 1
- 8
- 27