Memory Lab is an innovative platform designed to breathe life into your photography work through dynamic 3D visualization. It offers a unique space on the internet for photographers to showcase their work in an interactive 3D scene. Users have the ability to upload their photographs, which then become integral elements of the 3D environment, creating a personalized and immersive experience.
I've always wanted a place on the inter-webs to showcase my photography. This is that.
For me, it was also a way to master the fundamentals of Three JS before using it as React Three Fiber and getting as much interactivity out of Rails as possible through Three JS and the physics library, Matter JS whilst explore how I could connect the postgreSQL database on what I'd only seen done as a static website. There were no tutorials or documentation that tackled my specific use case, which meant I had to go beyond them to find my own solution.
Leveraging a modern tech stack, Memory Lab combines:
- WebGL/Three.JS for creating and rendering the 3D scenes.
- esbuild and jsbundling-rails for efficient JavaScript bundling and module management.
- Active Storage and Cloudinary for handling user-uploaded images.
- Yarn for managing JavaScript package dependencies.
- Bootstrap for designing a responsive and intuitive user interface.
- Physics with Matter JS for a fun interactive menu.
- Heroku for deployment.
Memory Lab sets itself apart by providing an immersive and interactive user experience:
- Dynamic 3D Visualization: Utilize WebGL and Three.JS to render user-uploaded photographs in a captivating 3D environment.
- Interactive Scene: Engage with the 3D scene through interactive elements and dynamic animations that bring your photography to life.
- User Image Upload: Easily upload your photography, seamlessly integrating it into the 3D visualization.
- Responsive Design: Enjoy the experience across various devices, thanks to Bootstrap's responsive framework and CSS media queries.
Developing Memory Lab was an exploratory journey into the realms of 3D visualization and full-stack development, with a focus on maximizing interactivity within a Rails application:
- Three.JS and Stimulus Integration: Mastered the integration of Three.JS for 3D rendering within Stimulus JS controllers, pushing the limits of typical interaction on Rails applications.
- JavaScript and Rails Synergy: Achieved a seamless flow of data and values between the Rails backend and the JavaScript frontend, ensuring dynamic content updates and interactivity.
- Matter JS for Physics: Integrated Matter JS with Stimulus JS controllers to add physics simulations to the 3D scenes, enriching user interaction.
- Image Processing: Implemented advanced image processing techniques in development to optimize the visual presentation of user-uploaded photographs.
- Performance Optimization: Employed various loading techniques to ensure the application maintains good performance without compromising the quality of the 3D visualization.
- Form Helper Styling: Customized Rails form helpers with CSS, which are typically very rigid.
The development of Memory Lab was a rich learning experience, providing deep insights into full-stack development and the intricacies of integrating 3D graphics within a web application:
- Full-Stack Development in Rails: Enhanced my capabilities in developing and managing both the frontend and backend aspects of a Rails application.
- 3D Visualization with Three.JS: Gained in-depth knowledge of Three.JS, enabling the creation of dynamic and interactive 3D scenes.
- Trigonometry in Programming: Applied trigonometric principles to manipulate and animate objects within the 3D space, deepening my understanding of mathematics in programming.
- Optimizing Web Performance: Learned effective techniques for optimizing web performance, particularly in the context of rendering high-quality 3D graphics.
Special thanks to @disinnnn on Twitter for making great SVGs, and to the creators of the Pilowlava font, Anton Moglia, Jérémy Landes, and Maksym Kobuzan, distributed by velvetyne.fr.
Discover the immersive world of Memory Lab by following these steps:
- Fork the repository to your own GitHub account.
- Clone the repository to your local machine.
- Run yarn install to install JavaScript dependencies and bundle install for Ruby gems.
- Start your server with ./bin/dev.
- Visit http://localhost:3000 (if running locally) in your web browser to dive into the dynamic 3D showcase of Memory Lab.
Demo http://www.memorylab.space
