iason's picture

A simple keystone / projection mapping node. Options:

  • change between perspective and orthographic projection
  • soften / smooth / blur edges

In quartz composer I use a GLSL shader from Thomas Pachoud which works quite good. https://github.com/pach/QtzPatches/blob/master/fx/keystone.qtz

Proposed node

(Mockup by Team Vuo.)

The Make Quad Layer node takes an image as input, and maps the image to fill the specified quadrilateral. It can optionally fade the edges to alpha-transparent (the edgeFade port specifies the fade distance). By default it applies perspective-correct mapping, which can be toggled to affine mapping (e.g., basic 4-point quad warping).

Screenshots, Mockups, and Videos: 

Make Quad Layer node


Notes from Team Vuo

Vuo Pro: 

No — available with both Vuo CE and Vuo Pro


●○○○ — Up to a few days of work


●●○ — Could expand community

Implemented in Vuo version: 


@iason: I'm having trouble

smokris's picture
Submitted by

iason: I'm having trouble understanding your suggestion about toggling between perspective and orthographic projection. How would orthographic projection be useful (or even technically possible) in the context of applying projection distortions to a quad? Could you provide an example?

Thanks, @iason. To me, your

smokris's picture
Submitted by

Thanks, iason. To me, your "correct" image looks like perspective-correct mapping, and your "false" image looks like affine mapping.

I'm thinking that in Vuo's mapping node, we'd just provide perspective-correct mapping.

Is there a reason you'd ever want to use projection that looks like your "false" image?

i think one of the advantages

iason's picture
Submitted by

i think one of the advantages of affine mapping is, that it keeps lines in parallel. that can be useful for certain projection mappings.

i havent used the affine mapping in a while, so im not sure about the visual differences. but thats the reason why i wished for that feature in the first place. so i can just flip a switch and see the difference.

A great addition to this node

bLackburst's picture
Submitted by

A great addition to this node would be a crop on the input texture. Top, bottom, left and right crop. Take a look at the mapping features of other apps to get a feel for the tools that are used for mapping. This is a great start, the next logical step would be a grid warp patch with bezier options.

In vvvv we have a source

cat's picture
Submitted by

In vvvv we have a source points input and an output points input, so you can warp from the corner points, but by setting the source points inside the image you can specify a point that isn't the corner of the quad, but is the corner of part of an image/realworld geometry, i.e. for mapping things that aren't rectangles, maybe a building with turrets or similar. We also can do a 4 point 3d homography by specifying these input points, mapped to the output points, and multiplying by a perspective transform, you can map a 3d object rather than just a plane, which requires the object to be exact, but can be fudged for real world applications.

"4 point 3d homography by

iason's picture
Submitted by
  • "4 point 3d homography by specifying input points, mapped to the output points, multiplying by a perspective transform to map a 3d object"

maybe add this as separate feature request. really would like to try 3D mapping with VUO, never found the time to try it with vvvv. do you know some vvvv example projects for this type of mapping? (besides the vvvv 3d mapping tutorial)

  • " setting the source points inside"
  • "grid warp patch with bezier options"

this is another feature request as well i guess. data inputs for grids and bezier curves are very large. take a look at the 1024 qc bezier wrap patch. it has 20+ inputs for all the points and curves.

still two very nice features to have in VUO.

Excellent work here everyone!

tmoles's picture
Submitted by

Excellent work here everyone! Let's begin by getting proposed Make Quad Layer node fully pledged. Then, once it's implemented, we can create and refine feature requests for the complimentary functionality. I'm excited to see this happen.


cat's picture
Submitted by

http://vvvv.org/contribution/catmapper is a 4 point 3d homography contribution I made. For the homography node with custom corners, its only 4 2d vectors for the input corners, for bezier there are obviously tangents for each point too, but I'd see a bezier warp as something ontop of a corner pin, as the homography gets you nearly there, then the bezier warp tweaks that output, so I'd see it as occuring on the output of the homography maybe...

@jeromebueche, I can think of

smokris's picture
Submitted by

Jérôme, I can think of 3 currently-available options:

  1. Play your Vuo composition in VDMX, which has built-in support for perspective warping
  2. Write GLSL code using Vuo's Make Image with Shadertoy node to perspective-warp your image
  3. Output Syphon from your Vuo composition, and feed it to a perspective warping app that supports Syphon input (e.g., MadMapper)

Feature status

  • Submitted to vuo.org
  • Reviewed by Team Vuo
  • Community voted
  • Scheduled for implementation
  • Released in Vuo 1.2.3

When we (Team Vuo) plan each release, we try to implement as many of the community's top-voted feature requests as we have time for.

Read more about how Vuo feature requests work.

Who voted?

smokris's picture
tsugua's picture
ShowBlender's picture
monkey0815's picture
jeromebueche's picture
ajm's picture
Yuya Takeda's picture
philippe's picture
architek1's picture
yinaom's picture
Philternaut's picture
bsampson's picture
macsrv's picture
wmackwood's picture
MartinusMagneson's picture
Luiz Andre's picture
krezrock's picture