Upload demos. Create a mkdocs hook to copy the demos to the website

README.md

@@ -10,7 +10,41 @@ Create amazing Augmented Reality experiences with **MARTINS.js**, a GPU-accelera
 
 :books: Technical documentation is available at <https://alemart.github.io/martins-js/>.
 
-:mailbox: [Contact me](https://github.com/alemart) for freelance work if you're not a developer.
+## Try WebAR right now!
+
+1. Scan or tap the QR code below with a mobile device.
+2. A [web page](https://alemart.github.io/martins-js/demo/) 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:
+
+>
+> **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).
+>
+
+[![WebAR demo](https://alemart.github.io/martins-js/demo/reference-image-with-qr-code.webp)](https://alemart.github.io/martins-js/demo/)
+
+Other demos available [here](https://alemart.github.io/martins-js/gallery/).
+
+## Try in your own machine
+
+Try the demos in your own machine:
+
+1. Run on a console:
+
+```sh
+git clone git@github.com:alemart/martins-js.git
+cd martins-js
+npm start
+```
+
+2. Open https://localhost:8000/demos/
+3. Pick a demo and have fun!
 
 ## What can you do with Web-based Augmented Reality?
 
@@ -22,8 +56,6 @@ Lots of exciting things that run in the web browser!
 * Tech demos
 * ...and more!
 
-[Try a demo!](#try-webar-right-now)
-
 ## Why use MARTINS.js?
 
 Here is why MARTINS.js is a great choice for creating Augmented Reality experiences:
@@ -34,27 +66,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. No need of 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.
 
-## Try WebAR right now!
-
-1. Scan or tap the QR code below with a mobile device.
-2. A [web page](https://alemart.github.io/martins-js/demo/) 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:
-
->
-> **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).
->
-
-[![WebAR demo](https://alemart.github.io/martins-js/demo/reference-image-with-qr-code.webp)](https://alemart.github.io/martins-js/demo/)
-
-Other demos available [here](https://alemart.github.io/martins-js/demos/).
-
 ## Features
 
 Currently supported features:

demos/NOTICE.txt

@@ -0,0 +1,33 @@
+MARTINS.js WebAR engine developed by Alexandre Martins (https://github.com/alemart)
+
+MARTINS.js: GPU-accelerated Augmented Reality for the web
+Copyright (c) Alexandre Martins
+https://github.com/alemart/martins-js
+
+Speedy Vision: GPU-accelerated Computer Vision for JavaScript
+Copyright (c) Alexandre Martins
+https://github.com/alemart/speedy-vision
+
+A-Frame: A web framework for building virtual reality experiences
+Copyright (c) A-Frame authors
+https://aframe.io
+
+Babylon.js: a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework
+Copyright (c) Microsoft Corporation and Babylon.js contributors
+https://www.babylonjs.com
+
+Three.js: JavaScript 3D Library
+Copyright (c) Three.js authors
+https://threejs.org
+
+aframe-particle-system-component: Particle systems for A-Frame
+Copyright (c) IdeaSpace
+https://github.com/IdeaSpaceVR/aframe-particle-system-component
+
+ShaderParticleEngine: A GLSL-heavy particle engine for THREE.js
+Copyright (c) Luke Moody (squarefeet)
+https://github.com/squarefeet/ShaderParticleEngine
+
+three-bmfont-text: renders BMFont files in ThreeJS with word-wrapping
+Copyright (c) Jam3 (mattdesl)
+https://github.com/Jam3/three-bmfont-text

demos/assets/FontLoader.js

@@ -0,0 +1,183 @@
+( function () {
+
+	class FontLoader extends THREE.Loader {
+
+		constructor( manager ) {
+
+			super( manager );
+
+		}
+
+		load( url, onLoad, onProgress, onError ) {
+
+			const scope = this;
+			const loader = new THREE.FileLoader( this.manager );
+			loader.setPath( this.path );
+			loader.setRequestHeader( this.requestHeader );
+			loader.setWithCredentials( scope.withCredentials );
+			loader.load( url, function ( text ) {
+
+				let json;
+
+				try {
+
+					json = JSON.parse( text );
+
+				} catch ( e ) {
+
+					console.warn( 'THREE.FontLoader: typeface.js support is being deprecated. Use typeface.json instead.' );
+					json = JSON.parse( text.substring( 65, text.length - 2 ) );
+
+				}
+
+				const font = scope.parse( json );
+				if ( onLoad ) onLoad( font );
+
+			}, onProgress, onError );
+
+		}
+
+		parse( json ) {
+
+			return new Font( json );
+
+		}
+
+	} //
+
+
+	class Font {
+
+		constructor( data ) {
+
+			this.type = 'Font';
+			this.data = data;
+
+		}
+
+		generateShapes( text, size = 100 ) {
+
+			const shapes = [];
+			const paths = createPaths( text, size, this.data );
+
+			for ( let p = 0, pl = paths.length; p < pl; p ++ ) {
+
+				Array.prototype.push.apply( shapes, paths[ p ].toShapes() );
+
+			}
+
+			return shapes;
+
+		}
+
+	}
+
+	function createPaths( text, size, data ) {
+
+		const chars = Array.from( text );
+		const scale = size / data.resolution;
+		const line_height = ( data.boundingBox.yMax - data.boundingBox.yMin + data.underlineThickness ) * scale;
+		const paths = [];
+		let offsetX = 0,
+			offsetY = 0;
+
+		for ( let i = 0; i < chars.length; i ++ ) {
+
+			const char = chars[ i ];
+
+			if ( char === '\n' ) {
+
+				offsetX = 0;
+				offsetY -= line_height;
+
+			} else {
+
+				const ret = createPath( char, scale, offsetX, offsetY, data );
+				offsetX += ret.offsetX;
+				paths.push( ret.path );
+
+			}
+
+		}
+
+		return paths;
+
+	}
+
+	function createPath( char, scale, offsetX, offsetY, data ) {
+
+		const glyph = data.glyphs[ char ] || data.glyphs[ '?' ];
+
+		if ( ! glyph ) {
+
+			console.error( 'THREE.Font: character "' + char + '" does not exists in font family ' + data.familyName + '.' );
+			return;
+
+		}
+
+		const path = new THREE.ShapePath();
+		let x, y, cpx, cpy, cpx1, cpy1, cpx2, cpy2;
+
+		if ( glyph.o ) {
+
+			const outline = glyph._cachedOutline || ( glyph._cachedOutline = glyph.o.split( ' ' ) );
+
+			for ( let i = 0, l = outline.length; i < l; ) {
+
+				const action = outline[ i ++ ];
+
+				switch ( action ) {
+
+					case 'm':
+						// moveTo
+						x = outline[ i ++ ] * scale + offsetX;
+						y = outline[ i ++ ] * scale + offsetY;
+						path.moveTo( x, y );
+						break;
+
+					case 'l':
+						// lineTo
+						x = outline[ i ++ ] * scale + offsetX;
+						y = outline[ i ++ ] * scale + offsetY;
+						path.lineTo( x, y );
+						break;
+
+					case 'q':
+						// quadraticCurveTo
+						cpx = outline[ i ++ ] * scale + offsetX;
+						cpy = outline[ i ++ ] * scale + offsetY;
+						cpx1 = outline[ i ++ ] * scale + offsetX;
+						cpy1 = outline[ i ++ ] * scale + offsetY;
+						path.quadraticCurveTo( cpx1, cpy1, cpx, cpy );
+						break;
+
+					case 'b':
+						// bezierCurveTo
+						cpx = outline[ i ++ ] * scale + offsetX;
+						cpy = outline[ i ++ ] * scale + offsetY;
+						cpx1 = outline[ i ++ ] * scale + offsetX;
+						cpy1 = outline[ i ++ ] * scale + offsetY;
+						cpx2 = outline[ i ++ ] * scale + offsetX;
+						cpy2 = outline[ i ++ ] * scale + offsetY;
+						path.bezierCurveTo( cpx1, cpy1, cpx2, cpy2, cpx, cpy );
+						break;
+
+				}
+
+			}
+
+		}
+
+		return {
+			offsetX: glyph.ha * scale,
+			path: path
+		};
+
+	}
+
+	Font.prototype.isFont = true;
+
+	THREE.Font = Font;
+	THREE.FontLoader = FontLoader;
+
+} )();

demos/assets/TextGeometry.js

@@ -0,0 +1,51 @@
+( function () {
+
+	/**
+ * Text = 3D Text
+ *
+ * parameters = {
+ *  font: <THREE.Font>, // font
+ *
+ *  size: <float>, // size of the text
+ *  height: <float>, // thickness to extrude text
+ *  curveSegments: <int>, // number of points on the curves
+ *
+ *  bevelEnabled: <bool>, // turn on bevel
+ *  bevelThickness: <float>, // how deep into text bevel goes
+ *  bevelSize: <float>, // how far from text outline (including bevelOffset) is bevel
+ *  bevelOffset: <float> // how far from text outline does bevel start
+ * }
+ */
+
+	class TextGeometry extends THREE.ExtrudeGeometry {
+
+		constructor( text, parameters = {} ) {
+
+			const font = parameters.font;
+
+			if ( font === undefined ) {
+
+				super(); // generate default extrude geometry
+
+			} else {
+
+				const shapes = font.generateShapes( text, parameters.size ); // translate parameters to THREE.ExtrudeGeometry API
+
+				parameters.depth = parameters.height !== undefined ? parameters.height : 50; // defaults
+
+				if ( parameters.bevelThickness === undefined ) parameters.bevelThickness = 10;
+				if ( parameters.bevelSize === undefined ) parameters.bevelSize = 8;
+				if ( parameters.bevelEnabled === undefined ) parameters.bevelEnabled = false;
+				super( shapes, parameters );
+
+			}
+
+			this.type = 'TextGeometry';
+
+		}
+
+	}
+
+	THREE.TextGeometry = TextGeometry;
+
+} )();

dist/aframe-with-martins.js → demos/assets/aframe-with-martins.js

@@ -1,13 +1,13 @@
 /**
  * @file MARTINS.js & AFRAME glue code
- * @version 1.0.1
+ * @version 1.0.2
  * @author Alexandre Martins (https://github.com/alemart)
- * @license AGPL-3.0-only or PolyForm-Perimeter-1.0.0
+ * @license AGPL-3.0
  */
 
 /* Usage of the indicated versions is encouraged */
 __THIS_GLUE_CODE_HAS_BEEN_TESTED_WITH__({
-    'MARTINS.js': { version: '0.1.1' },
+    'MARTINS.js': { version: '0.1.2' },
         'AFRAME': { version: '1.3.0' }
 });
 

demos/assets/demo.css

@@ -0,0 +1,29 @@
+body {
+    background-color: #3d5afe;
+}
+
+#scan {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    opacity: 0.75;
+}
+
+#toggle-webcam {
+    display: inline-block;
+    width: 64px;
+    height: 64px;
+
+    border: 0;
+    font-size: 36px;
+    color: #fff;
+    background: none;
+
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+#toggle-webcam:hover {
+    cursor: pointer;
+}

demos/assets/my-reference-image.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>WebAR Reference Image</title>
+        <style>
+        img { max-width: 100%; }
+        </style>
+    </head>
+    <body>
+        <img src="my-reference-image.webp" alt="Reference Image">
+    </body>
+</html>

dist/three-with-martins.js → demos/assets/three-with-martins.js

@@ -1,13 +1,13 @@
 /**
  * @file MARTINS.js & THREE.js glue code
- * @version 1.0.1
+ * @version 1.0.2
  * @author Alexandre Martins (https://github.com/alemart)
- * @license AGPL-3.0-only or PolyForm-Perimeter-1.0.0
+ * @license AGPL-3.0
  */
 
 /* Usage of the indicated versions is encouraged */
 __THIS_GLUE_CODE_HAS_BEEN_TESTED_WITH__({
-    'MARTINS.js': { version: '0.1.1' },
+    'MARTINS.js': { version: '0.1.2' },
       'THREE.js': { version: '138' }
 });
 

demos/hello-aframe/demo.js

@@ -0,0 +1,81 @@
+/**
+ * @file MARTINS.js WebAR demo using A-Frame
+ * @version 1.0.2
+ * @author Alexandre Martins (https://github.com/alemart)
+ * @license AGPL-3.0
+ */
+
+async function startARSession(canvas)
+{
+    if(!Martins.isSupported()) {
+        throw new Error(
+            'Use a browser/device compatible with WebGL2 and WebAssembly. ' +
+            'Your user agent is ' + navigator.userAgent
+        );
+    }
+
+    if(!(canvas instanceof HTMLCanvasElement))
+        throw new Error(`startARSession expects a <canvas>`);
+
+    //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({
+        canvas: canvas,
+        container: document.getElementById('ar-viewport'),
+        hudContainer: document.getElementById('ar-hud')
+    });
+
+    //const useWebcam = true;
+    const useWebcam = (location.search.substr(1) == 'webcam');
+    const video = document.getElementById('my-video');
+    const source = !useWebcam ? Martins.Source.Video(video) : Martins.Source.Camera();
+
+    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;
+}
+
+// Toggle webcam
+window.addEventListener('load', () => {
+    const page = location.href.replace(/\?.*$/, '');
+    const usingWebcam = (location.search.substr(1) == 'webcam');
+    const button = document.getElementById('toggle-webcam');
+
+    if(!button)
+        return;
+
+    button.innerHTML = usingWebcam ? '&#x1F39E' : '&#x1F3A5';
+    button.addEventListener('click', () => {
+        if(usingWebcam)
+            location.href = page;
+        else
+            location.href = page + '?webcam';
+    });
+});

demos/hello-aframe/index.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>MARTINS.js WebAR demo using A-Frame</title>
+        <link href="../assets/demo.css" rel="stylesheet">
+        <script src="../../dist/martins.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/aframe@1.3.0/dist/aframe-v1.3.0.min.js"></script>
+        <script src="../assets/aframe-particle-system-component.min.js"></script>
+        <script src="demo.js"></script>
+        <script src="../assets/aframe-with-martins.js"></script>
+    </head>
+    <body>
+        <div id="ar-viewport">
+            <div id="ar-hud" hidden>
+                <img id="scan" src="../assets/scan.png">
+                <button id="toggle-webcam"></button>
+            </div>
+        </div>
+        <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
+        <video id="my-video" src="../assets/my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+
+        <!-- This is a scene -->
+        <a-scene ar-scene>
+            <a-camera ar-camera></a-camera>
+
+            <!-- Whatever you add to <ar-root> will appear in AR -->
+            <ar-root>
+
+                <!-- Ground plane -->
+                <a-plane position="0 -0.5 -0.5" rotation="-90 0 0" width="2" height="1" color="indigo">
+
+                    <!-- 3D model -->
+                    <a-entity gltf-model="#my-3d-model"></a-entity>
+
+                    <!-- Particles -->
+                    <a-entity rotation="90 0 0">
+                        <a-entity position="0.75 0 0" particle-system="texture: ../assets/particle.png; color: #03f; opacity: 0.33; size: 20; maxAge: 0.64; velocityValue: 0 6.5 0; velocitySpread: 0 0 0; accelerationSpread: 2 0 2; particleCount: 2000"></a-entity>
+                        <a-entity position="-0.75 0 0" particle-system="texture: ../assets/particle.png; color: #f70; opacity: 0.33; size: 20; maxAge: 0.64; velocityValue: 0 6.5 0; velocitySpread: 0 0 0; accelerationSpread: 2 0 2; particleCount: 2000"></a-entity>
+                    </a-entity>
+
+                    <!-- Rotating text -->
+                    <a-entity animation="property: rotation.z; from: 0; to: 360; dur: 2000; loop: true; easing: linear">
+                        <a-text value="It works!" font="mozillavr" color="#fe3" scale="-1 -1 1" rotation="-90 0 0" position="0 0.40 1" align="center"></a-text>
+                        <a-text value="Cool!" font="mozillavr" color="#8ef" scale="1 1 1" rotation="90 0 0" position="0 -0.40 1" align="center"></a-text>
+                    </a-entity>
+
+                </a-plane>
+
+            </ar-root>
+
+            <!-- Declare external media files here -->
+            <a-assets>
+                <a-asset-item id="my-3d-model" src="../assets/my-3d-model.glb"></a-asset-item>
+            </a-assets>
+        </a-scene>
+    </body>
+</html>

demos/hello-three/demo.js

@@ -0,0 +1,181 @@
+/**
+ * @file MARTINS.js WebAR demo using THREE.js
+ * @version 1.0.2
+ * @author Alexandre Martins (https://github.com/alemart)
+ * @license AGPL-3.0
+ */
+
+window.addEventListener('load', () => {
+
+    const my = { };
+
+    async function initialize(ar)
+    {
+        // add lights
+        const ambientLight = new THREE.AmbientLight(0xb7b7b7);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.4);
+        directionalLight.position.set(0, 0, -1);
+        directionalLight.target.position.set(0, 0, 0);
+        ar.scene.add(directionalLight);
+        ar.scene.add(ambientLight);
+
+        // create a group of objects as a child of ar.root
+        const group = createGroup('in-front');
+        //const group = createGroup('on-top'); // try this option!
+        ar.root.add(group);
+
+        // create cubes
+        const cubeA = createCube(-0.75, 0, 0xffff00);
+        const cubeB = createCube(0.75, 0, 0x00ff00);
+        group.add(cubeA, cubeB);
+
+        // create the ground
+        const ground = createGround(0x3d5afe);
+        group.add(ground);
+
+        // load a 3D model
+        const modelURL = '../assets/my-3d-model.glb';
+        const model = await loadModel(modelURL);
+        group.add(model);
+
+        // export objects
+        my.cubes = [ cubeA, cubeB ];
+        my.group = group;
+        my.model = model;
+        my.ground = ground;
+    }
+
+    function animate(ar)
+    {
+        const ROTATION_CYCLES_PER_SECOND = 1.0;
+        const TWO_PI = 2.0 * Math.PI;
+        const delta = ar.session.time.delta;
+
+        // rotate the cubes
+        for(const cube of my.cubes)
+            cube.rotateY(TWO_PI * ROTATION_CYCLES_PER_SECOND * delta);
+    }
+
+    function createGroup(mode = 'in-front')
+    {
+        const group = new THREE.Group();
+
+        if(mode == 'in-front') {
+            group.rotation.set(-Math.PI/2, 0, 0);
+            group.position.set(0, -0.5, 0.5);
+        }
+        else if(mode == 'on-top') {
+            group.rotation.set(0, 0, 0);
+            group.position.set(0, 0, 0);
+        }
+
+        return group;
+    }
+
+    function createCube(x, y, color, length = 0.25)
+    {
+        const geometry = new THREE.BoxGeometry(length, length, length);
+        const material = new THREE.MeshPhongMaterial({ color });
+        const cube = new THREE.Mesh(geometry, material);
+
+        cube.position.set(x, y, 1.25);
+
+        return cube;
+    }
+
+    function createGround(color)
+    {
+        const geometry = new THREE.RingGeometry(0.001, 1, 8);
+        const material = new THREE.MeshPhongMaterial({ color: color, side: THREE.DoubleSide });
+        const ground = new THREE.Mesh(geometry, material);
+
+        material.transparent = true;
+        material.opacity = 0.75;
+
+        return ground;
+    }
+
+    async function loadModel(filepath)
+    {
+        const loader = new THREE.GLTFLoader();
+        const gltf = await loader.loadAsync(filepath);
+        const model = gltf.scene;
+
+        return model;
+    }
+
+    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 useWebcam = true;
+        const useWebcam = (location.search.substr(1) == 'webcam');
+        const video = document.getElementById('my-video');
+        const source = !useWebcam ? Martins.Source.Video(video) : Martins.Source.Camera();
+
+        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;
+    }
+
+    // link MARTINS.js to THREE.js
+    linkMartinsToTHREE(startARSession, animate, initialize);
+
+});
+
+// Toggle webcam
+window.addEventListener('load', () => {
+    const page = location.href.replace(/\?.*$/, '');
+    const usingWebcam = (location.search.substr(1) == 'webcam');
+    const button = document.getElementById('toggle-webcam');
+
+    if(!button)
+        return;
+
+    button.innerHTML = usingWebcam ? '&#x1F39E' : '&#x1F3A5';
+    button.addEventListener('click', () => {
+        if(usingWebcam)
+            location.href = page;
+        else
+            location.href = page + '?webcam';
+    });
+});

demos/hello-three/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>MARTINS.js WebAR demo using THREE.js</title>
+        <link href="../assets/demo.css" rel="stylesheet">
+        <script src="../../dist/martins.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/loaders/GLTFLoader.js"></script>
+        <script src="../assets/three-with-martins.js"></script>
+        <script src="demo.js"></script>
+    </head>
+    <body>
+        <div id="ar-viewport">
+            <div id="ar-hud" hidden>
+                <img id="scan" src="../assets/scan.png">
+                <button id="toggle-webcam"></button>
+            </div>
+        </div>
+        <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
+        <video id="my-video" src="../assets/my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+    </body>
+</html>

docs_overrides/demo/demo.js → demos/hello-webgl/demo.js

@@ -1,10 +1,10 @@
-/*
-
-This demo is rendered using WebGL code
+/**
+ * @file MARTINS.js WebAR demo using pure WebGL
+ * @version 1.0.2
+ * @author Alexandre Martins (https://github.com/alemart)
+ * @license AGPL-3.0
+ */
 
-Check the MARTINS.js code below!
-
-*/
 
 
 /*
@@ -936,7 +936,10 @@ window.addEventListener('load', async function() {
             hudContainer: document.getElementById('ar-hud')
         });
 
-        const source = Martins.Source.Camera({
+        //const useWebcam = true;
+        const useWebcam = (location.search.substr(1) == 'webcam');
+        const video = document.getElementById('my-video');
+        const source = !useWebcam ? Martins.Source.Video(video) : Martins.Source.Camera({
             resolution: 'md'
         });
 
@@ -965,4 +968,22 @@ window.addEventListener('load', async function() {
 
         return session;
     }
+});
+
+// Toggle webcam
+window.addEventListener('load', () => {
+    const page = location.href.replace(/\?.*$/, '');
+    const usingWebcam = (location.search.substr(1) == 'webcam');
+    const button = document.getElementById('toggle-webcam');
+
+    if(!button)
+        return;
+
+    button.innerHTML = usingWebcam ? '&#x1F39E' : '&#x1F3A5';
+    button.addEventListener('click', () => {
+        if(usingWebcam)
+            location.href = page;
+        else
+            location.href = page + '?webcam';
+    });
 });

demos/hello-webgl/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>MARTINS.js WebAR demo using pure WebGL</title>
+        <link href="../assets/demo.css" rel="stylesheet">
+        <script src="../../dist/martins.js"></script>
+        <script src="demo.js"></script>
+    </head>
+    <body>
+        <div id="ar-viewport">
+            <div id="ar-hud" hidden>
+                <img id="scan" src="../assets/scan.png">
+                <button id="toggle-webcam"></button>
+            </div>
+        </div>
+        <img id="it-works" src="../assets/it-works.png" hidden>
+        <img id="bird" src="../assets/bird.png" hidden>
+        <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
+        <video id="my-video" src="../assets/my-video.webm" hidden muted loop autoplay playsinline oncanplay="this.muted=true;this.play()"></video>
+    </body>
+</html>

demos/hello-world/demo.js

@@ -0,0 +1,93 @@
+/**
+ * @file MARTINS.js WebAR: Hello World demo
+ * @version 1.0.2
+ * @author Alexandre Martins (https://github.com/alemart)
+ * @license AGPL-3.0
+ */
+
+window.addEventListener('load', async function() {
+    try {
+        const session = await startARSession();
+
+        function animate(time, frame)
+        {
+            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 useWebcam = true;
+        const useWebcam = (location.search.substr(1) == 'webcam');
+        const video = document.getElementById('my-video');
+        const source = !useWebcam ? Martins.Source.Video(video) : 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 => {
+            if(scan)
+                scan.hidden = true;
+        });
+
+        tracker.addEventListener('targetlost', event => {
+            if(scan)
+                scan.hidden = false;
+        });
+
+        return session;
+    }
+});
+
+// Toggle webcam
+window.addEventListener('load', () => {
+    const page = location.href.replace(/\?.*$/, '');
+    const usingWebcam = (location.search.substr(1) == 'webcam');
+    const button = document.getElementById('toggle-webcam');
+
+    if(!button)
+        return;
+
+    button.innerHTML = usingWebcam ? '&#x1F39E' : '&#x1F3A5';
+    button.addEventListener('click', () => {
+        if(usingWebcam)
+            location.href = page;
+        else
+            location.href = page + '?webcam';
+    });
+});

demos/hello-world/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: Hello World demo</title>
+        <link href="../assets/demo.css" rel="stylesheet">
+        <script src="../../dist/martins.js"></script>
+        <script src="demo.js"></script>
+    </head>
+    <body>
+        <div id="ar-viewport">
+            <div id="ar-hud" hidden>
+                <img id="scan" src="../assets/scan.png">
+                <button id="toggle-webcam"></button>
+            </div>
+        </div>
+        <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
+        <video id="my-video" src="../assets/my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+    </body>
+</html>

demos/simple-webcam/demo.js

@@ -0,0 +1,72 @@
+/**
+ * @file MARTINS.js WebAR: Simple Webcam demo
+ * @version 1.0.2
+ * @author Alexandre Martins (https://github.com/alemart)
+ * @license AGPL-3.0
+ */
+
+window.addEventListener('load', async function() {
+    try {
+        const session = await startARSession();
+
+        function animate(time, frame)
+        {
+            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 => {
+            if(scan)
+                scan.hidden = true;
+        });
+
+        tracker.addEventListener('targetlost', event => {
+            if(scan)
+                scan.hidden = false;
+        });
+
+        return session;
+    }
+});

demos/simple-webcam/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>MARTINS.js WebAR: Simple Webcam demo</title>
+        <link href="../assets/demo.css" rel="stylesheet">
+        <script src="../../dist/martins.js"></script>
+        <script src="demo.js"></script>
+    </head>
+    <body>
+        <div id="ar-viewport">
+            <div id="ar-hud" hidden>
+                <img id="scan" src="../assets/scan.png">
+                <button id="toggle-webcam"></button>
+            </div>
+        </div>
+        <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
+    </body>
+</html>

demos/touch-interaction/demo.js

@@ -0,0 +1,211 @@
+/**
+ * @file MARTINS.js WebAR demo with touch interaction using THREE.js
+ * @version 1.0.2
+ * @author Alexandre Martins (https://github.com/alemart)
+ * @license AGPL-3.0
+ */
+
+window.addEventListener('load', () => {
+
+    const my = { };
+
+    async function initialize(ar)
+    {
+        // add lights
+        const ambientLight = new THREE.AmbientLight(0x808080);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.75);
+        directionalLight.position.set(0, 0, -1);
+        ar.scene.add(ambientLight);
+        ar.scene.add(directionalLight);
+
+        // create cubes
+        my.cubes = [
+            createCube(ar, 1.0, -0.5, 0x00ff00),
+            createCube(ar, -1.0, -0.5, 0xffff00),
+            createCube(ar, 0.0, -0.5, 0x0077ff),
+        ];
+
+        // create text
+        my.text = await createText(ar, 'Tap on any cube', 0x88ffee);
+        my.text.position.set(-1.5, 0.25, 0.5);
+
+        // setup interactivity
+        my.pointer = createPointer(ar);
+        my.raycaster = new THREE.Raycaster();
+    }
+
+    function createCube(ar, x, y, color, length = 0.7)
+    {
+        const geometry = new THREE.BoxGeometry(length, length, length);
+        const material = new THREE.MeshPhongMaterial({ color });
+        const cube = new THREE.Mesh(geometry, material);
+
+        cube.position.x = x;
+        cube.position.y = y;
+        cube.position.z = length / 2;
+        cube.userData.color = color;
+
+        material.opacity = 1.0;
+        material.transparent = true;
+
+        ar.root.add(cube);
+        return cube;
+    }
+
+    async function createText(ar, text, color = 0xffffff)
+    {
+        const loader = new THREE.FontLoader();
+        const fontURL = '../assets/helvetiker_bold.typeface.json';
+        const font = await loader.loadAsync(fontURL);
+
+        const material = new THREE.MeshPhongMaterial({ color });
+        const geometry = new THREE.TextGeometry(text, {
+            font: font,
+            size: 0.3,
+            height: 0.05,
+        });
+        const mesh = new THREE.Mesh(geometry, material);
+
+        ar.root.add(mesh);
+        return mesh;
+    }
+
+    function createPointer(ar)
+    {
+        const pointer = {
+            position: new THREE.Vector2(),
+            down: false,
+
+            get active()
+            {
+                return this.down && Math.max(Math.abs(this.position.x), Math.abs(this.position.y)) <= 1.0;
+            }
+        };
+
+        function updatePosition(event)
+        {
+            const canvas = ar.renderer.domElement;
+            const rect = canvas.getBoundingClientRect();
+            const x = event.pageX - (rect.left + window.scrollX);
+            const y = event.pageY - (rect.top + window.scrollY);
+
+            // normalize to [-1,1] x [-1,1]
+            pointer.position.x = 2.0 * x / rect.width - 1.0;
+            pointer.position.y = -2.0 * y / rect.height + 1.0;
+        }
+
+        // setup pointer interactivity
+        window.addEventListener('pointermove', event => {
+            updatePosition(event);
+        });
+        window.addEventListener('pointerdown', event => {
+            updatePosition(event);
+            pointer.down = true;
+        });
+        window.addEventListener('pointerup', event => {
+            pointer.down = false;
+        });
+
+        // done!
+        return pointer;
+    }
+
+    function animate(ar)
+    {
+        // reset all cubes
+        for(let i = 0; i < my.cubes.length; i++) {
+            my.cubes[i].material.color.setHex(my.cubes[i].userData.color);
+            my.cubes[i].scale.z = 1.0;
+        }
+
+        // interact with objects via raycasting
+        if(my.pointer.active) {
+            my.raycaster.setFromCamera(my.pointer.position, ar.camera);
+
+            const intersections = my.raycaster.intersectObjects(my.cubes);
+            for(let i = 0; i < intersections.length; i++) {
+
+                // create the appearance of a pushed button
+                const object = intersections[i].object;
+                object.material.color.setHex(0xff3333);
+                object.scale.z = 0.2;
+
+            }
+        }
+    }
+
+    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 useWebcam = true;
+        const useWebcam = (location.search.substr(1) == 'webcam');
+        const video = document.getElementById('my-video');
+        const source = !useWebcam ? Martins.Source.Video(video) : Martins.Source.Camera();
+
+        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;
+    }
+
+    // link MARTINS.js to THREE.js
+    linkMartinsToTHREE(startARSession, animate, initialize);
+
+});
+
+// Toggle webcam
+window.addEventListener('load', () => {
+    const page = location.href.replace(/\?.*$/, '');
+    const usingWebcam = (location.search.substr(1) == 'webcam');
+    const button = document.getElementById('toggle-webcam');
+
+    if(!button)
+        return;
+
+    button.innerHTML = usingWebcam ? '&#x1F39E' : '&#x1F3A5';
+    button.addEventListener('click', () => {
+        if(usingWebcam)
+            location.href = page;
+        else
+            location.href = page + '?webcam';
+    });
+});

demos/touch-interaction/index.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>MARTINS.js WebAR demo with touch interaction using THREE.js</title>
+        <link href="../assets/demo.css" rel="stylesheet">
+        <script src="../../dist/martins.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/loaders/FontLoader.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/geometries/TextGeometry.js"></script>
+        <script src="../assets/three-with-martins.js"></script>
+        <script src="demo.js"></script>
+    </head>
+    <body>
+        <div id="ar-viewport">
+            <div id="ar-hud" hidden>
+                <img id="scan" src="../assets/scan.png">
+                <button id="toggle-webcam"></button>
+            </div>
+        </div>
+        <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
+        <video id="my-video" src="../assets/my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+    </body>
+</html>

docs/demo/index.md

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

docs/demo/instructions.md

@@ -19,8 +19,8 @@ title: Try WebAR right now!
     - The physical environment should be properly illuminated.
     - Avoid low-quality cameras (cameras of common smartphones are OK).
 
-[![WebAR demo](reference-image-with-qr-code.webp)](./index.md){ ._blank }
+[![WebAR demo](reference-image-with-qr-code.webp "Based on free image by ArtRose from https://pixabay.com/pt/vectors/bruxa-vassoura-gato-chap%c3%a9u-magia-5635225/")](./index.md){ ._blank }
 
 ## Wanna see more?
 
-[Check out my WebAR demos](../demos.md){ .md-button }
+[Check out my WebAR demos](../gallery.md){ .md-button }

docs/demos.md

@@ -1,110 +0,0 @@
----
-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: 80%;
-    }
-}
-
-@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
-
-Here you'll find some cool examples of what you can do with MARTINS.js. They are hosted on [Glitch](https://glitch.com){ ._blank }: it's easy to remix them. Simply click on a link or scan any of the QR codes below.
-
-**Important:** after opening the web pages, scan the [reference image below](#reference-image).
-
-## Basic demos
-
-The following demos will help you get started:
-
-<div class="gallery-grid" markdown>
-<div class="gallery-item" markdown>
-![QR code](./img/qr-demo-hello-aframe.png)
-
-**WebAR with MARTINS.js + AFRAME**
-
-[Launch demo](https://webar-martins-js-hello-aframe.glitch.me){ ._blank } | [View code](https://glitch.com/edit/#!/webar-martins-js-hello-aframe){ ._blank }
-</div>
-<div class="gallery-item" markdown>
-![QR code](./img/qr-demo-hello-three.png)
-
-**WebAR with MARTINS.js + THREE.js**
-
-[Launch demo](https://webar-martins-js-hello-three.glitch.me){ ._blank } | [View code](https://glitch.com/edit/#!/webar-martins-js-hello-three){ ._blank }
-</div>
-<div class="gallery-item" markdown>
-![QR code](./img/qr-demo-hello-webgl.png)
-
-**WebAR with MARTINS.js + pure WebGL**
-
-[Launch demo](https://webar-martins-js-hello-webgl.glitch.me){ ._blank } | [View code](https://glitch.com/edit/#!/webar-martins-js-hello-webgl){ ._blank }
-</div>
-<div class="gallery-item" markdown>
-![](./img/logo-babylonjs.png "Babylon.js logo by David Catuhe")
-
-**WebAR with MARTINS.js + BABYLON.js**
-
-Soon!
-</div>
-<div class="gallery-item" markdown>
-![QR code](./img/qr-demo-hello-world.png)
-
-**Hello, world: minimal example**
-
-[Launch demo](https://webar-martins-js-hello-world.glitch.me){ ._blank } | [View code](https://glitch.com/edit/#!/webar-martins-js-hello-world){ ._blank }
-</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>
-![QR code](./img/qr-demo-interactivity-three.png)
-
-**Touch interaction with THREE.js**
-
-[Launch demo](https://webar-martins-js-interactivity-three.glitch.me){ ._blank } | [View code](https://glitch.com/edit/#!/webar-martins-js-interactivity-three){ ._blank }
-</div>
-</div>
-
-
-## Reference image
-
-[![Reference image](./assets/my-reference-image.webp)](./assets/my-reference-image.webp){ ._blank }

docs/gallery.md

@@ -0,0 +1,115 @@
+---
+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 img {
+    width: 100%;
+    image-rendering: pixelated;
+}
+
+@media screen and (min-width: 600px) {
+    .gallery-item {
+        flex-basis: 40%;
+    }
+}
+
+@media screen and (min-width: 1220px) {
+    .gallery-item img {
+        transition: transform 0.25s, opacity 0.25s;
+        opacity: 0.9;
+    }
+    .gallery-item img:hover {
+        transform: scale(1.125);
+        opacity: 1.0;
+    }
+}
+</style>
+
+# WebAR demos
+
+Here you'll find some cool examples of what you can do with MARTINS.js. Simply click on a link or scan any of the QR codes below. After opening the web pages, scan the [target image](#target-image). In addition, please read the [guidelines](#guidelines).
+
+## Basic demos
+
+The following demos will help you get started:
+
+<div class="gallery-grid" markdown>
+<div class="gallery-item" markdown>
+[![QR code](./img/qr-demo-hello-aframe.gif)](/martins-js/demos/hello-aframe){ ._blank }
+
+**MARTINS.js + AFRAME**
+
+[Launch demo](/martins-js/demos/hello-aframe){ ._blank } | [View the code](https://github.com/alemart/martins-js/tree/master/demos/hello-aframe){ ._blank }
+</div>
+<div class="gallery-item" markdown>
+[![QR code](./img/qr-demo-hello-three.gif)](/martins-js/demos/hello-three){ ._blank }
+
+**MARTINS.js + THREE.js**
+
+[Launch demo](/martins-js/demos/hello-three){ ._blank } | [View the code](https://github.com/alemart/martins-js/tree/master/demos/hello-three){ ._blank }
+</div>
+<div class="gallery-item" markdown>
+[![QR code](./img/qr-demo-hello-webgl.gif)](/martins-js/demos/hello-webgl){ ._blank }
+
+**MARTINS.js + pure WebGL**
+
+[Launch demo](/martins-js/demos/hello-webgl){ ._blank } | [View the code](https://github.com/alemart/martins-js/tree/master/demos/hello-webgl){ ._blank }
+</div>
+<div class="gallery-item" markdown>
+[![QR code](./img/qr-demo-touch-interaction.gif)](/martins-js/demos/touch-interaction){ ._blank }
+
+**Touch interaction with THREE.js**
+
+[Launch demo](/martins-js/demos/touch-interaction){ ._blank } | [View the code](https://github.com/alemart/martins-js/tree/master/demos/touch-interaction){ ._blank }
+</div>
+</div>
+
+## Minimal demos
+
+Explore the source code with these minimalistic demos:
+
+<div class="gallery-grid" markdown>
+<div class="gallery-item" markdown>
+[![QR code](./img/qr-demo-hello-world.gif)](/martins-js/demos/hello-world){ ._blank }
+
+**Hello, world!**
+
+[Launch demo](/martins-js/demos/hello-world){ ._blank } | [View the code](https://github.com/alemart/martins-js/tree/master/demos/hello-world){ ._blank }
+</div>
+<div class="gallery-item" markdown>
+[![QR code](./img/qr-demo-simple-webcam.gif)](/martins-js/demos/simple-webcam){ ._blank }
+
+**Simple Webcam demo**
+
+[Launch demo](/martins-js/demos/simple-webcam){ ._blank } | [View the code](https://github.com/alemart/martins-js/tree/master/demos/simple-webcam){ ._blank }
+</div>
+</div>
+
+## Guidelines
+
+You can use a webcam or a video file as input. Click on the 🎥 icon at the top-right corner of the screen to toggle webcam input. When using a webcam:
+
+* Avoid low-quality cameras. A camera of a typical smartphone is probably good enough.
+* Don't move the camera nor the target image too quickly. This produces motion blur.
+* Make sure that the physical environment is properly illuminated.
+* The target image should appear clearly in the video.
+* If you're scanning the image on a screen, make sure to adjust the brightness. If the screen is too bright (too dark), it will cause overexposure (underexposure) in the video and tracking difficulties - details of the images will be lost. Screen reflections are also undesirable.
+* If you print the image, avoid shiny materials (e.g., glossy paper). They may generate artifacts in the image and interfere with the tracking. Prefer non-reflective materials.
+
+## Target image
+
+[![Target image](./assets/my-reference-image.webp)](./assets/my-reference-image.webp "Based on free image by ArtRose from https://pixabay.com/pt/vectors/bruxa-vassoura-gato-chap%c3%a9u-magia-5635225/"){ ._blank }

docs/getting-started/create-the-augmented-scene.md

@@ -34,7 +34,7 @@ I provide easy-to-use glue codes that work with different 3D rendering technolog
 
 [:octocat: Get the glue codes on GitHub](https://github.com/alemart/martins-js/tree/master/dist){ .md-button ._blank }
 
-[Get the glue codes in my demos](../demos.md){ .md-button ._blank }
+[Get the glue codes in my demos](../gallery.md){ .md-button ._blank }
 
 ## Create the virtual scene
 

docs/hooks.py

@@ -0,0 +1,21 @@
+import os
+import shutil
+
+def copy_static_files(config, **kwargs):
+    site_dir = config['site_dir']
+    copy_directory('dist', site_dir)
+    copy_directory('demos', site_dir)
+
+def copy_directory(dir_path, site_dir):
+    d = os.path.join(site_dir, dir_path)
+    os.makedirs(d, exist_ok=True)
+    copy_tree(dir_path, d)
+
+def copy_tree(src, dst, symlinks=False, ignore=None):
+    for item in os.listdir(src):
+        s = os.path.join(src, item)
+        d = os.path.join(dst, item)
+        if os.path.isdir(s):
+            shutil.copytree(s, d, symlinks, ignore)
+        else:
+            shutil.copy2(s, d)

docs/license/PolyForm-Perimeter-1.0.0-1.md

@@ -1,129 +0,0 @@
-# PolyForm Perimeter License 1.0.0
-
-<https://polyformproject.org/licenses/perimeter/1.0.0>
-
-## Acceptance
-
-In order to get any license under these terms, you must agree
-to them as both strict obligations and conditions to all
-your licenses.
-
-## Copyright License
-
-The licensor grants you a copyright license for the
-software to do everything you might do with the software
-that would otherwise infringe the licensor's copyright
-in it for any permitted purpose.  However, you may
-only distribute the software according to [Distribution
-License](#distribution-license) and make changes or new works
-based on the software according to [Changes and New Works
-License](#changes-and-new-works-license).
-
-## Distribution License
-
-The licensor grants you an additional copyright license
-to distribute copies of the software.  Your license
-to distribute covers distributing the software with
-changes and new works permitted by [Changes and New Works
-License](#changes-and-new-works-license).
-
-## Notices
-
-You must ensure that anyone who gets a copy of any part of
-the software from you also gets a copy of these terms or the
-URL for them above, as well as copies of any plain-text lines
-beginning with `Required Notice:` that the licensor provided
-with the software.  For example:
-
-> Required Notice: Copyright Yoyodyne, Inc. (http://example.com)
-
-## Changes and New Works License
-
-The licensor grants you an additional copyright license to
-make changes and new works based on the software for any
-permitted purpose.
-
-## Patent License
-
-The licensor grants you a patent license for the software that
-covers patent claims the licensor can license, or becomes able
-to license, that you would infringe by using the software.
-
-## Noncompete
-
-Any purpose is a permitted purpose, except for providing to
-others any product that competes with the software.
-
-## Competition
-
-If you use this software to market a product as a substitute
-for the functionality or value of the software, it competes
-with the software. A product may compete regardless how it is
-designed or deployed. For example, a product may compete even
-if it provides its functionality via any kind of interface
-(including services, libraries or plug-ins), even if it is
-ported to a different platforms or programming languages,
-and even if it is provided free of charge.
-
-## Fair Use
-
-You may have "fair use" rights for the software under the
-law. These terms do not limit them.
-
-## No Other Rights
-
-These terms do not allow you to sublicense or transfer any of
-your licenses to anyone else, or prevent the licensor from
-granting licenses to anyone else.  These terms do not imply
-any other licenses.
-
-## Patent Defense
-
-If you make any written claim that the software infringes or
-contributes to infringement of any patent, your patent license
-for the software granted under these terms ends immediately. If
-your company makes such a claim, your patent license ends
-immediately for work on behalf of your company.
-
-## Violations
-
-The first time you are notified in writing that you have
-violated any of these terms, or done anything with the software
-not covered by your licenses, your licenses can nonetheless
-continue if you come into full compliance with these terms,
-and take practical steps to correct past violations, within
-32 days of receiving notice.  Otherwise, all your licenses
-end immediately.
-
-## No Liability
-
-***As far as the law allows, the software comes as is, without
-any warranty or condition, and the licensor will not be liable
-to you for any damages arising out of these terms or the use
-or nature of the software, under any kind of legal claim.***
-
-## Definitions
-
-The **licensor** is the individual or entity offering these
-terms, and the **software** is the software the licensor makes
-available under these terms.
-
-A **product** can be a good or service, or a combination
-of them.
-
-**You** refers to the individual or entity agreeing to these
-terms.
-
-**Your company** is any legal entity, sole proprietorship,
-or other kind of organization that you work for, plus all
-organizations that have control over, are under the control of,
-or are under common control with that organization.  **Control**
-means ownership of substantially all the assets of an entity,
-or the power to direct its management and policies by vote,
-contract, or otherwise.  Control can be direct or indirect.
-
-**Your licenses** are all the licenses granted to you for the
-software under these terms.
-
-**Use** means anything you do with the software requiring one
-of your licenses.

docs_overrides/basic_demo.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="refresh" content="0; url='{{ 'demos/hello-webgl/?webcam' | url }}'">
+        <title>MARTINS.js WebAR demo</title>
+    </head>
+    <body>
+        <p>Loading the <a href="{{ 'demos/hello-webgl/?webcam' | url }}">WebAR demo</a>...</p>
+    </body>
+</html>

docs_overrides/demo/demo.css

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

docs_overrides/demo/index.html

@@ -1,21 +0,0 @@
-<!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="{{ 'dist/martins.min.js' | url }}"></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/dist/aframe-with-martins.js

@@ -1 +0,0 @@
-../../dist/aframe-with-martins.js

docs_overrides/dist/martins.js

@@ -1 +0,0 @@
-../../dist/martins.js

docs_overrides/dist/martins.min.js

@@ -1 +0,0 @@
-../../dist/martins.min.js

docs_overrides/dist/three-with-martins.js

@@ -1 +0,0 @@
-../../dist/three-with-martins.js

mkdocs.yml

@@ -14,7 +14,12 @@ theme:
   logo: img/martins-icon.png
 
 extra_css: [ 'style/extra.css' ]
-extra_javascript: [ 'js/extra.js', 'dist/martins.js', 'dist/martins.min.js' ]
+extra_javascript: [ 'js/extra.js' ]
+
+plugins:
+  - mkdocs-simple-hooks:
+      hooks:
+        on_post_build: 'docs.hooks:copy_static_files'
 
 markdown_extensions:
   - admonition
@@ -66,7 +71,7 @@ nav:
     - 'Questions & Answers': 'faq.md'
     - 'Contribute': 'CONTRIBUTING.md'
   - 'Demos':
-    - 'Demo gallery': 'demos.md'
+    - 'Demo gallery': 'gallery.md'
     - 'Try WebAR now!': 'demo/instructions.md'
   - 'API':
     - 'General':

webpack.config.js

@@ -69,7 +69,7 @@ module.exports = (env, argv) => ({
         https: true,
         host: env.HOST || '0.0.0.0',
         port: env.PORT || 8000,
-        static: ['assets', 'demos', 'tests'].map(dir => ({
+        static: ['demos', 'tests'].map(dir => ({
             directory: path.resolve(__dirname, dir),
             publicPath: `/${dir}/`,
         })),