blackpawn's blog

fire skull app!

needing a decoration for halloween i decided to port my old fire skull flash experiment to the iPad.  since i've been doing a lot of iOS coding recently it was just a couple hours to get it up an running nicely.  then i wanted to spice it up a bit!

the first thing was a fancy new skull mesh.  in the old flash experiment the skull was software rendered in ActionScript (doing vertex projection to 2d in script then using polygon bitmap fill to rasterize) so the mesh had to be pretty simple and was only 1,321 triangles.  since the iOS version renders with 3d hardware it can handle something much more complicated so i dropped a 46,960 triangle mesh in for the skull.

the flash version had a glow effect (using BitmapData with ColorTransform and BlurFilter) so i added post processing for the iOS version as well, but also included some desaturation and added contrast in the shader.

after the app was running super smooth on iPad 2 and i was happy with the result i kicked it over to Apple for approval and went to bed.  unfortunately the next day i remembered i hadn't even run it on the iPad 1 so i tried that... and it ran at 12 fps... ouch!

to optimize i ran with the OpenGL ES Performance Detective which looked really cool and gave some good though rather generic advice.  i thought it was actually being pretty smart but later realized as i shifted the bottleneck around to different stages while testing that it was just always giving me the same generic advice... kinda weak.

anyhow, i did experiments like rendering without the skull, rendering with 1k tri version of the skull, using 16x16 render targets, short circuiting postproc, changing texture sizes and the like to find out which things were most tripping up the iPad 1.

the biggest thing was post processing effects.  a fullscreen shader pass is quite expensive for the iPad 1's SGX 535. i was able to filter the fire and skull textures offline to get the look i was going for and then just killed the runtime post processing entirely.

the other big thing was the expense of the fire shader.  i added a runtime check with glGetString(GL_RENDERER) to detect if the app is running on a SGX 535 and if so use a 256x256 render target for the fire instead of 512x512 to cut down more on shader processing and memory bandwidth.

there were some smaller changes as well like optimizing the mesh more by nuking some tris that would never be visible.  in the end i got the iPad 1 up from the 12 fps to 35 fps, the iPhone 4 at 37 fps, and the iPad 2 still running nicely over 60 fps.

so if you need a flaming skull decoration or just a fiery buddy to keep in your pocket you can grab him for free from the app store! be sure to leave a review about how it changed your life and brought you incredible good fortune haha

setting cache metadata on files in s3

i use Amazon's AWS Console for uploading files to S3 and i always have to remember to manually add in the Cache-Control metadata so that i don't get boned on bandwidth fees. i wish they would put in a nice default for that but oh well. i searched around for a better tool to use that would let me also recursively update the metadata on all my S3 files but the only one that seemed to have that feature and run on OSX cost $70! youch!

well it turns out to be easy to code up a script to do this in python using the boto library so to save you all some time (and money!!) here's what i ended up writing this recursively runs through all the objects in all the buckets on an S3 account and sets the Cache-Control for JPG and PNG files.

from boto.s3.connection import S3Connection

connection = S3Connection('aws access key', 'aws secret key')

buckets = connection.get_all_buckets()

for bucket in buckets:
    for key in bucket.list():
        print('%s' % key)	

        if key.name.endswith('.jpg'):
            contentType = 'image/jpeg'
        elif key.name.endswith('.png'):
            contentType = 'image/png'
        else:
            continue

        key.metadata.update({
            'Content-Type': contentType,
            'Cache-Control': 'max-age=864000'
        })
        key.copy(
            key.bucket.name,
            key.name,
            key.metadata,
            preserve_acl=True
        )

stroke my ball!

a few months ago i wrote my first iPad code and my first shaders for iOS devices. i made a fun 3d globe control for ABC News' iPad app! it's a bunch of cards on a sphere that you slide around to browse through news stories. it doesn't use any standard projection method but instead some really crazy stuff so that cards in the center are nice and big and cards get small really quick as they fall off from the center. it feels really nice sliding it around. it calls back on its delegate as cards scroll into view so it allows for scrolling through an unlimited set of data in both directions and allows asynchronous loads and updates of the cards.

bad news: i got no monies or greets for this and my nice spec highlights and mip-mapping were disabled in the final for some reason
good news: tons of people are now touching, swiping, and stroking my ball!

here's a link to the full info for the app so you can download and install it on your iPad! be sure to rate it five stars in the app store and comment that you loved stroking blackpawn's ball!!

still lovin’ the svg

i posted a few months back on using the scalable vector graphics (SVG) web format for visualizing data structures. i keep finding more great uses for it! by now i've also put it to work visualizing GPU memory allocations, asynchronous file operations and access patterns, hierarchical per render frame CPU work, and location based data map overlays. this is quite the handy visualization tool to have around!

in addition to lines which i covered in the first post, i've now been using circles, rectangles, text, images, and layers. these are all super easy just like the lines. for example:

<text style="font-size:10px;fill:#ff0000" x="4" y="16">ReticulateTheSplines</text>

<image x="8" y="30" width="256" height="256" xlink:href="base.jpg" />

i've found it really handy to go into InkScape and make a quick SVG by hand then load it up in a text editor to see the right markup to use for different things.  for example with layers InkScape has it's own namespace and extra options so you can put really spammy data in topmost hidden layers and only reveal them when you're zoomed in on some area of interest.

here's a link to the full W3C SVG standard which is a great reference for all the possibilities. and here are some new examples of this madness in action.