https://github.com/tomaszrewak/imageinspector

Visualizing WebGL filters
https://github.com/tomaszrewak/imageinspector

filters image-processing react typescript webgl website

Last synced: 3 months ago
JSON representation

Visualizing WebGL filters

• Host: GitHub
• URL: https://github.com/tomaszrewak/imageinspector
• Owner: TomaszRewak
• License: mit
• Created: 2019-11-06T13:54:30.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T11:29:37.000Z (about 2 years ago)
• Last Synced: 2023-03-08T02:41:04.171Z (almost 2 years ago)
• Topics: filters, image-processing, react, typescript, webgl, website
• Language: TypeScript
• Homepage: https://image-inspector.tomasz-rewak.com/
• Size: 5.91 MB
• Stars: 5
• Watchers: 3
• Forks: 2
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ImageInspector

Image inspector is a simple website that can be used to visualize custom webgl filters applied on an uploaded image.

The working example can be found [here](https://image-inspector.tomasz-rewak.com/).

A few words about the project can be found [here](https://www.youtube.com/watch?v=BxRKhU4ygFk).



  



The website allows you to create custom layers by modifying predefined vertex and fragment shaders. You can also inspect the exact value calculated at the specific location simply by hovering the cursor over the selected pixel.

The project is written in: TypeScript + React.js + WebGL + [Ace editor](https://github.com/ajaxorg/ace).

To build the project run the `npx webpack` command. Generated files should appear in the `dist/` folder.