xpf0000 / image-editor-effects

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

Image Editor Effects

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.

Shader Snippets

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

Running

# 👶 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.