Wrote an article about math I use to design and develop interactive experiences for AR/VR. I tried to focus on the practical aspects of it and keep it as simple as possible. Hope you will find it helpful! medium.com/@olegfrolov/... #uiprogramming #3dmath #spatialdesign #xr #interactiondesign

Balanced Stepper III Another interaction experiment with a stepper. The main idea behind this piece of UI is that the interaction mechanics favor restoring the balanced default value (zero in this example). #swiftui #interactiondesign #uidesign #uxdesign #prototyping

Balanced Stepper II

Made a Balanced Stepper. I was exploring a fusion between a slider and a stepper. Came up with an interesting interaction pattern. #swiftui #interactiondesign #uidesign #uxdesign #prototyping

Cross Product visualisation for Essential Math for Spatial Computing. I use it this operation a lot when I need to reconstruct some local 3D space base only two available directions.

VolumeUI demo + sounds. The APK is available on GitHub. #volumeui #interactiondesign #spatialcomputing

scalar multiplication of vectors demo

vector subtraction demo

The dot product has many powerful properties. My favourite one is this: when you multiply a normalised target vector by an arbitrary vector, you get a number, which you can use to scale the target vector and get a projection vector of the arbitrary vector onto the target one! #spatialmath #3dmath

A vector addition demo as a part of my upcoming talk about Essential Math for Spatial Computing at Design Engineering Meetup.

Tested some of the components of my VolumeUI library in VR. Thought it would be nice to add RGB corners to the backplate as well. So, did it. All components will support some types of RGB animations. #spatialcomputing #xrdesign #volumeui #virtualreality #unity3d #uidesign #uilibrary #3dmath

Added RGB border to the backplate too!

Made a modal panel demo with UI elements from my VolumeUI library. The coolest part of the lib is that you can bind all interactables to anything with the "pressing" factor, which is a normalized value (0.0-1.0) that tells how much the user pressed the button.

Added a backplate to my Volumetric UI framework. Like other UI elements, it's also parametric, meaning you can change its size without worrying that it will be unpleasantly distorted (a common mistake in XR).

Timing and easings are great tools to enhance #ui experience, but sometimes it's better not to have them at all. If your users use something quite often, do not make them wait for your animations to finish. Used this principle to design the Camera Experience for @gorillatag.bsky.social

Now you can attach some visuals to the button. It could be anything that has Transform (text, sprites, meshes etc.)

some shader-based mesh transformations for a UI plate.

This is how I used vertex color to map vertices for spatial transformations in the vertex shader. Of course, there was a way to leverage just one channel to get all these semantic markings, but it would make visual debugging much harder for the human eye.

Added button interaction to my 3D UI library. A few UI elements left before I release it 😊

Such a pity that UE doesn’t support import

parametric 3D button.

When building an AR/VR experience, you need to test it frequently on the device. But once the experience is validated and you start working on implementation details, doing that might feel quite tedious. That said, I made a Direct Touch Debugger to simplify this process 🙌

The pressing animation is also processed in the shader.

Added pressing states, toggle group processing, sounds, and pointer/direct touch support to my VolumeUI library (will release once it's finished). #unity3d #uilibrary #3dmath #shader #xr #vr

Added ToggleGroup and Forced Switch-On animation to VolumeUI.

marching toggles

back-and-forth volumetric toggle. top view. unity. vertex shader.

having some fun with my volumetric ui library.

I like to prototype with nodes when data flow can be represented visually. It gives a good intuition about how to arrange data transformation properly. But when it comes to maintainability, it's always better to move algorithms to text to make code more readable and laconic.

Made a Unity3D package. It creates a UI image with an AI-generated texture. It's helpful when you prototype and need a quick, rough visualization of your ideas, or put some throw-away placeholders for visuals. Get Package and Learn More — github.com/Volorf/gen-u... #unity3d #ai #ui #prototyping

In loving memory of Moshu 🍎

Another example of using a shader for spatial mesh transformations in the context of UI Design. Plan to make a little UI library for VisionOS (RealityKit/SwiftUI) and Unity (XR Interaction Toolkit) using this approach. Stay tuned! #3dmath #unity3d #uidesign #interactiondesign #csharp #shader

Love using shaders to do mesh transformations. It's not only great in terms of performance optimization, but the main benefit is to encapsulate an art/visual design decision on a lower level of implementation with a thin but expressive API.

Made a prototype for the AR Camera Portal with a DualSense controller. For previous prototypes with custom controllers, I calculated the positioning of the portal based on hand-tracking data. So, expectably, it also worked very well with a mainstream controller. #xrdevelopment #xrdesign #3dmath

I guess, non-uniformly distributed points would better show all the benefits of this structure.

Made another visualization of Octree. Such a beautiful data structure!

Explored how to optimize some of my simulation experiments. Read about an octree data structure, which allows you to decrease time complexity to O(logn) for search (and you get nlogn for the whole iteration cycle). Made a quick visualization (Unity's gizmos) of my implementation. Looks interesting!

Recreated the Plexus Effect with RealityKit. The effect is very cool on its own, but experiencing it in the immersive mode makes it absolutely mesmerizing. #realitykit #spatialcomputing #spatialdesign #xrdevelopment #xr #visionos #applevisionpro #swiftui #mixedreality

Decided to make a home for my RealityKit experiments. Share soon!

AR Camera Portal with Gravity. #mixedreality #prototyping #spatialcomputing #3dmath #xr #xrdesign #xrdevelopment

Plexus Effect with RealityKit. #visonos #realitykit #ecs

It's always worth spending an extra few minutes to make a debug menu look nice.

🔬 Did another experiment with RealityKit to practice ECS. 🏀 1000 Bouncing Balls in a box/sphere-shaped space. Use SDF for any shape. #spatialcomputing #spatialdesign #prototyping #natureofcode #simulations #mixedreality #visionos #realitykit #applevisionpro #ecs #swiftui

1000 bouncing balls in a sphere-shaped space. #visionos #realitykit #natureofcode

1000 bouncing balls in a box-shaped space. It's fascinating that it's running in Editor Preview. #realitykit #visionos

BTS: I initially thought that I could just hook up my DJI drone to the iOS controller and use the AR drone as an overlay. Unfortunately, DJI deprecated API for that. Also, it turned out that flying in such a small room gives you a very unstable recording. Luckily, I had an IKEA stand desk!

At LIV, I work a lot on making the best camera experience for #xr: capturing exciting moments you had in #mixedreality and sharing them with the world. But recently, I thought: what if we use #mixedreality to capture the reality?

AR Portal Display Experiment. #spatialcomputing #spatialdesign #xrdevelopment #mixedreality

🎉 Found a build-in Perlin Noise for VisionOS. It's in GameplayKit. #visionos #visionpro #perlinnoise

Random Walker on Apple Vision Pro.