---
title: WebAR demos
---

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

.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: 30%;
    }
}

@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.

!!! info "Derivative works"

    The Free Edition of MARTINS.js is included with my demos. Before creating derivative works of my demos, make sure to [pick the right edition for you](./download.md){ ._blank }.

## Free demos

The following free demos will help you get started:

<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!**

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


![](./img/demo-webgl.jpg)

**Render with WebGL (3D)**

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



## Glue codes

MARTINS.js scans the physical environment, but it doesn't render virtual content. Third-party 3D rendering technologies can help you with 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. A basic demo is included with all of them.

<div class="gallery-grid" markdown>
<div class="gallery-item" 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" 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" markdown>

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

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

</div>
</div>

!!! tip Tip

    AFRAME is the easiest choice for non-coders. If you're a coder, all choices are good.


## Fun & games

WebAR can be a lot of fun. More demos coming soon!

<div class="gallery-grid" markdown>
<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>



## 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 }