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
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
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
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.
