Holo Presentations: Making 3D-native presentations
Holo Presentations: Making 3D-native presentations
I've seen multiple meetups in virtual worlds where the presenter is showing their 2D slides as an image behind them. I wanted to prototype ideas to make 3D-native presentations where the content would move around the speaker as they present. There are many ways to tackle this problem. I iterated over different options and settled on an approach that I call Holo Presentations.
It's running live at: https://holo-presentation.vercel.app. There's an information panel with the controls and some example presentations you can load up. (Hide it by pressing i or the right thumbstick in your VR controller.) Also, check out the repo. The readme contains instructions on how to use the app.
How does it work?
Slides become containers. They are useful to organize content. The outermost container is the root container — it holds the whole presentation. The root container can add depth layers. They are containers themselves and lay out ideas spatially in the z-axis.
Different objects can be added to a container:
Other containers
Text
Emojis
Images
3D models
Text and emojis are added via a text input. If the text is an emoji, it loads a 3D version of the emoji. Images and 3D models can be dragged and dropped into the scene and will appear in the selected container.
Once the presentation is ready, there is a visualization mode. You can move to the next or previous object in the presentation. This moves the root container in such a way that leaves the current object front and center.
I added basic VR support to create containers, add text, modify existing presentations, and visualize them. Some things were left out as the priority was to test what 3D presentations can look like.
Iterations
The first version allowed you to place objects anywhere in 3D space. To facilitate the creation process, I constrained where objects can be positioned. Objects are added to the selected container and moved on the X and Y axis of that container. To organize content spatially, I added depth layers. These depth layers are at 1.5m intervals between each other.
At first, I tried displaying depth layers one behind the other in a cuboid. You could see all the objects in the presentation from the front. The presenter would use the position of assets with respect to each other in the Z-axis to convey their connections. Or so I thought. After trying it, there was too much information and it was impossible to follow.
My next step was to add translucid layers to containers and text elements. The content was now clear. The viewer could still see one or two depth layers behind to get a hint of what's coming, but not more.
The final attempt moved each depth layer to the side making it easy to get a glimpse of the whole presentation. Here's the comparison:
How can it be improved?
This is just a prototype but during the development process, many ideas came up that were left on the drawing board.
Some required too much time to implement correctly. That was the case for constraining objects inside a container. You can move it outside of its container, but it wouldn’t make much sense. I would have loved to add full VR support for the creation process. That required some way of searching images, 3D models, and emojis.
Other objects can be added like videos, gifs, and clickable links. Animating object where the animation is recorded as you move the object yourself. Or programmable objects so the viewer or presenter can interact with them in real-time to emit a sound or play an animation.
There are basic tools to rotate, move, and scale objects but they are not intuitive. I prefer the tools provided in apps like Bezel or Spline. They are the perfect combination of tried and tested 3D manipulation tools with the simplicity required for an application like this.
I would have liked to add more options to visualization. For example, changing the order in which objects are viewed. Right now, the order is based on where they are in the container tree and which one was added first. Also, the presenter may want to skip zooming into certain objects that should only be seen in conjunction with other objects.
There are many options to position information in space. Other projects are implementing a graph structure that displays the connection between related content. A presentation is a tree — it needs an order in which the elements should be seen. After several iterations, I came up with an interesting way to visualize the tree using depth layers and containers, but I'm sure there are other possibilities. It might even be possible to use a graph which leads to more exciting ways to present.
If this was a product, it should be a library so other applications like Hubs allow their presenters to use 3D presentations instead of 2D ones. Another option is for the application to export a GLTF.
Takeaways
This is one attempt at organizing information in 3D focused on one kind of application. It's far from being a final product, but working on it provided several takeaways:
We store information in our heads spatially, so visualizing it in 3D makes sense.
Having an extra dimension leads to cramming too much information. I still haven't found the correct constraints and shapes to hold the content in a way that's easy to process.
The presenter can use depth to show how the information relates to each other.
As we move to 3D interfaces, we must consider how classical 2D apps can adapt to 3D. We get an extra dimension to organize information. This is powerful and requires figuring out how to make the most of it.
Thanks to Alvaro Bernal for the help with the design iterations.