ryanachten/lucid

Realtime web-based mixed-reality 👓 ✨

Lucid

Mixed-Reality Psychedelia

Lucid?

A mixed-reality application which allows users to design and experience psychedelic visualisations through their browser and virtual-reality headsets.

Stack

This application leverages an array of excellent resources including Three.js for visualisations, React and Google’s Material Design language for user interface, Redux for state management, and Webpack for bundling.

Process

Lucid takes a low-resolution video feed from the user’s device. This video is used for a material texture which is then applied to mesh geometry.

Mesh rotation is controlled by the user’s device orientation, allowing the user to view the interior of the geometry simply by moving their head.

The scene is then passed through a number of shaders before being rendered out stereoscopically for virtual-reality headsets.

Shape Settings

The Shape settings panel is used to control the user’s view of the geometry as well as the shape of the geometry.

Overview / World View

By clicking the ‘Get Overview’ button, users can get an outside perspective of how the shape, texture and shaders are affecting the rendered output. This is handy when designing lucid experiences.

Shape Geometry

The ‘Shape Geometry’ drop-down allows users to control what 3D shape the video texture is rendered on, affecting the output of the visualisation dramatically.

Texture Settings

Texture settings are used to control how the video texture is mapped onto the geometry.

Tile Count

Tile count defines how many repetitions of the video texture are to be applied. The repetitions are applied seamlessly by being flipped horizontally and vertically at each row and column, making for interesting patterns.

Rotate Texture

Rotate texture indicates whether or not an offset should be applied to the texture UV mapping. If so, the speed of this offset can be controlled using the X and Y sliders.

Shader Settings

Lucid features a shader pipeline which allows users to activate and rearrange various filters before the scene is rendered.

Shader types

The fragment shaders included in the application either further distort the visual output (such as those featured above), or act as utilities for adjusting the colour, brightness or contrast of the image.

Shader Order

The order in which shaders are arranged is super important when designing visualisations. Accordingly, Lucid allows users to drag-and-drop shaders to taste.

Designed and developed by Ryan Achten (2018)