cornerPin

Pin the four corners of the child to new positions, with true perspective between them.

cornerPin(slots: {
    topLeft: ArgSpec
    topRight: ArgSpec
    bottomRight: ArgSpec
    bottomLeft: ArgSpec
    amount: ArgSpec
}): UvMapSource

Import warps from shaders/std and use warps.cornerPin.

The corners are positions in uv. amount (0–1) blends each corner from its normal place (0) to the pinned position (1). Pixels outside the pinned quad are clipped to transparent whatever the edge mode.

Parameters

NameTypeNotes
slots`{
topLeft: ArgSpec
topRight: ArgSpec
bottomRight: ArgSpec
bottomLeft: ArgSpec
amount: ArgSpec

}` | |

Example

map: warps.cornerPin({topLeft: p('topLeft'), topRight: p('topRight'), bottomRight: p('bottomRight'), bottomLeft: p('bottomLeft'), amount: p('amount')})

See also

  • perspective — Tilt the child in 3D, as if it were a card turned away from the camera.
  • bend — Curve the child like a bent sheet seen in perspective, so its ends swell or shrink.

Used by

CornerPin