<div className="doc-container">
# Documentation
8th Wall provides the complete solution to create WebAR, WebVR experiences
and 3D games that run directly in a web browser.
## 8th Wall Studio
8th Wall Studio is a real-time visual editor and game engine that combines the speed and power of the
web with the tools needed to create hyper-immersive 3D and XR experiences.
Studio has a visual 3D editor interface to create XR and web games across devices.
<div className="doc-grid">
<a href="studio" className="doc-card-link">
<div className="doc-card">
<div className="doc-card-icon">
<svg width="24" height="24" viewBox="-1 -6 34 34" fill="currentColor">
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.9038 16.25C31.9038 14.0867 30.6093 7.18816 30.6093 7.18816L30.6263 7.20519C29.8428 2.41876 27.2537 0 22.859 0H9.06185C4.65016 0 2.07809 2.41876 1.29455 7.20519C1.29455 7.20519 0 14.1038 0 16.267C0 18.4303 1.20938 20.7128 3.88365 20.7128C6.38758 20.7128 7.40959 18.8902 8.10797 17.1698L9.18108 14.6659H22.7227L23.7959 17.1187C24.4942 18.8902 25.5674 20.6958 28.0713 20.6958C30.7456 20.6958 31.9038 18.4133 31.9038 16.25ZM8.89083 7.0548H11.1092C11.5983 7.0548 12 7.45655 12 7.94563C12 8.43471 11.5983 8.83646 11.1092 8.83646H8.89083V11.0548C8.89083 11.5439 8.48908 11.9456 8 11.9456C7.51092 11.9456 7.10917 11.5439 7.10917 11.0548V8.83646H4.89083C4.40175 8.83646 4 8.43471 4 7.94563C4 7.45655 4.40175 7.0548 4.89083 7.0548H7.10917V4.83646C7.10917 4.34738 7.51092 3.94563 8 3.94563C8.48908 3.94563 8.89083 4.34738 8.89083 4.83646V7.0548ZM22.9996 6.44579C22.1509 6.44579 21.4996 5.79448 21.4996 4.9458C21.4996 4.09711 22.1509 3.4458 22.9996 3.4458C23.8483 3.4458 24.4996 4.09711 24.4996 4.9458C24.4996 5.79448 23.8483 6.44579 22.9996 6.44579ZM21.4996 10.9455C21.4996 11.7941 22.1509 12.4455 22.9996 12.4455C23.8483 12.4455 24.4996 11.7941 24.4996 10.9455C24.4996 10.0968 23.8483 9.44547 22.9996 9.44547C22.1509 9.44547 21.4996 10.0968 21.4996 10.9455ZM20 9.44584C19.1513 9.44584 18.5 8.79453 18.5 7.94585C18.5 7.09717 19.1513 6.44586 20 6.44586C20.8487 6.44586 21.5 7.09717 21.5 7.94585C21.5 8.79453 20.8487 9.44584 20 9.44584ZM24.4997 7.94585C24.4997 8.79453 25.151 9.44584 25.9997 9.44584C26.8483 9.44584 27.4997 8.79453 27.4997 7.94585C27.4997 7.09717 26.8483 6.44586 25.9997 6.44586C25.151 6.44586 24.4997 7.09717 24.4997 7.94585Z"></path>
</svg>
</div>
<div className="doc-card-content">
<h3 className="doc-card-title">Studio Manual</h3>
<p className="doc-card-description">Access documentation for 8th Wall's visual Studio toolkit.</p>
</div>
</div>
</a>
<a href="studio/api" className="doc-card-link">
<div className="doc-card">
<div className="doc-card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6"/>
<polyline points="8 6 2 12 8 18"/>
</svg>
</div>
<div className="doc-card-content">
<h3 className="doc-card-title">Studio API</h3>
<p className="doc-card-description">Access documentation for the 8th Wall Studio API.</p>
</div>
</div>
</a>
</div>
## 8th Wall Engine
The 8th Wall AR Engine is a complete implementation of 8th Wall's Simultaneous Localization and Mapping (SLAM) engine, hyper-optimized for real-time WebAR on browsers. AR features include World Tracking, Image Targets, Face Effects,
and Sky Segmentation.
The engine is built-in to Studio projects, and is also easily integrated into modern 3D JavaScript frameworks such as [A-Frame](<https://aframe.io/>), [three.js](<https://threejs.org/>), [PlayCanvas](<https://www.playcanvas.com>), and [Babylon.js](<https://www.babylonjs.com/>).
<div className="doc-grid">
<a href="engine" className="doc-card-link">
<div className="doc-card">
<div className="doc-card-icon">
<svg width="24" height="24" viewBox="-3 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-105.000000, -101.000000)" fill="currentColor">
<path d="M125,109 C123.896,109 123,108.104 123,107 L123,103 L129,109 L125,109 L125,109 Z M124,119 L112,119 C111.448,119 111,118.553 111,118 C111,117.448 111.448,117 112,117 L124,117 C124.552,117 125,117.448 125,118 C125,118.553 124.552,119 124,119 L124,119 Z M124,125 L112,125 C111.448,125 111,124.553 111,124 C111,123.447 111.448,123 112,123 L124,123 C124.552,123 125,123.447 125,124 C125,124.553 124.552,125 124,125 L124,125 Z M123,101.028 C122.872,101.028 109,101 109,101 C106.791,101 105,102.791 105,105 L105,129 C105,131.209 106.791,133 109,133 L127,133 C129.209,133 131,131.209 131,129 L131,109 L123,101.028 L123,101.028 Z" id="text-document" sketch:type="MSShapeGroup">
</path>
</g>
</g>
</svg>
</div>
<div className="doc-card-content">
<h3 className="doc-card-title">Engine Manual</h3>
<p className="doc-card-description">Access documentation and guides for working with the 8th Wall Engine.</p>
</div>
</div>
</a>
<a href="engine/api" className="doc-card-link">
<div className="doc-card">
<div className="doc-card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6"/>
<polyline points="8 6 2 12 8 18"/>
</svg>
</div>
<div className="doc-card-content">
<h3 className="doc-card-title">Engine API</h3>
<p className="doc-card-description">Access documentation for the 8th Wall Engine API.</p>
</div>
</div>
</a>
</div>
<div className="resources-section">
<h2 className="resources-title">Additional Resources</h2>
<div className="resources-grid">
<a href="https://github.com/8thwall/8thwall" target="_blank" className="resource-card">
<div className="resource-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg>
</div>
<div className="resource-content">
<h3 className="resource-title">Github</h3>
<p className="resource-description">Connect with other developers, report issues, and contribute to the open source project.</p>
</div>
</a>
<a href="https://8th.io/discord" target="_blank" className="resource-card">
<div className="resource-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
<path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
</svg>
</div>
<div className="resource-content">
<h3 className="resource-title">Discord</h3>
<p className="resource-description">Join our developer community for real-time support, best practices, and updates on new features.</p>
</div>
</a>
</div>
</div>
</div>