Back

3D Vineyard Website

Mix of WebGL and a traditional easy to use Navigation

Visit Page ↗

2023

concept, models and code created by myself

Website for a Vinery, hoverable areas, "paper-draw" looks thanks to postprocessing and a mixture of render passes.

easy-to-use, calm and clean visuals and animations, tailored mobile view

Technologies Used

  • React + Zustand + Three.js +Postprocessing + Mantine + Vercel+ Vite
  • Models are done by myself
  • Postprocessing and Shaders

Main Challenges

  1. Shaders: Shaders are hard to learn and require a completely different way of thinking then conventional front-end development. A lot of math is required. I learned a lot from this youtube channel and this website: The Book of Shaders
  2. Performance: The site should have a quick loading time and also run on mobile devices.
  3. UI: the Site should look appealing and should represent a "vineyard-flair", also not tiring users' eyes.
  4. Mobile: It was a requirement that the site should run on mobile devices.

Take Aways / ToDos

  1. Shaders are awesome and super performant and hard to learn
  2. Loader is not yet working 100% correct