Vyking Examples

Virtual Try-on

Vyking Apparel basic camera

Basic example of the Vyking Apparel Camera.

Vyking Apparel Camera Basic

Vyking Apparel camera with a catalogue

Example of the Vyking Apparel Camera with a catalogue allowing the shoes to be changed.

Vyking Apparel Camera with a catalogue

Vyking Apparel basic video

Example of the Vyking Apparel using a video instead of the camera.

Vyking Apparel Video Basic

Vyking Apparel examples showing customization

3D Model Viewer

Model Viewer basic

Basic example of the Vyking Model Viewer.

Vyking Model Viewer Basic

3D Model Viewer with a catalogue

Example of the model viewer with a catalogue allowing the shoes to be changed.

Vyking Model Viewer with a catalogue

Combined on a Product Description Page

Due to the nature of AR and 3D graphics both the VTO and 3D viewer can have high demands on both memory and CPU. This needs to be considered when deploying on mobile devices as they have limited memory and cpu resources. The use of iframes helps encapsulate the viewers and ensures greater release of memory when the iframe is closed. If memory or CPU usage is still an issue then popup windows, which appear as tabs on mobile devices, can be considered.

PDP using iframes

Basic example of a Product Description Page hosting the VTO and 3D Viewers in iframes. This solution ensures that both the model-viewer and vyking-apparel are not running at the same time and closing the iframes ensures most of the memory used is garbage collected.

Simple PDP using iframes

PDP using popup windows on mobile devices

Basic example of a Product Description Page hosting the VTO and 3D viewers in popup windows on mobile devices. By hosting the vyking-apparel and model-viewer in popup windows and using the correct window.open() configuration parameters the window gets its own process and thus has the full allowed memory and CPU resources.

Simple PDP using popup windows

PDP not using iframes, but creating and releasing the HTML elements as required

This example shows how the vyking-apparel and model-viewer elements can be created and released as required.

Simple PDP without reusing the HTML element

PDP not using iframes, but re-using the HTML elements

This example shows how the vyking-apparel and model-viewer elements can be created once and then re-used by adding them and removing them from the document as required.

Simple PDP reusing the HTML elements