September 14, 2013

Photo Pea 0.1

Description of the first Photo Pea release. Check it out at the main site.


  • Parsing and basic rendering of PSD files (see below)
  • Zoom tool
  • Hand tool (to move the canvas)
  • Move tool (for moving layers, masks etc)
  • History panel + navigation Backward / Forward

PSD format

The first release of Photo Pea contains PSD parser. PSD format comes from Adobe Photoshop and is well documented at Adobe's webpage. My parser is very simple, it parses only 8-bit RGBA image channels (no grayscale, HDR etc.). It also parses several layer properties, raster and vector masks, folder structure and layer effects.

After making such parser, my next goal was to "draw" the image. User will probably want his project to look exactly like in Photoshop. And there was the first big problem. Adobe says, how to get each integer, float and string out of their file, but they don't say how to interpret all that data. Some properties are obvious (layer dimensions, position, opacity), but others are not.

When making a rasterizer, the first necessary thing was to implement blending with different blend modes. Fortunatelly, blend modes are used across differnt applications. In my implementation, blending should work exactly the same, as in Adobe Photoshop, and probably many other programs.

Another hard and still unfinished feature are layer effects. I had no clue, how they work in Adobe Photoshop, so I could only guess. Usually, it was some combination of blurying, colorizing and combining with current layer. But - for example - Bevel and Emboss effect - I still have no idea how it works. If you know, how Bevel and Emboss effect work, let me know in comments below.


All current Photo Pea code is Javascript and is executed by browser on the CPU. Blending can take several seconds, when you blend large project (several megapixels) with many layers and layer effects. If you look into browser console, you can see some information about parsing and blending time. When you edit something, the project is completely reblended. There is no caching of pre-blended data now.

Modern native editors usually use GPU through OpenGL or OpenCL. It will be also necessary in Photo Pea for having some decent performance. The WebGL standard is already present in all main browsers, but WebCL, which is more appropriate, is not :(

Screenshot on iPad

Drag and Drop your PSD files to PP window and see how it works by yourself :)