Verge3D 3.8 pre3 available!

3D User Interfaces Revisited

The early Verge3D versions suggested using camera-parented 3D objects for buttons, panels, sliders or text labels. After we introduced the HTML Puzzles, we switched to recommending the web-based approach to building UI/UX (with third-party tools such as Webflow). Now has come the time to revisit 3D user interfaces, as we are bringing 3 game-changing features to Verge3D.

Blender:

3ds Max:

Maya:

The first feature is the possibility to stick 3D objects to the viewport edge. The newly introduced setting Fit to Camera Edge, which becomes visible after you parent the object to the camera, does precisely that. It offers 4 parameters – Horizontal, Vertical, Fit Shape, and Fit Offset – using which you attach your panels or texts where you want whem to be, regardless of screen resolution or device.

The second feature is Visibility Breakpoints. Similar to CSS breakpoints, they allow you to display different sets of objects for different screen resolutions or mobile device orientations (landscape/portrait). Similarly, it can be used to re-arrange the UI as well.

The third feature, which you might find helpful for building your UI, is HiDPI Compositing. It allows you to render an object (including its children) with a separate high-resolution render pass. Thus, you can significantly improve the quality on HiDPI screens (Retina displays and most mobile devices). This might be especially important when rendering Text objects, or any other elements you need to be sharp and precise.

We recommend using it with a simple shader (such as Emission), or for small objects, so that to not kill the performance.

We have improved our older demo applications – E-learning, and Ring – to use the Fit to Camera Edge and the HiDPI Compositing for UI objects. They now look much sharper indeed!

Finally, why/when use 3D for user interfaces? Definitely, this approach is more “native” to the 3D artist than using HTML/CSS, and does not require external tools. But there is more in it: since the UI elements are genuine 3D objects, you can apply shaders, lighting, animation, morphing – you name it – making them truly interactive and seamlessly integrated into the scene. Potentially, this allows for effects much more engaging and interesting compared to the HTML/CSS-based approach.

Blender-specific

For this update we introduced some new helpful constraints and supported settings for some other existing constraints.

New constraints are Limit Distance, with which you can use Clamp Region (all options), Distance, and Influence params, and Damped Track (all params supported).

Copy Transform now offers Mix (all options) and Influence params. The Copy Rotation constraint now offers the Mix parameter (3 options – Replace, Before Original, and After Original), and also Influence.
Finally, with Copy Scale you can now use Axis, Power, Make Uniform, Offset, Additive, and Influence.

3ds Max-specific

We tweaked and rearranged the Verge3D-related settings and options to make them more compact and consistent with native UI of 3ds Max.

Maya-specific

We supported Maya behavior for handling transparency with the File node. As a result, luminance-based alpha channel is now used if the image is originally supplied without alpha (e.g., JPEG).

Puzzles

The comment puzzle’s max length was increased from 50 to 120 characters.

There is a new entry in the Puzzles library – Detect Pressed / Released. This combination of puzzles might come in handy for implementing interactivity with 3D UI elements. Basically, it detects if mouse/touch is being pressed or released upon the selected object.

Also, some other entries in the Puzzles library were simplified and/or commented for clarity.

Legacy Browsers

We created a variant of the engine runtime specifically to support legacy browsers such as Internet Explorer 11 or Safari found on very old iPhones/iPads. This file (v3d.legacy.js) is used when you select the IE11 option at the app creation screen. Please note that this runtime is rather bulky and slow. The default Verge3D build is more compact and considerably faster – and it will work with >99% of the nowadays browsers.

Other improvements

The previously introduced Clipping Planes feature obtained a new parameter – Render Side (including Front, Back, and Double-sided options). It may help for rendering complex geometry with cuts and holes.

Blender:

3ds Max:

Maya: