An article by Simian Squared Ltd
Download Physynth now!
Physynth was a wonderful project to work on, it was a completely original idea and outside the realms of anything any of us had done before.
Our previous experience was rooted heavily in games development so approaching an ‘app’ was naturally challenging. Coming from this entertainment background did however give us the opportunity to imbue Physynth with a different sort of user-experience. Most apps, we believe, feel very utilitarian for no good reason, we decided early on that Physynth had to be beautiful.
Having been designed by the musician of the team, he already had a good few ideas for the actual physical appearance of the device, we looked at a lot of real-world hardware during the research and development phase and Moog was something we kept coming back to. We decided fairly early on that Physynth needed to feel like you’d just found it in your dad’s garage, a real bit of vintage 70’s synth equipment.
Designing the interface
So coming from games, how do we stamp that immersive feel on what is essentially a physics simulator linked up to a musical keyboard?
Looking at traditional user interfaces (and all other music apps) we saw that everything was in 2D, we thought that since you hold it in your hand for a long time, it would be nice to bring a rustic look to it, some sort of visual feedback.
Physynth has many, many buttons and options to keep track of, we wanted to keep most of these ‘analog’ rather than using the typical iOS interfaces like tickers and drop-down as we felt this broke the feeling of immersion, the illusion of reality.
This desire for analog equipment rooted in reality meant that we also could not ‘teleport’ between screens and areas either, we needed to actually move between the various parts of the app. This lead to a transforming UI, moving from one ‘unit’ to another was quite disruptive so we had to resort to a transforming, rotating user interface.
We spent a while discussing whether or not Physynth should be clean, used or dirty. We wanted that ‘decades untouched’ vibe but we didn’t want something that felt dirty or disgusting and so we balanced it out on a used, aged but ultimately clean feel.
So we arrived at tilting, this would allow the light to play across the surface of the UI, bringing forward details like smudges, scratches and specular mapped highlights. We were also going to utilise Normal mapping for a final depth look to the app.
But in the end the performance from the shaders meant we may as well just dump normal mapping and go with full resolution 3D. This allowed us to really, really improve the graphics tenfold with real buttons, real immersion. Scrapping the 2D version and going full 3D was a big risk, and added hugely to development times.
For a start, we needed all the buttons, sliders, knobs, everything – to be real, physical 3D objects. This means we could no longer use coordinates to control them in 2D. We needed to make an entirely new set of code which uses raycasts for each touch of a finger, to penetrate the screen and touch on the actual 3D object involved.
Not only this, we wanted it to support 10 simultaneous touches, all doing different things. So we fire out rays colliding with the physics UI. Many challenges were encountered and solved, for example you can play the piano with one hand while adjusting sliders and knobs with the other hand simultaneously. Not only this, it had to handle a fully rotating, tilting device, where the screen could pan and scroll, and rotate and flip up at any moment. So even the collisions between finger and interface, are full 3D with multitouch.
Once we went 3D, tilt came into the issue much more, we decided we wanted faux depth, tilting the camera to match the angle of the tilt on device. This effect gives a “pop out” feel, so you can tilt to see a little more of the sides of the devices in a natural way. This gave us the feel of having vintage hardware in your hands.
We use one single directional light in the app, and ambient light. While that does not sound impressive, it’s what you do with the light that really pays off. In our case the dials use lighting and combine with tilt angle with a chrome/cd rom style shader to reflect from the light angle.
The app itself is all custom shaders which react to light, angle and in areas which aren’t receiving light, it doesn’t get darker: it just shows base material texture colour. This gives the app a truly realistic look.
All of Physynth’s shaders are hand-made custom shaders written entirely with the iPad2 in mind. There are a couple of variations for iPad 1, for speed reasons but we will outline the shader tech below:
1. Specular lit detail mapping: Each texture is 2048×2048, because we want the sharpest possible image. The shader takes the light angle and view angle into account, and combines the alpha of the texture into the main texture, to reveal scratches, smudges and other “grunge” details that give the app it’s unique vintage look.
2. Real Glass: the glass shader utilises a form of normal mapping along with a reflection map for the normal map. This allows us to display imperfections in the glass: the glass has variable thickness. In hindsight had we had more development time available to us we would have been able to show the effect off to the full.
3. Keyboard Ivories: The shader for this is very similar to Specular lit detail mapping, but is mildly more reflective and the colour ramp is softer, as it is a different material.
4. Dials: The dials had to look like real knob dials, with that unique way light works across the surface of a dial If you observe one in real life, the thickness of the light changes depending on the angle. This involved a fair amount of trickery to pull off at acceptable framerates.
5. Noise: we wanted the scene to exhibit noise and scratches as if you were viewing the app from another era in time, similar to going to the cinema in the 70s, it brings a certain vibe to the app we could not ignore. This effect is very easy to do, and indeed we just used the unity base effect for this as it is simple and does the job.
6. Bloom: We used mobile bloom for this, it takes short cuts and it is barely visible, but adds a lush look to it. Bloom is a very simple and easy effect to pull off. The scene is rendered again in lower resolution, and pixels over a brightness threshold are written back. The texture is blitted several times to bring a soft blur to the bloom effect.
7. Vignetting: The vignetting shader is quite simple and is reserved only for the corners, employing a multiplicative effect to darken the edges and make the app pop out. We plan to do more with this regarding the chroma colour effect in a future update.
Dealing with Audio
Dealing with audio in a fast manner was a very tricky task for mobile. If you examine Garageband, it never really uses more than 32 sounds at one time. Instead, it will render a track instead, compressing the sounds down to just one channel. This is fine for a music authoring app where delays and processing is acceptable, but not acceptable for a realtime physics based experimentation app like Physynth.
So other options were to merge sound buffers on the fly but this led to unacceptable performance overall on iPad1. We wanted older device users to not be left out. To solve this we created a listener, something that would judge the sound coming through and prioritise it accordingly. In worst case scenarios, Physynth can be spawning 300+ sounds per second and this would break even desktop hardware, let alone mobile. The solution came in the form of a small piece of AI which merely judges how much a sound can be heard, and allows it to drop off into the background, freeing up vital channels for newer sounds. Sounds constantly assess their own priority. It’s not a perfect system, and you’re still able to break it in the live Physynth app right now, but only under the most demanding situations where you’re basically just generating noise or gibberish, so we felt that it was good enough and didn’t detract from the amusement using the app.
Physics engine in Physynth is using nVidia Physx. This is a decent out of the box solution with OK performance. It did need several pieces of custom code and hacks to get it to behave in a simulation fashion. Physx is designed for games, cars, explosions and debris. It is not designed to handle 4 simultaneous simulations with user generated edges and notes. I could write an entire book on the tricks we did here but suffice to say, it ended up alright. Some of the issues were: notes falling through the rotating shapes: we needed to cap the magnitude so forces wouldn’t explode: we also used joints to connect things, so that collision information could propagate correctly. A ton of optimisations went into calculating just what sound response would occur when colliding. And all of it had to be done fast, in realtime without any GPU based Physics calculations.
Ultimately, Physynth is for everybody, and is there purely for entertainment. We have had a couple of musicians contact us wanting to use it in their own tracks though so that is a good sign! There are no restrictions on the usage of it.
Using Unity to develop meant that a lot of problems were solved from the outset, such as a decent path for shaders to be developed in (it allows you to use your own shaders), integrated Fmod and Physx meant we saved time there too. But on the other hand, those were also limitations. Not limitations because of Unity, Fmod or Physx, but limitations because Physynth likes to break all the rules and do things differently.
There is a very good reason other developers haven’t gone this far or left field and we can’t wait to get back to game development, it is a whole lot easier! But Physynth is out now, and if we never made it, nobody would – it is just too demanding on the developers.
To sum up, Physynth is very much Research & Development. It is what happens when you get game developers to make something new and fresh in the app world. Can it convert gamers to app users? Can it make musicians feel like they’re having a bit of fun? You be the judge.
Download Physynth: http://itunes.apple.com/gb/app/physynth/id469924626?mt=8
info at simian squared dotcom – General questions, press.
support at simiansquared dot com – Technical support.
@SquaredApe - Coder’s Twitter.
@Chimpsquared – Artist’s Twitter.