计算投影变换以构造任意四边形 [英] Computing a projective transformation to texture an arbitrary quad

问题描述

我想计算一个投影变换来构造webgl中的任意四边形(如果可能/需要，使用three.js和着色器).

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

这是我想要的，取自所有内容都在帖子中得到了很好的描述，因此我想通过一些工作就可以解决问题.这是解决方案的伪代码:

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

但是我想知道在webgl中是否有更简单的方法可以做到这一点.

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.

我认为这是以下解决方案OpenGL，但意识到这是执行简单透视校正插值的一种解决方案，幸运的是默认情况下启用了该插值.

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.

我在梯形上发现了很多东西，这是我要解决的更普遍问题的简单版本: 2 和 3 .我首先虽然那些会有所帮助，但是相反，它们引导我进行了大量的阅读和误解.

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.

推荐答案

好吧，我设法使用three.js和coffeescript来做到这一点(我必须实现缺少的Matrix3函数):

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)

这是片段着色器:

    #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);
    }

附加说明

Maptastic是Javascript/CSS投影映射实用程序. https://github.com/glowbox/maptasticjs

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

这篇关于计算投影变换以构造任意四边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！