How to get texture linearly stretched on a quad

Questions
1

Im trying to edit the textureCanvas in order to be able to move the drawing rects 4 corner.
(BabylonTextureCanvas/textureCanvas.ts at master · Poolminer/BabylonTextureCanvas · GitHub)
I created the controlPoints passed as uniforms to the shader, but i want to make them such, that if I move a controlPoint I want to get the texture stretched in the whole quad linearly, not only in itsown triangle.

How could I achieve that?

My current shader code:

effect_1.Effect.ShadersStore["textureCanvasVertexShader"] = `
// Attributes
attribute vec2 position;

// Output
varying vec2 vLocalUV;

// Uniforms

//controlPoints topleft->bottomright
uniform vec2 cTL;
uniform vec2 cTR;
uniform vec2 cBL;
uniform vec2 cBR;

uniform mat4 rotationMatrix;
uniform vec2 pivotPoint;
uniform vec2 translation;
uniform vec2 scaling;
uniform vec2 skewing;

const vec2 madd = vec2(0.5, 0.5);

void main(void) {

    vec2 pos = position * madd + madd;
    vec2 baselineBottom = (cBR - cBL) * pos.x + cBL;
    vec2 baselineTop = (cTR - cTL) * pos.x + cTL;

    vec2 c_transformed = (baselineTop - baselineBottom) * pos.y + baselineBottom;

    vec2 skewed = vec2(c_transformed.x + skewing.x * c_transformed.y, c_transformed.y + skewing.y * c_transformed.x);

    vec2 transformed = (vec4(skewed * scaling + translation - pivotPoint, 0.0, 0.0) * rotationMatrix).xy + pivotPoint;

    gl_Position = vec4(transformed, 0.0, 1.0);
    vLocalUV = pos;
}   

`;

effect_1.Effect.ShadersStore["textureCanvasFragmentShader"] = `
precision highp float;
varying vec2 vLocalUV;
uniform sampler2D diffuseSampler;
uniform vec4 diffuseSamplingRect;

//edge fading uniforms
uniform float top;
uniform float bottom;
uniform float left;
uniform float right;

void main(void) {

    vec2 pos = vLocalUV;
    vec4 diffusePixel = texture2D(diffuseSampler, vLocalUV * diffuseSamplingRect.zw + diffuseSamplingRect.xy);

    float l = left/100.0;
    float t = bottom/100.0;
    float r = 1.0 - right /100.0;
    float b = 1.0 - top /100.0;

    if (pos.x < l) {
    diffusePixel *= 1.0 - ((l - pos.x) / l);
    }

    if (pos.x > r) {
    diffusePixel *= 1.0 - ((pos.x - r) / (right / 100.0));
    }

    if (pos.y < t) {
    diffusePixel *= 1.0 - (t - pos.y) / t;
    }

    if (pos.y > b) {
    diffusePixel *= 1.0 - ((pos.y - b) / (top / 100.0));
    }

    gl_FragColor = diffusePixel;
}`
2

I’m not sure if PoolMiner is on this forum :frowning:
You may want to ping him directly on github