NeoXR logo
NeoXR
Author: Tom Hu

Publish data: June 22, 2022

How to Create WebAR app

Web-based augmented reality (webAR) is a technology that allows users to access AR experiences directly from their smartphones. As there’s no need for any downloading, people can enjoy the immersive and unique experience of AR on-demand, on most operating systems, mobile devices, and web browser.

Not only is webAR enjoyable for audiences, but it can effectively deliver marketing messages. Studies show that by adding interactive elements to content, recall is increased by up to 80%.

4 Steps to Make WebAR

1. WebAR Design

Always begin with a well-rounded plan that clearly states your target audience, campaign goals and creative vision. This will help inform your decisions later on.

  1. floor
  2. world
  3. marker less
  4. face
  5. image
  6. QR-code
  7. mix all

2. Create 3D Model​s

A good WebAR experience is all about balancing your creative vision with available bandwidth speeds. Highly detailed models or super complex animations can cause web-based experiences to run slowly.

Good performance 3D Scene criteria:

  1. scene scale: . In AR 1 unit is 1 meter. IOS 1 unit is 1 centimetre

  2. 100K vertices limited to 3d scene

  3. one mesh apply only 1 material.

  4. max 6 materials.

  5. texture size 1024X1024, format jpg. If need transparent material use PNG with transparent channel on baseColor textures

  6. PBR workflow, with example:

    • texture _BaseColor.jpg (or png if need transparency)
    • texture _Normal.jpg
    • texture_OcclusionRoughnessMetallic.jpg
    • texture _Emissive.png

  7. 3D scan is also great choice to bring actual product to Metaverse

if not done this correctly, your webAR will crash constantly, We have a work flow detecated to webAR 3D optimization. will make sure your 3D secne will work in all devices

Work flow: Sketchup ➔ CAD ➔FBX, OBJ ➔ Maya ➔ Blender ➔ Zbrush ➔ Substance Painter ➔ GLTF ➔ USDZ

3. WebAR development

This work will be done through the platform you selected. Like most digital development, this process is fairly technical and best handled by a developer or team of developers with experience building in the platform.

  1. WebXR Devices API: open Srouce only for Andriod
  2. AR quick look: open Srouce only for IOS
  3. AR.js: oepn source on Andriod and IOS. only image target and marker tracking
  4. 8th wall: the best SLAM, floor tracking in the market
  5. Zappar: the second polular WebAR creation platform
  6. many more ....

We can develop WebAR on any platform you want.

4. Deploy to your website

Chose your own hosting service as needed, or from other platform such as AWS, Azure, 8th wall and Zappar.You can also export the final experience and host it on your own servers Either way, you can now share your new WebAR experience by simply sharing the host URL via QR or any other means.

  1. WebXR Devices API: self hosting with your domain
  2. AR quick look: self hosting with your domain
  3. 8th wall: Cloud Hosting on 8th wall, with custom domain. option for self hosting. required 8th wall logo in your all projects
  4. Zappar: Cloud Hosting on Zappar: not required Zappar logo in your all projects: option for self hosting

  5. many more ....

We can deploy WebAR project on any website you want. worldpress, shopify and more

tech Stack: JavaScript, Three.js, A-Frame, WebXR API ...