Initial commit

.gitignore

@@ -0,0 +1,23 @@
+# vscode
+.vscode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# vim
+# swap
+[._]*.s[a-v][a-z]
+[._]*.sw[a-p]
+[._]s[a-v][a-z]
+[._]sw[a-p]
+# session
+Session.vim
+# temporary
+.netrwhist
+*~
+
+# mine
+node_modules/*
+dist/*.map

CHANGES.md

@@ -0,0 +1,5 @@
+# Release notes
+
+## 0.1.0 - April 21st, 2022
+
+* Initial release

CONTRIBUTING.md

@@ -0,0 +1,19 @@
+# How to contribute
+
+Thank you for your interest in contributing to MARTINS.js! Here are some ways you can contribute:
+
+## Support my work
+
+I develop MARTINS.js independently and I release it as open-source software. Developing and maintaining this project requires a lot of skill, and I think it must be sustainable. I ask for support to be able to continue this work. If WebAR is meaningful to you or to your business, please [support my work with a paid membership](https://alemart.github.io/martins-js/support-my-work) and [purchase my WebAR demos](https://alemart.github.io/martins-js/demos).
+
+## Spread the word
+
+Augmented Reality is a joy to work with. :sunglasses: Spread the joy to your social media! Tell your friends and clients about the amazing, creative #WebAR experiences you are building with #MARTINSjs. They will surely like to hear from you, and you will also be helping this project by spreading the word about it.
+
+## Help others
+
+If you're technically savvy, please offer your advice to others asking for help on the community at [GitHub Discussions](https://github.com/alemart/martins-js/discussions). Even though there is complexity to this project, some questions may be technically simple, and a competent developer may be able to answer them accurately. If you feel that you're able to answer a question accurately, please do. You will be helping others and also learning for yourself in the process.
+
+## Pull requests
+
+I do not accept any pull requests to this repository at this time. If you make a suggestion and include some code as a proof-of-concept, I will most likely appreciate it. However, please do not feel offended if I do not use the code you provide, and instead decide to rewrite it.

LICENSE-PRO.md

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

LICENSE.md

@@ -0,0 +1,660 @@
+### GNU AFFERO GENERAL PUBLIC LICENSE
+
+Version 3, 19 November 2007
+
+Copyright (C) 2007 Free Software Foundation, Inc.
+<https://fsf.org/>
+
+Everyone is permitted to copy and distribute verbatim copies of this
+license document, but changing it is not allowed.
+
+### Preamble
+
+The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works. By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains
+free software for all its users.
+
+When we speak of free software, we are referring to freedom, not
+price. Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate. Many developers of free software are heartened and
+encouraged by the resulting cooperation. However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community. It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server. Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals. This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing
+under this license.
+
+The precise terms and conditions for copying, distribution and
+modification follow.
+
+### TERMS AND CONDITIONS
+
+#### 0. Definitions.
+
+"This License" refers to version 3 of the GNU Affero General Public
+License.
+
+"Copyright" also means copyright-like laws that apply to other kinds
+of works, such as semiconductor masks.
+
+"The Program" refers to any copyrightable work licensed under this
+License. Each licensee is addressed as "you". "Licensees" and
+"recipients" may be individuals or organizations.
+
+To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of
+an exact copy. The resulting work is called a "modified version" of
+the earlier work or a work "based on" the earlier work.
+
+A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies. Mere interaction with a user
+through a computer network, with no transfer of a copy, is not
+conveying.
+
+An interactive user interface displays "Appropriate Legal Notices" to
+the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License. If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+#### 1. Source Code.
+
+The "source code" for a work means the preferred form of the work for
+making modifications to it. "Object code" means any non-source form of
+a work.
+
+A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form. A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities. However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work. For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+The Corresponding Source need not include anything that users can
+regenerate automatically from other parts of the Corresponding Source.
+
+The Corresponding Source for a work in source code form is that same
+work.
+
+#### 2. Basic Permissions.
+
+All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met. This License explicitly affirms your unlimited
+permission to run the unmodified Program. The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work. This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+You may make, run and propagate covered works that you do not convey,
+without conditions so long as your license otherwise remains in force.
+You may convey covered works to others for the sole purpose of having
+them make modifications exclusively for you, or provide you with
+facilities for running those works, provided that you comply with the
+terms of this License in conveying all material for which you do not
+control copyright. Those thus making or running the covered works for
+you must do so exclusively on your behalf, under your direction and
+control, on terms that prohibit them from making any copies of your
+copyrighted material outside their relationship with you.
+
+Conveying under any other circumstances is permitted solely under the
+conditions stated below. Sublicensing is not allowed; section 10 makes
+it unnecessary.
+
+#### 3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such
+circumvention is effected by exercising rights under this License with
+respect to the covered work, and you disclaim any intention to limit
+operation or modification of the work as a means of enforcing, against
+the work's users, your or third parties' legal rights to forbid
+circumvention of technological measures.
+
+#### 4. Conveying Verbatim Copies.
+
+You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+#### 5. Conveying Modified Source Versions.
+
+You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these
+conditions:
+
+-   a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+-   b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under
+    section 7. This requirement modifies the requirement in section 4
+    to "keep intact all notices".
+-   c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy. This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged. This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+-   d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit. Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+#### 6. Conveying Non-Source Forms.
+
+You may convey a covered work in object code form under the terms of
+sections 4 and 5, provided that you also convey the machine-readable
+Corresponding Source under the terms of this License, in one of these
+ways:
+
+-   a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+-   b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the Corresponding
+    Source from a network server at no charge.
+-   c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source. This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+-   d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge. You need not require recipients to copy the
+    Corresponding Source along with the object code. If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source. Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+-   e) Convey the object code using peer-to-peer transmission,
+    provided you inform other peers where the object code and
+    Corresponding Source of the work are being offered to the general
+    public at no charge under subsection 6d.
+
+A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal,
+family, or household purposes, or (2) anything designed or sold for
+incorporation into a dwelling. In determining whether a product is a
+consumer product, doubtful cases shall be resolved in favor of
+coverage. For a particular product received by a particular user,
+"normally used" refers to a typical or common use of that class of
+product, regardless of the status of the particular user or of the way
+in which the particular user actually uses, or expects or is expected
+to use, the product. A product is a consumer product regardless of
+whether the product has substantial commercial, industrial or
+non-consumer uses, unless such uses represent the only significant
+mode of use of the product.
+
+"Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to
+install and execute modified versions of a covered work in that User
+Product from a modified version of its Corresponding Source. The
+information must suffice to ensure that the continued functioning of
+the modified object code is in no case prevented or interfered with
+solely because modification has been made.
+
+If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information. But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or
+updates for a work that has been modified or installed by the
+recipient, or for the User Product in which it has been modified or
+installed. Access to a network may be denied when the modification
+itself materially and adversely affects the operation of the network
+or violates the rules and protocols for communication across the
+network.
+
+Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+#### 7. Additional Terms.
+
+"Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law. If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it. (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.) You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders
+of that material) supplement the terms of this License with terms:
+
+-   a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+-   b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+-   c) Prohibiting misrepresentation of the origin of that material,
+    or requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+-   d) Limiting the use for publicity purposes of names of licensors
+    or authors of the material; or
+-   e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+-   f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions
+    of it) with contractual assumptions of liability to the recipient,
+    for any liability that these contractual assumptions directly
+    impose on those licensors and authors.
+
+All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10. If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term. If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions; the
+above requirements apply either way.
+
+#### 8. Termination.
+
+You may not propagate or modify a covered work except as expressly
+provided under this License. Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+However, if you cease all violation of this License, then your license
+from a particular copyright holder is reinstated (a) provisionally,
+unless and until the copyright holder explicitly and finally
+terminates your license, and (b) permanently, if the copyright holder
+fails to notify you of the violation by some reasonable means prior to
+60 days after the cessation.
+
+Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License. If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+#### 9. Acceptance Not Required for Having Copies.
+
+You are not required to accept this License in order to receive or run
+a copy of the Program. Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance. However,
+nothing other than this License grants you permission to propagate or
+modify any covered work. These actions infringe copyright if you do
+not accept this License. Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+#### 10. Automatic Licensing of Downstream Recipients.
+
+Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License. You are not responsible
+for enforcing compliance by third parties with this License.
+
+An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations. If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License. For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+#### 11. Patents.
+
+A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based. The
+work thus licensed is called the contributor's "contributor version".
+
+A contributor's "essential patent claims" are all patent claims owned
+or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version. For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement). To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients. "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+A patent license is "discriminatory" if it does not include within the
+scope of its coverage, prohibits the exercise of, or is conditioned on
+the non-exercise of one or more of the rights that are specifically
+granted under this License. You may not convey a covered work if you
+are a party to an arrangement with a third party that is in the
+business of distributing software, under which you make payment to the
+third party based on the extent of your activity of conveying the
+work, and under which the third party grants, to any of the parties
+who would receive the covered work from you, a discriminatory patent
+license (a) in connection with copies of the covered work conveyed by
+you (or copies made from those copies), or (b) primarily for and in
+connection with specific products or compilations that contain the
+covered work, unless you entered into that arrangement, or that patent
+license was granted, prior to 28 March 2007.
+
+Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+#### 12. No Surrender of Others' Freedom.
+
+If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License. If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under
+this License and any other pertinent obligations, then as a
+consequence you may not convey it at all. For example, if you agree to
+terms that obligate you to collect a royalty for further conveying
+from those to whom you convey the Program, the only way you could
+satisfy both those terms and this License would be to refrain entirely
+from conveying the Program.
+
+#### 13. Remote Network Interaction; Use with the GNU General Public License.
+
+Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your
+version supports such interaction) an opportunity to receive the
+Corresponding Source of your version by providing access to the
+Corresponding Source from a network server at no charge, through some
+standard or customary means of facilitating copying of software. This
+Corresponding Source shall include the Corresponding Source for any
+work covered by version 3 of the GNU General Public License that is
+incorporated pursuant to the following paragraph.
+
+Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work. The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+#### 14. Revised Versions of this License.
+
+The Free Software Foundation may publish revised and/or new versions
+of the GNU Affero General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+Each version is given a distinguishing version number. If the Program
+specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation. If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever
+published by the Free Software Foundation.
+
+If the Program specifies that a proxy can decide which future versions
+of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+Later license versions may give you additional or different
+permissions. However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+#### 15. Disclaimer of Warranty.
+
+THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT
+WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND
+PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE
+DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR
+CORRECTION.
+
+#### 16. Limitation of Liability.
+
+IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR
+CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES
+ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT
+NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR
+LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM
+TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER
+PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
+
+#### 17. Interpretation of Sections 15 and 16.
+
+If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+END OF TERMS AND CONDITIONS
+
+### How to Apply These Terms to Your New Programs
+
+If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these
+terms.
+
+To do so, attach the following notices to the program. It is safest to
+attach them to the start of each source file to most effectively state
+the exclusion of warranty; and each file should have at least the
+"copyright" line and a pointer to where the full notice is found.
+
+        <one line to give the program's name and a brief idea of what it does.>
+        Copyright (C) <year>  <name of author>
+
+        This program is free software: you can redistribute it and/or modify
+        it under the terms of the GNU Affero General Public License as
+        published by the Free Software Foundation, either version 3 of the
+        License, or (at your option) any later version.
+
+        This program is distributed in the hope that it will be useful,
+        but WITHOUT ANY WARRANTY; without even the implied warranty of
+        MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+        GNU Affero General Public License for more details.
+
+        You should have received a copy of the GNU Affero General Public License
+        along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper
+mail.
+
+If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source. For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code. There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for
+the specific requirements.
+
+You should also get your employer (if you work as a programmer) or
+school, if any, to sign a "copyright disclaimer" for the program, if
+necessary. For more information on this, and how to apply and follow
+the GNU AGPL, see <https://www.gnu.org/licenses/>.

NOTICE

@@ -0,0 +1,9 @@
+Required Notice: 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

README.md

@@ -0,0 +1,25 @@
+# MARTINS.js WebAR engine
+
+Create amazing Augmented Reality experiences with **MARTINS.js**, a GPU-accelerated Augmented Reality engine for the web.
+
+Get started at <https://alemart.github.io/martins-js/>
+
+![WebAR demo](docs/img/demo-cool3.gif) ![WebAR demo](docs/img/splash.gif)
+
+MARTINS.js is [dual licensed](#author). It is currently in beta.
+
+## 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 and compatible 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.
+* **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.
+
+## Author
+
+MARTINS.js is developed by me, [Alexandre Martins](https://github.com/alemart), a computer scientist from Brazil. This project is dual-licensed. The Free Edition, available to everyone, is licensed under the [AGPL 3.0](docs/license/agpl-3.0.md). The Professional Edition, available to [my supporters](https://alemart.github.io/martins-js/support-my-work/), is licensed under the [Polyform Perimeter 1.0.0](docs/license/PolyForm-Perimeter-1.0.0-1.md).
+
+See [CONTRIBUTING](CONTRIBUTING.md) for information on how you can contribute.

docs/CONTRIBUTING.md

@@ -0,0 +1,19 @@
+# How to contribute
+
+Thank you for your interest in contributing to MARTINS.js! Here are some ways you can contribute:
+
+## Support my work
+
+I develop MARTINS.js independently and I release it as open-source software. Developing and maintaining this project requires a lot of skill, and I think it must be sustainable. I ask for support to be able to continue this work. If WebAR is meaningful to you or to your business, please [support my work with a paid membership](https://alemart.github.io/martins-js/support-my-work) and [purchase my WebAR demos](https://alemart.github.io/martins-js/demos).
+
+## Spread the word
+
+Augmented Reality is a joy to work with. :sunglasses: Spread the joy to your social media! Tell your friends and clients about the amazing, creative #WebAR experiences you are building with #MARTINSjs. They will surely like to hear from you, and you will also be helping this project by spreading the word about it.
+
+## Help others
+
+If you're technically savvy, please offer your advice to others asking for help on the community at [GitHub Discussions](https://github.com/alemart/martins-js/discussions). Even though there is complexity to this project, some questions may be technically simple, and a competent developer may be able to answer them accurately. If you feel that you're able to answer a question accurately, please do. You will be helping others and also learning for yourself in the process.
+
+## Pull requests
+
+I do not accept any pull requests to this repository at this time. If you make a suggestion and include some code as a proof-of-concept, I will most likely appreciate it. However, please do not feel offended if I do not use the code you provide, and instead decide to rewrite it.

docs/api/ar-event-listener.md

@@ -0,0 +1,3 @@
+# AREventListener
+
+A function that is linked to an [AREventTarget](ar-event-target.md). It is called as soon as that [AREventTarget](ar-event-target.md) receives an [AREvent](ar-event.md) of a specific [type](ar-event-type.md). The event is passed as an argument.

docs/api/ar-event-target.md

@@ -0,0 +1,35 @@
+# AREventTarget
+
+An AREventTarget is an object that is able to receive [AREvents](ar-event.md). You may add [event listeners](ar-event-listener.md) to it in order to listen to "relevant changes" in its state.
+
+## Methods
+
+### addEventListener
+
+`target.addEventListener(type: AREventType, listener: AREventListener): void`
+
+Add an event listener to `target`.
+
+**Arguments**
+
+* `type: AREventType`. The type of event you intend to listen to.
+* `listener: AREventListener`. The event listener you intend to add.
+
+**Example**
+
+```js
+session.addEventListener('end', event => {
+    console.log('The session has ended.');
+});
+```
+
+### removeEventListener
+
+`target.removeEventListener(type: AREventType, listener: AREventListener): void`
+
+Remove an event listener from `target`.
+
+**Arguments**
+
+* `type: AREventType`. The type of event you are listening to.
+* `listener: AREventListener`. The event listener you intend to remove.

docs/api/ar-event-type.md

@@ -0,0 +1,3 @@
+# AREventType
+
+An AREventType is a string representing the type of an [AREvent](ar-event.md). The documentation of the different [AREventTargets](ar-event-target.md) (e.g., [Session](session.md)) specify which event types are valid for those targets.

docs/api/ar-event.md

@@ -0,0 +1,11 @@
+# AREvent
+
+An AREvent is an `Event` sent to an [AREventTarget](ar-event-target.md). AREvents are used to notify [AREventListeners](ar-event-listener.md) about "relevant changes" in the state of [AREventTargets](ar-event-target.md).
+
+## Properties
+
+### type
+
+`event.type: AREventType`
+
+An [AREventType](ar-event-type.md) representing the type of the event.

docs/api/camera-source.md

@@ -0,0 +1,42 @@
+# CameraSource
+
+A [source of data](source.md) linked to a webcam.
+
+## Instantiation
+
+### Martins.Source.Camera
+
+`Martins.Source.Camera(settings: object): CameraSource`
+
+Create a new webcam-based source of data with the specified `settings`.
+
+**Arguments**
+
+* `settings: object, optional`. An object with the following keys (all are optional):
+    * `resolution: Resolution`. The desired [resolution](resolution.md) of the video. The higher the resolution, the longer it takes for the video to be uploaded to the GPU, which impacts performance. The lower the resolution, the less accurate the tracking will be. Suggested values: `"md+"`, `"md"`, `"sm+"`.
+    * `aspectRatio: number`. A hint specifying the preferred aspect ratio of the video.
+    * `constraints: MediaTrackConstraints`. Additional video constraints that will be passed to `navigator.mediaDevices.getUserMedia()`.
+
+**Returns**
+
+A new webcam-based source of data.
+
+**Example**
+
+```js
+const webcam = Martins.Source.Camera({
+    resolution: 'md+',
+    constraints: {
+        facingMode: 'environment' // will prefer the rear camera on mobile devices
+        //facingMode: 'user' // will prefer the front camera on mobile devices
+    }
+});
+```
+
+## Properties
+
+### resolution
+
+`source.resolution: Resolution, read-only`
+
+The [resolution](resolution.md) of this source of data.

docs/api/canvas-source.md

@@ -0,0 +1,19 @@
+# CanvasSource
+
+A [source of data](source.md) linked to a `<canvas>` element.
+
+## Instantiation
+
+### Martins.Source.Canvas
+
+`Martins.Source.Canvas(canvas: HTMLCanvasElement): CanvasSource`
+
+Create a new source of data linked to the provided `canvas`.
+
+**Arguments**
+
+* `canvas: HTMLCanvasElement`. A `<canvas>` element.
+
+**Returns**
+
+A new source of data.

docs/api/frame.md

@@ -0,0 +1,32 @@
+# Frame
+
+A `Frame` holds data for augmenting the physical scene with the virtual scene.
+
+## Properties
+
+### session
+
+`frame.session: Session, read-only`
+
+A reference to the [session](session.md).
+
+### results
+
+`frame.results: Iterable<TrackerResult>, read-only`
+
+Use this property to iterate through the [results](tracker-result.md) generated by the [trackers](tracker.md).
+
+**Example**
+
+```js
+function animate(time, frame)
+{
+    for(const result of frame.results) {
+        // ...
+    }
+
+    session.requestAnimationFrame(animate);
+}
+
+session.requestAnimationFrame(animate);
+```

docs/api/gizmos.md

@@ -0,0 +1,11 @@
+# Gizmos
+
+Gizmos provide visual cues about the state of the [trackers](tracker.md). They are particularly useful during development.
+
+## Properties
+
+### visible
+
+`gizmos.visible: boolean`
+
+Whether or not the gizmos are visible.

docs/api/hud.md

@@ -0,0 +1,17 @@
+# HUD
+
+A HUD (Heads Up Display) is an overlay used to display 2D elements that do not correlate with the physical scene. It's part of a [viewport](viewport.md) and occupies its entire space. It appears in front of the augmented scene.
+
+## Properties
+
+### container
+
+`hud.container: HTMLDivElement, read-only`
+
+The container of the HUD.
+
+### visible
+
+`hud.visible: boolean`
+
+Whether or not the HUD is visible.

docs/api/image-tracker-result.md

@@ -0,0 +1,23 @@
+# ImageTrackerResult
+
+A [result](tracker-result.md) generated by an [Image Tracker](image-tracker.md).
+
+## Properties
+
+### tracker
+
+`result.tracker: ImageTracker, read-only`
+
+A reference to the [Image Tracker](image-tracker.md) that generated this result.
+
+### trackables
+
+`result.trackables: TrackableImage[], read-only`
+
+An array of zero or one [TrackableImage](trackable-image.md) object(s).
+
+### viewer
+
+`result.viewer: Viewer | undefined, read-only`
+
+A [viewer](viewer.md) associated with the trackable. If there is no trackable, this property will be `undefined`.

docs/api/image-tracker.md

@@ -0,0 +1,51 @@
+# ImageTracker
+
+A [tracker](tracker.md) that tracks images in a video. Images are tracked using templates known as [reference images](reference-image.md).
+
+## Properties
+
+### state
+
+`tracker.state: string, read-only`
+
+The current state of the tracker.
+
+### database
+
+`tracker.database: ReferenceImageDatabase, read-only`
+
+A [database](reference-image-database.md) of [reference images](reference-image.md).
+
+### resolution
+
+`tracker.resolution: Resolution`
+
+The [resolution](resolution.md) adopted by the computer vision algorithms implemented in the tracker. Higher resolutions improve the tracking quality, but are computationally more expensive.
+
+## Events
+
+An ImageTracker is an [AREventTarget](ar-event-target.md). You can listen to the following events:
+
+### targetfound
+
+A target has been found.
+
+**Properties**
+
+* `referenceImage: ReferenceImage`. The [reference image](reference-image.md) that is linked to the target.
+
+**Example**
+
+```js
+tracker.addEventListener('targetfound', event => {
+    console.log('Found target: ' + event.referenceImage.name);
+});
+```
+
+### targetlost
+
+A target has been lost.
+
+**Properties**
+
+* `referenceImage: ReferenceImage`. The [reference image](reference-image.md) that is linked to the target.

docs/api/martins.md

@@ -0,0 +1,37 @@
+# Martins
+
+The `Martins` namespace is the entry point of the features and components of MARTINS.js.
+
+I have documented the instantiation of the components of the engine in their respective pages.
+
+## Properties
+
+### Settings
+
+`Martins.Settings: Settings, read-only`
+
+The [settings](settings.md) of the engine.
+
+### version
+
+`Martins.version: string, read-only`
+
+The version of MARTINS.js.
+
+### edition
+
+`Martins.edition: string, read-only`
+
+The edition of MARTINS.js.
+
+## Methods
+
+### isSupported
+
+`Martins.isSupported(): boolean`
+
+Checks if the user agent is capable of running the engine.
+
+**Returns**
+
+Returns `true` if the user agent is compatible with the engine, or `false` otherwise.

docs/api/perspective-view.md

@@ -0,0 +1,29 @@
+# PerspectiveView
+
+A [View](view.md) that models a perspective projection.
+
+## Properties
+
+### aspect
+
+`view.aspect: number, read-only`
+
+Aspect ratio of the viewing frustum.
+
+### fovy
+
+`view.fovy: number, read-only`
+
+Vertical field-of-view of the viewing frustum, measured in radians.
+
+### near
+
+`view.near: number, read-only`
+
+Distance of the near clipping plane of the viewing frustum to the Z = 0 plane in viewer space.
+
+### far
+
+`view.far: number, read-only`
+
+Distance of the far clipping plane of the viewing frustum to the Z = 0 plane in viewer space.

docs/api/pose.md

@@ -0,0 +1,11 @@
+# Pose
+
+A pose represents a position and an orientation in 3D space.
+
+## Properties
+
+### transform
+
+`pose.transform: RigidTransform, read-only`
+
+The underlying [rigid transform](rigid-transform.md).

docs/api/reference-image-database.md

@@ -0,0 +1,67 @@
+# ReferenceImageDatabase
+
+A database of [reference images](reference-image.md) that belongs to an [Image Tracker](image-tracker.md).
+
+## Properties
+
+### count
+
+`database.count: number, read-only`
+
+The number of reference images stored in this database.
+
+### capacity
+
+`database.capacity: number, read-only`
+
+The maximum number of reference images that can be stored in this database.
+
+## Methods
+
+### add
+
+`database.add(referenceImages: ReferenceImage[]): SpeedyPromise<void>`
+
+Add reference image(s) to the database.
+
+**Arguments**
+
+* `referenceImages: ReferenceImage[]`. The reference image(s) you want to add.
+
+**Returns**
+
+A promise that resolves as soon as the provided reference images are loaded and added to the database.
+
+**Example**
+
+```js
+const referenceImages = [{
+    name: 'my-first-image',
+    image: document.getElementById('my-first-image')
+}, {
+    name: 'my-second-image',
+    image: document.getElementById('my-second-image')
+}];
+
+tracker.database.add(referenceImages).then(() => {
+    console.log('The images have been added to the database');
+});
+```
+
+### @@iterator
+
+`database[Symbol.iterator](): Iterator<ReferenceImage>`
+
+This is used to iterate over the reference images stored in the database.
+
+**Returns**
+
+An iterator.
+
+**Example**
+
+```js
+for(const referenceImage of tracker.database) {
+    console.log(referenceImage.name);
+}
+```

docs/api/reference-image.md

@@ -0,0 +1,17 @@
+# ReferenceImage
+
+An interface specifying an image template that is fed to an [Image Tracker](image-tracker.md).
+
+## Properties
+
+### name
+
+`referenceImage.name: string, read-only`
+
+A name used to identify this reference image in a [database](reference-image-database.md).
+
+### image
+
+`referenceImage.image: HTMLImageElement | HTMLCanvasElement | ImageBitmap, read-only`
+
+Image template with pixel data.

docs/api/resolution.md

@@ -0,0 +1,16 @@
+# Resolution
+
+A `Resolution` is a setting defined by a string. It is mapped to a size measured in pixels according to special rules. You may use it to change the resolution in pixels of a video captured by a webcam, or to adjust the resolution in pixels of the videos that are processed by a tracker for example.
+
+The table below shows examples of how resolution strings are converted to pixels:
+
+| Resolution string | 16:9 landscape | 16:10 landscape | 4:3 landscape |
+| ----------------- | -------------- | --------------- | ------------- |
+| `"xs"` | 212x120 | 192x120 | 160x120 |
+| `"xs+"` | 284x160 | 256x160 | 212x160 |
+| `"sm"` | 356x200 | 320x200 | 266x200 | 
+| `"sm+"` | 426x240 | 384x240 | 320x240 |
+| `"md"` | 568x320 | 512x320 | 426x320 |
+| `"md+"` | 640x360 | 576x360 | 480x360 |
+| `"lg"` | 852x480 | 768x480 | 640x480 |
+| `"lg+"` | 1066x600 | 960x600 | 800x600 |

docs/api/rigid-transform.md

@@ -0,0 +1,17 @@
+# RigidTransform
+
+A RigidTransform represents a rotation and a translation in 3D space.
+
+## Properties
+
+### matrix
+
+`transform.matrix: SpeedyMatrix, read-only`
+
+A 4x4 matrix encoding the transform.
+
+### inverse
+
+`transform.inverse: RigidTransform, read-only`
+
+The inverse transform.

docs/api/session.md

@@ -0,0 +1,124 @@
+# Session
+
+A central component of a WebAR experience. Read the [concepts](../getting-started/concepts.md) for more information.
+
+## Instantiation
+
+### Martins.startSession
+
+`Martins.startSession(options: object): SpeedyPromise<Session>`
+
+Start a new session.
+
+**Arguments**
+
+* `options: object`. Options object with the following keys:
+    * `trackers: Tracker[]`. The [trackers](tracker.md) to be attached to the session.
+    * `sources: Source[]`. The [sources of data](source.md) to be linked to the session.
+    * `viewport: Viewport`. The [viewport](viewport.md) to be linked to the session.
+    * `mode: string, optional`. Either `"immersive"` or `"inline"`. Defaults to `"immersive"`.
+    * `gizmos: boolean, optional`. Whether or not to display the [gizmos](gizmos.md). Defaults to `false`.
+    * `stats: boolean, optional`. Whether or not to display the stats panel. It's useful during development. Defaults to `false`.
+
+**Returns**
+
+A promise that resolves to a new Session object.
+
+## Properties
+
+### mode
+
+`session.mode: string, read-only`
+
+Session mode.
+
+### time
+
+`session.time: Time, read-only`
+
+A reference to the [Time](time.md) utilities of this session.
+
+### viewport
+
+`session.viewport: Viewport, read-only`
+
+A reference to the [Viewport](viewport.md) linked to this session.
+
+### gizmos
+
+`session.gizmos: Gizmos, read-only`
+
+A reference to the [Gizmos](gizmos.md) object.
+
+## Methods
+
+### requestAnimationFrame
+
+`session.requestAnimationFrame(callback: function): SessionRequestAnimationFrameHandle`
+
+Schedules a call to the `callback` function, which is intended to update and render the virtual scene. Your `callback` function must itself call `session.requestAnimationFrame()` again in order to continue to update and render the virtual scene.
+
+!!! info "Note"
+
+    `session.requestAnimationFrame()` is analogous to `window.requestAnimationFrame()`, but they are not the same! The former is a call to the WebAR engine, whereas the latter is a standard call to the web browser.
+
+**Arguments**
+
+* `callback: function`. A function that receives two parameters:
+    * `time: DOMHighResTimeStamp`. Elapsed time, in milliseconds, since an arbitrary reference. This parameter is kept to mimic web standards, but its usage is discouraged. Prefer using `frame.session.time.elapsed` and `frame.session.time.delta` instead. These are especially useful for creating animations. See also: [Time](time.md).
+    * `frame: Frame`. A [Frame](frame.md) holding the data you need to create the augmented scene.
+
+**Returns**
+
+A handle.
+
+**Example**
+
+```js
+function animate(time, frame)
+{
+    // update and render the virtual scene
+    // ...
+
+    // repeat the call
+    session.requestAnimationFrame(animate);
+}
+
+session.requestAnimationFrame(animate);
+```
+
+### cancelAnimationFrame
+
+`session.cancelAnimationFrame(handle: SessionRequestAnimationFrameHandle): void`
+
+Cancels an animation frame request.
+
+**Arguments**
+
+* `handle: SessionRequestAnimationFrameHandle`. A handle returned by `session.requestAnimationFrame()`.
+
+### end
+
+`session.end(): SpeedyPromise<void>`
+
+Ends the session.
+
+**Returns**
+
+A promise that resolves as soon as the session is terminated.
+
+## Events
+
+A session is an [AREventTarget](ar-event-target.md). You can listen to the following events:
+
+### end
+
+The session has ended.
+
+**Example**
+
+```js
+session.addEventListener('end', event => {
+    console.log('The session has ended.');
+});
+```

docs/api/settings.md

@@ -0,0 +1,17 @@
+# Settings
+
+Engine settings.
+
+## Properties
+
+### powerPreference
+
+`Martins.Settings.powerPreference: string`
+
+Power profile. One of the following: `"default"`, `"low-power"`, `"high-performance"`.
+
+| Profile | Description |
+| ------- | ----------- |
+| `"default"` | Default settings. |
+| `"low-power"` | Reduce performance in order to reduce power consumption. |
+| `"high-performance"` | High performance mode. |

docs/api/source.md

@@ -0,0 +1,3 @@
+# Source
+
+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.

docs/api/speedy-matrix.md

@@ -0,0 +1,63 @@
+# SpeedyMatrix
+
+[Speedy](speedy.md) includes its own fast implementation of matrices. They are used extensively in MARTINS.js.
+
+## Properties
+
+### rows
+
+`matrix.rows: number, read-only`
+
+Number of rows of the matrix.
+
+### columns
+
+`matrix.columns: number, read-only`
+
+Number of columns of the matrix.
+
+## Methods
+
+### read
+
+`matrix.read(): number[]`
+
+Read the entries of the matrix in [column-major format](https://en.wikipedia.org/wiki/Row-_and_column-major_order){ ._blank }.
+
+**Returns**
+
+The entries of the matrix in column-major format.
+
+**Example**
+
+```js
+/*
+
+Suppose that you are given this matrix:
+
+         [ 1  4  7 ]
+matrix = [ 2  5  8 ]
+         [ 3  6  9 ]
+
+Its entries in column-major format are: [1,2,3,   4,5,6,   7,8,9]
+
+*/
+
+const entries = matrix.read();
+```
+
+### toString
+
+`matrix.toString(): string`
+
+Convert to string.
+
+**Returns**
+
+A human-readable representation of the matrix.
+
+**Example**
+
+```js
+console.log(matrix.toString());
+```

docs/api/speedy-promise.md

@@ -0,0 +1,43 @@
+# SpeedyPromise
+
+[Speedy](speedy.md) includes its own implementation of promises. A `SpeedyPromise` works just like a standard promise. SpeedyPromises are designed for realtime applications. There are some subtle differences behind the scenes, but you need not be concerned with those.
+
+## Instantiation
+
+### Speedy.Promise
+
+`new Speedy.Promise(executor: function): SpeedyPromise`
+
+Creates a new `SpeedyPromise`. This works just like the constructor of a standard promise.
+
+**Arguments**
+
+* `executor: function`. A function that takes two functions as arguments:
+    * `resolve: function`. To be called when the promise is resolved.
+    * `reject: function`. To be called when the promise is rejected.
+
+**Returns**
+
+A new `SpeedyPromise`.
+
+**Example**
+
+```js
+function sleep(ms)
+{
+    return new Speedy.Promise((resolve, reject) => {
+        if(ms >= 0)
+            setTimeout(resolve, ms);
+        else
+            reject(new Error('Invalid time'));
+    });
+}
+
+sleep(2000).then(() => {
+    console.log('2 seconds have passed');
+}).catch(error => {
+    console.error(error.message);
+}).finally(() => {
+    console.log('Done!');
+});
+```

docs/api/speedy-size.md

@@ -0,0 +1,17 @@
+# SpeedySize
+
+Represents the size of a rectangle.
+
+## Properties
+
+### width
+
+`size.width: number, read-only`
+
+Width of the rectangle.
+
+### height
+
+`size.height: number, read-only`
+
+Height of the rectangle.

docs/api/speedy.md

@@ -0,0 +1,15 @@
+# Speedy
+
+MARTINS.js is built using [Speedy Vision](https://github.com/alemart/speedy-vision){ ._blank }, a GPU-accelerated Computer Vision library which is another project of mine.
+
+Many features provided by Speedy Vision are very useful (e.g., matrices). I have decided to include some of them in parts of the MARTINS.js API for convenience.
+
+In this documentation, I provide a quick reference of some of the classes used in Speedy Vision. This reference is minimal. For a more complete reference, please visit the [website of the project](https://github.com/alemart/speedy-vision){ ._blank }.
+
+## Properties
+
+### Speedy
+
+`Speedy: Speedy, read-only`
+
+The `Speedy` namespace is provided in global scope. It's also available as `Martins.Speedy`.

docs/api/time.md

@@ -0,0 +1,29 @@
+# Time
+
+Time-related utilities. They are useful for animating virtual scenes.
+
+## Properties
+
+### elapsed
+
+`time.elapsed: number, read-only`
+
+Elapsed time since the start of the session, measured at the beginning of the current animation frame and given in seconds.
+
+### delta
+
+`time.delta: number, read-only`
+
+Elapsed time between the current and the previous animation frame, given in seconds. Use this value to produce animations that are independent of the framerate.
+
+### scale
+
+`time.scale: number`
+
+Time scale. Use it to accelerate, slowdown or pause the passage of time. Defaults to 1.
+
+### unscaled
+
+`time.unscaled: number, read-only`
+
+Time scale independent seconds since the start of the session, measured at the beginning of the current animation frame.

docs/api/trackable-image.md

@@ -0,0 +1,17 @@
+# TrackableImage
+
+A [trackable](trackable.md) that represents an image target tracked by an [Image Tracker](image-tracker.md).
+
+## Properties
+
+### pose
+
+`trackable.pose: Pose, read-only`
+
+The [pose](pose.md) of the trackable.
+
+### referenceImage
+
+`trackable.referenceImage: ReferenceImage, read-only`
+
+The [reference image](reference-image.md) associated with the trackable.

docs/api/trackable.md

@@ -0,0 +1,3 @@
+# Trackable
+
+A Trackable is an interface that represents something that is tracked by a [Tracker](tracker.md).

docs/api/tracker-result.md

@@ -0,0 +1,17 @@
+# TrackerResult
+
+An interface that represents the result generated by a [tracker](tracker.md) at a specific time. It is part of a [frame](frame.md).
+
+## Properties
+
+### tracker
+
+`result.tracker: Tracker, read-only`
+
+A reference to the [tracker](tracker.md) that generated this result.
+
+### trackables
+
+`result.trackables: Trackable[], read-only`
+
+An array of zero or more [trackables](trackable.md).

docs/api/tracker.md

@@ -0,0 +1,13 @@
+# Tracker
+
+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.
+
+An [Image Tracker](image-tracker.md) is an implementation of a tracker.
+
+## Properties
+
+### type
+
+`tracker.type: string, read-only`
+
+A string representing the type of the tracker.

docs/api/video-source.md

@@ -0,0 +1,19 @@
+# VideoSource
+
+A [source of data](source.md) linked to a `<video>` element.
+
+## Instantiation
+
+### Martins.Source.Video
+
+`Martins.Source.Video(video: HTMLVideoElement): VideoSource`
+
+Create a new source of data linked to the provided `video`.
+
+**Arguments**
+
+* `video: HTMLVideoElement`. A `<video>` element.
+
+**Returns**
+
+A new source of data.

docs/api/view.md

@@ -0,0 +1,11 @@
+# View
+
+An interface that represents a view of the 3D world at a moment in time. A [PerspectiveView](perspective-view.md) is an implementation of a View.
+
+## Properties
+
+### projectionMatrix
+
+`view.projectionMatrix: SpeedyMatrix, read-only`
+
+A 4x4 matrix that projects viewer space onto clip space.

docs/api/viewer-pose.md

@@ -0,0 +1,11 @@
+# ViewerPose
+
+The [pose](pose.md) of a [Viewer](viewer.md).
+
+## Properties
+
+### viewMatrix
+
+`pose.viewMatrix: SpeedyMatrix, read-only`
+
+A 4x4 matrix that converts points from world space to viewer space.

docs/api/viewer.md

@@ -0,0 +1,39 @@
+# Viewer
+
+A virtual camera in 3D world space.
+
+## Properties
+
+### pose
+
+`viewer.pose: ViewerPose, read-only`
+
+The [pose](viewer-pose.md) of the viewer.
+
+### view
+
+`viewer.view: View, read-only`
+
+A [view](view.md) of the viewer (monoscopic rendering).
+
+## Methods
+
+### convertToViewerSpace
+
+`viewer.convertToViewerSpace(pose: Pose): Pose`
+
+Convert a `pose` from world space to viewer space.
+
+**Arguments**
+
+* `pose: Pose`. A [pose](pose.md) in world space.
+
+**Returns**
+
+The input `pose` converted to viewer space.
+
+**Example**
+
+```js
+const modelViewMatrix = viewer.convertToViewerSpace(pose).transform.matrix;
+```

docs/api/viewport.md

@@ -0,0 +1,80 @@
+# Viewport
+
+The viewport is the area of the web page in which the augmented scene will be displayed.
+
+## Instantiation
+
+### Martins.Viewport
+
+`Martins.Viewport(settings: object): Viewport`
+
+Create a new viewport with the specified `settings`.
+
+**Arguments**
+
+* `settings: object`. An object with the following keys:
+    * `container: HTMLDivElement`. A `<div>` that will contain the augmented scene.
+    * `hudContainer: HTMLDivElement, optional`. An overlay that will be displayed in front of the augmented scene. It must be a direct child of `container` in the DOM tree.
+    * `resolution: Resolution, optional`. The [resolution](resolution.md) of the virtual scene.
+    * `canvas: HTMLCanvasElement, optional`. An existing canvas on which the virtual scene will be drawn. The engine automatically creates a canvas. You should only specify an existing canvas if you must. Experimental.
+
+**Returns**
+
+A new viewport.
+
+**Example**
+
+```js
+const viewport = Martins.Viewport({
+    container: document.getElementById('ar-viewport'),
+    resolution: 'lg'
+});
+```
+
+## Properties
+
+### container
+
+`viewport.container: HTMLDivElement, read-only`
+
+The container of the viewport.
+
+### hud
+
+`viewport.hud: HUD, read-only`
+
+The [HUD](hud.md).
+
+### resolution
+
+`viewport.resolution: Resolution, read-only`
+
+The [resolution](resolution.md) of the virtual scene.
+
+### canvas
+
+`viewport.canvas: HTMLCanvasElement, read-only`
+
+A `<canvas>` on which the virtual scene is drawn.
+
+### virtualSize
+
+`viewport.virtualSize: SpeedySize, read-only`
+
+The size in pixels that matches the [resolution](#resolution) of the virtual scene.
+
+## Events
+
+A viewport is an [AREventTarget](ar-event-target.md). You can listen to the following events:
+
+### resize
+
+The viewport has been resized. This may happen when the user resizes the window of the web browser or when the mobile device is flipped.
+
+**Example**
+
+```js
+viewport.addEventListener('resize', event => {
+    console.log('The viewport has been resized.');
+});
+```

docs/contact.md

@@ -0,0 +1,5 @@
+# Contact
+
+Please ask your questions on [GitHub Discussions](https://github.com/alemart/martins-js/discussions){ ._blank }. Make sure that you search for the answers before requesting help.
+
+[:heart:{ .heart } Support my work](./support-my-work.md){ .md-button }

docs/demos.md

@@ -0,0 +1,126 @@
+---
+title: WebAR demos
+---
+
+<style>
+.gallery-grid {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+}
+
+.gallery-item {
+    text-align: center;
+    padding: 0;
+}
+
+.gallery-item:not(.gallery-item-3) img {
+    border-radius: 25px;
+}
+
+@media screen and (min-width: 600px) {
+    .gallery-item {
+        flex-basis: 40%;
+    }
+
+    .gallery-item-3 {
+        flex-basis: 30% !important;
+    }
+}
+
+@media screen and (min-width: 1220px) {
+    .gallery-item {
+        transition: transform 0.25s, opacity 0.25s;
+        opacity: 0.9;
+    }
+    .gallery-item:hover {
+        transform: scale(1.1);
+        opacity: 1.0;
+    }
+}
+</style>
+
+# WebAR demos
+
+Welcome to my demo gallery! Here you'll find some cool examples of what you can do with MARTINS.js. Feel free to adapt my demos and also to study my code. My demos are available for a fee, which helps my work.
+
+The Free Edition of MARTINS.js is included with my demos. The Professional Edition is available [separately](./download.md){ ._blank }. Before creating derivative works of my demos, make sure to [pick the right edition](./download.md){ ._blank } for you. If you have questions, feel free to [reach out](./contact.md){ ._blank }.
+
+## Glue codes
+
+MARTINS.js scans the physical environment, but it doesn't render virtual content. You need a 3D rendering technology for that. Glue codes link MARTINS.js to different 3D rendering technologies. My glue codes are compatible with both the Free and the Professional Edition of MARTINS.js.
+
+AFRAME is the easiest choice for non-coders. If you're a coder, all choices are good. A basic demo is included with all of them.
+
+<div class="gallery-grid" markdown>
+<div class="gallery-item gallery-item-3" markdown>
+<a href="https://ko-fi.com/s/24523f7548" rel="external" target="_blank">
+
+![](./img/logo-aframe.png "A-Frame logo by Mozilla")
+
+**AFRAME + MARTINS.js**
+
+</a>
+</div>
+<div class="gallery-item gallery-item-3" markdown>
+<a href="https://ko-fi.com/s/eea4077938" rel="external" target="_blank">
+
+
+![](./img/logo-threejs.png "Three.js logo by Mr.doob")
+
+**THREE.js + MARTINS.js**
+
+</a>
+</div>
+<div class="gallery-item gallery-item-3" markdown>
+
+![](./img/logo-babylonjs.png "Babylon.js logo by David Catuhe")
+
+**BABYLON.js + MARTINS.js (soon)**
+
+</div>
+</div>
+
+
+
+## For newbies
+
+These simple demos help you get started with WebAR. They are great learning material!
+
+<div class="gallery-grid" markdown>
+<div class="gallery-item" markdown>
+<a href="https://ko-fi.com/s/058542943d" rel="external" target="_blank">
+
+![](./img/demo-hello.webp)
+
+**Hello world with MARTINS.js**
+
+</a>
+</div>
+<div class="gallery-item" markdown>
+<a href="https://ko-fi.com/s/1d3c7e401c" rel="external" target="_blank">
+
+
+![](./img/demo-interactivity-three.jpg)
+
+**Touch interaction with THREE.js**
+
+</a>
+</div>
+</div>
+
+
+
+## Fun & games
+
+Soon!
+
+
+
+## Need something else?
+
+You need a WebAR experience tailored for you, but you are unable to do it yourself. Is that your situation? Feel free to make a request!
+
+[Request a WebAR experience](https://ko-fi.com/alemart/commissions){ ._blank .md-button }

docs/download.md

@@ -0,0 +1,31 @@
+# Download
+
+## Overview
+
+There are currently two editions of MARTINS.js: Free and Professional. The Free Edition is available to everyone. The Professional Edition is available to my supporters only.
+
+| |Free Edition|Professional Edition|
+|-|:----------:|:------------------:|
+|**Intended for**|Students, researchers, hobbyists, open-source developers|Freelancers, small software shops, small marketing agencies|
+|**License**|[AGPL 3.0](./license/agpl-3.0.md)|[Polyform Perimeter 1.0.0](./license/PolyForm-Perimeter-1.0.0-1.md)|
+|**Image tracking**|:heavy_check_mark:|:heavy_check_mark:|
+|**Commercial use in proprietary software**| |:heavy_check_mark:|
+|**Support**|<abbr title="via GitHub Discussions">Community</abbr>|<abbr title="via GitHub Discussions">Community</abbr>|
+|**Pricing**|Free of charge|Membership|
+||[Download for free](https://github.com/alemart/martins-js/releases){ .md-button .md-button--primary ._blank }|[:heart:{ .heart } Support my work](./support-my-work.md){ .md-button } |
+
+## Questions & answers
+
+### Which edition is right for me?
+
+If you're an individual doing personal experiments, a developer of free and open-source software, a student or a researcher, pick the Free Edition. If you're a freelancer, a small game studio, a small marketing or webdesign agency, or a similar business, pick the Professional Edition.
+
+### What about commercial use?
+
+The Free Edition is unsuitable for most commercial users. It's [AGPL](./license/agpl-3.0.md)-licensed: any software written with the Free Edition must be free as well. If you write non-free software, use the Professional Edition instead.
+
+You may use the Professional Edition to create various kinds of commercial, proprietary AR experiences. However, you may not sublicense it nor transfer your license to anyone. Additionally, you may not use it to create any product that competes with this software, not even a "as-a-service" style of product (e.g., SaaS). Please read the [license](./license/PolyForm-Perimeter-1.0.0-1.md) for more information.
+
+### Where can I ask questions?
+
+You can ask questions on [GitHub Discussions](https://github.com/alemart/martins-js/discussions){ ._blank }.

docs/getting-started/activate-your-webcam.md

@@ -0,0 +1,298 @@
+# Activate your webcam
+
+In this section we're going to learn how to use your webcam to capture the video. We're also going to polish our work and make it presentable to users.
+
+## Change the source of data
+
+Instead of using a video file, we're going to use your webcam. We simply need to change the source of data and instruct MARTINS.js to use your webcam. We'll do it with 1 new line of code!
+
+```js title="ar-demo.js" hl_lines="20-22"
+async function startARSession()
+{
+    if(!Martins.isSupported()) {
+        throw new Error(
+            'Use a browser/device compatible with WebGL2 and WebAssembly. ' +
+            'Your user agent is ' + navigator.userAgent
+        );
+    }
+
+    const tracker = Martins.Tracker.ImageTracker();
+    await tracker.database.add([{
+        name: 'my-reference-image',
+        image: document.getElementById('my-reference-image')
+    }]);
+
+    const viewport = Martins.Viewport({
+        container: document.getElementById('ar-viewport')
+    });
+
+    //const video = document.getElementById('my-video'); // comment this line
+    //const source = Martins.Source.Video(video); // comment this line
+    const source = Martins.Source.Camera();
+
+    const session = await Martins.startSession({
+        mode: 'immersive',
+        viewport: viewport,
+        trackers: [ tracker ],
+        sources: [ source ],
+        stats: true,
+        gizmos: true,
+    });
+
+    return session;
+}
+```
+
+Let's also comment (or remove) the `<video>` tag from the HTML file - we no longer need it:
+
+```html title="index.html" hl_lines="14-16"
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>MARTINS.js WebAR demo</title>
+        <script src="martins.js"></script>
+        <script src="ar-demo.js"></script>
+        <style>body { background-color: #3d5afe; }</style>
+    </head>
+    <body>
+        <div id="ar-viewport"></div>
+        <img id="my-reference-image" src="my-reference-image.webp" hidden>
+        <!--
+        <video id="my-video" src="my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+        -->
+    </body>
+</html>
+```
+
+Open <http://localhost:8000>{ ._blank } and... ta-da! The web browser will ask for your permission to access the camera. Have fun. :wink:
+
+!!! warning "Before using a webcam"
+
+    Pay attention to the following:
+
+    1. Low-quality cameras should be avoided. A camera of a typical smartphone is probably good enough.
+    2. Don't move the camera / the target image too quickly, as quick movements produce motion blur.
+    3. Ensure good lighting conditions (see below).
+
+!!! tip "Check your physical scene"
+
+    Good lighting conditions are important for a good user experience. Even though the MARTINS.js can handle various lighting conditions, you should get your physical scene appropriately illuminated.
+
+    When developing your own WebAR experiences, ask yourself:
+    
+    * Will my users experience AR indoors? If so, make sure that the room is sufficiently illuminated.
+    * Will my users experience AR outdoors? In this case, make sure that users interact with your AR experience during the day, or have that interaction happen in a place with sufficient artificial lighting.
+
+    When printing your reference images, avoid shiny materials (e.g., glossy paper). They may generate artifacts in the image and interfere with the tracking. Prefer non-reflective materials.
+
+    If you're using a screen to display the reference image, make sure to adjust the brightness. Too much brightness causes overexposure and loss of detail, leading to tracking difficulties. Not enough brightness is also undesirable, because it makes the reference image look too dark in the video. Screen reflections are also undesirable.
+
+!!! warning "Use HTTPS"
+
+    When distributing your WebAR experiences over the internet, make sure to use HTTPS. Web browsers will only allow access to the webcam in secure contexts.
+
+Here is the reference image in case you need it again:
+
+<figure markdown>
+[![/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 }
+<figcaption>Reference Image</figure>
+</figure>
+
+
+## Create a scan gimmick
+
+Let's polish our work. When the tracker is scanning the physical scene, we'll display a visual cue suggesting the user to frame the target image. I'll call that a scan gimmick.
+
+Save the image below as [scan.png](../assets/scan.png){ ._blank }:
+
+<figure markdown>
+<span class="transparent-background" style="display:inline-block">
+[![scan.png](../assets/scan.png)](../assets/scan.png){ ._blank }
+</span>
+<figcaption>Scan gimmick</figcaption>
+</figure>
+
+In order to display that scan gimmick, we need to create a HUD. A HUD is an overlay used to display 2D content in front of the augmented scene. It's part of the viewport. Modify `index.html` and `ar-demo.js` as follows:
+
+```html title="index.html" hl_lines="10-13 16-20"
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>MARTINS.js WebAR demo</title>
+        <!-- <script> tags of the rendering engine of your choice -->
+        <script src="martins.js"></script>
+        <script src="ar-demo.js"></script>
+        <style>
+        body { background-color: #3d5afe; }
+        #scan { width: 100%; height: 100%; object-fit: contain; opacity: 0.75; }
+        </style>
+    </head>
+    <body>
+        <div id="ar-viewport">
+            <div id="ar-hud" hidden>
+                <img id="scan" src="scan.png">
+            </div>
+        </div>
+        <img id="my-reference-image" src="my-reference-image.webp" hidden>
+        <!--
+        <video id="my-video" src="my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+        -->
+    </body>
+</html>
+```
+
+```js title="ar-demo.js" hl_lines="17-18"
+async function startARSession()
+{
+    if(!Martins.isSupported()) {
+        throw new Error(
+            'Use a browser/device compatible with WebGL2 and WebAssembly. ' +
+            'Your user agent is ' + navigator.userAgent
+        );
+    }
+
+    const tracker = Martins.Tracker.ImageTracker();
+    await tracker.database.add([{
+        name: 'my-reference-image',
+        image: document.getElementById('my-reference-image')
+    }]);
+
+    const viewport = Martins.Viewport({
+        container: document.getElementById('ar-viewport'),
+        hudContainer: document.getElementById('ar-hud')
+    });
+
+    //const video = document.getElementById('my-video');
+    //const source = Martins.Source.Video(video);
+    const source = Martins.Source.Camera();
+
+    const session = await Martins.startSession({
+        mode: 'immersive',
+        viewport: viewport,
+        trackers: [ tracker ],
+        sources: [ source ],
+        stats: true,
+        gizmos: true,
+    });
+
+    return session;
+}
+```
+
+Open <http://localhost:8000>{ ._blank }. Now you can see the scan gimmick being displayed... all the time?!
+
+## Configure the scan gimmick
+
+The scan gimmick should only be displayed when the tracker is scanning the physical scene. We should hide it as soon as a target image is recognized. If the tracking is lost, then we need to display it again because we're back in scanning mode.
+
+A simple way to know whether or not we're tracking a target image is to use events. We're going to add two event listeners to our tracker. If a  `targetfound` event happens, we hide the scan gimmick. If a `targetlost` event happens, we show the scan gimmick again.
+
+```js title="ar-demo.js" hl_lines="34-42"
+async function startARSession()
+{
+    if(!Martins.isSupported()) {
+        throw new Error(
+            'Use a browser/device compatible with WebGL2 and WebAssembly. ' +
+            'Your user agent is ' + navigator.userAgent
+        );
+    }
+
+    const tracker = Martins.Tracker.ImageTracker();
+    await tracker.database.add([{
+        name: 'my-reference-image',
+        image: document.getElementById('my-reference-image')
+    }]);
+
+    const viewport = Martins.Viewport({
+        container: document.getElementById('ar-viewport'),
+        hudContainer: document.getElementById('ar-hud')
+    });
+
+    //const video = document.getElementById('my-video');
+    //const source = Martins.Source.Video(video);
+    const source = Martins.Source.Camera();
+
+    const session = await Martins.startSession({
+        mode: 'immersive',
+        viewport: viewport,
+        trackers: [ tracker ],
+        sources: [ source ],
+        stats: true,
+        gizmos: true,
+    });
+
+    const scan = document.getElementById('scan');
+
+    tracker.addEventListener('targetfound', event => {
+        scan.hidden = true;
+    });
+
+    tracker.addEventListener('targetlost', event => {
+        scan.hidden = false;
+    });
+
+    return session;
+}
+```
+
+## Hide the gizmos
+
+Let's polish our work even more by hiding the gizmos. You may just set `gizmos` to `false` in `Martins.startSession()` and there will be no more gizmos. Do the same to hide the stats panel.
+
+Let me show you a different approach. Instead of getting rid of the gizmos completely, we're going to hide them partially. They will be displayed when the tracker is scanning the physical scene, but not when the physical scene is being augmented. That's easy to do with the event listeners we have just set up:
+
+```js title="ar-demo.js" hl_lines="38 43"
+async function startARSession()
+{
+    if(!Martins.isSupported()) {
+        throw new Error(
+            'Use a browser/device compatible with WebGL2 and WebAssembly. ' +
+            'Your user agent is ' + navigator.userAgent
+        );
+    }
+
+    const tracker = Martins.Tracker.ImageTracker();
+    await tracker.database.add([{
+        name: 'my-reference-image',
+        image: document.getElementById('my-reference-image')
+    }]);
+
+    const viewport = Martins.Viewport({
+        container: document.getElementById('ar-viewport'),
+        hudContainer: document.getElementById('ar-hud')
+    });
+
+    //const video = document.getElementById('my-video');
+    //const source = Martins.Source.Video(video);
+    const source = Martins.Source.Camera();
+
+    const session = await Martins.startSession({
+        mode: 'immersive',
+        viewport: viewport,
+        trackers: [ tracker ],
+        sources: [ source ],
+        stats: true,
+        gizmos: true,
+    });
+
+    const scan = document.getElementById('scan');
+
+    tracker.addEventListener('targetfound', event => {
+        scan.hidden = true;
+        session.gizmos.visible = false;
+    });
+
+    tracker.addEventListener('targetlost', event => {
+        scan.hidden = false;
+        session.gizmos.visible = true;
+    });
+
+    return session;
+}
+```
+
+Open <http://localhost:8000>{ ._blank } again. Enjoy your WebAR experience! :wink:

docs/getting-started/concepts.md

@@ -0,0 +1,63 @@
+# Concepts
+
+Before diving into AR with you, I need to introduce a few concepts. Please take the time to read them all. Feel free to come back to this page at any time.
+
+## Fundamental concepts
+
+Let me clarify what I mean by terms such as Augmented Reality and WebAR:
+
+1. **Augmented Reality** is the augmentation of physical reality with virtual elements. We typically augment physical reality with imagery generated by computer graphics. In this context, the word augment means: to blend the physical and the virtual imagery in a visually correlated manner.
+
+    1.1. **AR** is an abbreviation of Augmented Reality.
+
+2. An **Augmented Reality experience** is a computer program designed to let users directly experience Augmented Reality[^1]. Augmented Reality experiences come in different shapes. Some are designed for smartphones and tablets, others for special headsets, and so on.
+
+3. **WebAR** is a set of technologies used to create Augmented Reality experiences that run in web browsers. WebAR makes it easy for users to experience AR, because they can have immediate access to the AR experiences. All they have to do is open a web page. They are not tied to specific platforms and they also don't need to download apps.
+
+4. A **WebAR experience** is an Augmented Reality experience developed using WebAR technology.
+
+5. **MARTINS.js** is a WebAR technology. I also call it a WebAR engine. Lots of computations have to be performed behind the scenes in order to make an Augmented Reality experience possible. MARTINS.js uses the GPU[^2] to accelerate many of those computations. In fact, the GPU and the CPU[^3] are used together. This approach improves the performance of the WebAR experience and ultimately leads to a better user experience.
+
+Now that those terms are clarified, I say this: you can use MARTINS.js to create amazing WebAR experiences! :wink:
+
+[^1]: This definition of AR experience is convenient in different ways. For example, it makes the term "WebAR experience", which is arguably better than "WebAR app" (no apps are downloaded), well-defined. I make a distinction between AR experience and experience of AR. An experience of AR is an event in consciousness in which AR is experienced. I sometimes use the latter definition.
+[^2]: Graphics Processing Unit
+[^3]: Central Processing Unit
+
+## Practical concepts
+
+Let me explain some concepts that you'll see over and over again when developing WebAR experiences with MARTINS.js:
+
+1. The experience of Augmented Reality is created by augmenting the physical scene with the virtual scene.
+
+    1.1. The **physical scene** is a scene of the physical world.
+
+    1.2. The **virtual scene** is a scene generated by computer graphics.
+
+    1.3. The **augmented scene** is the physical scene augmented with the virtual scene.
+
+2. A **session** is a central component of a WebAR experience. It handles the **main loop**. The main loop performs two central tasks: it analyzes the input data and then passes the result of that analysis to the user callback.
+
+    2.1. The **user callback** is a function that updates and renders the virtual scene.
+    
+    2.2. The main loop is repeated until the session ends. The session ends when the user closes the web page, or by deliberate command.
+
+3. A session has one or more **sources of data** linked to it. A typical source of data is a video stream. Such a stream usually comes from a webcam or from a video file.
+
+    3.1. A source of data produces **input data**.
+
+4. A **tracker** is a subsystem of the WebAR engine that analyzes input data in some way. Trackers are meant to be attached to a session. Example: an image tracker is a type of tracker. If we attach an image tracker to a session, then we will be able to track images in that session.
+
+5. The user callback receives a **frame**. A frame is an object that holds data for rendering the virtual scene in a way that is consistent with the input data at a particular moment in time. Simply put, frames help us augment the physical scene with the virtual scene.
+
+    5.1. The data held by a frame is computed by the trackers that are attached to the session.
+
+6. A session is linked to a **viewport**. The viewport is the area in which we'll display the augmented scene. It's represented by a container defined by a suitable HTML element, typically a `<div>`.
+
+7. A session has a **mode**. The mode can be either immersive or inline.
+
+    7.1. In immersive mode, the augmented scene is displayed in such a way that it occupies, in a best-fit manner, the entire area of the screen in which the web page is shown. Think of it as a kind of fullscreen. The immersive mode is what is typically wanted.
+    
+    7.2. In inline mode, the augmented scene is displayed in a way that is consistent with the typical flow of a web page. We can display the augmented scene in a web page such as this one - in the middle of text, links and other elements.
+
+Did you read it all? Cool, so let's create our first WebAR experience! It gets to be fun, I promise! :wink:

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

@@ -0,0 +1,114 @@
+# Create the augmented scene
+
+Now that the image is being tracked, the next step is to render a virtual scene on top of it. You need a 3D rendering technology to do that.
+
+## Pick a 3D rendering technology
+
+MARTINS.js is not a 3D rendering technology. It is an Augmented Reality technology that provides the data you need in order to augment your physical scenes. There are free and open-source 3D rendering technologies for the web that you can find online and use with MARTINS.js. Popular solutions include:
+
+<div style="display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-end; text-align: center" markdown>
+<div markdown>
+![A-Frame](../img/logo-aframe.png "A-Frame logo by Mozilla"){ width=200 }
+
+**A-Frame**
+</div><div markdown>
+![Babylon.js](../img/logo-babylonjs.png "Babylon.js logo by David Catuhe"){ width=200 }
+
+**Babylon.js**
+</div><div markdown>
+![Three.js](../img/logo-threejs.png "Three.js logo by Mr.doob"){ width=200 }
+
+**Three.js**
+</div>
+</div>
+
+You can also use other solutions. MARTINS.js lets you pick any 3D rendering technology.
+
+Once you pick a 3D rendering technology, you need to integrate it with MARTINS.js. There is a code that is responsible for that integration. I call it a _glue code_. Among other things, a glue code transports the tracking results from MARTINS.js to the 3D rendering technology of your choice - it really is a "glue" connecting them.
+
+## Write the glue code
+
+Writing a glue code is a task of moderate complexity. It requires dealing with matrices, with performance issues, and with some idiosyncrasies of the 3D rendering technologies in order to make sure it all works as intended. It is advisable to have specialized knowledge of computer graphics programming in order to write a glue code that works correctly.
+
+I provide easy-to-use glue codes that work with different 3D rendering technologies in my demos, so that you don't need to deal with the complexity. Those glue codes are JavaScript (.js) files. You just need to add a glue code to your web page (e.g., via a `<script>` tag) and then the integration will be done for you. It's really that simple! Also, my glue codes may be used in both free and non-free projects.
+
+[Get the glue codes in my demos](../demos.md){ .md-button ._blank }
+
+## Create the virtual scene
+
+Once you plug in the glue code, you'll be using the 3D rendering technology of your choice to create the virtual scene. The physical scene will be automatically augmented with the virtual scene, thus creating the augmented scene.
+
+<figure markdown>
+<video src="../../img/demo-cool2.webm" poster="../../img/demo-cool2.webp" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+<figcaption markdown>An augmented scene with a [3D model](../assets/my-3d-model.glb "A public domain 3D model from Kenney, converted to glTF format") from [Kenney](https://www.kenney.nl){ ._blank }</figcaption>
+</figure>
+
+<figure markdown>
+<video src="../../img/demo-cool.webm" poster="../../img/demo-cool.webp" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+<figcaption markdown>A similar augmented scene viewed from a different perspective</figcaption>
+</figure>
+
+Let me tell you a bit more about the 3D rendering technologies I just mentioned.
+
+### A-Frame
+
+[A-Frame](https://aframe.io){ ._blank } is an open-source framework used to build virtual reality (VR) experiences for the web. When you combine it with MARTINS.js, you become able to use it to create AR experiences too - without the need of special hardware or software.
+
+A-Frame is built on top of [Three.js](#threejs) and extends it in powerful ways. It introduces a HTML-based declarative approach for [scene graphs](https://en.wikipedia.org/wiki/Scene_graph){ ._blank }, empowering them with the [Entity-Component-System](https://en.wikipedia.org/wiki/Entity_component_system){ ._blank }, a software pattern commonly used in game development. Sounds complicated? It is not!
+
+A-Frame is easy for beginners and pleasing for experts. A simple scene is declared like this:
+
+```html title="index.html" hl_lines="7 10 18-31"
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>MARTINS.js WebAR demo</title>
+        <script src="aframe-vX.Y.Z.min.js"></script>
+        <script src="martins.js"></script>
+        <script src="ar-demo.js"></script>
+        <script src="plug in my glue code here"></script>
+        <style>body { background-color: #3d5afe; }</style>
+    </head>
+    <body>
+        <div id="ar-viewport"></div>
+        <img id="my-reference-image" src="my-reference-image.webp" hidden>
+        <video id="my-video" src="my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+
+        <!-- This is a scene -->
+        <a-scene ar-scene>
+            <a-camera ar-camera></a-camera>
+
+            <!-- Whatever you add to <ar-root> will appear in AR -->
+            <ar-root>
+                <a-entity gltf-model="#my-3d-model"></a-entity>
+            </ar-root>
+
+            <!-- Declare external media files here -->
+            <a-assets>
+                <a-asset-item id="my-3d-model" src="my-3d-model.glb"></a-asset-item>
+            </a-assets>
+        </a-scene>
+
+    </body>
+</html>
+```
+
+`<ar-root>` is not part of A-Frame, but it becomes available as soon as you plug in my glue code.
+
+A-Frame lets you create animated scenes with special effects simply by declaring things, like in the above example. In many cases, writing new JavaScript code is not needed. A-Frame also includes a visual inspector that makes things really easy for non-coders.
+
+### Babylon.js
+
+[Babylon.js](https://www.babylonjs.com){ ._blank } is a powerful open-source game and 3D rendering engine for the web. It includes pretty much all features you commonly find in 3D rendering engines (scene graphs, lights, materials, meshes, etc.), plus systems that are specific to game engines (animation engine, audio engine, collision system, physics system, support for sprites, etc.), plus all kinds of sophisticated features for various applications.
+
+Babylon.js has an amazing documentation with plenty of learning resources. Even though it can be used by beginners, it's recommended to have working JavaScript experience before creating projects with it.
+
+### Three.js
+
+[Three.js](https://threejs.org){ ._blank } is a popular open-source JavaScript library used to render 3D graphics in web browsers. It supports many features, including: scene graphs, cameras, animations, lights, materials, loading of 3D models, mathematical utilities, special effects, and more. It has an active and vibrant community. Many community-made extensions are available.
+
+Three.js often uses [WebGL](https://webglfundamentals.org){ ._blank } to draw 3D graphics. WebGL is a low-level rasterization engine that draws points, lines and triangles. It's seldom used directly by the developers of applications.
+
+Using Three.js requires more JavaScript experience than using A-Frame in most cases, but it's also a great choice if you're comfortable with coding. Compared to A-Frame, Three.js offers you additional freedom on how you can organize your code, because it's a library, not a framework.

docs/getting-started/guidelines-for-images.md

@@ -0,0 +1,56 @@
+# Guidelines for Reference Images
+
+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.
+
+## Distinct
+
+A distinct image has distinguishable areas - quite unlike a repetitive pattern!
+
+| Distinct :heavy_check_mark: | Not distinct :x: |
+| --------------------------- | ---------------- |
+| [![](../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 } |
+| [![](../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 } |
+
+## Asymmetric
+
+Asymmetric images help the engine determine their orientation. When evaluating symmetry, you must not take colors into account.
+
+| Asymmetric :heavy_check_mark: | Symmetric :x: |
+| ----------------------------- | ------------- |
+| [![](../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 } |
+| [![](../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 } |
+
+## Detailed
+
+A detailed image has lots of details with sufficient contrast. There's not much blank space!
+
+| Detailed :heavy_check_mark: | Not detailed :x: |
+| ---------------------------------- | ----------------------- |
+| [![](../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 } |
+| [![](../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 } |
+
+## Other considerations
+
+### Aspect ratio
+
+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.
+
+### Resolution
+
+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!
+
+### Physical materials
+
+When printing your images, keep the following in mind:
+
+- Prefer non-reflective materials. Avoid shiny materials such as glossy paper. Reflections may generate artifacts in the video and interfere with the tracking.
+- Materials should be rigid. Don't use something that can be distorted too easily.
+- Use quality materials.
+
+### Brightness on screens
+
+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.
+
+### Test it!
+
+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!

docs/getting-started/index.md

@@ -0,0 +1,23 @@
+# Welcome to MARTINS.js!
+
+**MARTINS.js** is a GPU-accelerated Augmented Reality engine for the web. It's a standalone WebAR technology for creating AR experiences that run in web browsers. Users don't need specialized hardware nor dedicated software - only a modern and compatible web browser.
+
+[Get started with WebAR](./introduction.md){ .md-button .md-button--primary }
+
+## 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 and compatible 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.
+* **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.
+
+[Check out my WebAR demos](../demos.md){ .md-button }
+
+## Author
+
+MARTINS.js is developed by me, [Alexandre Martins](https://github.com/alemart){ ._blank }, a computer scientist from Brazil. This project is dual-licensed. The Free Edition, available to everyone, is licensed under the [AGPL 3.0](../license/agpl-3.0.md). The Professional Edition, available to my supporters, is licensed under the [Polyform Perimeter 1.0.0](../license/PolyForm-Perimeter-1.0.0-1.md).
+
+[:heart:{ .heart } Support my work](../support-my-work.md){ .md-button }

docs/getting-started/introduction.md

@@ -0,0 +1,22 @@
+# Introduction
+
+Augmented Reality (AR) has applications in many fields, including: games, marketing, commerce, education, arts, tourism, sports, healthcare, and so on. AR brings many exciting possibilities for creative projects - and you too can get into it!
+
+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.
+
+<figure markdown>
+<video src="../../img/demo-cool.webm" poster="../../img/demo-cool.webp" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+<figcaption>A WebAR demo created with MARTINS.js</figcaption>
+</figure>
+
+## What to expect from this guide
+
+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.
+
+No matter if you are a beginner, an expert, or somewhere in-between, set yourself at ease: this step-by-step guide can be followed by you.
+
+<figure markdown>
+<video src="../../img/demo-cool3.webm" poster="../../img/demo-cool3.webp" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+<figcaption>Augmented Reality based on Image Tracking</figcaption>
+</figure>
+

docs/getting-started/next-steps.md

@@ -0,0 +1,95 @@
+# Next steps
+
+Congratulations! You have created your first WebAR experience with MARTINS.js! :sunglasses:
+
+Let me tell you some of the steps you can take from now on.
+
+## Change the power preference
+
+Image tracking is no trivial task: lots of computations are being performed behind the scenes. The WebAR engine prioritizes processing performance over power consumption by default. You may reduce power consumption by reducing processing performance. This is simple to do: just set `Martins.Settings.powerPreference` to `"low-power"`.
+
+```js title="ar-demo.js" hl_lines="10"
+async function startARSession()
+{
+    if(!Martins.isSupported()) {
+        throw new Error(
+            'Use a browser/device compatible with WebGL2 and WebAssembly. ' +
+            'Your user agent is ' + navigator.userAgent
+        );
+    }
+
+    Martins.Settings.powerPreference = 'low-power'; // OPTIONAL
+
+    const tracker = Martins.Tracker.ImageTracker();
+    await tracker.database.add([{
+        name: 'my-reference-image',
+        image: document.getElementById('my-reference-image')
+    }]);
+
+    const viewport = Martins.Viewport({
+        container: document.getElementById('ar-viewport'),
+        hudContainer: document.getElementById('ar-hud')
+    });
+
+    //const video = document.getElementById('my-video');
+    //const source = Martins.Source.Video(video);
+    const source = Martins.Source.Camera();
+
+    const session = await Martins.startSession({
+        mode: 'immersive',
+        viewport: viewport,
+        trackers: [ tracker ],
+        sources: [ source ],
+        stats: true,
+        gizmos: true,
+    });
+
+    const scan = document.getElementById('scan');
+
+    tracker.addEventListener('targetfound', event => {
+        scan.hidden = true;
+        session.gizmos.visible = false;
+    });
+
+    tracker.addEventListener('targetlost', event => {
+        scan.hidden = false;
+        session.gizmos.visible = true;
+    });
+
+    return session;
+}
+```
+
+When you enable low-power mode, the WebAR engine will target a framerate of 30. In many cases, this is still acceptable for a good user experience. I suggest you test both ways!
+
+I emphasize that you are **not** required to enable low-power mode. Enable it if power consumption is an issue for you. If it isn't, you may also experiment with the `"high-performance"` mode.
+
+!!! question "When should I use low-power mode?"
+
+    If you're targeting mobile devices, test your WebAR experiences with low-power mode. If you decide that the lower framerate is still acceptable, keep the low-power mode in order to save battery life.
+
+## Add multiple virtual scenes
+
+You can add multiple reference images to the reference image database. Each of those images can correspond to a different virtual scene. The virtual scene that shows up depends on the target image that is being tracked.
+
+Explore the API to see how you can have multiple virtual scenes in a single web page. Don't go overboard with this, though: the web page should load fast. Too much content may impact loading times. Keep your media files small and load your models asynchronously if possible.
+
+## Publish your WebAR experiences
+
+So far we've just created a static HTML page. Static pages are surprisingly easy to deploy. Any quality web hosting supports them. [Neocities](https://neocities.org/){ ._blank }, [Glitch](https://glitch.com/){ ._blank } and [GitHub Pages](https://pages.github.com/){ ._blank } are popular alternatives that let you host your WebAR experiences easily and for free. Your pages will be served over HTTPS, and that's important for webcam access!
+
+!!! tip "Tip: use a QR code"
+
+    If you intend to print your reference images and have them placed on, let's say, a wall somewhere, consider adding a [QR code](https://en.wikipedia.org/wiki/QR_code){ ._blank } nearby. The QR code should point to your website. Users can then just scan your QR code to open your WebAR experience. Easy! :wink:
+
+!!! tip "Use the minified code"
+
+    When deploying your WebAR experiences, make sure to include the minified `martins.min.js` file instead of the regular `martins.js`. The latter is suitable for development. The former, for production.
+
+## Support my work
+
+If you came this far in the guide, WebAR probably excites you. It is definitely something you want. I know, it is awesome! The possibilities are endless. Even better than getting your creative juices boiling with enthusiasm is the feeling of joy I have for sharing this work with you.
+
+Do you want more WebAR? Help me bring you more! Creating this WebAR engine has been a **huge** personal effort that required time, skill and highly specialized knowledge. Please support my work, so that I'm able to continue it and make it even more awesome!
+
+[:heart:{ .heart } Support my work](../support-my-work.md){ .md-button }

docs/getting-started/questions-and-answers.md

@@ -0,0 +1,37 @@
+# Questions & Answers
+
+## What is MARTINS.js?
+
+MARTINS.js is a GPU-accelerated Augmented Reality engine for the web. It's a standalone WebAR technology for creating AR experiences that run in web browsers. Users don't need specialized hardware nor dedicated software - only a modern and compatible web browser.
+
+MARTINS is a recursive acronym for MARTINS Augmented Reality Technology for Internet Software. It also happens to be my name. See, AR is part of my name. Can you believe it? :sunglasses:
+
+## What is WebAR?
+
+Refer to the [concepts](./concepts.md).
+
+## Is this WebXR?
+
+No, MARTINS.js is not WebXR. The WebXR API allows you to access functionalities of VR and AR-capable devices in web browsers. It relies on other technologies, such as Google's ARCore or Apple's ARKit, to run the show. Those technologies are great, but they are supported on specific devices, which may or may not match your users' devices. On the other hand, MARTINS.js is fully standalone and is built from scratch using standard web technologies such as WebGL2 and WebAssembly, which are widely available. My intention is to give it broad compatibility.
+
+## Why do my models appear "laid down" in AR?
+
+MARTINS.js uses a right-handed coordinate system with the Z-axis pointing "up". The same convention is used in [Blender](https://www.blender.org){ ._blank }. When exporting your own models, make sure that the Z-axis points "up" and that the ground plane is the XY-plane. If your models appear "laid down" in AR, this is probably the issue.
+
+!!! info "Fix with code"
+
+    Fixing the orientation of the model is the preferred solution. However, you can also fix the issue with code: add a node (entity) to the scene graph and make it rotate its children by 90 degrees around the x-axis.
+
+## What about browser compatibility?
+
+MARTINS.js is currently compatible with the latest versions of almost all major web browsers:
+
+| Chrome | Edge | Firefox | Opera | Safari |
+|:------:|:----:|:-------:|:-----:|:------:|
+| :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | - |
+
+At the time of this writing, Safari is not yet compatible. MARTINS.js requires WebGL2 and WebAssembly.
+
+## I love WebAR!
+
+I know! :wink:

docs/getting-started/set-up-a-web-server.md

@@ -0,0 +1,101 @@
+# Set up a web server
+
+Let's prepare our local environment in order to create our first WebAR experience.
+
+We're going to use the Free Edition of MARTINS.js in this guide. The Free Edition is suitable for personal study, educational purposes and open-source projects. More information [in this link](../download.md){ ._blank }.
+
+## Create a file structure
+
+Let's create a file structure for our AR experience:
+
+1. Create a new folder called `ar-demo` in your filesystem
+2. Download the [latest release of MARTINS.js](../download.md){ ._blank } and extract `dist/martins.js` to `ar-demo/`
+3. Create a new empty file called `index.html` and store it in `ar-demo/`
+
+You will have the following file structure:
+
+    ar-demo/
+    ├── index.html
+    └── martins.js
+
+## Add boilerplate code
+
+Use the code editor of your choice to write the following content to `index.html`:
+
+```html title="index.html"
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>MARTINS.js WebAR demo</title>
+        <script src="martins.js"></script>
+        <style>body { background-color: #3d5afe; }</style>
+    </head>
+    <body>
+    </body>
+</html>
+```
+
+## Set up a local web server
+
+Let's set up a local web server in your machine for development purposes. I'll be showing you an easy-to-follow approach. Feel free to use a different approach if you're an experienced web developer.
+
+=== "Graphical interface"
+
+    This is an easy solution that works on Windows, Linux and macOS:
+
+    1. [Download and run Servez](https://greggman.github.io/servez/){ ._blank }, a simple web server for local web development.
+    2. In _Folder to Serve_, specify the `ar-demo` folder we have just created.
+    3. Change the _Port_ to **8000**.
+    4. Click on _Start_ to launch the local web server.
+    5. Click on _Launch Browser_ to open a web browser at <http://localhost:8000>{ ._blank }.
+
+    <figure markdown>
+    ![Servez](../img/servez.png){ width=600 }
+    <figcaption>Setting up Servez: make sure that _Folder to Serve_ points to the correct path in your filesystem!</figcaption>
+    </figure>
+
+=== "Command line"
+
+    If you're familiar with the command line, you can use programs such as `python`, `node` or `php` to launch a local web server. Navigate to the `ar-demo` directory and then run:
+
+    === "Python 2"
+
+        ```sh
+        python -m SimpleHTTPServer 8000
+        ```
+
+    === "Python 3"
+
+        ```sh
+        python3 -m http.server 8000
+        ```
+
+    === "Node.js"
+
+        ```sh
+        npx http-server -p 8000
+        ```
+
+    === "PHP"
+
+        ```sh
+        php -S localhost:8000
+        ```
+
+    Next, open your web browser and go to <http://localhost:8000>{ ._blank }.
+
+
+You should see a blue screen in your web browser:
+
+<figure markdown>
+[![Expected web page](../img/page-with-nothing.webp)](../img/page-with-nothing.webp){ ._blank }
+<figcaption>Blue Screen of Success</figcaption>
+</figure>
+
+If you see that blue screen, you're ready to proceed. If not, review your settings.
+
+!!! info "Why port 8000?"
+
+    Port 8000 is commonly used in web development. Although you may use a different port, I suggest that you stick to this convention throughout this guide.

docs/getting-started/set-up-the-session.md

@@ -0,0 +1,225 @@
+# Set up the session
+
+Now we're going to track our reference image for the first time! :sunglasses:
+
+## Create the viewport
+
+We begin by creating the viewport. Remember that the viewport is the area in which we'll display the augmented scene. Add the following to `index.html` and to `ar-demo.js`:
+
+```html title="index.html" hl_lines="12"
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>MARTINS.js WebAR demo</title>
+        <script src="martins.js"></script>
+        <script src="ar-demo.js"></script>
+        <style>body { background-color: #3d5afe; }</style>
+    </head>
+    <body>
+        <div id="ar-viewport"></div>
+        <img id="my-reference-image" src="my-reference-image.webp" hidden>
+        <video id="my-video" src="my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+    </body>
+</html>
+```
+
+```js title="ar-demo.js" hl_lines="17-19"
+window.onload = async function()
+{
+    try {
+        if(!Martins.isSupported()) {
+            throw new Error(
+                'Use a browser/device compatible with WebGL2 and WebAssembly. ' +
+                'Your user agent is ' + navigator.userAgent
+            );
+        }
+
+        const tracker = Martins.Tracker.ImageTracker();
+        await tracker.database.add([{
+            name: 'my-reference-image',
+            image: document.getElementById('my-reference-image')
+        }]);
+
+        const viewport = Martins.Viewport({
+            container: document.getElementById('ar-viewport')
+        });
+    }
+    catch(error) {
+        alert(error.message);
+    }
+};
+```
+
+## Create the source of data
+
+Let's set up our source of data. We get the `HTMLVideoElement` corresponding to the test video and then we use it to instantiate a video source of data. Write the following to `ar-demo.js`:
+
+```js title="ar-demo.js" hl_lines="21-22"
+window.onload = async function()
+{
+    try {
+        if(!Martins.isSupported()) {
+            throw new Error(
+                'Use a browser/device compatible with WebGL2 and WebAssembly. ' +
+                'Your user agent is ' + navigator.userAgent
+            );
+        }
+
+        const tracker = Martins.Tracker.ImageTracker();
+        await tracker.database.add([{
+            name: 'my-reference-image',
+            image: document.getElementById('my-reference-image')
+        }]);
+
+        const viewport = Martins.Viewport({
+            container: document.getElementById('ar-viewport')
+        });
+
+        const video = document.getElementById('my-video');
+        const source = Martins.Source.Video(video);
+    }
+    catch(error) {
+        alert(error.message);
+    }
+};
+```
+
+## Start the session
+
+The session is a central component of a WebAR experience. The `Martins` namespace has a very special method called `startSession`. It receives a settings dictionary that lets us configure the new session in different ways. Add the following code to `ar-demo.js`:
+
+```js title="ar-demo.js" hl_lines="24-31"
+window.onload = async function()
+{
+    try {
+        if(!Martins.isSupported()) {
+            throw new Error(
+                'Use a browser/device compatible with WebGL2 and WebAssembly. ' +
+                'Your user agent is ' + navigator.userAgent
+            );
+        }
+
+        const tracker = Martins.Tracker.ImageTracker();
+        await tracker.database.add([{
+            name: 'my-reference-image',
+            image: document.getElementById('my-reference-image')
+        }]);
+
+        const viewport = Martins.Viewport({
+            container: document.getElementById('ar-viewport')
+        });
+
+        const video = document.getElementById('my-video');
+        const source = Martins.Source.Video(video);
+
+        const session = await Martins.startSession({
+            mode: 'immersive',
+            viewport: viewport,
+            trackers: [ tracker ],
+            sources: [ source ],
+            stats: true,
+            gizmos: true,
+        });
+    }
+    catch(error) {
+        alert(error.message);
+    }
+};
+```
+
+Most of the settings passed to `startSession` correspond directly to the [concepts](./concepts.md) we saw earlier. We're starting a new session in immersive mode, with the tracker, source of data and viewport that we have just configured. Let me explain what `stats` and `gizmos` mean:
+
+1. When you set `stats: true`, you're asking the engine to display a stats panel that shows useful data such as the current framerate. This is useful when developing WebAR experiences, but you should disable it in production.
+
+2. The option `gizmos: true` enables the gizmos. Gizmos are visual artifacts that help you visualize the current state of the tracker. They too are useful in development. In production, you may disable them or enable them partially (more on that later).
+
+Open <http://localhost:8000>{ ._blank }. You should see the tracking in action. Even though there is no virtual scene yet, the gizmos will show you the image being tracked.
+
+<figure markdown>
+[![Image tracking](../img/image-tracking-gizmos.webp)](../img/image-tracking-gizmos.webp){ ._blank }
+<figcaption>Image tracking in action!</figcaption>
+</figure>
+
+The code I have just presented is, in essence, what you need to start a session. I'm going to move it to a new function called `startARSession` for convenience:
+
+```js title="ar-demo.js" hl_lines="4 11-43"
+window.onload = async function()
+{
+    try {
+        const session = await startARSession();
+    }
+    catch(error) {
+        alert(error.message);
+    }
+};
+
+async function startARSession()
+{
+    if(!Martins.isSupported()) {
+        throw new Error(
+            'Use a browser/device compatible with WebGL2 and WebAssembly. ' +
+            'Your user agent is ' + navigator.userAgent
+        );
+    }
+
+    const tracker = Martins.Tracker.ImageTracker();
+    await tracker.database.add([{
+        name: 'my-reference-image',
+        image: document.getElementById('my-reference-image')
+    }]);
+
+    const viewport = Martins.Viewport({
+        container: document.getElementById('ar-viewport')
+    });
+
+    const video = document.getElementById('my-video');
+    const source = Martins.Source.Video(video);
+
+    const session = await Martins.startSession({
+        mode: 'immersive',
+        viewport: viewport,
+        trackers: [ tracker ],
+        sources: [ source ],
+        stats: true,
+        gizmos: true,
+    });
+
+    return session;
+}
+```
+
+Now all you have to do to start a new session is call `startARSession()`!
+
+## Write the user callback
+
+The user callback is a function responsible for updating and rendering the virtual scene. We have no virtual scene at the moment, but we can already set up that function. In order to do this, we must call `session.requestAnimationFrame()` and pass the user callback as an argument.
+
+```js title="ar-demo.js" hl_lines="6-11"
+window.onload = async function()
+{
+    try {
+        const session = await startARSession();
+
+        function animate(time, frame)
+        {
+            session.requestAnimationFrame(animate);
+        }
+
+        session.requestAnimationFrame(animate);
+    }
+    catch(error) {
+        alert(error.message);
+    }
+};
+
+async function startARSession()
+{
+    // ...
+}
+```
+
+!!! info "requestAnimationFrame"
+
+    Note that `session.requestAnimationFrame()` is different from `window.requestAnimationFrame()`. The former is a call to the WebAR engine, whereas the latter is a standard call to the web browser.

docs/getting-started/set-up-the-tracker.md

@@ -0,0 +1,189 @@
+# Set up the tracker
+
+In this section we'll learn how to set up the tracker. Later on we'll see how to use the tracker to track an image in a video, with its position and orientation in 3D.
+
+## Add a reference image
+
+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.
+
+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:
+
+<figure markdown>
+[![../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 }
+<figcaption>Reference Image</figure>
+</figure>
+
+Download the image to the `ar-demo/` folder. Save it as [my-reference-image.webp](../assets/my-reference-image.webp){ ._blank }.
+
+Next, let's add the reference image to our web page. Add an `<img>` tag to the `<body>` of the page as follows:
+
+```html title="index.html" hl_lines="11"
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>MARTINS.js WebAR demo</title>
+        <script src="martins.js"></script>
+        <style>body { background-color: #3d5afe; }</style>
+    </head>
+    <body>
+        <img id="my-reference-image" src="my-reference-image.webp">
+    </body>
+</html>
+```
+
+Reload the page. You should see the reference image:
+
+<figure markdown>
+[![Expected web page](../img/page-with-reference-image.webp)](../img/page-with-reference-image.webp){ ._blank }
+<figcaption>Reference image in a web page</figcaption>
+</figure>
+
+If you don't see the image, make sure that there are no errors in the filename.
+
+Once you see that the image is being properly loaded, there is no need to keep it visible. Let's add the `hidden` attribute to the `<img>` tag:
+
+```html title="index.html" hl_lines="11"
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>MARTINS.js WebAR demo</title>
+        <script src="martins.js"></script>
+        <style>body { background-color: #3d5afe; }</style>
+    </head>
+    <body>
+        <img id="my-reference-image" src="my-reference-image.webp" hidden>
+    </body>
+</html>
+```
+
+## Add a test video
+
+We're going to be tracking that reference image in a test video. Please save the following video as [my-video.webm](../assets/my-video.webm){ ._blank } in `ar-demo/`. Later on I'll tell you how to use your webcam instead.
+
+<figure markdown>
+<video src="../../assets/my-video.webm" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+</figure>
+
+This is the expected directory structure at this point:
+
+    ar-demo/
+    ├── index.html
+    ├── martins.js
+    ├── my-reference-image.webp
+    └── my-video.webm
+
+Let's include the test video in our page. Add a `<video>` tag as follows:
+
+```html title="index.html" hl_lines="12"
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>MARTINS.js WebAR demo</title>
+        <script src="martins.js"></script>
+        <style>body { background-color: #3d5afe; }</style>
+    </head>
+    <body>
+        <img id="my-reference-image" src="my-reference-image.webp" hidden>
+        <video id="my-video" src="my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+    </body>
+</html>
+```
+
+## Instantiate an Image Tracker
+
+In order to track the reference image in our video, we need an Image Tracker. Remember that a tracker is a subsystem of the WebAR engine that analyzes input data in some way. An Image Tracker is a tracker that finds and tracks reference images in a video stream.
+
+Before we track anything with an Image Tracker, we must tell it what to track. There are two steps to this: first, we instantiate an Image Tracker. Next, we link our reference image to it.
+
+We'll be writing a little bit of JavaScript code now. In order to keep our code clean, we'll be writing the JavaScript code to a new file. Let's add a `<script>` tag below `martins.js` as follows:
+
+```html title="index.html" hl_lines="8"
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>MARTINS.js WebAR demo</title>
+        <script src="martins.js"></script>
+        <script src="ar-demo.js"></script>
+        <style>body { background-color: #3d5afe; }</style>
+    </head>
+    <body>
+        <img id="my-reference-image" src="my-reference-image.webp" hidden>
+        <video id="my-video" src="my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+    </body>
+</html>
+```
+
+Create a new file called `ar-demo.js` and store it in the `ar-demo/` folder. Write the following contents to it:
+
+```js title="ar-demo.js"
+window.onload = async function()
+{
+    try {
+        if(!Martins.isSupported()) {
+            throw new Error(
+                'Use a browser/device compatible with WebGL2 and WebAssembly. ' +
+                'Your user agent is ' + navigator.userAgent
+            );
+        }
+
+        const tracker = Martins.Tracker.ImageTracker();
+    }
+    catch(error) {
+        alert(error.message);
+    }
+};
+```
+
+The `Martins` namespace holds the various elements featured by the engine. We'll be using it extensively.
+
+MARTINS.js only requires standard web technologies that have been around for a while. Still, it's a good practice to check if those technologies are supported by the target system. If they are not, we display a message and quit. If they are, we instantiate an Image Tracker.
+
+Before moving on, make sure that you have the following directory structure at this point:
+
+    ar-demo/
+    ├── ar-demo.js
+    ├── index.html
+    ├── martins.js
+    ├── my-reference-image.webp
+    └── my-video.webm
+
+## Link the image to the tracker
+
+Our Image Tracker has an internal database of reference images that it's capable of tracking. We call it a **reference image database**. To link a reference image to the tracker means to add that image to the database.
+
+When linking a reference image to the tracker, the appropriate `HTMLImageElement` must be provided to the database. You may optionally assign a name to the image, so that you can identify it later on. If you don't, an automatically generated name will be assigned for you.
+
+Let's link the image to the tracker. Add the following code to `ar-demo.js`:
+
+```js title="ar-demo.js" hl_lines="12-15"
+window.onload = async function()
+{
+    try {
+        if(!Martins.isSupported()) {
+            throw new Error(
+                'Use a browser/device compatible with WebGL2 and WebAssembly. ' +
+                'Your user agent is ' + navigator.userAgent
+            );
+        }
+
+        const tracker = Martins.Tracker.ImageTracker();
+        await tracker.database.add([{
+            name: 'my-reference-image',
+            image: document.getElementById('my-reference-image')
+        }]);
+    }
+    catch(error) {
+        alert(error.message);
+    }
+};
+```
+
+Reload the page. If you see no errors popping up, it means that the image is linked to the tracker. You're ready to proceed!