AR Restaurant Menu

Customers are able to order food from their phones using the Square API. Before purchasing, they can get an idea of what the meal will be like by viewing 3D models of the food.

Comment

Inspiration

We are inspired by the combination of new and old technology that is often seen in our Tokyo location. Many of the restaurants here in Tokyo have realistic plastic displays of their food outside of the restaurants to entice customers. Our team decided to combine that idea with cutting edge augmented reality technology to allow customers to view their food in a 3D space before purchase.

Description

Our project is a simple web application that is designed to be used on mobile devices. The system allows customers to make food orders to a fictional restaurant using the Square API. Additionally, they are able to use a special tag to view their meals in an augmented reality space.

User Interaction Description

  • Customers walk into the fictional restaurant and sit down at a table.
  • Customers go to the restaurant website https://mana-menu.net/ on their mobile phones.
  • Application uses the Square Catalog API to display the menu.
  • After a menu item is selected, they are able to either add it to their order, or see the item in AR.
  • If the AR button is selected, the mobile device’s camera is activated and 3D scans of the menu item can be seen on the table when aimed at a special AR target placemat.
  • Once all of the desired items have been selected, the order is made on the shopping cart page and the purchase request is made via the Square Checkout API.
  • User is redirected to website thanking them and informing them of their order number.

How we built it

  1. This app used PolyCam and Blender to create the 3D models and the MindAR JavaScript library to display the content.
  2. The order information is transferred and processed using Square’s Catalog and Checkout API.
  3. The website is hosted on AWS, written on top of the Java Spring Framework and the Primefaces UI Framework.

Accessing our project

The following are the steps to access the AR menu website.

  1. (Prerequisite) Either color print out the (scan target image) or display it on a second device.
  2. On a mobile device with a camera access mana-menu.net
  3. Use the website in the manner described in the above “user interaction description”

Challenges we ran into

Our team faced challenges in the following areas:

  1. Having a functional development environment within the company network.
  2. General Spring framework and Primefaces lack-of-knowledge issues.
  3. 3D scanning and modeling.
    However, we are happy with what we were able to accomplish in this short timeframe.

License

The media and description of this project is made available to the public under the licenses displayed at the following URL: https://mana-menu.net/license.xhtml

What's next for AR Restaurant Menu

Initially we designed this system for dining in at a restaurant, however we want to additionally explore the idea of linking it to online delivery platforms so that customers can see the food in AR from anywhere.

Built With

Share this project:

Updates