Update: Photospector releases on iTunes Friday, July 19th!

I was really hoping we’d start Beta testing on May 1st, but we had a few more bits to finish up first. In addition to some additions to the sharing features, there’s a bunch of polishing work that was needed to remove garish bits of ugliness. Today’s example are thumbnails, and especially how they look on non-retina displays. Here is the progression of the thumbnail “stacks” we use to display albums over the course of the yesterday’s improvements:


On the left is the original, non-retina version, with aliased edges. Ugly! But, if you look closely, we did already have some attention to detail by slightly dimming the images as you go “down” the stack. The middle image shows the first big improvement — anti-aliased frames! The right-most image has subtle dropshadows added to each thumbnail, giving them a a bit of depth. Subtlety and lots of it!

Non-retina displays are much lower resolution than the latest iPads, and aliasing artifacts are very pronounced. Apple provides Multi-Sample Anti-Aliasing, a fullscreen technique that helps smooth edges by doing a bunch more work that can reduce your framerate. Our album and thumbnail displays are very efficient, rendering at over 60 fps to provide buttery smooth motion during scrolling. So, instead of MSAA, I modified our OpenGL ES shader used to draw the frames to compute the distance from the pixel sample point to the edge of the frame, and to adjust the transparency so that we get one pixel of falloff from fully opaque to fully transparent. This “cheat” works as long as polygons don’t abut and we know the visibility ordering of the geometry.

The next step, adding the dropshadows, also had a potential performance pitfall. My first attempt was to create a dropshadow texture in Photoshop and then use the standard 9-slice rendering to scale the shadow to fit each thumbnail without stretching the shadow regions. Unfortunately, this approach halved our performance from 60 fps to 30 fps! Texturing is slow! There were lots of optimizations I could have done to get some of that performance back, but I chose to use a completely different approach and generated rounded rectangle frame geometry, similar to the 9-patch geometry below without the central rectangle, which is then rendered with a special GLES shader that computes the distance to the edge using well-chosen UV values. This approach rendered dropshadows and kept our framerate at 60 fps.

The other functional change to the thumbnail rendering was to apply to color correction adjustments made in the Photospector image view to the thumbnails, so you see the modified colors in the thumbnails rather than the original, unmodified image. The screenshot below has some of the images color corrected to black and white and another forced to green-only to show the differences. This really helps when navigating big collections of images, especially if you have similar images, some adjusted and others not. If you look closely, you can see how the screen looks with the subtle dropshadows:


Another minor detail that I found interesting is that we took pains to display the entire image in our thumbnails, whereas the default Gallery app on the iPhone crops in the images somewhat, “overlaying” their white frame on top of the image which obscures the edge. In many images, the edge is one of the visually identifiable portions of the image and hiding it can really make it hard to find the image you are looking for — think of all those frame choices you have in Instagram! You can see this below when comparing the Photospector thumbnail on the left against the same thumbnail in the Gallery app on the right:

So, why is the Beta taking a bit longer to release? Because we feel that it is important to have a visually pleasing and highly functional interface before we try to get folks to learn about all the amazing features in Photospector! We’re still polishing the final bits but hope to have Beta ready for broad release in another week or so, though that’s been true for a few weeks already!