Torch How-To: Optimizing 2D Images for 3D
Images made in Sketch, Adobe, or other apps can vastly improve the overall aesthetic quality and user experience of your 3D design. Just like in screen-based 2D mobile app design, there are a few basic guidelines and constraints to observe.
Text scaling and legibility
First things is first! If you want to put your 2D UI into Torch AR, you need to get it out of Sketch. The considerations you will need to make when exporting your UI assets for use in Torch are similar to those you would make for a mobile app, with a few caveats.
From middle-distance screens to close-up UI buttons, most use cases for Torch AR projects can be satisfied by 2x or 3x scaling. The main consideration when designing your elements is the relative size of any text elements included in each element. In internal testing, we’ve come up with a general formula for text legibility within a Torch AR project that says:
Fourteen point text is legible from 0.5 meters when the asset is set to have a scale of 1. From there, text size and viewing distance double in lockstep—14 point text is legible from 1 meter with a scale of 2, and legible from 2 meters with a scale of 4.
If the relative size of your asset calls for larger text, just remember that in a Torch AR project, 14 point text a half-meter away reads the same as 28 point text at a meter. You will need to adjust the text size or the asset size (inside of the Torch AR scene) accordingly.
If you need a very large element, like a billboard in your scene, and you want it viewed from very close, you will need to go beyond 3x for it to read cleanly. Be cautious of this, however, because too many extra-large elements in a scene or project can cause performance issues, including crashing.
Once you’ve placed an asset, it is suggested that you turn on the Face Camera behavior. Remember, this is 3D and 2D assets can disappear or appear reversed as you walk around. The Face Camera behavior makes it so your 2D files always face the user. If there are three users in the scene at the same time standing in different positions, all three will see the image facing them. You can turn on Face Camera by selecting the object(s), tapping Object Properties icon on the right hand menu, tapping Face Camera in the Properties menu, and toggling the behavior to Enabled.