[{"data":1,"prerenderedAt":333},["ShallowReactive",2],{"project-lucid":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"name":8,"year":10,"topics":11,"branch":14,"languages":15,"tools":19,"archived":6,"homepage":7,"githubUrl":24,"heroImage":25,"body":28,"_type":327,"_id":328,"_source":329,"_file":330,"_stem":331,"_extension":332},"/projects/lucid","projects",false,"","Lucid","Realtime web-based mixed-reality 👓 ✨",2018,[12,13],"mixed reality","shaders","master",[16,17,18],"JavaScript","CSS","HTML",[20,21,22,23],"react","redux","three-js","webpack","https://github.com/ryanachten/Lucid",{"remote":26,"local":27},"https://mir-s3-cdn-cf.behance.net/project_modules/1400_opt_1/d57e2166084939.5b0a8310b4178.jpg","hero-images/lucid.webp",{"type":29,"children":30,"toc":306},"root",[31,39,46,56,62,67,75,83,89,94,102,108,113,118,123,131,137,142,150,156,161,169,175,180,188,194,199,207,213,218,226,232,237,245,251,256,264,269,274,282,288,293,301],{"type":32,"tag":33,"props":34,"children":36},"element","h1",{"id":35},"lucid",[37],{"type":38,"value":8},"text",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"mixed-reality-psychedelia",[44],{"type":38,"value":45},"Mixed-Reality Psychedelia",{"type":32,"tag":47,"props":48,"children":49},"p",{},[50],{"type":32,"tag":51,"props":52,"children":55},"img",{"alt":53,"src":54},"Header img","https://mir-s3-cdn-cf.behance.net/project_modules/1400/1f62fd66084939.5b0ba1beb3942.jpg",[],{"type":32,"tag":40,"props":57,"children":59},{"id":58},"lucid-1",[60],{"type":38,"value":61},"Lucid?",{"type":32,"tag":47,"props":63,"children":64},{},[65],{"type":38,"value":66},"A mixed-reality application which allows users to design and experience psychedelic visualisations through their browser and virtual-reality headsets.",{"type":32,"tag":47,"props":68,"children":69},{},[70],{"type":32,"tag":51,"props":71,"children":74},{"alt":72,"src":73},"Landing page","https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/1286b366084939.5b0b3d2063f62.jpg",[],{"type":32,"tag":47,"props":76,"children":77},{},[78],{"type":32,"tag":51,"props":79,"children":82},{"alt":80,"src":81},"Stack","https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/3c6bb666084939.5b0b3d2064968.png",[],{"type":32,"tag":84,"props":85,"children":87},"h3",{"id":86},"stack",[88],{"type":38,"value":80},{"type":32,"tag":47,"props":90,"children":91},{},[92],{"type":38,"value":93},"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.",{"type":32,"tag":47,"props":95,"children":96},{},[97],{"type":32,"tag":51,"props":98,"children":101},{"alt":99,"src":100},"App outline","https://mir-s3-cdn-cf.behance.net/project_modules/1400/a4ec7966084939.5b0a80f93ab3b.png",[],{"type":32,"tag":84,"props":103,"children":105},{"id":104},"process",[106],{"type":38,"value":107},"Process",{"type":32,"tag":47,"props":109,"children":110},{},[111],{"type":38,"value":112},"Lucid takes a low-resolution video feed from the user’s device.\nThis video is used for a material texture which is then applied to mesh geometry.",{"type":32,"tag":47,"props":114,"children":115},{},[116],{"type":38,"value":117},"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.",{"type":32,"tag":47,"props":119,"children":120},{},[121],{"type":38,"value":122},"The scene is then passed through a number of shaders before being rendered out stereoscopically for virtual-reality headsets.",{"type":32,"tag":47,"props":124,"children":125},{},[126],{"type":32,"tag":51,"props":127,"children":130},{"alt":128,"src":129},"Shape settings","https://mir-s3-cdn-cf.behance.net/project_modules/1400/79a99066084939.5b0a80f93afe4.jpg",[],{"type":32,"tag":40,"props":132,"children":134},{"id":133},"shape-settings",[135],{"type":38,"value":136},"Shape Settings",{"type":32,"tag":47,"props":138,"children":139},{},[140],{"type":38,"value":141},"The Shape settings panel is used to control the user’s view of the geometry as well as the shape of the geometry.",{"type":32,"tag":47,"props":143,"children":144},{},[145],{"type":32,"tag":51,"props":146,"children":149},{"alt":147,"src":148},"Overview mode","https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/b7526d66084939.5b0a80f93a737.jpg",[],{"type":32,"tag":84,"props":151,"children":153},{"id":152},"overview-world-view",[154],{"type":38,"value":155},"Overview / World View",{"type":32,"tag":47,"props":157,"children":158},{},[159],{"type":38,"value":160},"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.",{"type":32,"tag":47,"props":162,"children":163},{},[164],{"type":32,"tag":51,"props":165,"children":168},{"alt":166,"src":167},"Shape geometry","https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/dafb0066084939.5b0a8564b4dc5.png",[],{"type":32,"tag":84,"props":170,"children":172},{"id":171},"shape-geometry",[173],{"type":38,"value":174},"Shape Geometry",{"type":32,"tag":47,"props":176,"children":177},{},[178],{"type":38,"value":179},"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.",{"type":32,"tag":47,"props":181,"children":182},{},[183],{"type":32,"tag":51,"props":184,"children":187},{"alt":185,"src":186},"Texture settings","https://mir-s3-cdn-cf.behance.net/project_modules/1400/ea7d5766084939.5b0a80f93bc44.jpg",[],{"type":32,"tag":40,"props":189,"children":191},{"id":190},"texture-settings",[192],{"type":38,"value":193},"Texture Settings",{"type":32,"tag":47,"props":195,"children":196},{},[197],{"type":38,"value":198},"Texture settings are used to control how the video texture is mapped onto the geometry.",{"type":32,"tag":47,"props":200,"children":201},{},[202],{"type":32,"tag":51,"props":203,"children":206},{"alt":204,"src":205},"Tile count","https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/56c4c766084939.5b0a8214b3c31.png",[],{"type":32,"tag":84,"props":208,"children":210},{"id":209},"tile-count",[211],{"type":38,"value":212},"Tile Count",{"type":32,"tag":47,"props":214,"children":215},{},[216],{"type":38,"value":217},"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.",{"type":32,"tag":47,"props":219,"children":220},{},[221],{"type":32,"tag":51,"props":222,"children":225},{"alt":223,"src":224},"Rotate texture","https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/c8344b66084939.5b0a81eab1746.png",[],{"type":32,"tag":84,"props":227,"children":229},{"id":228},"rotate-texture",[230],{"type":38,"value":231},"Rotate Texture",{"type":32,"tag":47,"props":233,"children":234},{},[235],{"type":38,"value":236},"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.",{"type":32,"tag":47,"props":238,"children":239},{},[240],{"type":32,"tag":51,"props":241,"children":244},{"alt":242,"src":243},"Shader settings","https://mir-s3-cdn-cf.behance.net/project_modules/1400/d57e2166084939.5b0a8310b4178.jpg",[],{"type":32,"tag":40,"props":246,"children":248},{"id":247},"shader-settings",[249],{"type":38,"value":250},"Shader Settings",{"type":32,"tag":47,"props":252,"children":253},{},[254],{"type":38,"value":255},"Lucid features a shader pipeline which allows users to activate and rearrange various filters before the scene is rendered.",{"type":32,"tag":47,"props":257,"children":258},{},[259],{"type":32,"tag":51,"props":260,"children":263},{"alt":261,"src":262},"Shader types","https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/ecdf0166084939.5b0a8310b3a26.png",[],{"type":32,"tag":84,"props":265,"children":267},{"id":266},"shader-types",[268],{"type":38,"value":261},{"type":32,"tag":47,"props":270,"children":271},{},[272],{"type":38,"value":273},"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.",{"type":32,"tag":47,"props":275,"children":276},{},[277],{"type":32,"tag":51,"props":278,"children":281},{"alt":279,"src":280},"Shader order","https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/c34e9c66084939.5b0a8310b3371.png",[],{"type":32,"tag":84,"props":283,"children":285},{"id":284},"shader-order",[286],{"type":38,"value":287},"Shader Order",{"type":32,"tag":47,"props":289,"children":290},{},[291],{"type":38,"value":292},"The order in which shaders are arranged is super important when designing visualisations. Accordingly, Lucid allows users to drag-and-drop shaders to taste.",{"type":32,"tag":47,"props":294,"children":295},{},[296],{"type":32,"tag":51,"props":297,"children":300},{"alt":298,"src":299},"Shader visuals","https://mir-s3-cdn-cf.behance.net/project_modules/1400/1ed0fc66084939.5b0b4ec67be87.jpg",[],{"type":32,"tag":47,"props":302,"children":303},{},[304],{"type":38,"value":305},"Designed and developed by Ryan Achten (2018)",{"title":7,"searchDepth":307,"depth":307,"links":308},2,[309,310,315,319,323],{"id":42,"depth":307,"text":45},{"id":58,"depth":307,"text":61,"children":311},[312,314],{"id":86,"depth":313,"text":80},3,{"id":104,"depth":313,"text":107},{"id":133,"depth":307,"text":136,"children":316},[317,318],{"id":152,"depth":313,"text":155},{"id":171,"depth":313,"text":174},{"id":190,"depth":307,"text":193,"children":320},[321,322],{"id":209,"depth":313,"text":212},{"id":228,"depth":313,"text":231},{"id":247,"depth":307,"text":250,"children":324},[325,326],{"id":266,"depth":313,"text":261},{"id":284,"depth":313,"text":287},"markdown","content:projects:lucid.md","content","projects/lucid.md","projects/lucid","md",1776573205293]