Update documentation

README.md

@@ -2,33 +2,27 @@
 
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/alemart/martins-js)](https://github.com/alemart/martins-js/releases/) ![GitHub file size in bytes on a specified ref (branch/commit/tag)](https://img.shields.io/github/size/alemart/martins-js/dist/martins.min.js?branch=master&label=minified%20js) [![GitHub Repo stars](https://img.shields.io/github/stars/alemart/martins-js?logo=github)](https://github.com/alemart/martins-js/stargazers) [![GitHub Sponsors](https://img.shields.io/github/sponsors/alemart?logo=github)](https://github.com/sponsors/alemart/)
 
-Create amazing Augmented Reality experiences with **MARTINS.js**, a GPU-accelerated Augmented Reality engine for the web. Users don't need specialized hardware nor dedicated software - only a modern web browser.
-
-:man_technologist: MARTINS.js is free and open-source software.
+Create amazing Augmented Reality experiences with **MARTINS.js**, a GPU-accelerated Augmented Reality engine for the web.
 
 :books: Technical documentation is available at <https://alemart.github.io/martins-js/>.
 
+## Features
+
+* **Standalone AR**. Runs in any modern web browser on Android, iOS and even on Desktop computers. No need of WebXR-capable devices.
+* **Image tracking**. Use it to track detailed images such as: book covers, cartoons and photos.
+
 ## 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:
+[Launch a demo!](https://alemart.github.io/martins-js/demo/instructions)
 
 >
-> **Guidelines for WebAR:**
+> **Guidelines:**
 >
-> - 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).
+> * Don't move the camera too quickly. This produces motion blur.
+> * The target image should appear clearly in the video.
+> * The physical environment should be properly illuminated.
 >
 
-[![WebAR demo](https://alemart.github.io/martins-js/demo/reference-image-with-qr-code.webp)](https://alemart.github.io/martins-js/demo/)
-
-Visit the [Demo gallery](https://alemart.github.io/martins-js/gallery/) for more.
-
 ## Try locally
 
 Try the demos on your own machine:
@@ -46,18 +40,12 @@ npm start
 
 ## Why use MARTINS.js?
 
-Here is why MARTINS.js is a great choice for creating Augmented Reality experiences:
-
 * **No need to download apps!** MARTINS.js is a WebAR engine. It runs in web browsers. Users can access the AR experience immediately.
 * **Fast and powerful!** MARTINS.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
 * **No need of custom hardware or software!** MARTINS.js is built from scratch using standard web technologies. All it requires is a modern web browser.
 * **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.
 
-## Features
-
-* **Image tracking**, also known as natural feature tracking. Use it to track detailed images such as: book covers, cartoons and photos.
-
 ## Browser compatibility
 
 MARTINS.js is compatible with all major web browsers:
@@ -72,4 +60,4 @@ MARTINS.js requires WebGL2 and WebAssembly.
 
 ## About
 
-MARTINS.js is free and open-source software developed by [Alexandre Martins](https://github.com/alemart). It is based on [Speedy Vision](https://github.com/alemart/speedy-vision) and released under the [LGPL](LICENSE.md).
+MARTINS.js is free and open-source software developed by [Alexandre Martins](https://github.com/alemart) and released under the [LGPL](LICENSE.md). It is based on [Speedy Vision](https://github.com/alemart/speedy-vision).

demos/NOTICE.txt

@@ -1,33 +0,0 @@
-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

docs/demo/index.md

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

docs/demo/instructions.md

@@ -1,26 +1,5 @@
 ---
-title: Try WebAR right now!
+template: basic-demo-readme.html
+title: ""
 ---
 
-# Try WebAR right now!
-
-## Follow the steps
-
-1. Scan or tap the QR code below with a mobile device.
-2. A [web page](./index.md) 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/index.md#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](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?
-
-[Demo gallery](../gallery.md){ .md-button .md-button--primary }

docs/download.md

@@ -1,17 +1,5 @@
-# Download
+---
+template: download.html
+title: "Download"
+---
 
-MARTINS.js can be downloaded from GitHub or used via a CDN. Read the [getting started](./getting-started/index.md) guide for information on how to add it to your web page.
-
-## Download from GitHub
-
-[:octocat: Download now](https://github.com/alemart/martins-js/releases){ .md-button ._blank }
-
-## Using a CDN
-
-Add the following to the `<head>` of your HTML page:
-
-```html
-<script src="https://cdn.jsdelivr.net/gh/alemart/martins-js@VERSION/dist/martins.min.js"></script>
-```
-
-Replace `VERSION` by ![GitHub release (latest by date)](https://img.shields.io/github/v/release/alemart/martins-js?color=%23ffffff&display_name=tag&label=%20)

docs/gallery.md

@@ -2,119 +2,60 @@
 title: WebAR Demo gallery
 ---
 
-<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 Demo gallery
-
-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).
+# Demo gallery
 
-## Basic demos
+Please read the [guidelines](#guidelines) before you play with the demos. Feel free to remix them.
 
-The following demos will help you get started:
+## Basic demos
 
-<div class="gallery-grid" markdown>
-<div class="gallery-item" markdown>
-[![QR code](./img/qr-demo-hello-aframe.gif)](/martins-js/demos/hello-aframe){ ._blank }
+### WebAR with A-Frame
 
-**MARTINS.js with AFRAME**
+Create an augmented scene with A-Frame. This is the easiest demo to edit!
 
-[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 }
+[Launch demo](/martins-js/demos/hello-aframe/README.html){ ._blank .md-button }
 
-**MARTINS.js with THREE.js**
+### WebAR with 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 }
+Create an augmented scene with three.js.
 
-**MARTINS.js with pure WebGL**
+[Launch demo](/martins-js/demos/hello-three/README.html){ ._blank .md-button }
 
-[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 }
+### WebAR with WebGL only
 
-**Touch interaction with THREE.js**
+Create an augmented scene without additional libraries. Writing WebGL code is intricate and not needed.
 
-[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>
+[Launch demo](/martins-js/demos/hello-webgl/README.html){ ._blank .md-button }
 
-## Minimal demos
+### Hello, world!
 
-Explore the source code with these minimalistic demos:
+A basic template to help you get started.
 
-<div class="gallery-grid" markdown>
-<div class="gallery-item" markdown>
-[![QR code](./img/qr-demo-hello-world.gif)](/martins-js/demos/hello-world){ ._blank }
+[Launch demo](/martins-js/demos/hello-world/README.html){ ._blank .md-button }
 
-**Hello, World!**
+## Interactive demos
 
-[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 }
+### Touch interaction
 
-**Simple Webcam demo**
+Have virtual elements respond to touch input.
 
-[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>
+[Launch demo](/martins-js/demos/touch-three/README.html){ ._blank .md-button }
 
 ## 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:
+For a good experience:
 
-* 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.
+* The physical environment should be properly illuminated.
 * 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.
+* Avoid low-quality cameras. Cameras of common smartphones are okay.
 
 ## Try locally
 
 Try the demos on your own machine:
 
-1. Run on a console:
+* Run on a console:
 
 ```sh
 git clone git@github.com:alemart/martins-js.git
@@ -122,9 +63,5 @@ cd martins-js
 npm start
 ```
 
-2. Open [https://localhost:8000/demos/](https://localhost:8000/demos/)
-3. Pick a demo and have fun!
-
-## 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 }
+* Open [https://localhost:8000/demos/](https://localhost:8000/demos/)
+* Pick a demo and have fun!

docs/getting-started/index.md

@@ -2,28 +2,23 @@
 
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/alemart/martins-js)](https://github.com/alemart/martins-js/releases/) ![GitHub file size in bytes on a specified ref (branch/commit/tag)](https://img.shields.io/github/size/alemart/martins-js/dist/martins.min.js?branch=master&label=minified%20js) [![GitHub Repo stars](https://img.shields.io/github/stars/alemart/martins-js?logo=github)](https://github.com/alemart/martins-js/stargazers) [![GitHub Sponsors](https://img.shields.io/github/sponsors/alemart?logo=github)](https://github.com/sponsors/alemart/)
 
-Create amazing Augmented Reality experiences with **MARTINS.js**, a GPU-accelerated Augmented Reality engine for the web. Users don't need specialized hardware nor dedicated software - only a modern web browser.
+Create amazing Augmented Reality experiences with **MARTINS.js**, a GPU-accelerated Augmented Reality engine for the web.
 
 [Get started](./introduction.md){ .md-button .md-button--primary } [Try a demo](../demo/instructions.md){ .md-button .md-button } [:heart:{ .heart } Support my work](../support-my-work.md){ .md-button }
 
-:man_technologist: MARTINS.js is free and open-source software.
+## Features
 
-:books: Technical documentation is available at <https://alemart.github.io/martins-js/>.
+* **Standalone AR**. Runs in any modern web browser on Android, iOS and even on Desktop computers. No need of WebXR-capable devices.
+* **Image tracking**. Use it to track detailed images such as: book covers, cartoons and photos.
 
 ## Why use MARTINS.js?
 
-MARTINS.js is a great choice for creating Augmented Reality experiences:
-
 * **No need to download apps!** MARTINS.js is a WebAR engine. It runs in web browsers. Users can access the AR experience immediately.
 * **Fast and powerful!** MARTINS.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
-* **No need of custom hardware or software!** MARTINS.js is built from scratch using standard web technologies. All it requires is a modern and compatible web browser.
+* **No need of custom hardware or software!** MARTINS.js is built from scratch using standard web technologies. All it requires is a modern web browser.
 * **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.
 
-## Features
-
-* **Image tracking**, also known as natural feature tracking. Use it to track detailed images such as: book covers, cartoons and photos.
-
 ## Browser compatibility
 
 MARTINS.js is compatible with all major web browsers:
@@ -38,4 +33,4 @@ MARTINS.js requires WebGL2 and WebAssembly.
 
 ## About
 
-MARTINS.js is free and open-source software developed by [Alexandre Martins](https://github.com/alemart). It is based on [Speedy Vision](https://github.com/alemart/speedy-vision) and released under the [LGPL](../license.md).
+MARTINS.js is free and open-source software developed by [Alexandre Martins](https://github.com/alemart) and released under the [LGPL](../license.md). It is based on [Speedy Vision](https://github.com/alemart/speedy-vision).

docs_overrides/basic-demo-readme.html

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

docs_overrides/basic_demo.html → docs_overrides/basic-demo.html

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

docs_overrides/download.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="refresh" content="0; url='https://github.com/alemart/martins-js/releases'">
+        <title>Download MARTINS.js</title>
+    </head>
+    <body>
+        <p>Redirecting to <a href="https://github.com/alemart/martins-js/releases">https://github.com/alemart/martins-js/releases</a>...</p>
+    </body>
+</html>

docs_overrides/partials/copyright.html

@@ -25,7 +25,6 @@
     <div class="md-copyright__highlight">
       {{ config.site_name }}.
       {{ config.copyright }}.
-      Made in Brazil
     </div>
   {% if not config.extra.generator == false %}
     This page is licensed under the
@@ -37,7 +36,7 @@
     </a>
     and is made with
     <a
-      href="https://squidfunk.github.io/mkdocs-material/"
+      href="https://squidfunk.github.io/mkdocs-material"
       target="_blank" rel="noopener"
     >
       Material for MkDocs

mkdocs.yml

@@ -40,20 +40,12 @@ markdown_extensions:
       #emoji_index: !!python/name:materialx.emoji.gemoji 
       #emoji_generator: !!python/name:materialx.emoji.to_svg
 
-extra:
-  social:
-    - icon: fontawesome/brands/github
-      link: https://github.com/alemart/martins-js
-    - icon: fontawesome/brands/youtube
-      link: https://youtube.com/alemart88
-
 dev_addr: 127.0.0.1:8008
 
 nav:
   - 'Home': 'index.md'
   - 'Getting started':
     - 'Welcome': 'getting-started/index.md'
-    - 'Download': 'download.md'
     - 'WebAR Crash Course':
       - 'Introduction': 'getting-started/introduction.md'
       - 'Concepts': 'getting-started/concepts.md'
@@ -67,9 +59,9 @@ nav:
     - 'Questions & Answers': 'faq.md'
     - 'Support my work': 'support-my-work.md'
     - 'License': 'license.md'
+  - 'Download': 'download.md'
   - 'Demos':
     - 'Demo gallery': 'gallery.md'
-    - 'Try WebAR now!': 'demo/instructions.md'
   - 'API':
     - 'General':
       - 'Session': 'api/session.md'