https://github.com/jywarren/webgl-distort

A demo project for perspective transformations on a given image at full resolution
https://github.com/jywarren/webgl-distort

Last synced: about 2 months ago
JSON representation

A demo project for perspective transformations on a given image at full resolution

• Host: GitHub
• URL: https://github.com/jywarren/webgl-distort
• Owner: jywarren
• License: bsd-2-clause
• Created: 2016-03-17T04:03:14.000Z (almost 9 years ago)
• Default Branch: main
• Last Pushed: 2019-07-16T17:32:38.000Z (over 5 years ago)
• Last Synced: 2024-11-13T08:37:51.061Z (about 2 months ago)
• Language: HTML
• Homepage: https://jywarren.github.io/webgl-distort
• Size: 12 MB
• Stars: 12
• Watchers: 4
• Forks: 3
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
webgl-distort

====

A prototype, demonstration project to test full-resolution perspective transforms done in-browser on the client side using WebGL. This would be useful for [MapKnitter](https://mapknitter.org) (https://github.com/publiclab/mapknitter) or its interface core library, [Leaflet.DistortableImage](https://github.com/publiclab/Leaflet.DistortableImage), where users could individually download their distorted images at full resolution for print or other uses. 

Try this out in the demo at https://jywarren.github.io/webgl-distort

Or try the full featured lens distortion tool at https://github.com/jywarren/fisheyegl, based on this code.

Eventually, it could be packaged as a bower-installable library which simply accepts an image URL and a begin and end matrix, and initiates a download (so as not to cause the browser to render the large dataURL).

This makes use of the [glfx.js](https://github.com/evanw/glfx.js) library. 

Current usage is:

```html

  

  

    (function() {

 

      warpWebGl(

        'img',

        [0, 0,   1023, 0,    1023, 767, 0,   767], // matrix 1 (before) corner coordinates, NW, NE, SE, SW

        [0, 100, 1023, -50,  1223, 867, 100, 767]  // matrix 2 (after) corner coordinates

      );

 

    })();

  

```