DemiSel
/
encantar-js
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Activity
Selaa lähdekoodia

Update the website

customisations
alemart 1 vuosi sitten
vanhempi
d13bf1e20a
commit
bcdc02b5d2
22 muutettua tiedostoa jossa 166 lisäystä ja 71 poistoa
Yhdistetty näkymä Näytä diff tilastot
  1. 6
    7
      README.md
  2. 26
    5
      demos/hello-aframe/README.html
  3. BIN
      demos/hello-aframe/qr-code.gif
  4. 26
    5
      demos/hello-three/README.html
  5. BIN
      demos/hello-three/qr-code.gif
  6. 26
    5
      demos/hello-webgl/README.html
  7. BIN
      demos/hello-webgl/qr-code.gif
  8. 26
    5
      demos/hello-world/README.html
  9. BIN
      demos/hello-world/qr-code.gif
  10. 26
    5
      demos/touch-three/README.html
  11. BIN
      demos/touch-three/qr-code.gif
  12. 0
    2
      docs/api/ar.md
  13. 10
    14
      docs/demos.md
  14. 1
    1
      docs/faq.md
  15. 8
    9
      docs/getting-started/index.md
  16. 0
    1
      docs/getting-started/set-up-a-web-server.md
  17. BIN
      docs/img/image-tracking-gizmos.webp
  18. BIN
      docs/img/page-with-nothing.webp
  19. BIN
      docs/img/page-with-reference-image.webp
  20. 8
    11
      docs_overrides/index.html
  21. 0
    1
      docs_overrides/main.html
  22. 3
    0
      mkdocs.yml

+ 6
- 7
README.md Näytä tiedosto

8
8
9 
 ## Features
 9 
 ## Features
10
10
11 
-* **Runs everywhere**: on Android, on iOS, and even on Desktop computers. No need of AR-capable devices.
12 
-* **Image tracking**. Use it to track detailed images such as: book covers, cartoons and photos.
11 
+* **Runs everywhere**: on Android, on iOS, and even on Desktop computers.
12 
+* **Image tracking**: track detailed images such as book covers, cartoons and photos.
13
13
14 
 ## Try a demo
 14 
 ## Try a demo
15
15
25
25
26 
 ## Why use encantAR.js?
 26 
 ## Why use encantAR.js?
27
27
28 
-* **No need to download apps!** encantAR.js is a WebAR engine: it runs in web browsers. Users can access the AR experiences immediately.
29 
-* **Easy to get started!** encantAR.js can be used with a `<script>` tag in your page. A static HTML page is enough to get started.
30 
-* **Fast and powerful!** encantAR.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
31 
-* **Fully standalone!** encantAR.js is built from scratch using standard web technologies. No need for additional hardware or software!
32 
-* **Free and open-source!** Get started right away!
28 
+* **Wide compatibility:** encantAR.js runs in all modern web browsers. It's built from scratch using standard web technologies. No need of AR-capable devices.
29 
+* **Fast and powerful:** encantAR.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
30 
+* **No need to download apps:** encantAR.js is a WebAR engine. Users can access the AR experiences immediately.
31 
+* **Easy to get started:** encantAR.js can be used with a `<script>` tag in your page. A static HTML page is enough to get started.
33
32
34 
 ## Browser compatibility
 33 
 ## Browser compatibility
35
34

+ 26
- 5
demos/hello-aframe/README.html Näytä tiedosto

4 
         <meta charset="utf-8">
 4 
         <meta charset="utf-8">
5 
         <title>encantAR.js WebAR demo with A-Frame</title>
 5 
         <title>encantAR.js WebAR demo with A-Frame</title>
6 
         <style>
 6 
         <style>
7 
+        body {
8 
+            font-family: sans-serif;
9 
+            background-color: whitesmoke;
10 
+        }
11 
+
12 
+        a:any-link {
13 
+            color: #7e56c2;
14 
+            text-decoration: none;
15 
+        }
16 
+
17 
+        a:hover {
18 
+            text-decoration: underline;
19 
+        }
20 
+
7 
         li + li {
 21 
         li + li {
8 
             margin-top: 1em;
 22 
             margin-top: 1em;
9 
         }
 23 
         }
17 
             display: block;
 31 
             display: block;
18 
             width: 256px;
 32 
             width: 256px;
19 
             image-rendering: pixelated;
 33 
             image-rendering: pixelated;
34 
+            border: 1px dashed black;
35 
+        }
36 
+
37 
+        a img {
38 
+            height: 5em;
39 
+            border-radius: 4px;
20 
         }
 40 
         }
21
41
22 
-        a.button img {
23 
-            width: 6em;
24 
-            height: 6em;
25 
-            border-radius: 8px;
42 
+        @media screen and (min-width: 768px) {
43 
+            a img {
44 
+                height: 3em;
45 
+            }
26 
         }
 46 
         }
27 
         </style>
 47 
         </style>
28 
     </head>
 48 
     </head>
29 
     <body>
 49 
     <body>
30 
-        <h1>WebAR with A-Frame</h1>
50 
+        <h1>encantAR.js with A-Frame</h1>
31 
         <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
 51 
         <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
32
52
33 
         <h2>Menu</h2>
 53 
         <h2>Menu</h2>
48 
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
 68 
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
49 
             <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
 69 
             <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
50 
             <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
 70 
             <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
71 
+            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
51 
         </div>
 72 
         </div>
52 
     </body>
 73 
     </body>
53 
 </html>
 74 
 </html>

BIN
demos/hello-aframe/qr-code.gif Näytä tiedosto


+ 26
- 5
demos/hello-three/README.html Näytä tiedosto

4 
         <meta charset="utf-8">
 4 
         <meta charset="utf-8">
5 
         <title>encantAR.js WebAR demo with three.js</title>
 5 
         <title>encantAR.js WebAR demo with three.js</title>
6 
         <style>
 6 
         <style>
7 
+        body {
8 
+            font-family: sans-serif;
9 
+            background-color: whitesmoke;
10 
+        }
11 
+
12 
+        a:any-link {
13 
+            color: #7e56c2;
14 
+            text-decoration: none;
15 
+        }
16 
+
17 
+        a:hover {
18 
+            text-decoration: underline;
19 
+        }
20 
+
7 
         li + li {
 21 
         li + li {
8 
             margin-top: 1em;
 22 
             margin-top: 1em;
9 
         }
 23 
         }
17 
             display: block;
 31 
             display: block;
18 
             width: 256px;
 32 
             width: 256px;
19 
             image-rendering: pixelated;
 33 
             image-rendering: pixelated;
34 
+            border: 1px dashed black;
35 
+        }
36 
+
37 
+        a img {
38 
+            height: 5em;
39 
+            border-radius: 4px;
20 
         }
 40 
         }
21
41
22 
-        a.button img {
23 
-            width: 6em;
24 
-            height: 6em;
25 
-            border-radius: 8px;
42 
+        @media screen and (min-width: 768px) {
43 
+            a img {
44 
+                height: 3em;
45 
+            }
26 
         }
 46 
         }
27 
         </style>
 47 
         </style>
28 
     </head>
 48 
     </head>
29 
     <body>
 49 
     <body>
30 
-        <h1>WebAR with three.js</h1>
50 
+        <h1>encantAR.js with three.js</h1>
31 
         <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
 51 
         <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
32
52
33 
         <h2>Menu</h2>
 53 
         <h2>Menu</h2>
48 
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
 68 
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
49 
             <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
 69 
             <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
50 
             <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
 70 
             <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
71 
+            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
51 
         </div>
 72 
         </div>
52 
     </body>
 73 
     </body>
53 
 </html>
 74 
 </html>

BIN
demos/hello-three/qr-code.gif Näytä tiedosto


+ 26
- 5
demos/hello-webgl/README.html Näytä tiedosto

4 
         <meta charset="utf-8">
 4 
         <meta charset="utf-8">
5 
         <title>encantAR.js WebAR demo with WebGL</title>
 5 
         <title>encantAR.js WebAR demo with WebGL</title>
6 
         <style>
 6 
         <style>
7 
+        body {
8 
+            font-family: sans-serif;
9 
+            background-color: whitesmoke;
10 
+        }
11 
+
12 
+        a:any-link {
13 
+            color: #7e56c2;
14 
+            text-decoration: none;
15 
+        }
16 
+
17 
+        a:hover {
18 
+            text-decoration: underline;
19 
+        }
20 
+
7 
         li + li {
 21 
         li + li {
8 
             margin-top: 1em;
 22 
             margin-top: 1em;
9 
         }
 23 
         }
17 
             display: block;
 31 
             display: block;
18 
             width: 256px;
 32 
             width: 256px;
19 
             image-rendering: pixelated;
 33 
             image-rendering: pixelated;
34 
+            border: 1px dashed black;
35 
+        }
36 
+
37 
+        a img {
38 
+            height: 5em;
39 
+            border-radius: 4px;
20 
         }
 40 
         }
21
41
22 
-        a.button img {
23 
-            width: 6em;
24 
-            height: 6em;
25 
-            border-radius: 8px;
42 
+        @media screen and (min-width: 768px) {
43 
+            a img {
44 
+                height: 3em;
45 
+            }
26 
         }
 46 
         }
27 
         </style>
 47 
         </style>
28 
     </head>
 48 
     </head>
29 
     <body>
 49 
     <body>
30 
-        <h1>WebAR with WebGL</h1>
50 
+        <h1>encantAR.js with WebGL</h1>
31 
         <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
 51 
         <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
32
52
33 
         <h2>Menu</h2>
 53 
         <h2>Menu</h2>
48 
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
 68 
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
49 
             <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
 69 
             <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
50 
             <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
 70 
             <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
71 
+            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
51 
         </div>
 72 
         </div>
52 
     </body>
 73 
     </body>
53 
 </html>
 74 
 </html>

BIN
demos/hello-webgl/qr-code.gif Näytä tiedosto


+ 26
- 5
demos/hello-world/README.html Näytä tiedosto

4 
         <meta charset="utf-8">
 4 
         <meta charset="utf-8">
5 
         <title>encantAR.js WebAR template</title>
 5 
         <title>encantAR.js WebAR template</title>
6 
         <style>
 6 
         <style>
7 
+        body {
8 
+            font-family: sans-serif;
9 
+            background-color: whitesmoke;
10 
+        }
11 
+
12 
+        a:any-link {
13 
+            color: #7e56c2;
14 
+            text-decoration: none;
15 
+        }
16 
+
17 
+        a:hover {
18 
+            text-decoration: underline;
19 
+        }
20 
+
7 
         li + li {
 21 
         li + li {
8 
             margin-top: 1em;
 22 
             margin-top: 1em;
9 
         }
 23 
         }
17 
             display: block;
 31 
             display: block;
18 
             width: 256px;
 32 
             width: 256px;
19 
             image-rendering: pixelated;
 33 
             image-rendering: pixelated;
34 
+            border: 1px dashed black;
35 
+        }
36 
+
37 
+        a img {
38 
+            height: 5em;
39 
+            border-radius: 4px;
20 
         }
 40 
         }
21
41
22 
-        a.button img {
23 
-            width: 6em;
24 
-            height: 6em;
25 
-            border-radius: 8px;
42 
+        @media screen and (min-width: 768px) {
43 
+            a img {
44 
+                height: 3em;
45 
+            }
26 
         }
 46 
         }
27 
         </style>
 47 
         </style>
28 
     </head>
 48 
     </head>
29 
     <body>
 49 
     <body>
30 
-        <h1>WebAR template: Hello, world!</h1>
50 
+        <h1>encatAR.js template: Hello, world!</h1>
31 
         <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
 51 
         <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
32
52
33 
         <h2>Menu</h2>
 53 
         <h2>Menu</h2>
48 
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
 68 
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
49 
             <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
 69 
             <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
50 
             <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
 70 
             <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
71 
+            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
51 
         </div>
 72 
         </div>
52 
     </body>
 73 
     </body>
53 
 </html>
 74 
 </html>

BIN
demos/hello-world/qr-code.gif Näytä tiedosto


+ 26
- 5
demos/touch-three/README.html Näytä tiedosto

4 
         <meta charset="utf-8">
 4 
         <meta charset="utf-8">
5 
         <title>encantAR.js WebAR demo with three.js and touch interaction</title>
 5 
         <title>encantAR.js WebAR demo with three.js and touch interaction</title>
6 
         <style>
 6 
         <style>
7 
+        body {
8 
+            font-family: sans-serif;
9 
+            background-color: whitesmoke;
10 
+        }
11 
+
12 
+        a:any-link {
13 
+            color: #7e56c2;
14 
+            text-decoration: none;
15 
+        }
16 
+
17 
+        a:hover {
18 
+            text-decoration: underline;
19 
+        }
20 
+
7 
         li + li {
 21 
         li + li {
8 
             margin-top: 1em;
 22 
             margin-top: 1em;
9 
         }
 23 
         }
17 
             display: block;
 31 
             display: block;
18 
             width: 256px;
 32 
             width: 256px;
19 
             image-rendering: pixelated;
 33 
             image-rendering: pixelated;
34 
+            border: 1px dashed black;
35 
+        }
36 
+
37 
+        a img {
38 
+            height: 5em;
39 
+            border-radius: 4px;
20 
         }
 40 
         }
21
41
22 
-        a.button img {
23 
-            width: 6em;
24 
-            height: 6em;
25 
-            border-radius: 8px;
42 
+        @media screen and (min-width: 768px) {
43 
+            a img {
44 
+                height: 3em;
45 
+            }
26 
         }
 46 
         }
27 
         </style>
 47 
         </style>
28 
     </head>
 48 
     </head>
29 
     <body>
 49 
     <body>
30 
-        <h1>WebAR with three.js and touch interaction</h1>
50 
+        <h1>encantAR.js with three.js and touch interaction</h1>
31 
         <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
 51 
         <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
32
52
33 
         <h2>Menu</h2>
 53 
         <h2>Menu</h2>
48 
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
 68 
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
49 
             <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
 69 
             <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
50 
             <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
 70 
             <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
71 
+            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
51 
         </div>
 72 
         </div>
52 
     </body>
 73 
     </body>
53 
 </html>
 74 
 </html>

BIN
demos/touch-three/qr-code.gif Näytä tiedosto


+ 0
- 2
docs/api/ar.md Näytä tiedosto

2
2
3 
 The `AR` namespace is the entry point of the features and components of encantAR.js.
 3 
 The `AR` namespace is the entry point of the features and components of encantAR.js.
4
4
5 
-I have documented the instantiation of the components of the engine in their respective pages.
6 
-
7 
 ## Properties
 5 
 ## Properties
8
6
9 
 ### Settings
 7 
 ### Settings

+ 10
- 14
docs/demos.md Näytä tiedosto

6
6
7 
 # Demo gallery
 7 
 # Demo gallery
8
8
9 
-Please read the [guidelines](#guidelines) before you play with the demos. Feel free to remix them.
9 
+!!! info "Guidelines"
10 
+
11 
+    For a good experience:
12 
+
13 
+    * Don't move the camera nor the target image too quickly. This produces motion blur.
14 
+    * The target image should appear clearly in the video.
15 
+    * The physical environment should be properly illuminated.
16 
+    * 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.
17 
+    * 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.
18 
+    * Avoid low-quality cameras. Cameras of common smartphones are okay.
10
19
11 
 ## Basic demos
 20 
 ## Basic demos
12
21
42
51
43 
 [Launch demo](/encantar-js/demos/touch-three/README.html){ ._blank .md-button }
 52 
 [Launch demo](/encantar-js/demos/touch-three/README.html){ ._blank .md-button }
44
53
45 
-## Guidelines
46 
-
47 
-For a good experience:
48 
-
49 
-* Don't move the camera nor the target image too quickly. This produces motion blur.
50 
-* The target image should appear clearly in the video.
51 
-* The physical environment should be properly illuminated.
52 
-* 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.
53 
-* 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.
54 
-* Avoid low-quality cameras. Cameras of common smartphones are okay.
55 
-
56 
 ## Try locally
 54 
 ## Try locally
57
55
58 
-Try the demos on your own machine:
59 
-
60 
 * Run on a console:
 56 
 * Run on a console:
61
57
62 
 ```sh
 58 
 ```sh

+ 1
- 1
docs/faq.md Näytä tiedosto

2
2
3 
 ## What is encantAR.js?
 3 
 ## What is encantAR.js?
4
4
5 
-encantAR.js is a standalone GPU-accelerated Augmented Reality engine for the web. The name derives from the Portuguese and Spanish word _encantar_, which means: to enchant, to delight, to love, to fascinate, to put a magical spell.
5 
+encantAR.js is a standalone GPU-accelerated Augmented Reality engine for the web. The name derives from the Portuguese and Spanish word _encantar_, which means: to enchant, to delight, to love, to fascinate, to put a magical spell on someone or something. :sparkles:
6
6
7 
 ## What is WebAR?
 7 
 ## What is WebAR?
8
8

+ 8
- 9
docs/getting-started/index.md Näytä tiedosto

2
2
3 
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/alemart/encantar-js)](https://github.com/alemart/encantar-js/releases/) ![GitHub file size in bytes on a specified ref (branch/commit/tag)](https://img.shields.io/github/size/alemart/encantar-js/dist/encantar.min.js?branch=master&label=minified%20js) [![GitHub Repo stars](https://img.shields.io/github/stars/alemart/encantar-js?logo=github)](https://github.com/alemart/encantar-js/stargazers) [![GitHub Sponsors](https://img.shields.io/github/sponsors/alemart?logo=github)](https://github.com/sponsors/alemart/)
 3 
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/alemart/encantar-js)](https://github.com/alemart/encantar-js/releases/) ![GitHub file size in bytes on a specified ref (branch/commit/tag)](https://img.shields.io/github/size/alemart/encantar-js/dist/encantar.min.js?branch=master&label=minified%20js) [![GitHub Repo stars](https://img.shields.io/github/stars/alemart/encantar-js?logo=github)](https://github.com/alemart/encantar-js/stargazers) [![GitHub Sponsors](https://img.shields.io/github/sponsors/alemart?logo=github)](https://github.com/sponsors/alemart/)
4
4
5 
-Create amazing Augmented Reality experiences with **encantAR.js**, a GPU-accelerated Augmented Reality engine for the web.
5 
+Enchant your users with **encantAR.js**, a GPU-accelerated Augmented Reality engine for the web.
6
6
7 
-[Get started](./introduction.md){ .md-button .md-button--primary } [Try a demo](../demo.md){ .md-button .md-button } [:heart:{ .heart } Support my work](../support-my-work.md){ .md-button }
7 
+[Learn now](./introduction.md){ .md-button .md-button--primary } [Try a demo](../demo.md){ .md-button .md-button } [:heart:{ .heart } Support my work](../support-my-work.md){ .md-button }
8
8
9 
 ## Features
 9 
 ## Features
10
10
11 
-* **Runs everywhere**: on Android, on iOS, and even on Desktop computers. No need of AR-capable devices.
12 
-* **Image tracking**. Use it to track detailed images such as: book covers, cartoons and photos.
11 
+* **Runs everywhere**: on Android, on iOS, and even on Desktop computers.
12 
+* **Image tracking**: track detailed images such as book covers, cartoons and photos.
13
13
14 
 ## Why use encantAR.js?
 14 
 ## Why use encantAR.js?
15
15
16 
-* **No need to download apps!** encantAR.js is a WebAR engine: it runs in web browsers. Users can access the AR experiences immediately.
17 
-* **Easy to get started!** encantAR.js can be used with a `<script>` tag in your page. A static HTML page is enough to get started.
18 
-* **Fast and powerful!** encantAR.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
19 
-* **Fully standalone!** encantAR.js is built from scratch using standard web technologies. No need for additional hardware or software!
20 
-* **Free and open-source!** Get started right away!
16 
+* **Wide compatibility:** encantAR.js runs in all modern web browsers. It's built from scratch using standard web technologies. No need of AR-capable devices.
17 
+* **Fast and powerful:** encantAR.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
18 
+* **No need to download apps:** encantAR.js is a WebAR engine. Users can access the AR experiences immediately.
19 
+* **Easy to get started:** encantAR.js can be used with a `<script>` tag in your page. A static HTML page is enough to get started.
21
20
22 
 ## Browser compatibility
 21 
 ## Browser compatibility
23
22

+ 0
- 1
docs/getting-started/set-up-a-web-server.md Näytä tiedosto

89
89
90 
 <figure markdown>
 90 
 <figure markdown>
91 
 [![Expected web page](../img/page-with-nothing.webp)](../img/page-with-nothing.webp){ ._blank }
 91 
 [![Expected web page](../img/page-with-nothing.webp)](../img/page-with-nothing.webp){ ._blank }
92 
-<figcaption>Blue Screen of Success</figcaption>
93 
 </figure>
 92 
 </figure>
94
93
95 
 If you see that blue screen, you're ready to proceed. If not, review your settings.
 94 
 If you see that blue screen, you're ready to proceed. If not, review your settings.

BIN
docs/img/image-tracking-gizmos.webp Näytä tiedosto


BIN
docs/img/page-with-nothing.webp Näytä tiedosto


BIN
docs/img/page-with-reference-image.webp Näytä tiedosto


+ 8
- 11
docs_overrides/index.html Näytä tiedosto

17 
 }
 17 
 }
18
18
19 
 :root {
 19 
 :root {
20 
-    --md-secondary-fg-color: #8ef;
20 
+    --md-secondary-fg-color: var(--md-accent-fg-color);
21 
 }
 21 
 }
22
22
23 
 .md-button {
 23 
 .md-button {
24 
-    --md-primary-bg-color: #4051b5;
25 
-    --md-primary-fg-color: var(--md-secondary-fg-color);
26 
-    --md-accent-fg-color: var(--md-secondary-fg-color);
27 
-    --md-accent-bg-color: var(--md-primary-fg-color--light);
24 
+    --md-primary-bg-color: var(--md-primary-fg-color);
25 
+    --md-primary-fg-color: var(--md-primary-bg-color);
28 
     margin-top: 8px;
 26 
     margin-top: 8px;
29 
     margin-bottom: 8px;
 27 
     margin-bottom: 8px;
30 
 }
 28 
 }
59
57
60 
 .splash-text em {
 58 
 .splash-text em {
61 
     font-style: normal;
 59 
     font-style: normal;
62 
-    color: var(--md-secondary-fg-color);
60 
+    color: var(--md-accent-fg-color);
63 
 }
 61 
 }
64
62
65 
 .splash-text h2 {
 63 
 .splash-text h2 {
110 
 }
 108 
 }
111 
 </style>
 109 
 </style>
112
110
113 
-<section id="splash" data-md-color-primary="indigo">
111 
+<section id="splash">
114 
     <div class="splash-container md-grid">
 112 
     <div class="splash-container md-grid">
115 
         <div class="splash-text md-typeset appear text-center">
 113 
         <div class="splash-text md-typeset appear text-center">
116 
-            <h2><em>Create Augmented Reality experiences for the web.</em></h2>
117 
-            <p>Open source WebAR engine. Runs everywhere. Easy to get started.</p>
118 
-            <a href="{{ './getting-started' | url }}" class="md-button md-button--primary">Get started</a>
119 
-            <a href="{{ './demo' | url }}" class="md-button" target="_blank">Try a demo</a>
114 
+            <h2>&#x2728; encantAR.js &#x2728;</h2>
115 
+            <p>Enchant your users with Augmented Reality experiences that run everywhere!</p>
116 
+            <a href="{{ './getting-started' | url }}" class="md-button">Get started</a>
120 
         </div>
 117 
         </div>
121 
         <!--
 118 
         <!--
122 
         <div class="splash-image">
 119 
         <div class="splash-image">

+ 0
- 1
docs_overrides/main.html Näytä tiedosto

20 
 {% endblock %}
 20 
 {% endblock %}
21
21
22 
 {% block content %}
 22 
 {% block content %}
23 
-{% include "partials/share.html" %}
24 
 {{ super() }}
 23 
 {{ super() }}
25 
 {% endblock %}
 24 
 {% endblock %}

+ 3
- 0
mkdocs.yml Näytä tiedosto

11 
   name: material
 11 
   name: material
12 
   custom_dir: docs_overrides
 12 
   custom_dir: docs_overrides
13 
   features: [ 'navigation.tabs', 'navigation.tabs.sticky' ]
 13 
   features: [ 'navigation.tabs', 'navigation.tabs.sticky' ]
14 
+  palette:
15 
+    primary: deep purple
16 
+    accent: yellow
14
17
15 
 extra_css: [ 'style/extra.css' ]
 18 
 extra_css: [ 'style/extra.css' ]
16 
 extra_javascript: [ 'js/extra.js' ]
 19 
 extra_javascript: [ 'js/extra.js' ]

Write Preview
Loading…
Peruuta
Tallenna