Add online demo based on WebGL

README.md

@@ -4,7 +4,7 @@ Create amazing Augmented Reality experiences with **MARTINS.js**, a GPU-accelera
 
 Get started at <https://alemart.github.io/martins-js/>
 
-![WebAR demo](docs/img/demo-cool3.gif) ![WebAR demo](docs/img/splash.gif)
+![WebAR demo](docs/img/demo-cool3.gif)
 
 MARTINS.js is [dual licensed](#author). It is currently in beta.
 
@@ -16,6 +16,27 @@ Currently supported features:
 
 ![WebAR demo](docs/img/demo-aframe.gif) ![WebAR demo](docs/img/demo-hello.gif)
 
+## Try WebAR right now!
+
+1. Scan or tap the QR code below with a mobile device.
+2. A web page will be opened. It's the WebAR experience.
+3. The web page will request access to your webcam. Authorize it.
+4. Scan the cartoon below.
+5. Enjoy! :wink:
+
+> &nbsp;
+> **Guidelines for WebAR:**
+> - WebGL2 and WebAssembly are required. Use a [compatible browser](#browser-compatibility).
+> - Don't move the camera too quickly - it produces motion blur.
+> - The physical environment should be properly illuminated.
+> - Avoid low-quality cameras (cameras of common smartphones are OK).
+> &nbsp;
+
+| Cartoon | QR code |
+| - | - |
+| [![Reference Image](docs/demo/my-reference-image.webp)](docs/demo/my-reference-image.webp) | [![QR code](docs/demo/qr-code.png)](https://alemart.github.io/martins-js/demo/) |
+
+
 ## Why use MARTINS.js?
 
 Here is why MARTINS.js is a great choice for creating Augmented Reality experiences:

docs/demo/index.md

@@ -0,0 +1,4 @@
+---
+template: demo/index.html
+title: ""
+---

docs/demo/instructions.md

@@ -0,0 +1,32 @@
+---
+title: Try WebAR right now!
+---
+
+# Try WebAR right now!
+
+## Follow the steps
+
+1. Scan or tap the QR code below with a mobile device.
+2. A web page will be opened. It's the WebAR experience.
+3. The web page will request access to your webcam. Authorize it.
+4. Scan the cartoon below.
+5. Enjoy! :wink:
+
+!!! info "Guidelines for WebAR"
+
+    - WebGL2 and WebAssembly are required. Use a [compatible browser](../getting-started/questions-and-answers.md#what-about-browser-compatibility).
+    - Don't move the camera too quickly - it produces motion blur.
+    - The physical environment should be properly illuminated.
+    - Avoid low-quality cameras (cameras of common smartphones are OK).
+
+## Scan the QR code
+
+[![QR code](qr-code.png){ width=320 }](index.md){ ._blank }
+
+## Scan the cartoon
+
+[![Reference Image](my-reference-image.webp){ width=600 }](my-reference-image.webp){ ._blank }
+
+## Wanna see more?
+
+[Check out my WebAR demos](../demos.md){ .md-button }

docs/getting-started/index.md

@@ -4,7 +4,7 @@
 
 **MARTINS.js** is a GPU-accelerated Augmented Reality engine for the web. It's a standalone WebAR technology for creating AR experiences that run in web browsers. Users don't need specialized hardware nor dedicated software - only a modern and compatible web browser.
 
-[Get started with WebAR](./introduction.md){ .md-button .md-button--primary }
+[Learn WebAR](./introduction.md){ .md-button .md-button--primary } [Try a demo](../demo/instructions.md){ .md-button }
 
 ## Features
 
@@ -24,8 +24,6 @@ Here is why MARTINS.js is a great choice for creating Augmented Reality experien
 * **Fully standalone!** MARTINS.js has in it everything it needs to analyze the environment and help you create AR. There are no additional requirements. It's not WebXR.
 * **Easy to get started!** MARTINS.js can be used with a `<script>` tag in your page. A static HTML page is enough to get started.
 
-[Check out my WebAR demos](../demos.md){ .md-button }
-
 ## Browser compatibility
 
 MARTINS.js is currently compatible with the latest versions of almost all major web browsers:

docs_overrides/demo/demo.css

@@ -0,0 +1,10 @@
+body {
+    background-color: #3d5afe;
+}
+
+#scan {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    opacity: 0.75;
+}

docs_overrides/demo/demo.js

@@ -0,0 +1,968 @@
+/*
+
+This demo is rendered using WebGL code
+
+Check the MARTINS.js code below!
+
+*/
+
+
+/*
+
+WebGL low-level code:
+
+*/
+
+class Entity
+{
+    constructor(gl)
+    {
+        this._gl = gl;
+        this._program = this._compile(gl, this.vertexShader, this.fragmentShader);
+        this._uniformLocation = {
+            'time': gl.getUniformLocation(this._program, 'time'),
+            'resolution': gl.getUniformLocation(this._program, 'resolution'),
+            'projectionMatrix': gl.getUniformLocation(this._program, 'projectionMatrix'),
+            'modelViewMatrix': gl.getUniformLocation(this._program, 'modelViewMatrix'),
+        };
+
+        this.projectionMatrix = new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]);
+        this.modelViewMatrix = new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]);
+    }
+
+    render(time = 0)
+    {
+        const gl = this._gl, u = this._uniformLocation;
+
+        gl.useProgram(this._program);
+
+        gl.uniform1f(u.time, time);
+        gl.uniform2f(u.resolution, gl.canvas.width, gl.canvas.height);
+        gl.uniformMatrix4fv(u.projectionMatrix, false, this.projectionMatrix);
+        gl.uniformMatrix4fv(u.modelViewMatrix, false, this.modelViewMatrix);
+
+        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+        this._render(time);
+    }
+
+    _render(time)
+    {
+        const gl = this._gl;
+
+        gl.drawArrays(gl.TRIANGLES, 0, 3 * this.numberOfTriangles);
+    }
+
+    get numberOfTriangles()
+    {
+        throw new Error();
+    }
+
+    get vertexShader()
+    {
+        throw new Error();
+    }
+
+    get fragmentShader()
+    {
+        throw new Error();
+    }
+
+    get _includeShaderUtils()
+    {
+        return `
+        mat4 translate(vec3 offset)
+        {
+            float x = offset.x, y = offset.y, z = offset.z;
+
+            return mat4(
+                1, 0, 0, 0,
+                0, 1, 0, 0,
+                0, 0, 1, 0,
+                x, y, z, 1
+            );
+        }
+
+        mat4 scale(vec3 factor)
+        {
+            float x = factor.x, y = factor.y, z = factor.z;
+
+            return mat4(
+                x, 0, 0, 0,
+                0, y, 0, 0,
+                0, 0, z, 0,
+                0, 0, 0, 1
+            );
+        }
+
+        mat4 rotateX(float rad)
+        {
+            float s = sin(rad), c = cos(rad);
+
+            return mat4(
+                1, 0, 0, 0,
+                0, c, s, 0,
+                0,-s, c, 0,
+                0, 0, 0, 1
+            );
+        }
+
+        mat4 rotateY(float rad)
+        {
+            float s = sin(rad), c = cos(rad);
+
+            return mat4(
+                c, 0,-s, 0,
+                0, 1, 0, 0,
+                s, 0, c, 0,
+                0, 0, 0, 1
+            );
+        }
+
+        mat4 rotateZ(float rad)
+        {
+            float s = sin(rad), c = cos(rad);
+
+            return mat4(
+                c, s, 0, 0,
+               -s, c, 0, 0,
+                0, 0, 1, 0,
+                0, 0, 0, 1
+            );
+        }
+
+        mat4 rotate(vec3 euler)
+        {
+            return rotateZ(euler.z) * rotateY(euler.y) * rotateX(euler.x);
+        }
+        `;
+    }
+
+    get _includeVertexShaderUtils()
+    {
+        return this._includeShaderUtils + this._transform;
+    }
+
+    get _includeFragmentShaderUtils()
+    {
+        return this._includeShaderUtils + this._colorize;
+    }
+
+    get _transform()
+    {
+        return `
+        vec4 transform(vec4 v)
+        {
+            return v;
+        }
+        `;
+    }
+
+    get _colorize()
+    {
+        return `
+        vec4 colorize(vec4 p)
+        {
+            return p;
+        }
+        `;
+    }
+
+    _createShader(gl, shaderType, shaderSource)
+    {
+        const shader = gl.createShader(shaderType);
+
+        gl.shaderSource(shader, shaderSource);
+        gl.compileShader(shader);
+
+        if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+            const message = gl.getShaderInfoLog(shader);
+            gl.deleteShader(shader);
+            throw new Error(message);
+        }
+
+        return shader;
+    }
+
+    _createProgram(gl, vs, fs)
+    {
+        const program = gl.createProgram();
+
+        gl.attachShader(program, vs);
+        gl.attachShader(program, fs);
+        gl.linkProgram(program);
+
+        if(!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            const message = gl.getProgramInfoLog(program);
+            gl.deleteProgram(program);
+            throw new Error(message);
+        }
+
+        return program;
+    }
+
+    _compile(gl, vsSource, fsSource)
+    {
+        const vs = this._createShader(gl, gl.VERTEX_SHADER, vsSource);
+        const fs = this._createShader(gl, gl.FRAGMENT_SHADER, fsSource);
+        const program = this._createProgram(gl, vs, fs);
+
+        return program;
+    }
+}
+
+class Pyramid extends Entity
+{
+    get numberOfTriangles()
+    {
+        return 4;
+    }
+
+    get vertexShader()
+    {
+        return `#version 300 es
+
+        uniform mat4 projectionMatrix;
+        uniform mat4 modelViewMatrix;
+        uniform float time;
+        uniform vec2 resolution;
+
+        flat out int triangleID;
+        out vec2 control;
+
+        const float VERTEX[] = float[](
+            0.5, -0.25, 0.25,
+            0.0, 0.25, 0.0,
+            -0.5, -0.25, 0.25,
+
+            -0.5, -0.25, 0.25,
+            0.0, 0.25, 0.0,
+            0.0, -0.25, -0.5,
+
+            0.0, -0.25, -0.5,
+            0.0, 0.25, 0.0,
+            0.5, -0.25, 0.25,
+
+            0.0, -0.25, -0.5,
+            0.5, -0.25, 0.25,
+            -0.5, -0.25, 0.25
+        );
+        const vec3 CENTROID = vec3(
+            0.0, -0.125, 0.0
+        );
+
+        const vec2 UV_CONTROL_POINT[] = vec2[](
+            vec2(0.0, 1.0),
+            vec2(1.0, -1.0),
+            vec2(-1.0, -1.0)
+        );
+
+        ${this._includeVertexShaderUtils}
+
+        void main()
+        {
+            int base = gl_VertexID * 3;
+            vec4 vertex = vec4(VERTEX[base], VERTEX[base+1], VERTEX[base+2], 1.0);
+
+            gl_Position = projectionMatrix * modelViewMatrix * transform(vertex);
+            triangleID = gl_VertexID / 3;
+            control = UV_CONTROL_POINT[gl_VertexID % 3];
+        }
+        `;
+    }
+
+    get fragmentShader()
+    {
+        return `#version 300 es
+        precision mediump float;
+
+        flat in int triangleID;
+        out vec4 color;
+
+        const vec3 COLOR[] = vec3[](
+            vec3(0,1,1),
+            vec3(1,1,0),
+            vec3(1,0,1),
+            vec3(0,1,0)
+        );
+
+        ${this._includeFragmentShaderUtils}
+
+        void main()
+        {
+            vec4 pixel = vec4(COLOR[triangleID], 1.0);
+            color = colorize(pixel);
+        }
+        `;
+    }
+
+    get _colorize()
+    {
+        // create black borders
+        return `
+        const float THICKNESS = 0.05;
+        in vec2 control;
+
+        vec4 colorize(vec4 p)
+        {
+            const float SQRT5 = float(${Math.sqrt(5.0)});
+            float x = control.x, y = control.y;
+
+            float d = abs(y + 1.0);
+            d = min(d, abs(2.0 * x - y + 1.0) / SQRT5);
+            d = min(d, abs(-2.0 * x - y + 1.0) / SQRT5);
+
+            p.rgb *= step(THICKNESS, d);
+            return p;
+        }
+        `;
+    }
+}
+
+class AnimatedPyramid extends Pyramid
+{
+    get _transform()
+    {
+        // rotate around the centroid
+        return `
+        const float CYCLE_DURATION = 3.0;
+        const vec3 POSITION = vec3(0.0, 0.0, 0.5);
+        const vec3 SCALE = vec3(1.5);
+
+        vec4 transform(vec4 v)
+        {
+            const float PI = float(${Math.PI});
+            float rad = -(2.0 * PI / CYCLE_DURATION) * time;
+
+            v = translate(-CENTROID) * v;
+            v = rotate(vec3(rad, rad, 0.0)) * v;
+            v = translate(CENTROID) * v;
+
+            v = scale(SCALE) * v;
+            v = translate(POSITION) * v;
+            return v;
+        }
+        `;
+    }
+}
+
+class Cube extends Entity
+{
+    get numberOfTriangles()
+    {
+        return 12; // 6 faces * 2 triangles per face
+    }
+
+    get vertexShader()
+    {
+        return `#version 300 es
+
+        uniform mat4 projectionMatrix;
+        uniform mat4 modelViewMatrix;
+        uniform float time;
+        uniform vec2 resolution;
+
+        flat out int faceID;
+        out vec2 control;
+
+        const float VERTEX[] = float[](
+            1.0, 1.0, 1.0,
+            -1.0, 1.0, 1.0,
+            -1.0, -1.0, 1.0,
+            -1.0, -1.0, 1.0,
+            1.0, -1.0, 1.0,
+            1.0, 1.0, 1.0,
+
+            1.0, 1.0, -1.0,
+            -1.0, 1.0, -1.0,
+            -1.0, -1.0, -1.0,
+            -1.0, -1.0, -1.0,
+            1.0, -1.0, -1.0,
+            1.0, 1.0, -1.0,
+
+            1.0, 1.0, 1.0,
+            -1.0, 1.0, 1.0,
+            -1.0, 1.0, -1.0,
+            -1.0, 1.0, -1.0,
+            1.0, 1.0, -1.0,
+            1.0, 1.0, 1.0,
+
+            1.0, -1.0, 1.0,
+            -1.0, -1.0, 1.0,
+            -1.0, -1.0, -1.0,
+            -1.0, -1.0, -1.0,
+            1.0, -1.0, -1.0,
+            1.0, -1.0, 1.0,
+
+            1.0, 1.0, 1.0,
+            1.0, -1.0, 1.0,
+            1.0, -1.0, -1.0,
+            1.0, -1.0, -1.0,
+            1.0, 1.0, -1.0,
+            1.0, 1.0, 1.0,
+
+            -1.0, 1.0, 1.0,
+            -1.0, -1.0, 1.0,
+            -1.0, -1.0, -1.0,
+            -1.0, -1.0, -1.0,
+            -1.0, 1.0, -1.0,
+            -1.0, 1.0, 1.0
+        );
+        const vec3 CENTROID = vec3(
+            0.0, 0.0, 0.0
+        );
+
+        const vec2 UV_CONTROL_POINT[] = vec2[](
+            vec2(1.0, 1.0),
+            vec2(0.0, 1.0),
+            vec2(0.0, 0.0),
+            vec2(0.0, 0.0),
+            vec2(1.0, 0.0),
+            vec2(1.0, 1.0)
+        );
+
+        ${this._includeVertexShaderUtils}
+
+        void main()
+        {
+            int base = gl_VertexID * 3;
+            vec4 vertex = vec4(VERTEX[base], VERTEX[base+1], VERTEX[base+2], 1.0);
+
+            gl_Position = projectionMatrix * modelViewMatrix * transform(vertex);
+            faceID = gl_VertexID / 6;
+            control = UV_CONTROL_POINT[gl_VertexID % 6];
+        }
+        `;
+    }
+
+    get fragmentShader()
+    {
+        return `#version 300 es
+        precision mediump float;
+
+        flat in int faceID;
+        out vec4 color;
+
+        const vec3 COLOR[] = vec3[](
+            vec3(1,0,1),
+            vec3(1,1,0),
+            vec3(0,1,1),
+            vec3(1,0,0),
+            vec3(0,0,1),
+            vec3(0,1,0)
+        );
+
+        ${this._includeFragmentShaderUtils}
+
+        void main()
+        {
+            vec4 pixel = vec4(COLOR[faceID], 1.0);
+            color = colorize(pixel);
+        }
+        `;
+    }
+
+    get _colorize()
+    {
+        // create black borders
+        return `
+        const float THICKNESS = 0.03;
+        in vec2 control;
+
+        vec4 colorize(vec4 p)
+        {
+            float x = control.x, y = control.y;
+
+            vec4 d4 = abs(vec4(x, y, x - 1.0, y - 1.0));
+            vec2 d2 = min(d4.xy, d4.zw);
+            float d = min(d2.x, d2.y);
+
+            p.rgb *= step(THICKNESS, d);
+            return p;
+        }
+        `;
+    }
+}
+
+class AnimatedCube extends Cube
+{
+    get _transform()
+    {
+        // rotate around the centroid
+        return `
+        const float CYCLE_DURATION = 3.0;
+        const vec3 POSITION = vec3(-0.5, -1.5, 2.0);
+        const vec3 SCALE = vec3(0.5);
+
+        vec4 transform(vec4 v)
+        {
+            const float PI = float(${Math.PI});
+            float rad = -(2.0 * PI / CYCLE_DURATION) * time;
+
+            v = translate(-CENTROID) * v;
+            v = rotateY(rad) * v;
+            v = translate(CENTROID) * v;
+
+            v = scale(SCALE) * v;
+            v = translate(POSITION) * v;
+            return v;
+        }
+        `;
+    }
+}
+
+class Quad extends Entity
+{
+    get numberOfTriangles()
+    {
+        return 2;
+    }
+
+    get vertexShader()
+    {
+        return `#version 300 es
+
+        uniform mat4 projectionMatrix;
+        uniform mat4 modelViewMatrix;
+        uniform float time;
+        uniform vec2 resolution;
+
+        out vec2 texCoord;
+
+        const float UV[] = float[](
+            0.0, 0.0,
+            1.0, 0.0,
+            0.0, 1.0,
+
+            0.0, 1.0,
+            1.0, 0.0,
+            1.0, 1.0
+        );
+
+        const float QUAD[] = float[](
+           -1.0,-1.0,
+            1.0,-1.0,
+           -1.0, 1.0,
+
+           -1.0, 1.0,
+            1.0,-1.0,
+            1.0, 1.0
+        );
+
+        ${this._includeVertexShaderUtils}
+        ${this._rectify}
+        ${this._rectifyUV}
+
+        void main()
+        {
+            int base = gl_VertexID * 2;
+            vec4 vertex = vec4(QUAD[base], QUAD[base+1], 0.0, 1.0);
+
+            vec4 v = rectify(vertex);
+            gl_Position = projectionMatrix * modelViewMatrix * transform(v);
+
+            vec2 uv = vec2(UV[base], UV[base+1]) * vec2(1,-1);
+            texCoord = rectifyUV(uv);
+        }
+        `;
+    }
+
+    get _rectify()
+    {
+        return `
+        vec4 rectify(vec4 v)
+        {
+            return v;
+        }
+        `;
+    }
+
+    get _rectifyUV()
+    {
+        return `
+        vec2 rectifyUV(vec2 v)
+        {
+            return v;
+        }
+        `;
+    }
+}
+
+class ImageQuad extends Quad
+{
+    constructor(gl)
+    {
+        super(gl);
+
+        this._uniformLocation['image'] = gl.getUniformLocation(this._program, 'image');
+        this._texture = gl.createTexture();
+        this._uploaded = false;
+        this._image = null;
+
+        if(this._imageURL != '') {
+            this._image = new Image();
+            this._image.onload = () => this.upload(this._image);
+            this._image.src = this._imageURL;
+        }
+    }
+
+    upload(data)
+    {
+        const gl = this._gl;
+
+        gl.bindTexture(gl.TEXTURE_2D, this._texture);
+        gl.texImage2D(gl.TEXTURE_2D,
+            0, // mipmap level
+            gl.RGBA, // internal format
+            gl.RGBA, // data format
+            gl.UNSIGNED_BYTE, // data type
+            data // data
+        );
+        gl.generateMipmap(gl.TEXTURE_2D);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+
+        this._uploaded = true;
+    }
+
+    _render(time)
+    {
+        const gl = this._gl;
+
+        if(!this._uploaded)
+            return;
+
+        gl.bindTexture(gl.TEXTURE_2D, this._texture);
+        gl.activeTexture(gl.TEXTURE0 + 0);
+        gl.uniform1i(this._uniformLocation['image'], 0);
+
+        super._render(time);
+
+        gl.bindTexture(gl.TEXTURE_2D, null);
+    }
+
+    get _imageURL()
+    {
+        return '';
+    }
+
+    get _rectify()
+    {
+        return `
+        uniform sampler2D image;
+
+        vec4 rectify(vec4 v)
+        {
+            ivec2 size = textureSize(image, 0);
+            float imageAspect = size.y > 0 ? float(size.x) / float(size.y) : 1.0;
+
+            vec4 u = imageAspect > 1.0 ?
+                vec4(1.0, 1.0 / imageAspect, 1.0, 1.0) :
+                vec4(imageAspect, 1.0, 1.0, 1.0);
+
+            return u * v;
+        }
+        `;
+    }
+
+    get fragmentShader()
+    {
+        return `#version 300 es
+        precision mediump float;
+
+        uniform sampler2D image;
+        in vec2 texCoord;
+        out vec4 color;
+
+        ${this._includeFragmentShaderUtils}
+
+        void main()
+        {
+            vec4 pixel = texture(image, texCoord);
+            color = colorize(pixel);
+        }
+        `;
+    }
+}
+
+class Sprite extends ImageQuad
+{
+    get _numberOfFrames()
+    {
+        return 1;
+    }
+
+    get _framesPerSecond()
+    {
+        return 8;
+    }
+
+    get _initialFrame()
+    {
+        return 0;
+    }
+
+    get _isHorizontalSpritesheet()
+    {
+        return true;
+    }
+
+    get _rectify()
+    {
+        return `
+        uniform sampler2D image;
+
+        vec4 rectify(vec4 v)
+        {
+            const int NUMBER_OF_FRAMES = int(${this._numberOfFrames});
+            const bool HORIZONTAL = bool(${this._isHorizontalSpritesheet});
+
+            ivec2 size = textureSize(image, 0);
+            size /= HORIZONTAL ? ivec2(NUMBER_OF_FRAMES, 1) : ivec2(1, NUMBER_OF_FRAMES);
+
+            float imageAspect = size.y > 0 ? float(size.x) / float(size.y) : 1.0;
+
+            vec4 u = imageAspect > 1.0 ?
+                vec4(1.0, 1.0 / imageAspect, 1.0, 1.0) :
+                vec4(imageAspect, 1.0, 1.0, 1.0);
+
+            return u * v;
+        }
+        `;
+    }
+
+    get _rectifyUV()
+    {
+        return `
+        vec2 rectifyUV(vec2 v)
+        {
+            const bool HORIZONTAL = bool(${this._isHorizontalSpritesheet});
+            const float NUMBER_OF_FRAMES = float(${this._numberOfFrames});
+            const float INITIAL_FRAME = float(${this._initialFrame});
+            const float FPS = float(${this._framesPerSecond});
+
+            float frame = mod(time * FPS + INITIAL_FRAME, NUMBER_OF_FRAMES);
+            float base = floor(frame) / NUMBER_OF_FRAMES;
+            vec2 offset = v / NUMBER_OF_FRAMES;
+
+            return HORIZONTAL ?
+                vec2(base + offset.x, v.y) :
+                vec2(v.x, base + offset.y);
+        }
+        `;
+    }
+}
+
+class ItWorks extends ImageQuad
+{
+    constructor(gl)
+    {
+        super(gl);
+
+        this._image = document.getElementById('it-works');
+        this.upload(this._image);
+    }
+
+    get _transform()
+    {
+        return `
+        const vec3 POSITION = vec3(0.0, 1.0, 0.0);
+        const vec3 SCALE = vec3(2.25);
+
+        vec4 transform(vec4 v)
+        {
+            return translate(POSITION) * scale(SCALE) * v;
+        }
+        `;
+    }
+
+    get _colorize()
+    {
+        return `
+        const vec4 COLOR = vec4(173, 255, 47, 255) / 255.0;
+
+        vec4 colorize(vec4 p)
+        {
+            return p * COLOR;
+        }
+        `;
+    }
+}
+
+class Bird extends Sprite
+{
+    constructor(gl)
+    {
+        Bird._count = Bird._count || 0;
+        ++Bird._count;
+
+        super(gl);
+
+        this._image = document.getElementById('bird');
+        this.upload(this._image);
+    }
+
+    get _numberOfFrames()
+    {
+        return 8;
+    }
+
+    get _framesPerSecond()
+    {
+        return 20;
+    }
+
+    get _initialFrame()
+    {
+        const n = 2;
+        return (Bird._count % n) * Math.floor(this._numberOfFrames / n);
+    }
+
+    get _transform()
+    {
+        return `
+        const float PI = float(${Math.PI});
+        const float INITIAL_PHASE = PI * float(${Bird._count});
+        const vec3 INITIAL_POSITION = vec3(1.25 * cos(INITIAL_PHASE), -0.25, 2.0);
+        const vec3 SCALE = vec3(0.7);
+
+        vec4 transform(vec4 v)
+        {
+            float z = 0.6 * cos(INITIAL_PHASE);
+            float y = 0.1 * cos(2.0 * PI * time + INITIAL_PHASE);
+            vec3 position = vec3(0.0, y, z) + INITIAL_POSITION;
+
+            return translate(position) * scale(SCALE) * v;
+        }
+        `;
+    }
+}
+
+
+
+
+/*
+
+MARTINS.js + WebGL code:
+
+*/
+
+window.addEventListener('load', async function() {
+    try {
+        const session = await startARSession();
+        const gl = initGL(session.viewport.canvas);
+        const scene = [
+            new AnimatedPyramid(gl),
+            new AnimatedCube(gl),
+            new ItWorks(gl),
+            new Bird(gl),
+            new Bird(gl),
+        ];
+
+        function initGL(canvas)
+        {
+            const gl = canvas.getContext('webgl2', {
+                alpha: true
+            });
+
+            if(!gl)
+                throw new Error(`Can't create WebGL2 context`);
+
+            gl.enable(gl.DEPTH_TEST);
+            gl.enable(gl.BLEND);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+
+            return gl;
+        }
+
+        function clear()
+        {
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        }
+
+
+        function render(elapsedTimeInSeconds, projectionMatrix, modelViewMatrix)
+        {
+            for(const entity of scene) {
+                entity.projectionMatrix.set(projectionMatrix);
+                entity.modelViewMatrix.set(modelViewMatrix);
+                entity.render(elapsedTimeInSeconds);
+            }
+        }
+
+        function animate(time, frame)
+        {
+            clear();
+
+            for(const result of frame.results) {
+                if('image-tracker' == result.tracker.type) {
+                    if(result.trackables.length > 0) {
+                        const trackable = result.trackables[0];
+                        const projectionMatrix = result.viewer.view.projectionMatrix;
+                        const modelViewMatrix = result.viewer.convertToViewerSpace(trackable.pose).transform.matrix;
+                        
+                        render(frame.session.time.elapsed, projectionMatrix.read(), modelViewMatrix.read());
+                    }
+                }
+            }
+
+            session.requestAnimationFrame(animate);
+        }
+
+        session.requestAnimationFrame(animate);
+    }
+    catch(error) {
+        alert(error.message);
+    }
+
+    async function startARSession()
+    {
+        if(!Martins.isSupported()) {
+            throw new Error(
+                'Use a browser/device compatible with WebGL2 and WebAssembly. ' +
+                'Your user agent is ' + navigator.userAgent
+            );
+        }
+
+        //Martins.Settings.powerPreference = 'low-power';
+
+        const tracker = Martins.Tracker.ImageTracker();
+        await tracker.database.add([{
+            name: 'my-reference-image',
+            image: document.getElementById('my-reference-image')
+        }]);
+
+        const viewport = Martins.Viewport({
+            container: document.getElementById('ar-viewport'),
+            hudContainer: document.getElementById('ar-hud')
+        });
+
+        const source = Martins.Source.Camera({
+            resolution: 'md'
+        });
+
+        const session = await Martins.startSession({
+            mode: 'immersive',
+            viewport: viewport,
+            trackers: [ tracker ],
+            sources: [ source ],
+            stats: true,
+            gizmos: true,
+        });
+
+        const scan = document.getElementById('scan');
+
+        tracker.addEventListener('targetfound', event => {
+            session.gizmos.visible = false;
+            if(scan)
+                scan.hidden = true;
+        });
+
+        tracker.addEventListener('targetlost', event => {
+            session.gizmos.visible = true;
+            if(scan)
+                scan.hidden = false;
+        });
+
+        return session;
+    }
+});

docs_overrides/demo/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>MARTINS.js WebAR demo</title>
+        <link href="{{ 'demo/demo.css' | url }}" rel="stylesheet">
+        <script src="https://cdn.jsdelivr.net/gh/alemart/martins-js@0.1/dist/martins.min.js"></script>
+        <script src="{{ 'demo/demo.js' | url }}"></script>
+    </head>
+    <body>
+        <div id="ar-viewport">
+            <div id="ar-hud" hidden>
+                <img id="scan" src="{{ 'demo/scan.png' | url }}">
+            </div>
+        </div>
+        <img id="my-reference-image" src="{{ 'demo/my-reference-image.webp' | url }}" hidden>
+        <img id="it-works" src="{{ 'demo/it-works.png' | url }}" hidden>
+        <img id="bird" src="{{ 'demo/bird.png' | url }}" hidden>
+    </body>
+</html>

docs_overrides/home.html

@@ -25,6 +25,8 @@
     --md-primary-fg-color: var(--md-secondary-fg-color);
     --md-accent-fg-color: var(--md-secondary-fg-color);
     --md-accent-bg-color: var(--md-primary-fg-color--light);
+    margin-top: 8px;
+    margin-bottom: 8px;
 }
 
 #splash {
@@ -109,7 +111,8 @@
         <div class="splash-text md-typeset appear">
             <h2><em>Create Augmented Reality experiences that run in web browsers.</em> No need to download apps.</h2>
             <p>Make AR easy for your users. Create AR experiences using web technologies that you're already familiar with. Open Source WebAR engine.</p>
-            <a href="{{ './getting-started' | url }}" class="md-button">Get started</a>
+            <a href="{{ './getting-started' | url }}" class="md-button md-button--primary">Get started</a>
+            <a href="{{ './demo/instructions' | url }}" class="md-button">Try a demo</a>
         </div>
         <div class="splash-image">
             <video src="{{ './img/splash.webm' | url }}" poster="{{ './img/splash.webp' | url }}" muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>

mkdocs.yml

@@ -69,7 +69,9 @@ nav:
     - 'Licenses':
       - 'AGPL 3.0': 'license/agpl-3.0.md'
       - 'Polyform Perimeter 1.0.0': 'license/PolyForm-Perimeter-1.0.0-1.md'
-  - 'Demos': 'demos.md'
+  - 'Demos':
+    - 'Demo gallery': 'demos.md'
+    - 'Try it online!': 'demo/instructions.md'
   - 'API':
     - 'General':
       - 'Session': 'api/session.md'