• 

  Marker based Augmented Reality

Inspiration

We wanted to solve the problem of uncertainty in food ordering by letting users see their food in AR directly through a browser, without needing to install an app.

What it does

Try-Before-Eat is a WebAR application that allows users to view 3D models of food in their real environment using just a smartphone browser. It helps users make better food choices by showing real size, presentation, and appearance.

How we built it

Used WebAR (8thWall/WebXR) for AR in the browser.

Built UI with HTML, CSS, JavaScript.

Designed 3D food models using Blender.

Exported models through Unity WebGL for compatibility with web platforms.

Challenges we ran into

Making AR run smoothly across different browsers.

Scaling 3D food models correctly.

Ensuring fast load times for web users.

Accomplishments that we're proud of

A fully working AR web app without requiring any installation.

Realistic food previews available through a simple link or QR code.

What we learned

How to implement WebAR effectively.

Optimizing assets for the web.

Improving user experience for mobile web AR.

What's next for Try-Before-Eat

Add more restaurant dishes.

Enable one-click food ordering from the AR view.

Enhance visuals and animations for more realism.

Please use your desktop site for better ratio of camera

Built With

• a-frame
• ar.js
• augmented-reality
• css
• html
• javascript
• sketchfab