---
title: WebAR demos
---

<style>
.gallery-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
}

.gallery-item {
    text-align: center;
    padding: 0;
}

.gallery-item:not(.gallery-item-3) img {
    border-radius: 25px;
}

@media screen and (min-width: 600px) {
    .gallery-item {
        flex-basis: 40%;
    }

    .gallery-item-3 {
        flex-basis: 30% !important;
    }
}

@media screen and (min-width: 1220px) {
    .gallery-item {
        transition: transform 0.25s, opacity 0.25s;
        opacity: 0.9;
    }
    .gallery-item:hover {
        transform: scale(1.1);
        opacity: 1.0;
    }
}
</style>

# WebAR demos

Welcome to my demo gallery! Here you'll find some cool examples of what you can do with MARTINS.js. Feel free to adapt my demos and also to study my code. My demos are available for a fee, which helps my work.

The Free Edition of MARTINS.js is included with my demos. The Professional Edition is available [separately](./download.md){ ._blank }. Before creating derivative works of my demos, make sure to [pick the right edition](./download.md){ ._blank } for you. If you have questions, feel free to [reach out](./contact.md){ ._blank }.

## Glue codes

MARTINS.js scans the physical environment, but it doesn't render virtual content. You need a 3D rendering technology for that. Glue codes link MARTINS.js to different 3D rendering technologies. My glue codes are compatible with both the Free and the Professional Edition of MARTINS.js.

AFRAME is the easiest choice for non-coders. If you're a coder, all choices are good. A basic demo is included with all of them.

<div class="gallery-grid" markdown>
<div class="gallery-item gallery-item-3" markdown>
<a href="https://ko-fi.com/s/24523f7548" rel="external" target="_blank">

![](./img/logo-aframe.png "A-Frame logo by Mozilla")

**AFRAME + MARTINS.js**

</a>
</div>
<div class="gallery-item gallery-item-3" markdown>
<a href="https://ko-fi.com/s/eea4077938" rel="external" target="_blank">


![](./img/logo-threejs.png "Three.js logo by Mr.doob")

**THREE.js + MARTINS.js**

</a>
</div>
<div class="gallery-item gallery-item-3" markdown>

![](./img/logo-babylonjs.png "Babylon.js logo by David Catuhe")

**BABYLON.js + MARTINS.js (soon)**

</div>
</div>



## For newbies

These simple demos help you get started with WebAR. They are great learning material!

<div class="gallery-grid" markdown>
<div class="gallery-item" markdown>
<a href="https://ko-fi.com/s/058542943d" rel="external" target="_blank">

![](./img/demo-hello.webp)

**Hello world with MARTINS.js**

</a>
</div>
<div class="gallery-item" markdown>
<a href="https://ko-fi.com/s/1d3c7e401c" rel="external" target="_blank">


![](./img/demo-interactivity-three.jpg)

**Touch interaction with THREE.js**

</a>
</div>
</div>



## Fun & games

Soon!



## Need something else?

You need a WebAR experience tailored for you, but you are unable to do it yourself. Is that your situation? Feel free to make a request!

[Request a WebAR experience](https://ko-fi.com/alemart/commissions){ ._blank .md-button }