https://github.com/alaingalvan/image-editor-effects

💎 A WebGL example of image adjustment / effects shaders found in Photoshop, other image editors and game engines.
https://github.com/alaingalvan/image-editor-effects

blend filter gimp instagram photoshop shader

Last synced: about 2 months ago
JSON representation

💎 A WebGL example of image adjustment / effects shaders found in Photoshop, other image editors and game engines.

• Host: GitHub
• URL: https://github.com/alaingalvan/image-editor-effects
• Owner: alaingalvan
• License: unlicense
• Created: 2014-05-11T17:56:16.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T09:23:19.000Z (about 2 years ago)
• Last Synced: 2024-04-14T16:01:43.366Z (9 months ago)
• Topics: blend, filter, gimp, instagram, photoshop, shader
• Language: TypeScript
• Homepage: https://alain.xyz/blog/image-editor-effects
• Size: 13.7 MB
• Stars: 87
• Watchers: 7
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: license.md

Awesome Lists containing this project

README

        
![Cover](https://alain.xyz/blog/image-editor-effects/assets/overlay.jpg)

# Image Editor Effects

[![License][license-img]][license-url]

[![Codepen][codepen-img]][codepen-url]

Image processing effects used in image editors like **Adobe Photoshop** or **GIMP** are used to composite different layers and adjust the overall appearance of an image. These effects build upon research in areas such as signal processing, statistics, and mathematical analysis, and applies them to visual effects and postprocessing.

This is an example of photoshop layer effects, describe in detail in this [blog post](https://alain.xyz/blog/image-editor-effects).

## Shader Snippets

You'll find these GLSL snippets in `src/script.ts`, line 4.

## Running

```bash

# 👶 Get Dependencies

npm i

# 🔨 Compile typescript files

npm run build

# 💻 Run a server at http://localhost:8080

npm start

```

## License

This project is unlicensed, feel free to use it however you would like.

[license-img]: https://img.shields.io/:license-unlicense-blue.svg?style=flat-square

[license-url]: https://unlicense.org/

[codepen-img]: https://img.shields.io/:demo-codepen-1e1f26.svg?style=flat-square

[codepen-url]: https://codepen.io/alaingalvan/pen/eQeqwE