DemiSel
/
encantar-js
Obserwuj 1
Gwiazdka 0
Forkuj 0
Kod Problemy 0 Pull Requests 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

Update website

customisations
alemart 5 miesięcy temu
rodzic
649a1df4bd
commit
5ce282a27b
25 zmienionych plików z 345 dodań i 198 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 1
    3
      README.md
  2. 10
    76
      demos/assets/promo.html
  3. 4
    4
      docs/addons/index.md
  4. 129
    4
      docs/demos.md
  5. 48
    0
      docs/home.md
  6. BIN
      docs/img/basketball2.gif
  7. BIN
      docs/img/favicon.png
  8. BIN
      docs/img/logo-aframe.png
  9. BIN
      docs/img/logo-babylon.png
  10. BIN
      docs/img/logo-three.png
  11. BIN
      docs/img/logo-webgl.png
  12. BIN
      docs/img/logo.png
  13. BIN
      docs/img/pointer-demo.png
  14. BIN
      docs/img/splash.gif
  15. 4
    49
      docs/index.md
  16. 1
    1
      docs/tutorial/augment-the-scene.md
  17. 0
    11
      docs/tutorial/index.md
  18. 5
    3
      docs/tutorial/set-up-the-tracker.md
  19. 0
    11
      docs_overrides/demos.html
  20. 3
    2
      docs_overrides/download.html
  21. 41
    15
      docs_overrides/index.html
  22. 6
    4
      docs_overrides/main.html
  23. 9
    0
      docs_overrides/style/extra.css
  24. 77
    9
      docs_overrides/support-my-work.html
  25. 7
    6
      mkdocs.yml

+ 1
- 3
README.md Wyświetl plik 

@@ -2,9 +2,7 @@
2 2
3 3 
 The Augmented Reality engine that will enchant you!
4 4
5 
-:heart: encantar.js is an Augmented Reality technology which I develop independently. Support this work by [purchasing your copy](https://encantar.dev/download). You can also [become a sponsor](https://github.com/sponsors/alemart).
6 
-
7 
-:star2: **[Try it!](https://encantar.dev/demos/hello-aframe/poster.html)** | :video_game: **[Play a game!](https://encantar.dev/demos/basketball/poster.html)** | :magic_wand: **[Demos](https://encantar.dev/demos/)** | :heart_eyes: **[Add-Ons](https://encantar.dev/addons/)** | :books: **[Learn](https://encantar.dev/)**
5 
+:star2: **[Try it!](https://encantar.dev/demos/hello-aframe/poster.html)** | :video_game: **[Play a game!](https://encantar.dev/demos/basketball/poster.html)** | :magic_wand: **[Demos](https://encantar.dev/demos/)** | :heart_eyes: **[Add-Ons](https://encantar.dev/addons/)** | :books: **[Learn](https://encantar.dev/tutorial/)**
8 6
9 7 
 <a href="https://encantar.dev/demos/hello-aframe/poster.html"><img src="docs/img/mage.gif" alt="Demo" height="144"></a> <a href="https://encantar.dev/demos/basketball/poster.html"><img src="docs/img/basketball.gif" alt="Game" height="144"></a> <a href="https://encantar.dev/addons/"><img src="docs/img/video-player.gif" alt="Video Player" height="144"></a>
10 8

+ 10
- 76
demos/assets/promo.html Wyświetl plik 

@@ -1,78 +1,12 @@
1 1 
 <!doctype html>
2 2 
 <html>
3 
-<head>
4 
-  <meta charset="utf-8">
5 
-  <meta name="description" content="encantar.js: GPU-accelerated Augmented Reality for the web">
6 
-  <meta name="author" content="Alexandre Martins">
7 
-  <meta name="viewport" content="width=device-width,initial-scale=1">
8 
-  <title>Thank you for trying encantar.js!</title>
9 
-  <style>
10 
-  html {
11 
-    line-height: 1.6;
12 
-    margin: 0.5em max(1ch, calc((100vw - 56ch) / 2));
13 
-    font-size: clamp(1rem, 2vw, 2rem);
14 
-    font-family: serif;
15 
-    background: #fffae9;
16 
-    color: #1a170d;
17 
-  }
18 
-  a:any-link {
19 
-    color: #857952;
20 
-  }
21 
-  .button {
22 
-    display: inline-block;
23 
-    margin: 0.5em 0;
24 
-    padding: 1em 2em;
25 
-    position: relative;
26 
-    left: 50%;
27 
-    transform: translateX(-50%);
28 
-    /*background: #e9e0c2;*/
29 
-    background: #fff12c;
30 
-    color: #d88519 !important;
31 
-    border-radius: 64px;
32 
-    text-decoration: none;
33 
-    font-weight: bold;
34 
-    transition: transform 0.125s ease-out;
35 
-  }
36 
-  .button:hover {
37 
-    transform: translateX(-50%) scale(1.0625);
38 
-  }
39 
-  h1 {
40 
-    font-size: 1.33em;
41 
-  }
42 
-  h2 {
43 
-    font-size: 1em;
44 
-  }
45 
-  </style>
46 
-  <script data-goatcounter="https://encantar-js.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
47 
-  <script>
48 
-  document.addEventListener('DOMContentLoaded', function() {
49 
-    var salad = 'nbjmup;tvqqpsuAfodboubs/efw';
50 
-    var link = salad.split('').map(c => String.fromCharCode(c.charCodeAt(0)-1)).join('');
51 
-    document.querySelectorAll('a.email').forEach(function(a) {
52 
-      a.href = link;
53 
-      if(a.innerText == '')
54 
-        a.innerText = link.substring(7);
55 
-    });
56 
-  });
57 
-  </script>
58 
-</head>
59 
-<body>
60 
-
61 
-<h1>Thank you for trying encantar.js!</h1>
62 
-
63 
-<h2>Would you like to see more of open-source AR?</h2>
64 
-
65 
-<p>encantar.js is an Augmented Reality technology which I develop independently. Support this work by <a href="https://ko-fi.com/s/3ee4182cb6" rel="external" target="_blank" id="support-purchase-link" data-goatcounter-click>purchasing your copy</a>. You can also <a href="https://github.com/sponsors/alemart" rel="external" target="_blank" id="support-sponsor-link" data-goatcounter-click>become a sponsor</a>. Thank you!</p>
66 
-
67 
-<a href="https://ko-fi.com/s/3ee4182cb6" rel="external" target="_blank" class="button" id="support-purchase-button" data-goatcounter-click>Support this work</a>
68 
-
69 
-<h2>Spread the word!</h2>
70 
-
71 
-<p>Are you building something cool? Share it on social media! If you're enchanted by encantar.js, why wouldn't you let your friends know about this tech and what you're building with it? &#x1F60E;</p>
72 
-
73 
-<h2>Need help?</h2>
74 
-
75 
-<p>Get expert guidance on WebAR with encantar.js by contacting me at <a href="#" class="email" id="contact-technical-support" data-goatcounter-click></a>. If you have any projects that you want created or modified, feel free to get in touch!</p>
76 
-
77 
-</body>
78 
-</html>
3 
+    <head>
4 
+        <meta charset="utf-8">
5 
+        <meta http-equiv="refresh" content="0; url='https://encantar.dev/support-my-work'">
6 
+        <title>Support encantar.js</title>
7 
+        <script data-goatcounter="https://encantar-js.goatcounter.com/count" src="//gc.zgo.at/count.js"></script>
8 
+    </head>
9 
+    <body>
10 
+        <p><a href="https://encantar.dev/support-my-work">Redirecting</a>...</p>
11 
+    </body>
12 
+</html>

+ 4
- 4
docs/addons/index.md Wyświetl plik 

@@ -23,7 +23,7 @@ Add-Ons provide an enriched experience with additional features that enhance the
23 23
24 24 
 Enchant your audience using this [easy-to-use &amp; customizable](./ar-video-player.md) Video Player! Videos in AR are suitable for: product marketing, AR business cards, educational materials, interactive art, and more!
25 25
26 
-<a href="https://ko-fi.com/s/697a184728" target="_blank" rel="external" class="md-button" id="addon-want-video-player" data-goatcounter-click>I want this!</a>
26 
+<a href="https://encantar.gumroad.com/l/video-player" target="_blank" rel="external" class="md-button" id="addon-want-video-player" data-goatcounter-click>I want this!</a>
27 27
28 28 
   </div>
29 29 
   <div>
 
@@ -38,7 +38,7 @@ Enchant your audience using this [easy-to-use &amp; customizable](./ar-video-pla
38 38
39 39 
 Add interactivity to your scenes with easy-to-use buttons for AR! You can [customize their images and colors](./ar-button.md). They're bundled with the Video Player.
40 40
41 
-<a href="https://ko-fi.com/s/697a184728" target="_blank" rel="external" class="md-button" id="addon-want-buttons" data-goatcounter-click>I want this!</a>
41 
+<a href="https://encantar.gumroad.com/l/video-player" target="_blank" rel="external" class="md-button" id="addon-want-buttons" data-goatcounter-click>I want this!</a>
42 42
43 43 
   </div>
44 44 
   <div markdown>
 
@@ -55,7 +55,7 @@ Add interactivity to your scenes with easy-to-use buttons for AR! You can [custo
55 55
56 56 
 Turn 3D and 2D objects into "clickables" that respond to touch or mouse input. AR Clickables are based on the [Pointer Tracker](../api/pointer-tracker.md). They are the building blocks of AR Buttons and are included with them.
57 57
58 
-<a href="https://ko-fi.com/s/697a184728" target="_blank" rel="external" class="md-button" id="addon-want-clickables" data-goatcounter-click>I want this!</a>
58 
+<a href="https://encantar.gumroad.com/l/video-player" target="_blank" rel="external" class="md-button" id="addon-want-clickables" data-goatcounter-click>I want this!</a>
59 59
60 60 
   </div>
61 61 
   <div markdown>
 
@@ -72,7 +72,7 @@ Turn 3D and 2D objects into "clickables" that respond to touch or mouse input. A
72 72
73 73 
 Framework-agnostic solution for preloading assets such as: 3D models, video clips, audio files and more. This Add-On is bundled with the core.
74 74
75 
-<a href="https://ko-fi.com/s/3ee4182cb6" target="_blank" rel="external" class="md-button" id="addon-want-asset-manager" data-goatcounter-click>I want this!</a>
75 
+<a href="https://encantar.gumroad.com/l/encantar" target="_blank" rel="external" class="md-button" id="addon-want-asset-manager" data-goatcounter-click>I want this!</a>
76 76
77 77 
   </div>
78 78 
   <div markdown>

+ 129
- 4
docs/demos.md Wyświetl plik 

@@ -1,4 +1,129 @@
1 
----
2 
-template: demos.html
3 
-title: ""
4 
----
1 
+# Demos
2 
+
3 
+<style>
4 
+.grid.cards {
5 
+    text-align: center;
6 
+}
7 
+.grid.cards figure {
8 
+    display: block;
9 
+    width: 100%;
10 
+    min-height: 128px;
11 
+    aspect-ratio: 16 / 9;
12 
+    background-position: center center;
13 
+    background-repeat: no-repeat;
14 
+    background-size: cover;
15 
+}
16 
+.grid.cards figure.contain {
17 
+    background-size: contain;
18 
+}
19 
+</style>
20 
+
21 
+<div class="grid cards" markdown>
22 
+-   ### encantar.js WebAR Engine
23 
+
24 
+    ---
25 
+
26 
+    <figure style="background-image: url(../img/mage.gif)"></figure>
27 
+
28 
+    Get the engine and several demos in a bundle!
29 
+
30 
+    ---
31 
+
32 
+    <a href="https://encantar.gumroad.com/l/encantar" class="md-button md-button--primary" target="_blank" rel="external" id="launch-demo-encantar" data-goatcounter-click>Download</a>
33 
+
34 
+-   ### Video Player with Buttons
35 
+
36 
+    ---
37 
+
38 
+    <figure style="background-image: url(../img/video-player.gif)"></figure>
39 
+
40 
+    Enchant your audience with video clips in Augmented Reality!
41 
+
42 
+    ---
43 
+
44 
+    <a href="https://encantar.gumroad.com/l/video-player" class="md-button md-button--primary" target="_blank" rel="external" id="launch-demo-video-player" data-goatcounter-click>Download</a>
45 
+
46 
+-   ### Magic AR Basketball
47 
+
48 
+    ---
49 
+
50 
+    <figure style="background-image: url(../img/basketball.gif)"></figure>
51 
+
52 
+    A Basketball game in Augmented Reality! Play with your phone!
53 
+
54 
+    ---
55 
+
56 
+    <a href="/demos/basketball/poster.html" class="md-button" target="_blank" rel="external" id="launch-demo-basketball" data-goatcounter-click>Play now!</a>
57 
+
58 
+-   ### WebAR with A-Frame
59 
+
60 
+    ---
61 
+
62 
+    <figure style="background-image: url(../img/logo-aframe.png)" class="contain"></figure>
63 
+
64 
+    A template based on A-Frame and encantar.js! Very easy to remix!
65 
+
66 
+    ---
67 
+
68 
+    <a href="/demos/hello-aframe/poster.html" class="md-button" target="_blank" rel="external" id="launch-demo-hello-aframe" data-goatcounter-click>Try it!</a>
69 
+
70 
+-   ### WebAR with babylon.js
71 
+
72 
+    ---
73 
+
74 
+    <figure style="background-image: url(../img/logo-babylon.png)" class="contain"></figure>
75 
+
76 
+    A template based on babylon.js and encantar.js!
77 
+
78 
+    ---
79 
+
80 
+    <a href="/demos/hello-babylon/poster.html" class="md-button" target="_blank" rel="external" id="launch-demo-hello-babylon" data-goatcounter-click>Try it!</a>
81 
+
82 
+-   ### WebAR with three.js
83 
+
84 
+    ---
85 
+
86 
+    <figure style="background-image: url(../img/logo-three.png)" class="contain"></figure>
87 
+
88 
+    A template based on three.js and encantar.js!
89 
+
90 
+    ---
91 
+
92 
+    <a href="/demos/hello-three/poster.html" class="md-button" target="_blank" rel="external" id="launch-demo-hello-three" data-goatcounter-click>Try it!</a>
93 
+
94 
+-   ### WebAR with any framework
95 
+
96 
+    ---
97 
+
98 
+    <figure style="background-image: url(../img/demo-hello.png)"></figure>
99 
+
100 
+    Create WebAR experiences with encantar.js and any 3D framework!
101 
+
102 
+    ---
103 
+
104 
+    <a href="/demos/hello-world/poster.html" class="md-button" target="_blank" rel="external" id="launch-demo-hello-world" data-goatcounter-click>Try it!</a>
105 
+
106 
+-   ### Pure WebGL madness
107 
+
108 
+    ---
109 
+
110 
+    <figure style="background-image: url(../img/logo-webgl.png)" class="contain"></figure>
111 
+
112 
+    WebAR with pure WebGL &ndash; for tough programmers!
113 
+
114 
+    ---
115 
+
116 
+    <a href="/demos/hello-webgl/poster.html" class="md-button" target="_blank" rel="external" id="launch-demo-hello-webgl" data-goatcounter-click>Try it!</a>
117 
+
118 
+-   ### Pointer tracking
119 
+
120 
+    ---
121 
+
122 
+    <figure style="background-image: url(../img/pointer-demo.png)"></figure>
123 
+
124 
+    Track touch and mouse input with encantar.js!
125 
+
126 
+    ---
127 
+
128 
+    <a href="/demos/pointer-demo/poster.html" class="md-button" target="_blank" rel="external" id="launch-demo-pointer-demo" data-goatcounter-click>Try it!</a>
129 
+</div>

+ 48
- 0
docs/home.md Wyświetl plik 

@@ -0,0 +1,48 @@
1 
+# Welcome to encantar.js!
2 
+
3 
+The Augmented Reality engine that will enchant you!
4 
+
5 
+<style>
6 
+.md-button { padding-left: 1.5em !important; padding-right: 1.5em !important; }
7 
+#gallery { display: flex; justify-content: center; }
8 
+#gallery img { height: 128px; margin: 0 2px; }
9 
+</style>
10 
+
11 
+[:star2: Try it!](../demos/hello-aframe/poster.html){ .md-button ._blank } [:video_game: Play a game!](../demos/basketball/poster.html){ .md-button ._blank } [:sparkles: Demos](./demos.md){ .md-button } [:heart_eyes: Add-Ons](./addons/index.md){ .md-button } [:books: Learn](./tutorial/index.md){ .md-button }
12 
+
13 
+<div id="gallery">
14 
+  <a href="../demos/hello-aframe/poster.html" target="_blank"><img src="../img/mage.gif" alt="Demo"></a>
15 
+  <a href="../demos/basketball/poster.html" target="_blank"><img src="../img/basketball.gif" alt="Game"></a>
16 
+  <a href="../addons/"><img src="../img/video-player.gif" alt="Video Player"></a>
17 
+</div>
18 
+
19 
+## Features
20 
+
21 
+* **Image tracking**: track detailed images such as book covers, cartoons and photos. No need of manual training!
22 
+* **Pointer tracking**: create interactive experiences based on touch and mouse input with an easy-to-use API.
23 
+* **Plugins**: use encantar.js with the 3D framework of your choice, including: A-Frame, Babylon.js, Three.js and more!
24 
+* **Add-Ons**: create rich experiences with additional features that enhance the core of encantar.js!
25 
+
26 
+## Key points
27 
+
28 
+* **AR everywhere**: it runs on Android, on iOS, and even on Desktop computers! Only a modern web browser is required.
29 
+* **Easy to use**: just load a static HTML page! No need of heavy app downloads, server-side components or subscriptions.
30 
+* **Device-agnostic**: no need of AR-capable devices! encantar.js is AR built from scratch with computer vision!
31 
+* **Fast & powerful**: encantar.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
32 
+* **Open source**: personal, professional and educational uses are allowed.
33 
+
34 
+## Browser compatibility
35 
+
36 
+encantar.js is compatible with all major web browsers:
37 
+
38 
+| Chrome | Edge | Firefox | Opera | Safari* |
39 
+|:------:|:----:|:-------:|:-----:|:-------:|
40 
+| :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
41 
+
42 
+\* use Safari 15.2 or later.
43 
+
44 
+encantar.js requires WebGL2 and WebAssembly, which are widely supported.
45 
+
46 
+## About
47 
+
48 
+encantar.js is 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).

BIN
docs/img/basketball2.gif Wyświetl plik


BIN
docs/img/favicon.png Wyświetl plik


BIN
docs/img/logo-aframe.png Wyświetl plik


BIN
docs/img/logo-babylon.png Wyświetl plik


BIN
docs/img/logo-three.png Wyświetl plik


BIN
docs/img/logo-webgl.png Wyświetl plik


BIN
docs/img/logo.png Wyświetl plik


BIN
docs/img/pointer-demo.png Wyświetl plik


BIN
docs/img/splash.gif Wyświetl plik


+ 4
- 49
docs/index.md Wyświetl plik 

@@ -1,50 +1,5 @@
1 
-# Welcome to encantar.js!
1 
+---
2 
+template: index.html
3 
+title: "encantar.js WebAR Engine"
4 
+---
2 5
3 
-The Augmented Reality engine that will enchant you!
4 
-
5 
-:heart:{ .heart } encantar.js is an Augmented Reality technology which I develop independently. Support this work by [purchasing your copy](./download.md). You can also [become a sponsor](https://github.com/sponsors/alemart).
6 
-
7 
-<style>
8 
-.md-button { padding-left: 1.5em !important; padding-right: 1.5em !important; }
9 
-#gallery { display: flex; justify-content: center; }
10 
-#gallery img { height: 128px; margin: 0 2px; }
11 
-</style>
12 
-
13 
-[:star2: Try it!](./demos/hello-aframe/poster.html){ .md-button ._blank } [:video_game: Play a game!](./demos/basketball/poster.html){ .md-button ._blank } [:sparkles: Demos](./demos.md){ .md-button ._blank } [:heart_eyes: Add-Ons](./addons/index.md){ .md-button } [:books: Learn](./tutorial/introduction.md){ .md-button }
14 
-
15 
-<div id="gallery">
16 
-  <a href="demos/hello-aframe/poster.html" target="_blank"><img src="img/mage.gif" alt="Demo"></a>
17 
-  <a href="demos/basketball/poster.html" target="_blank"><img src="img/basketball.gif" alt="Game"></a>
18 
-  <a href="addons/"><img src="img/video-player.gif" alt="Video Player"></a>
19 
-</div>
20 
-
21 
-## Features
22 
-
23 
-* **Image tracking**: track detailed images such as book covers, cartoons and photos. No need of manual training!
24 
-* **Pointer tracking**: create interactive experiences based on touch and mouse input with an easy-to-use API.
25 
-* **Plugins**: use encantar.js with the 3D framework of your choice, including: A-Frame, Babylon.js, Three.js and more!
26 
-* **Add-Ons**: create rich experiences with additional features that enhance the core of encantar.js!
27 
-
28 
-## Key points
29 
-
30 
-* **AR everywhere**: it runs on Android, on iOS, and even on Desktop computers! Only a modern web browser is required.
31 
-* **Easy to use**: just load a static HTML page! No need of heavy app downloads, server-side components or subscriptions.
32 
-* **Device-agnostic**: no need of AR-capable devices! encantar.js is AR built from scratch with computer vision!
33 
-* **Fast & powerful**: encantar.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
34 
-* **Open source**: personal, professional and educational uses are allowed.
35 
-
36 
-## Browser compatibility
37 
-
38 
-encantar.js is compatible with all major web browsers:
39 
-
40 
-| Chrome | Edge | Firefox | Opera | Safari* |
41 
-|:------:|:----:|:-------:|:-----:|:-------:|
42 
-| :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
43 
-
44 
-\* use Safari 15.2 or later.
45 
-
46 
-encantar.js requires WebGL2 and WebAssembly, which are widely supported.
47 
-
48 
-## About
49 
-
50 
-encantar.js is 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).

+ 1
- 1
docs/tutorial/augment-the-scene.md Wyświetl plik 

@@ -12,7 +12,7 @@ Once you pick a 3D rendering technology, you need to integrate it with encantar.
12 12
13 13 
 Writing a plugin is a task of moderate complexity. It requires dealing with maths and with some idiosyncrasies of the 3D rendering technologies in order to make sure that it all works as intended. I provide easy-to-use plugins that work with different 3D rendering technologies, so that you don't need to deal with that complexity yourself. Plugins are shipped as JavaScript (.js) files. You just need to add a plugin to your web page, and then the integration will be done for you!
14 14
15 
-[Get the plugins in the demos](../../demos){ .md-button .md-button--primary ._blank }
15 
+[Get the plugins in the demos](../demos.md){ .md-button .md-button--primary ._blank }
16 16
17 17 
 ## Create the virtual scene
18 18

docs/tutorial/introduction.md → docs/tutorial/index.md Wyświetl plik 

@@ -4,17 +4,6 @@ Augmented Reality (AR) has applications in many fields, including: games, market
4 4
5 5 
 Traditionally, users were required to download (sometimes large) apps to experience AR. That was an obstacle for adoption. What if we dropped the need for apps and just required a web browser instead? Users already have web browsers! That's where WebAR comes in.
6 6
7 
-<figure markdown>
8 
-<!--
9 
-<video poster="../../img/demo-cool3.webp" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
10 
-    <source src="../../img/demo-cool3.webm" type="video/webm" />
11 
-    <source src="../../img/demo-cool3.mp4" type="video/mp4" />
12 
-</video>
13 
--->
14 
-![Demo](../img/mage.gif)
15 
-<figcaption>Image Tracking</figcaption>
16 
-</figure>
17 
-
18 7 
 ## What to expect from this guide
19 8
20 9 
 We will create together an Augmented Reality experience that runs in web browsers. You will learn how to track an image in real-time. This is a common use case of Augmented Reality technology.

+ 5
- 3
docs/tutorial/set-up-the-tracker.md Wyświetl plik 

@@ -4,15 +4,17 @@ In this section we'll learn how to set up the tracker. Later on we'll see how to
4 4
5 5 
 ## Add a reference image
6 6
7 
-The first thing we need to do is add the image we want to track to our web page. We'll be calling that a **reference image**. We simply pick a suitable image and add an `<img>` tag to the page.
8 
-
9 
-Not all images are suitable for tracking. Images should be distinct, detailed and asymmetrical. I discuss this in detail in [Guidelines for Images](../guidelines-for-images.md). For now we'll just use the following image:
7 
+The first thing we need to do is add the image we want to track to our web page. We'll be calling that a **reference image**. We simply pick a suitable image and add an `<img>` tag to the page. Let's use the image below:
10 8
11 9 
 <figure markdown>
12 10 
 [![../assets/my-reference-image.webp](../assets/my-reference-image.webp "Based on https://pixabay.com/pt/vectors/bruxa-vassoura-gato-chap%c3%a9u-magia-5635225/ (ArtRose)"){ width=512 }](../assets/my-reference-image.webp){ ._blank }
13 11 
 <figcaption>Reference Image</figcaption>
14 12 
 </figure>
15 13
14 
+!!! info "What is a suitable image?"
15 
+
16 
+    Not all images are suitable for tracking. Images should be distinct, detailed and asymmetrical. I discuss this in detail in [Guidelines for Images](../guidelines-for-images.md){ ._blank }.
17 
+
16 18 
 Download the image to the `ar-demo/` folder. Save it as [my-reference-image.webp](../assets/my-reference-image.webp){ ._blank }.
17 19
18 20 
 Next, let's add the reference image to our web page. Add an `<img>` tag to the `<body>` of the page as follows:

+ 0
- 11
docs_overrides/demos.html Wyświetl plik 

@@ -1,11 +0,0 @@
1 
-<!doctype html>
2 
-<html>
3 
-    <head>
4 
-        <meta charset="utf-8">
5 
-        <meta http-equiv="refresh" content="0; url='https://ko-fi.com/alemart/shop'">
6 
-        <title>encantar.js WebAR Demo gallery</title>
7 
-    </head>
8 
-    <body>
9 
-        <p><a href="https://ko-fi.com/alemart/shop" rel="external">Redirecting</a>...</p>
10 
-    </body>
11 
-</html>

+ 3
- 2
docs_overrides/download.html Wyświetl plik 

@@ -2,10 +2,11 @@
2 2 
 <html>
3 3 
     <head>
4 4 
         <meta charset="utf-8">
5 
-        <meta http-equiv="refresh" content="0; url='https://ko-fi.com/s/3ee4182cb6'">
5 
+        <meta http-equiv="refresh" content="0; url='https://encantar.gumroad.com/l/encantar'">
6 6 
         <title>Download encantar.js</title>
7 
+        <script data-goatcounter="https://encantar-js.goatcounter.com/count" src="//gc.zgo.at/count.js"></script>
7 8 
     </head>
8 9 
     <body>
9 
-        <p><a href="https://ko-fi.com/s/3ee4182cb6">Redirecting</a>...</p>
10 
+        <p><a href="https://encantar.gumroad.com/l/encantar">Redirecting</a>...</p>
10 11 
     </body>
11 12 
 </html>

+ 41
- 15
docs_overrides/index.html Wyświetl plik 

@@ -20,13 +20,6 @@
20 20 
     --md-secondary-fg-color: var(--md-accent-fg-color);
21 21 
 }
22 22
23 
-.md-button {
24 
-    --md-primary-bg-color: var(--md-primary-fg-color);
25 
-    --md-primary-fg-color: var(--md-primary-bg-color);
26 
-    margin-top: 8px;
27 
-    margin-bottom: 8px;
28 
-}
29 
-
30 23 
 #splash {
31 24 
     display: flex;
32 25 
     align-items: center;
 
@@ -45,11 +38,10 @@
45 38 
     top: 0;
46 39 
     width: 100%;
47 40 
     height: 100%;
48 
-    background-image: url(img/mage.gif);
41 
+    background-image: url(img/splash.gif);
49 42 
     background-repeat: no-repeat;
50 
-    background-position: 50% 0;
51 43 
     background-size: cover;
52 
-    opacity: 0.05;
44 
+    opacity: 0.1;
53 45 
 }
54 46
55 47 
 .splash-container {
 
@@ -81,13 +73,30 @@
81 73 
     font-size: 1.8em;
82 74 
 }
83 75
76 
+.splash-text h2 {
77 
+    margin: 0.5em 0 0.5em 0;
78 
+    color: var(--md-primary-bg-color);
79 
+    font-size: 1.25em;
80 
+}
81 
+
84 82 
 .splash-image > * {
85 83 
     width: 80%;
86 84 
     border-radius: 32px;
87 85 
     border: 4px solid var(--md-primary-fg-color--light);
88 86 
 }
89 87
88 
+#splash nav {
89 
+    width: 90%;
90 
+    display: flex;
91 
+    justify-content: space-around;
92 
+    flex-wrap: wrap;
93 
+    text-align: center;
94 
+    margin: 24px auto;
95 
+    row-gap: 16px;
96 
+}
97 
+
90 98 
 @media screen and (min-width: 1220px) {
99 
+/*
91 100 
     .splash-container {
92 101 
         align-items: center;
93 102 
         flex-direction: row;
 
@@ -108,6 +117,20 @@
108 117 
     .splash-image > * {
109 118 
         width: 100%;
110 119 
     }
120 
+*/
121 
+}
122 
+
123 
+.md-button:not(:hover,:focus) {
124 
+    /*background-color: var(--md-primary-fg-color) !important;*/
125 
+    background-color: none !important;
126 
+    border-color: var(--md-primary-bg-color) !important;
127 
+    color: var(--md-primary-bg-color) !important;
128 
+}
129 
+
130 
+.md-button.md-button--primary:not(:hover,:focus) {
131 
+    background-color: var(--md-primary-bg-color) !important;
132 
+    border-color: var(--md-primary-bg-color) !important;
133 
+    color: var(--md-primary-fg-color) !important;
111 134 
 }
112 135
113 136 
 @keyframes appear {
 
@@ -128,13 +151,16 @@
128 151 
 <section id="splash">
129 152 
     <div class="splash-container md-grid">
130 153 
         <div class="splash-text md-typeset appear text-center">
131 
-            <h1>&#x2728; encant<span style="color: #ffd500">ar</span>.js &#x2728;</h1>
132 
-            <p>The Augmented Reality engine that will enchant you!</p>
133 
-            <a href="{{ './getting-started' | url }}" class="md-button">Get started</a>
154 
+            <h1>encant<em>ar</em>.js</h1>
155 
+            <h2>GPU-accelerated Augmented Reality for the web</h2>
156 
+            <nav>
157 
+                <a href="{{ './home' | url }}" class="md-button md-button--primary" id="splash-get-started" data-goatcounter-click>Get started</a>
158 
+                <a href="{{ './demos/hello-aframe/poster.html' | url }}" class="md-button" target="_blank" id="splash-try-demo" data-goatcounter-click>Try a demo</a>
159 
+            </nav>
134 160 
         </div>
135 161 
         <!--
136 
-        <div class="splash-image">
137 
-            <video poster="{{ './img/demo-cool3.webp' | url }}" muted loop playsinline autoplay>
162 
+        <div class="splash-image appear">
163 
+            <video poster="{{ './img/demo-cat.gif' | url }}" muted loop playsinline autoplay>
138 164 
                 <source src="{{ './img/demo-cool3.webm' | url }}" type="video/webm" />
139 165 
                 <source src="{{ './img/demo-cool3.mp4' | url }}" type="video/mp4" />
140 166 
             </video>

+ 6
- 4
docs_overrides/main.html Wyświetl plik 

@@ -14,8 +14,10 @@
14 14 
 <script data-goatcounter="https://encantar-js.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
15 15 
 {% endblock %}
16 16
17 
-{% block _announce %}
18 
-<a href="#" target="_blank" style="color:white"></a>
17 
+{% block announce %}
18 
+<section id="announcement">
19 
+Follow the developer <a href="https://www.youtube.com/alemart88" target="_blank" rel="external">@alemart88</a>
20 
+</section>
19 21 
 {% endblock %}
20 22
21 23 
 {% block content %}
 
@@ -28,8 +30,8 @@
28 30 
 </button>
29 31 
 <section id="support-widget" class="md-typeset invisible">
30 32 
     <h4>Technical support</h4>
31 
-    <p>Get expert guidance on WebAR with encantar.js by contacting the developer at <a href="#" class="support-link" id="technical-support-widget" data-goatcounter-click></a>.</p>
32 
-    <p>If you have any projects that you want created or modified, feel free to get in touch!</p>
33 
+    <p>Get expert guidance by contacting <a href="#" class="support-link" id="technical-support-widget" data-goatcounter-click></a>.</p>
34 
+    <p>Not a technical person? Get help with installation, maintenance, custom development and more. <a href="#" class="support-link" id="technical-support-widget-services" data-goatcounter-click>Contact support</a> for professional services.</p>
33 35 
 </section>
34 36 
 <script>
35 37 
 document.addEventListener('DOMContentLoaded', function() {

+ 9
- 0
docs_overrides/style/extra.css Wyświetl plik 

@@ -80,4 +80,13 @@ img.responsive {
80 80 
     color: var(--md-accent-bg-color);
81 81 
     border-color: var(--md-accent-fg-color);
82 82 
     background-color: var(--md-accent-fg-color);
83 
+}
84 
+
85 
+#announcement a {
86 
+    font-weight: bold;
87 
+    color: white;
88 
+}
89 
+
90 
+#announcement a:hover, #announcement a:active {
91 
+    color: #ffee11;
83 92 
 }

+ 77
- 9
docs_overrides/support-my-work.html Wyświetl plik 

@@ -1,11 +1,79 @@
1 1 
 <!doctype html>
2 2 
 <html>
3 
-    <head>
4 
-        <meta charset="utf-8">
5 
-        <meta http-equiv="refresh" content="0; url='https://encantar.dev/demos/assets/promo.html'">
6 
-        <title>encantar.js - Support my work</title>
7 
-    </head>
8 
-    <body>
9 
-        <p><a href="https://encantar.dev/demos/assets/promo.html">Redirecting...</a></p>
10 
-    </body>
11 
-</html>
3 
+<head>
4 
+  <meta charset="utf-8">
5 
+  <meta name="description" content="encantar.js: GPU-accelerated Augmented Reality for the web">
6 
+  <meta name="author" content="Alexandre Martins">
7 
+  <meta name="viewport" content="width=device-width,initial-scale=1">
8 
+  <title>Thank you for trying encantar.js!</title>
9 
+  <style>
10 
+  html {
11 
+    line-height: 1.6;
12 
+    margin: 0.5em max(1ch, calc((100vw - 56ch) / 2));
13 
+    font-size: clamp(1rem, 2vw, 2rem);
14 
+    font-family: serif;
15 
+    background: #fffae9;
16 
+    color: #1a170d;
17 
+  }
18 
+  a:any-link {
19 
+    color: #857952;
20 
+  }
21 
+  .button {
22 
+    display: inline-block;
23 
+    margin: 0.5em 0;
24 
+    padding: 1em 2em;
25 
+    position: relative;
26 
+    left: 50%;
27 
+    transform: translateX(-50%);
28 
+    /*background: #e9e0c2;*/
29 
+    background: #fff12c;
30 
+    color: #d88519 !important;
31 
+    border-radius: 64px;
32 
+    text-decoration: none;
33 
+    font-weight: bold;
34 
+    transition: transform 0.125s ease-out;
35 
+  }
36 
+  .button:hover {
37 
+    transform: translateX(-50%) scale(1.0625);
38 
+  }
39 
+  h1 {
40 
+    font-size: 1.33em;
41 
+  }
42 
+  h2 {
43 
+    font-size: 1em;
44 
+  }
45 
+  </style>
46 
+  <script data-goatcounter="https://encantar-js.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
47 
+  <script>
48 
+  document.addEventListener('DOMContentLoaded', function() {
49 
+    var salad = 'nbjmup;tvqqpsuAfodboubs/efw';
50 
+    var link = salad.split('').map(c => String.fromCharCode(c.charCodeAt(0)-1)).join('');
51 
+    document.querySelectorAll('a.email').forEach(function(a) {
52 
+      a.href = link;
53 
+      if(a.innerText == '')
54 
+        a.innerText = link.substring(7);
55 
+    });
56 
+  });
57 
+  </script>
58 
+</head>
59 
+<body>
60 
+
61 
+<h1>Thank you for trying encantar.js!</h1>
62 
+
63 
+<h2>Would you like to see more of open-source AR?</h2>
64 
+
65 
+<p>encantar.js is developed independently. Your support is important for the work to continue. Support it by purchasing your copy!</p>
66 
+
67 
+<a href="https://encantar.gumroad.com/l/encantar" rel="external" target="_blank" class="button" id="support-purchase-button" data-goatcounter-click>Support this work</a>
68 
+
69 
+<h2>Spread the word!</h2>
70 
+
71 
+<p>Are you building something cool? Share it on social media! If you're enchanted by encantar.js, why wouldn't you let your friends know about this tech and what you're building with it? &#x1F60E;</p>
72 
+
73 
+<h2>Technical support</h2>
74 
+
75 
+<p>Need help? Get expert guidance on WebAR with encantar.js by contacting <a href="#" class="email" id="contact-technical-support" data-goatcounter-click></a>.</p>
76 
+<p>Not a technical person? Get help with installation, maintenance, custom development and more. <a href="#" class="email" id="contact-technical-support2" data-goatcounter-click>Contact support</a> for professional services.</p>
77 
+
78 
+</body>
79 
+</html>

+ 7
- 6
mkdocs.yml Wyświetl plik 

@@ -17,6 +17,8 @@ theme:
17 17 
   palette:
18 18 
     primary: deep purple
19 19 
     accent: yellow
20 
+  logo: 'img/logo.png'
21 
+  favicon: 'img/favicon.png'
20 22
21 23 
 extra_css: [ 'style/extra.css' ]
22 24 
 extra_javascript: [ 'js/extra.js' ]
 
@@ -53,18 +55,17 @@ dev_addr: 127.0.0.1:8008
53 55
54 56 
 nav:
55 57 
   - 'Home':
56 
-    - 'Welcome!': 'index.md'
58 
+    - 'Home': 'home.md'
57 59 
     - 'Download': 'download.md'
58 60 
     - 'Demos': 'demos.md'
59 61 
     - 'Add-Ons': 'addons/index.md'
60 
-    - 'Learn': 'tutorial/introduction.md'
62 
+    - 'Learn': 'tutorial/index.md'
61 63 
     - 'API Reference': 'api/index.md'
62 
-    - 'Recommendations': 'recommendations.md'
63 
-    - 'Guidelines for Images': 'guidelines-for-images.md'
64 64 
     - 'Support my work': 'support-my-work.md'
65 65 
     - 'License': 'license.md'
66 66 
   - 'Download': 'download.md'
67 
-  - 'Demos': 'demos.md'
67 
+  - 'Demos':
68 
+    - 'Demos': 'demos.md'
68 69 
   - 'Add-Ons':
69 70 
     - 'Add-Ons': 'addons/index.md'
70 71 
     - 'AR Button API': 'addons/ar-button.md'
 
@@ -73,7 +74,7 @@ nav:
73 74 
     - 'Asset Manager API': 'addons/asset-manager.md'
74 75 
     - 'More Add-Ons': 'addons/more-addons.md'
75 76 
   - 'Learn':
76 
-    - 'Introduction': 'tutorial/introduction.md'
77 
+    - 'Introduction': 'tutorial/index.md'
77 78 
     - 'Concepts': 'tutorial/concepts.md'
78 79 
     - 'Set up a web server': 'tutorial/set-up-a-web-server.md'
79 80 
     - 'Set up the tracker': 'tutorial/set-up-the-tracker.md'

Napisz Podgląd
Ładowanie…
Anuluj
Zapisz