Computing a projective transformation to texture an arbitrary quad - webgl

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