Computing a projective transformation to texture an arbitrary quad

Question

I would like to compute a projective transformation to texture an arbitrary quad in webgl (with three.js and shaders if possible/necessary).

This is what I want to obtain, taken from this answer.

Everything is well described in the post, so I suppose that with a bit of work I could solve the problem. Here is a pseudo-code of the solution:

precompute A matrix (should be trivial since texture coordinates are in [0,1] interval)
compute B matrix according to the vertex positions (not possible in the vertex shader since we need the four coordinates of the points)
use B in the fragment shader to compute the correct texture coordinate at each pixel

However I am wondering if there is an easier method to do that in webgl.

---- Links to related topics ----

There is a similar way to solve the problem mathematically described here, but since it a solution to compute a many to many point mapping, it seems an overkill to me.

I thought that this is a solution in OpenGL but realized it is a solution to perform a simple perspective correct interpolation, which is luckily enabled by default.

I found many things on trapezoids, which is a simple version of the more general problem I want to solve: 1, 2 and 3. I first though that those would help, but instead they lead me to a lot of reading and misunderstanding.

Finally, this page describes a solution to solve the problem, but I was skeptical that it is the simplest and most common solution. Now I think it might be correct !

---- Conclusion ----

I have been searching a lot for the solution, not because it is a particularly complex problem, but because I was looking for a simple and typical/common solution. I though it is an easy problem solved in many cases (every video mapping apps) and that there would be trivial answers.

Answer 1

Ok I managed to do it with three.js and coffeescript (I had to implement the missing Matrix3 functions):

class Quad
constructor: (width, height, canvasKeyboard, scene) ->
    @sceneWidth = scene.width
    @sceneHeight = scene.height

    # --- QuadGeometry --- #

    @geometry = new THREE.Geometry()

    normal = new THREE.Vector3( 0, 0, 1 )

    @positions = []
    @positions.push( x: -width/2, y: height/2 )
    @positions.push( x: width/2, y: height/2 )
    @positions.push( x: -width/2, y: -height/2 )
    @positions.push( x: width/2, y: -height/2 )

    for position in @positions
        @geometry.vertices.push( new THREE.Vector3( position.x, position.y, 0 ) )

    uv0 = new THREE.Vector4(0,1,0,1)
    uv1 = new THREE.Vector4(1,1,0,1)
    uv2 = new THREE.Vector4(0,0,0,1)
    uv3 = new THREE.Vector4(1,0,0,1)

    face = new THREE.Face3( 0, 2, 1)
    face.normal.copy( normal )
    face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone() )

    @geometry.faces.push( face )
    @geometry.faceVertexUvs[ 0 ].push( [ uv0.clone(), uv2.clone(), uv1.clone() ] )

    face = new THREE.Face3( 1, 2, 3)
    face.normal.copy( normal )
    face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone() )

    @geometry.faces.push( face )
    @geometry.faceVertexUvs[ 0 ].push( [ uv1.clone(), uv2.clone(), uv3.clone() ] )

    @geometry.computeCentroids()

    # --- Mesh --- #

    @texture = new THREE.Texture(canvasKeyboard[0]) 
    @texture.needsUpdate = true

    C = new THREE.Matrix4()

    @uniforms = { "texture": { type: "t", value: @texture }, "resolution": { type: "v2", value: new THREE.Vector2(@sceneWidth, @sceneHeight) }, "matC": { type: "m4", value: C } }

    shaderMaterial = new THREE.ShaderMaterial(
        uniforms:       @uniforms,
        vertexShader:   $('#vertexshader').text(),
        fragmentShader: $('#fragmentshader').text()
    )

    @mesh = new THREE.Mesh( @geometry, shaderMaterial )

    @mesh.position.set(0,0,1)

    scene.add(@mesh)

    # --- Sprites --- #

    @sprites = []

    for i in [0..3]
        position = @positions[i]
        m = new THREE.SpriteMaterial( {color: new THREE.Color('green') ,useScreenCoordinates: true } ) 
        s = new THREE.Sprite( m )
        s.scale.set( 32, 32, 1.0 )
        s.position.set(position.x,position.y,1)
        scene.add(s)
        @sprites.push(s)

    # --- Mouse handlers --- #
    # those functions enable to drag the four sprites used to control the corners

    scene.$container.mousedown(@mouseDown)
    scene.$container.mousemove(@mouseMove)
    scene.$container.mouseup(@mouseUp)

screenToWorld: (mouseX, mouseY) ->
    return new THREE.Vector3(mouseX-@sceneX-@sceneWidth/2, -(mouseY-@sceneY)+@sceneHeight/2, 1)

worldToScreen: (pos) ->
    return new THREE.Vector2((pos.x / @sceneWidth)+0.5, (pos.y / @sceneHeight)+0.5)

computeTextureProjection: ()=>
    pos1 = @worldToScreen(@sprites[0].position)
    pos2 = @worldToScreen(@sprites[1].position)
    pos3 = @worldToScreen(@sprites[2].position)
    pos4 = @worldToScreen(@sprites[3].position)

    srcMat = new THREE.Matrix3(pos1.x, pos2.x, pos3.x, pos1.y, pos2.y, pos3.y, 1, 1, 1)
    srcMatInv = @inverseMatrix(srcMat)
    srcVars = @multiplyMatrixVector(srcMatInv, new THREE.Vector3(pos4.x, pos4.y, 1))
    A = new THREE.Matrix3(pos1.x*srcVars.x, pos2.x*srcVars.y, pos3.x*srcVars.z, pos1.y*srcVars.x, pos2.y*srcVars.y, pos3.y*srcVars.z, srcVars.x, srcVars.y, srcVars.z)

    dstMat = new THREE.Matrix3(0, 1, 0, 1, 1, 0, 1, 1, 1)
    dstMatInv = @inverseMatrix(dstMat)
    dstVars = @multiplyMatrixVector(dstMatInv, new THREE.Vector3(1, 0, 1))
    B = new THREE.Matrix3(0, dstVars.y, 0, dstVars.x, dstVars.y, 0, dstVars.x, dstVars.y, dstVars.z)

    Ainv =  @inverseMatrix(A)

    C = @multiplyMatrices(B,Ainv)

    ce = C.elements

            # I used a Matrix4 since I don't think Matrix3 works in Three.js shaders

    @uniforms.matC.value = new THREE.Matrix4(ce[0], ce[3], ce[6], 0, ce[1], ce[4], ce[7], 0, ce[2], ce[5], ce[8], 0, 0, 0, 0, 0)

and here is the fragment shader:

    #ifdef GL_ES
    precision highp float;
    #endif

    uniform sampler2D texture;
    uniform vec2 resolution;

    uniform mat4 matC;

    void main() {
        vec4 fragCoordH = vec4(gl_FragCoord.xy/resolution, 1, 0);
        vec4 uvw_t = matC*fragCoordH;
        vec2 uv_t = vec2(uvw_t.x/uvw_t.z, uvw_t.y/uvw_t.z);
        gl_FragColor = texture2D(texture, uv_t);
    }

Additional note

Maptastic is a Javascript/CSS projection mapping utility. https://github.com/glowbox/maptasticjs