Photo warping with WebGL
Open a photo
Pick a photo:
This demonstation requires a browser with WebGL support.
To render the warped photo above, a mesh of 400 triangle coordinates, a photo, a vertex & fragment shader program and uniform points are uploaded to the GPU using WebGL.
Show uniform points
Show triangle mesh
Show rendered photo
When you click and drag on the photo, new uniform points are set on the GPU...
...The GPU runs the vertex shader below to distort the mesh using the uniform points...
...and the fragment shader paints photo pixels using the distorted mesh.
For more information on WebGL, see