Mapping-fidelity in quadrilateral/triangle rendering

Here’s the result from my

It’s not really an “irregular” quadrilateral yet, but has no parallel edges nevertheless. So I’m confident it could be done for a truly irregular quadrilateral as well. A little bit of context:

I started out with a unit square, centred about the coordinate origin, then moved vertex #4 out by +0.5 units in each direction:

                      Y
                      |
              [2]-----|-----[4]
               |      |      |
               |      |      |
               |       -----------> X
               |     /       |
               |    /        |
              [1]--/--------[3]
                  /
                 Z
 
 */
function setGeometry(gl) {
  var positions = new Float32Array(
    [
    // front face, lower-left triangle
    -0.5, -0.5,  0.0,  // #1
     0.5, -0.5,  0.0,  // #3
    -0.5,  0.5,  0.0,  // #2
    
     // front face, upper right triangle
    -0.5,  0.5,  0.0,  // #2
     0.5, -0.5,  0.0,  // #3
     1.0,  1.0,  0.0,  // #4 make the the square irregular (no parallel edges), by moving this vertex out
    ]);
  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
}

Moving vertex #4 out yields two vanishing points at a distance of 3.0 units from the lower-left vertex of the quadrilateral:

The maximum inclination (red) of the left fan-lines is 1/3, while the minimum inclination (blue) of the bottom fan-lines is 3/1, with “inclination” being the value “m” in the straight line equation:

y = m * x + b

I was unable to realise this with the 3-component uvw-approach and the “scale” - “scale back” trick as before. So I reverted this back to the familiar 2-component uv-approach. The whole magic is in the fragment shader, which now looks like this:

void main() {
   gl_FragColor = texture2D( u_texture, vec2( 
   	  3.0 * v_texcoord.x / (v_texcoord.y + 3.0),
      3.0 * v_texcoord.y / (v_texcoord.x + 3.0) ) );
}

A new Jsfiddle is provided:

https://jsfiddle.net/Chrisssie/vnc2pg6w/

Looking back, this was an interesting, yet imo futile exercise as far as advancing the fidelity of texturing in Three.js goes. Because there are no procedurally generated geometries in Three.js which result in irregular quadrilaterals that I’m aware of.

Thinking of it, the rectangle/trapezoid case has the most potential in that regard. Because

  • Cone
  • Cylinder
  • Extrude
  • Lathe
  • Plane
  • Ring
  • Sphere
  • Torus
  • TorusKnot
  • Tube

all produce quadrilaterals, which are either rectangular or trapezoidal, safe for the bands bordering poles.

I think I’m going to try my hand at the Lathe geometry and see how far I’ll get …

3 Likes