The many changes in wiARframe v0.3

Jeremiah Alexander
Jan 26, 2018 · 5 min read

You know the feeling you get when you’ve finally learned where everything is in your cupboards and then your partner/parent/flatmate decides to reorganise. I know that pain too, so I apologise in advance… allow me to introduce the new State System in wiARframe.


  • States now only specify the properties they want to change
  • Interactions can be reused across States
  • This is a big update with lots of other improvements

The Old State System

The old State System in wiARframe

Previously wiARframe had a traditional State Machine for representing objects i.e. you create an object, and you create a State for each variation of that object. For example, if we create an apple, we then need to create a new State for every combination of properties of that apple in our prototype:

  • top left, facing the front, green
  • top left, facing the front, red
  • top left, facing the back, green
  • top left, facing the back, red
  • top right, facing the front green
  • etc etc

From the example above, we can see that the number of States you need for an object grows exponentially with the number of properties you want to change. In the example, assuming 4 positions, 2 rotations and 2 colours, we need 16 States. If we want to now add to 3 size variations, we need a total of 48 States. Combine this with an interface that doesn’t allow editing multiple States at once, and you end up with a prototyping process that definitely isn’t effortless. So hopefully, you agree this was something we needed to fix.

The New State System

The new State System in wiARframe

We considered a number of alternative solutions but ended up with something that slightly resembles git commits or CSS classes. How it works is rather simple, when you create an object you define its default/initial State. Then rather than define new States that change all properties, your new States need only change a subset of the properties.

When an object transitions to a new State, its changes are applied, and any unchanged properties are left, well unchanged. For example, if State A changes the position, everything else will stay as it was, State B then changes the rotation, your object now has the rotation from State B, the position from State A and everything else from the default State.

Let’s look at our apple example again, now we only need the following 6 states:

  • move top left
  • move top right
  • rotate to face front
  • rotate to face back
  • colour it green
  • colour it red

We can then apply these in any combination we want to create the 16 variations we wanted. Furthermore, adding more variations no longer grows the number of states exponentially. Again, let’s say we want to add 3 size variations, it’s now just 3 more states!

  • big size
  • small size
  • normal size

But perhaps one of the best improvements of this system is when you want to make a change to all States. Back to our apple example, let’s say we wanted to change the elevation of the apple in all variations. In the old system, we need to go and edit all 64 States. In the new version, we only need to edit the 3 States that affect the position that is: default, move top left, move top right.

We think the new system is a major improvement to the prototyping workflow and we hope you’ll agree it was worth the reorganisation.

The update is now live, and your existing projects should automatically upgrade to the new system. If however, you encounter any issues please don’t hesitate to reach out. We’ve also updated the getting started guide to reference the new system.

[Bonus] The New Interaction System

The Old Vs. The New Interaction Systems

I’m not a car mechanic but I figure that whilst I’ve got the bonnet open I might as well fix a few other things that are broken right?… allow me to introduce the new Interaction System.

In the old Interaction System, each State had its own set of Interactions. If you wanted an identical Interaction in a different State, then you had to completely recreate it. This was a slow process and again definitely not effortless. In the new Interaction System, all States on an Object have access to the same Interactions. Each State simply enables the ones which should be active after that State is applied. This greatly reduces the number of Interactions you need to create, accordingly creates a leaner, smoother workflow.

[Bonus Bonus] The New Theme System

The New Theme System

You asked and we listened… ok, no one actually requested this feature but as you can imagine, the above changes involved crazy hours staring at the screen and coding. So I created a new Dark Theme for the night time shifts, and also an experimental Lean layout which non-essential UI. Hopefully, you’ll like the new look as much as I do.

Other Updates

We also made tons of other updates but most of them are fairly self-explanatory and so I’ll list some of the main ones below and the others you can have fun discovering.

  • New 3D Object View, showing the object elevation and supporting obj file previews.
  • New Scene and Interaction Layout Tools, including more responsive drag and drop and the ability to resize.
  • Removed ability to change 3D Model across States. The feedback from most users was that it was confusing, so now an object has a 3D Model that doesn’t change.
  • Automatic saving whenever you make changes, so you no longer need to remember to hit the save button.

What Comes Next?

The next major focus is on 3D Assets. We’ll be completely rewriting the asset system and also adding some better sample assets in the process. If you have any requests or suggestions on this, please don’t hesitate to reach out.


wiarframe empowers anyone to design AR experiences through an intuitive prototyping tool, a creator community and rich learning materials.

Jeremiah Alexander

Written by

Founder @wiARframe — the design and prototyping platform for Augmented Reality.



wiarframe empowers anyone to design AR experiences through an intuitive prototyping tool, a creator community and rich learning materials.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade