Bladeren bron

Rename folder

customisations
alemart 9 maanden geleden
bovenliggende
commit
692f106dd3

+ 1
- 1
docs/api/session.md Bestand weergeven

@@ -1,6 +1,6 @@
1 1
 # Session
2 2
 
3
-A central component of a WebAR experience. Read the [concepts](../getting-started/concepts.md) for more information.
3
+A central component of a WebAR experience. Read the [concepts](../tutorial/concepts.md) for more information.
4 4
 
5 5
 ## Instantiation
6 6
 

+ 1
- 1
docs/api/source.md Bestand weergeven

@@ -1,3 +1,3 @@
1 1
 # Source
2 2
 
3
-An abstraction representing a source of data that is meant to be linked to a [session](session.md). A video is a typical source of data. Sources of data feed the [trackers](tracker.md). Refer to the [concepts](../getting-started/concepts.md) for more information.
3
+An abstraction representing a source of data that is meant to be linked to a [session](session.md). A video is a typical source of data. Sources of data feed the [trackers](tracker.md). Refer to the [concepts](../tutorial/concepts.md) for more information.

+ 1
- 1
docs/api/tracker.md Bestand weergeven

@@ -1,6 +1,6 @@
1 1
 # Tracker
2 2
 
3
-An interface that represents a generic tracker. Trackers analyze input data in some way and are meant to be attached to a [session](session.md). Refer to the [concepts](../getting-started/concepts.md) for more information.
3
+An interface that represents a generic tracker. Trackers analyze input data in some way and are meant to be attached to a [session](session.md). Refer to the [concepts](../tutorial/concepts.md) for more information.
4 4
 
5 5
 An [Image Tracker](image-tracker.md) is an implementation of a tracker.
6 6
 

+ 1
- 1
docs/faq.md Bestand weergeven

@@ -6,7 +6,7 @@ encantar.js is a standalone GPU-accelerated Augmented Reality engine for the web
6 6
 
7 7
 ## What is WebAR?
8 8
 
9
-Refer to the [concepts](./getting-started/concepts.md).
9
+Refer to the [concepts](./tutorial/concepts.md).
10 10
 
11 11
 ## What are your recommendations for WebAR?
12 12
 

+ 0
- 56
docs/getting-started/guidelines-for-images.md Bestand weergeven

@@ -1,56 +0,0 @@
1
-# Guidelines for Reference Images
2
-
3
-Some images are more suitable for tracking than others. For best results, pick images that are distinct, asymmetric and detailed. Let me show you some examples.
4
-
5
-## Distinct
6
-
7
-A distinct image has distinguishable areas - quite unlike a repetitive pattern!
8
-
9
-| Distinct :heavy_check_mark: | Not distinct :x: |
10
-| --------------------------- | ---------------- |
11
-| [![](../img/guidelines-for-images-10.jpg "Based on free image from https://pixabay.com/pt/illustrations/unic%c3%b3rnio-gal%c3%a1xia-fantasia-estrela-3115021/ (Tarishart)")](../img/guidelines-for-images-10.jpg){ ._blank } | [![](../img/guidelines-for-images-1.jpg "Free image from https://www.pexels.com/pt-br/foto/papel-de-parede-abstrato-roxo-e-azul-430207/ (Scott Webb)")](../img/guidelines-for-images-1.jpg){ ._blank } |
12
-| [![](../img/guidelines-for-images-9.jpg "Based on free images from https://pixabay.com/pt/illustrations/o-macaco-chimpanz%c3%a9-macaco-banana-4701265/ (Dmitry Abramov) and https://pixabay.com/pt/vectors/panorama-crep%c3%basculo-luz-noite-c%c3%a9u-1844227/ (Wild0ne)")](../img/guidelines-for-images-9.jpg){ ._blank } | [![](../img/guidelines-for-images-4.jpg "Free image from https://www.pexels.com/pt-br/foto/imagem-completa-da-estrutura-arquitetonica-248921/ (Pixabay)")](../img/guidelines-for-images-4.jpg){ ._blank } |
13
-
14
-## Asymmetric
15
-
16
-Asymmetric images help the engine determine their orientation. When evaluating symmetry, you must not take colors into account.
17
-
18
-| Asymmetric :heavy_check_mark: | Symmetric :x: |
19
-| ----------------------------- | ------------- |
20
-| [![](../img/guidelines-for-images-12.jpg "Free image from https://www.pexels.com/pt-br/foto/gatinho-branco-e-cinza-cheirando-flor-da-margarida-branca-1472999/ (Alex Bargain)")](../img/guidelines-for-images-12.jpg){ ._blank } | [![](../img/guidelines-for-images-2.jpg "Free image from https://www.pexels.com/pt-br/foto/frutas-citricas-brancas-vermelhas-e-amarelas-1415734/ (Aleksandar Pasaric)")](../img/guidelines-for-images-2.jpg){ ._blank } |
21
-| [![](../img/guidelines-for-images-11.jpg "Based on free image from https://pixabay.com/pt/photos/sof%c3%a1-surreal-olhos-cachorro-arte-749629/ (0fjd125gk87)")](../img/guidelines-for-images-11.jpg){ ._blank } | [![](../img/guidelines-for-images-5.jpg "Free image from https://www.pexels.com/pt-br/foto/lapis-de-cor-amarelo-e-azul-1762851/ (Ann H)")](../img/guidelines-for-images-5.jpg){ ._blank } |
22
-
23
-## Detailed
24
-
25
-A detailed image has lots of details with sufficient contrast. There's not much blank space!
26
-
27
-| Detailed :heavy_check_mark: | Not detailed :x: |
28
-| ---------------------------------- | ----------------------- |
29
-| [![](../img/guidelines-for-images-3.jpg "Free image from https://www.pexels.com/pt-br/foto/pagode-verde-321900/ (Anthony)")](../img/guidelines-for-images-3.jpg){ ._blank } | [![](../img/guidelines-for-images-7.jpg "Free image from https://www.pexels.com/pt-br/foto/6985119/ (Gradienta)")](../img/guidelines-for-images-7.jpg){ ._blank } |
30
-| [![](../img/guidelines-for-images-8.jpg "Free image from https://www.pexels.com/pt-br/foto/fotografia-de-close-up-de-arara-azul-e-amarela-1453550/ (Susanne Jutzeler)")](../img/guidelines-for-images-8.jpg){ ._blank } | [![](../img/guidelines-for-images-6.jpg "Free image from https://unsplash.com/photos/KF-r4-KM9pM (Gian Gomez)")](../img/guidelines-for-images-6.jpg){ ._blank } |
31
-
32
-## Other considerations
33
-
34
-### Aspect ratio
35
-
36
-Prefer images whose aspect ratio (the ratio _width ÷ height_) is somewhere between the aspect ratio of the target device (16:9 is a common aspect ratio) and 1:1 (a square). It's okay to use landscape or portrait mode - the engine will make the necessary adjustments.
37
-
38
-### Resolution
39
-
40
-Using a Ultra HD image is of no benefit, because the engine will downscale it. A tiny image isn't desirable either, because some details may be lost and the engine will likely have to upscale it. Use an image that has its details preserved. It's even better if that image can be loaded quickly!
41
-
42
-### Physical materials
43
-
44
-When printing your images, keep the following in mind:
45
-
46
-- Prefer non-reflective materials. Avoid shiny materials such as glossy paper. Reflections may generate artifacts in the video and interfere with the tracking.
47
-- Materials should be rigid. Don't use something that can be distorted too easily.
48
-- Use quality materials.
49
-
50
-### Brightness on screens
51
-
52
-If you're using a screen to display your images, make sure to adjust its 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
-
54
-### Test it!
55
-
56
-In addition to the guidelines presented above, you should always experiment with your images and make sure it all works as intended. Keep in mind that proper lighting of the physical environment is also very important!

+ 56
- 0
docs/guidelines-for-images.md Bestand weergeven

@@ -0,0 +1,56 @@
1
+# Guidelines for Reference Images
2
+
3
+Some images are more suitable for tracking than others. For best results, pick images that are distinct, asymmetric and detailed. Let me show you some examples.
4
+
5
+## Distinct
6
+
7
+A distinct image has distinguishable areas - quite unlike a repetitive pattern!
8
+
9
+| Distinct :heavy_check_mark: | Not distinct :x: |
10
+| --------------------------- | ---------------- |
11
+| [![](./img/guidelines-for-images-10.jpg "Based on free image from https://pixabay.com/pt/illustrations/unic%c3%b3rnio-gal%c3%a1xia-fantasia-estrela-3115021/ (Tarishart)")](./img/guidelines-for-images-10.jpg){ ._blank } | [![](./img/guidelines-for-images-1.jpg "Free image from https://www.pexels.com/pt-br/foto/papel-de-parede-abstrato-roxo-e-azul-430207/ (Scott Webb)")](./img/guidelines-for-images-1.jpg){ ._blank } |
12
+| [![](./img/guidelines-for-images-9.jpg "Based on free images from https://pixabay.com/pt/illustrations/o-macaco-chimpanz%c3%a9-macaco-banana-4701265/ (Dmitry Abramov) and https://pixabay.com/pt/vectors/panorama-crep%c3%basculo-luz-noite-c%c3%a9u-1844227/ (Wild0ne)")](./img/guidelines-for-images-9.jpg){ ._blank } | [![](./img/guidelines-for-images-4.jpg "Free image from https://www.pexels.com/pt-br/foto/imagem-completa-da-estrutura-arquitetonica-248921/ (Pixabay)")](./img/guidelines-for-images-4.jpg){ ._blank } |
13
+
14
+## Asymmetric
15
+
16
+Asymmetric images help the engine determine their orientation. When evaluating symmetry, you must not take colors into account.
17
+
18
+| Asymmetric :heavy_check_mark: | Symmetric :x: |
19
+| ----------------------------- | ------------- |
20
+| [![](./img/guidelines-for-images-12.jpg "Free image from https://www.pexels.com/pt-br/foto/gatinho-branco-e-cinza-cheirando-flor-da-margarida-branca-1472999/ (Alex Bargain)")](./img/guidelines-for-images-12.jpg){ ._blank } | [![](./img/guidelines-for-images-2.jpg "Free image from https://www.pexels.com/pt-br/foto/frutas-citricas-brancas-vermelhas-e-amarelas-1415734/ (Aleksandar Pasaric)")](./img/guidelines-for-images-2.jpg){ ._blank } |
21
+| [![](./img/guidelines-for-images-11.jpg "Based on free image from https://pixabay.com/pt/photos/sof%c3%a1-surreal-olhos-cachorro-arte-749629/ (0fjd125gk87)")](./img/guidelines-for-images-11.jpg){ ._blank } | [![](./img/guidelines-for-images-5.jpg "Free image from https://www.pexels.com/pt-br/foto/lapis-de-cor-amarelo-e-azul-1762851/ (Ann H)")](./img/guidelines-for-images-5.jpg){ ._blank } |
22
+
23
+## Detailed
24
+
25
+A detailed image has lots of details with sufficient contrast. There's not much blank space!
26
+
27
+| Detailed :heavy_check_mark: | Not detailed :x: |
28
+| ---------------------------------- | ----------------------- |
29
+| [![](./img/guidelines-for-images-3.jpg "Free image from https://www.pexels.com/pt-br/foto/pagode-verde-321900/ (Anthony)")](./img/guidelines-for-images-3.jpg){ ._blank } | [![](./img/guidelines-for-images-7.jpg "Free image from https://www.pexels.com/pt-br/foto/6985119/ (Gradienta)")](./img/guidelines-for-images-7.jpg){ ._blank } |
30
+| [![](./img/guidelines-for-images-8.jpg "Free image from https://www.pexels.com/pt-br/foto/fotografia-de-close-up-de-arara-azul-e-amarela-1453550/ (Susanne Jutzeler)")](./img/guidelines-for-images-8.jpg){ ._blank } | [![](./img/guidelines-for-images-6.jpg "Free image from https://unsplash.com/photos/KF-r4-KM9pM (Gian Gomez)")](./img/guidelines-for-images-6.jpg){ ._blank } |
31
+
32
+## Other considerations
33
+
34
+### Aspect ratio
35
+
36
+Prefer images whose aspect ratio (the ratio _width ÷ height_) is somewhere between the aspect ratio of the target device (16:9 is a common aspect ratio) and 1:1 (a square). It's okay to use landscape or portrait mode - the engine will make the necessary adjustments.
37
+
38
+### Resolution
39
+
40
+Using a Ultra HD image is of no benefit, because the engine will downscale it. A tiny image isn't desirable either, because some details may be lost and the engine will likely have to upscale it. Use an image that has its details preserved. It's even better if that image can be loaded quickly!
41
+
42
+### Physical materials
43
+
44
+When printing your images, keep the following in mind:
45
+
46
+- Prefer non-reflective materials. Avoid shiny materials such as glossy paper. Reflections may generate artifacts in the video and interfere with the tracking.
47
+- Materials should be rigid. Don't use something that can be distorted too easily.
48
+- Use quality materials.
49
+
50
+### Brightness on screens
51
+
52
+If you're using a screen to display your images, make sure to adjust its 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
+
54
+### Test it!
55
+
56
+In addition to the guidelines presented above, you should always experiment with your images and make sure it all works as intended. Keep in mind that proper lighting of the physical environment is also very important!

+ 1
- 1
docs/index.md Bestand weergeven

@@ -6,7 +6,7 @@ The Augmented Reality engine for the web that will enchant you!
6 6
 
7 7
 [:sparkles: Demos](./demos.md){ .md-button ._blank }
8 8
 [:eyes: Try it!](https://alemart.github.io/encantar-js/demos/hello-three/poster.html){ .md-button ._blank }
9
-[:books: Learn](./getting-started/introduction.md){ .md-button } [:heart:{ .heart } Sponsor](./support-my-work.md){ .md-button }
9
+[:books: Learn](./tutorial/introduction.md){ .md-button } [:heart:{ .heart } Sponsor](./support-my-work.md){ .md-button }
10 10
 
11 11
 ## Features
12 12
 

docs/getting-started/activate-your-webcam.md → docs/tutorial/activate-your-webcam.md Bestand weergeven


docs/getting-started/augment-the-scene.md → docs/tutorial/augment-the-scene.md Bestand weergeven


docs/getting-started/concepts.md → docs/tutorial/concepts.md Bestand weergeven


docs/getting-started/introduction.md → docs/tutorial/introduction.md Bestand weergeven


docs/getting-started/next-steps.md → docs/tutorial/next-steps.md Bestand weergeven


docs/getting-started/set-up-a-web-server.md → docs/tutorial/set-up-a-web-server.md Bestand weergeven


docs/getting-started/set-up-the-session.md → docs/tutorial/set-up-the-session.md Bestand weergeven


docs/getting-started/set-up-the-tracker.md → docs/tutorial/set-up-the-tracker.md Bestand weergeven

@@ -6,7 +6,7 @@ In this section we'll learn how to set up the tracker. Later on we'll see how to
6 6
 
7 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 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:
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:
10 10
 
11 11
 <figure markdown>
12 12
 [![../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/"){ width=512 }](../assets/my-reference-image.webp){ ._blank }

+ 11
- 11
mkdocs.yml Bestand weergeven

@@ -50,23 +50,23 @@ nav:
50 50
     - 'Welcome!': 'index.md'
51 51
     - 'Download': 'download.md'
52 52
     - 'Demos': 'demos.md'
53
-    - 'Learn': 'getting-started/introduction.md'
53
+    - 'Learn': 'tutorial/introduction.md'
54 54
     - 'API Reference': 'api/ar.md'
55
-    - 'Guidelines for Images': 'getting-started/guidelines-for-images.md'
55
+    - 'Guidelines for Images': 'guidelines-for-images.md'
56 56
     - 'Support my work': 'support-my-work.md'
57 57
     - 'License': 'license.md'
58 58
   - 'Download': 'download.md'
59 59
   - 'Demos': 'demos.md'
60 60
   - 'Learn':
61
-    - 'Introduction': 'getting-started/introduction.md'
62
-    - 'Concepts': 'getting-started/concepts.md'
63
-    - 'Set up a web server': 'getting-started/set-up-a-web-server.md'
64
-    - 'Set up the tracker': 'getting-started/set-up-the-tracker.md'
65
-    - 'Set up the session': 'getting-started/set-up-the-session.md'
66
-    - 'Activate your webcam': 'getting-started/activate-your-webcam.md'
67
-    - 'Augment the scene': 'getting-started/augment-the-scene.md'
68
-    - 'Next steps': 'getting-started/next-steps.md'
69
-    - 'Guidelines for Images': 'getting-started/guidelines-for-images.md'
61
+    - 'Introduction': 'tutorial/introduction.md'
62
+    - 'Concepts': 'tutorial/concepts.md'
63
+    - 'Set up a web server': 'tutorial/set-up-a-web-server.md'
64
+    - 'Set up the tracker': 'tutorial/set-up-the-tracker.md'
65
+    - 'Set up the session': 'tutorial/set-up-the-session.md'
66
+    - 'Activate your webcam': 'tutorial/activate-your-webcam.md'
67
+    - 'Augment the scene': 'tutorial/augment-the-scene.md'
68
+    - 'Next steps': 'tutorial/next-steps.md'
69
+    - 'Guidelines for Images': 'guidelines-for-images.md'
70 70
     - 'Questions & Answers': 'faq.md'
71 71
   - 'API':
72 72
     - 'General':

Laden…
Annuleren
Opslaan