├── CNAME
├── LICENSE
├── Poster
    └── PNG
    │   └── arvr-stack.png
├── README.md
├── fonts
    ├── .DS_Store
    ├── Agrandir-GrandMedium.ttf
    ├── Eina01-Bold.otf
    ├── Eina01-BoldItalic.otf
    ├── Eina01-Regular.otf
    ├── Eina01-RegularItalic.otf
    └── Flame-Bold.ttf
├── images
    ├── Cclogocircle.png
    ├── burger-2.png
    └── favicon.ico
├── index.html
├── pdf
    └── xr-stack.pdf
└── png
    ├── Cclogocircle.png
    ├── burger-2.png
    ├── favicon.ico
    ├── preview.png
    └── twitter-preview.png


/CNAME:
--------------------------------------------------------------------------------
1 | www.xrstack.dev


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Jasmine Roberts
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/Poster/PNG/arvr-stack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/Poster/PNG/arvr-stack.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Understanding the XR Technology Stack
  2 | 
  3 | There are a myriad of options for developing immersive experience and the details complex. It seems as if biweekly, there are new SDKs, frameworks and technologies introduced to XR (Augmented, Virtual and Mixed Reality) developers. 
  4 | 
  5 | Anyone new to the field or with a keen interest in learning may have the potential to be a great contributor but have no insights regarding the pipeline or how to approach building for XR. This repository seeks to consolidate information for current and aspiring XR developers.
  6 | 
  7 | *Note: This is a resource from a lecture given November 17, 2021 for CS 460 Computer Graphics. This does not include cryptocurrencies/blockchain technologies. This is specifically geared towards XR, 3D, and gaming technologies*
  8 | 
  9 | 
 10 |  
 11 | ## Contributing
 12 |  
 13 | To add to this resource, send a pull request. If you aren't familiar enough with git/Github, just open an [issue](https://github.com/jasmineroberts/metaverse-stack/issues).
 14 | 
 15 | Enjoy! 
 16 | 
 17 | 🍔
 18 | 
 19 | 
 20 | ### Frontend
 21 | A-Frame www.github.com/aframevr/aframe \
 22 | Adobe Aero www.adobe.com/products/aero.html \
 23 | AngularJS https://angularjs.org/ \
 24 | AR.js https://developer.vuforia.com/downloads/sdk \
 25 | BabylonJS https://www.babylonjs.com/ \
 26 | JanusWeb https://github.com/jbaicoianu/janusweb \
 27 | JavaScript https://www.javascript.com/ \
 28 | PrimroseVR https://www.primrosevr.com/ \
 29 | React XR https://www.npmjs.com/package/react-vr \
 30 | Reality Composer https://apps.apple.com/us/app/reality-composer/id1462358802 \
 31 | RealityKit https://developer.apple.com/documentation/realitykit \
 32 | 
 33 |  
 34 |  
 35 | ### SDKs
 36 | ARCore https://developers.google.com/ar/ \
 37 | ARKit https://developer.apple.com/augmented-reality/ \
 38 | CameraKit SDK https://kit.snapchat.com/camera-kit \
 39 | Cloud XR SDK https://developer.nvidia.com/nvidia-cloudxr-sdk \
 40 | Easy AR https://www.easyar.com/ \
 41 | Google VR SDK (now Cardboard SDK) https://developers.google.com/vr/develop/unity/get-started-android \
 42 | LightShip ARDK https://lightship.dev/ \
 43 | Lumin SDK https://developer.magicleap.com/downloads/lumin-sdk/ \
 44 | Mixed Reality Extension SDK https://github.com/Microsoft/mixed-reality-extension-sdk \
 45 | MRTK https://docs.microsoft.com/en-us/windows/mixed-reality/mrtk-unity/ \
 46 | Normcore https://normcore.io/ \
 47 | Oculus SDK https://developer.oculus.com/ \
 48 | OpenVR SDK https://github.com/ValveSoftware/openvr \
 49 | Photon https://www.photounengine.com/sdks \
 50 | Snapdragon Spaces https://www.qualcomm.com/products/features/snapdragon-spaces-xr-platform/ \
 51 | Tobii XR SDK https://vr.tobii.com/sdk/ \
 52 | Vive Sense SDK https://developer.vive.com/resources/vive-sense/ \
 53 | VRTK https://www.vrtk.io/ \
 54 | Vuforia https://developer.vuforia.com/downloads/sdk \
 55 | Wikitude https://www.wikitude.com/products/wikitude-sdk/ \
 56 | XRTK https://xrtk.io/ 
 57 |  
 58 | ### APIs
 59 | Advanced API https://vr.tobii.com/sdk/develop/unity/documentation/api-reference/ \
 60 | ARCore https://arvr.google.com/arcore/ \
 61 | Core API https://vr.tobii.com/sdk/develop/unity/documentation/api-reference/ \
 62 | Mozilla WebVR https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Fundamentals \
 63 | Oculus https://dashboard.oculus.com/app/api \
 64 | Open XR https://www.khronos.org/OpenXR/ \
 65 | WebAudio https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API \
 66 | threeJS https://github.com/mrdoob/three.js/ \
 67 | WebXR https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API 
 68 |  
 69 | ### Protocols
 70 | SOAP https://www.w3.org/TR/soap/ \
 71 | WebRTC https://webrtc.org/ \
 72 | Websockets https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
 73 |  
 74 | ### Databases
 75 | MySQL https://dev.mysql.com/doc/ \
 76 | NoSQL https://docs.oracle.com/en/database/other-databases/nosql-database/ \
 77 | PostgreSQL https://www.postgresql.org/docs/ \
 78 | VRML https://www.w3.org/MarkUp/VRML/ \
 79 | WebRTC https://webrtc.org/ \
 80 | Websockets https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API \
 81 | X3D https://www.web3d.org/x3d/what-x3d \
 82 | xVRML https://sourceforge.net/projects/xvrml/
 83 |  
 84 | ### Backend
 85 | .NET https://docs.microsoft.com/en-us/dotnet/ \
 86 | C# https://docs.microsoft.com/en-us/dotnet/csharp/ \
 87 | C++ https://www.cplusplus.com/doc/tutorial/ \
 88 | Java https://docs.oracle.com/en/java/ \
 89 | lua https://www.lua.org/docs.html \
 90 | Node.JS https://nodejs.org/en/docs/ \
 91 | Objective-C https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html#//apple_ref/doc/uid/TP40011210 \
 92 | Python https://docs.python.org/3/ \
 93 | Ruby https://www.ruby-lang.org/en/documentation/ \
 94 | Swift https://www.swift.org/documentation/ 
 95 |  
 96 |  
 97 | ### Engines/Platforms
 98 | 8th Wall Reality Engine https://www.8thwall.com/tutorials \
 99 | Amazon Sumerian https://aws.amazon.com/sumerian/ \
100 | Android https://developer.android.com/ \
101 | Azure https://azure.microsoft.com/ \
102 | iOS https://developer.apple.com/ios/ \
103 | Lens Studio https://www.lensstudio.snapchat.com/    
104 | Omniverse https://developer.nvidia.com/nvidia-omniverse-platform/ \
105 | PlayCanvas https://playcanvas.com/ \
106 | Roblox https://www.roblox.com/create/ \
107 | Spark AR https://sparkar.facebook.com/ar-studio/ \
108 | Unity https://unity.com/ (also see [Unity MARS](https://unity.com/products/unity-mars)) \
109 | Unreal https://www.unrealengine.com/ \
110 | Windows Mixed Reality https://www.microsoft.com/en-us/mixed-reality/windows-mixed-reality
111 | 
112 | 
113 | ### Appendix
114 | 
115 |  
116 |  
117 |                          ██████████████████████              
118 |                        ██░░░░░░  ░░░░  ░░░░░░░░██ 
119 |                      ██░░░░░░░░░░░░░░░░░░  ░░  ░░██          -- FRONT-END
120 |                    ██░░░░░░  ░░░░░░  ░░░░░░░░░░░░░░██
121 |                    ██░░  ░░░░░░  ░░░░░░  ░░░░░░  ░░██
122 |                    ██████████████████████████████████
123 |                        ██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██            -- SDKs
124 |                    ██████████████████████████████████
125 |                    ██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██        -- APIs
126 |                    ██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██
127 |                      ██████████████████████████████          -- DATABASES
128 |                    ██                              ██        -- PROTOCOLS 
129 |                       ████████  ████░░████  ████  ██
130 |                    ██░░██░░░░██░░░░██░░░░██░░░░██░░██        -- BACKEND
131 |                    ██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██
132 |                      ██████████████████████████████          -- ENGINES/PLATFORMS
133 |                    ██████████████████████████████████
134 |               
135 |  
136 |  
137 |  
138 | 
139 | 
140 | 


--------------------------------------------------------------------------------
/fonts/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/fonts/.DS_Store


--------------------------------------------------------------------------------
/fonts/Agrandir-GrandMedium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/fonts/Agrandir-GrandMedium.ttf


--------------------------------------------------------------------------------
/fonts/Eina01-Bold.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/fonts/Eina01-Bold.otf


--------------------------------------------------------------------------------
/fonts/Eina01-BoldItalic.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/fonts/Eina01-BoldItalic.otf


--------------------------------------------------------------------------------
/fonts/Eina01-Regular.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/fonts/Eina01-Regular.otf


--------------------------------------------------------------------------------
/fonts/Eina01-RegularItalic.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/fonts/Eina01-RegularItalic.otf


--------------------------------------------------------------------------------
/fonts/Flame-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/fonts/Flame-Bold.ttf


--------------------------------------------------------------------------------
/images/Cclogocircle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/images/Cclogocircle.png


--------------------------------------------------------------------------------
/images/burger-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/images/burger-2.png


--------------------------------------------------------------------------------
/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/images/favicon.ico


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <title>AR/VR Development Stack</title>
  6 |     <link rel="icon" type="image/x-icon" href="images/favicon.ico" />
  7 |     <meta
  8 |       name="description"
  9 |       content="Repository of libraries, frameworks and SDKs to build augmented, virtual, and mixed reality. "
 10 |     />
 11 | 	  <meta property="og:image" itemprop="image primaryImageOfPage" content="https://github.com/jasmineroberts/xr-stack/blob/7f4431722e20b6ec77e996e7efec7e4ee980fe97/png/preview.png?raw=true">
 12 | 	  
 13 | <meta property='twitter:title' content="XR Stack"/>
 14 | <meta property='twitter:image' content="https://github.com/jasmineroberts/xr-stack/blob/main/png/twitter-preview.png?raw=true"/>
 15 | <meta name="twitter:card" content="summary_large_image"/>
 16 |     <meta
 17 |       name="keywords"
 18 |       content="XR Stack, Metaverse, XR, Metaverse Stack, Augmented Reality, Virtual Reality"
 19 |     />
 20 |     <style>
 21 |       body {
 22 |         margin: 0;
 23 |         padding: 0;
 24 |         background-color: #efefef;
 25 |       }
 26 | 
 27 |       @font-face {
 28 |         font-family: "Eina-Regular";
 29 |         src: url("fonts/Eina01-Regular.otf") format("opentype");
 30 |         font-weight: normal;
 31 |         font-style: normal;
 32 |       }
 33 | 
 34 |       @font-face {
 35 |         font-family: "Eina-italic";
 36 |         src: url("fonts/Eina01-RegularItalic.otf") format("opentype");
 37 |         font-weight: normal;
 38 |         font-style: italic;
 39 |       }
 40 | 
 41 |       @font-face {
 42 |             font-family: "Flame";
 43 |             src: url("fonts/Flame-Bold.ttf") format("truetype");
 44 |     
 45 |       }
 46 | 
 47 | 
 48 |       @font-face {
 49 |         font-family: "Eina-Bold";
 50 |         src: url("fonts/Eina01-Bold.otf") format("opentype");
 51 |         font-weight: bold;
 52 |         font-style: normal;
 53 |       }
 54 | 
 55 |       @font-face {
 56 |         font-family: "Eina-BoldItalic";
 57 |         src: url("fonts/Eina01-BoldItalic.otf") format("opentype");
 58 |       }
 59 | 
 60 |       @font-face {
 61 |         font-family: "Agrandir";
 62 |         src: url("fonts/Agrandir-GrandMedium.ttf") format("truetype");
 63 |       }
 64 | 
 65 |       a:link {
 66 |         color: #000; /* Link color */
 67 |         text-decoration: none; /* Remove underline */
 68 |         font-family: "Eina-Bold"; /* Default font */
 69 |       }
 70 | 
 71 |       a:visited {
 72 |         color: black; /* Visited link color */
 73 |         font-family: "Eina-BoldItalic"; /* Default font */
 74 |       }
 75 | 
 76 |       a:hover {
 77 |         color: black; /* Hover color */
 78 |         font-family: "Eina-BoldItalic"; /* Default font */
 79 |       }
 80 | 
 81 |       a:active {
 82 |         color: black; /* Selected color */
 83 |         font-family: "Eina-Bold-Italic"; /* Change font */
 84 |       }
 85 | 
 86 |       .pdf-container {
 87 |         position: absolute;
 88 |         top: 80px;
 89 |         width: 98%;
 90 |       }
 91 |       .footer {
 92 |         position: fixed;
 93 |         bottom: 0;
 94 |         left: 0;
 95 |         right: 0;
 96 |         height: 100px;
 97 |         background-color: #000;
 98 |         color: #fff;
 99 |         display: flex;
100 |         align-items: center;
101 |         justify-content: space-between;
102 |         padding: 0 20px;
103 |         font-family: "Eina-Regular";
104 |         font-size: 11px;
105 |         box-sizing: border-box;
106 |       }
107 |       .footer-left {
108 |         font-size: 11px;
109 |       }
110 |       .info-button {
111 |         /* position: absolute;
112 |         top: 10px;
113 |         right: 20px; */
114 |         /* align-self: flex-end; */
115 |         justify-self: flex-end;
116 |         width: 85px;
117 |         height: 45px;
118 |         border-radius: 50%;
119 |         background-color: #222;
120 |         color: #fff;
121 |         border: none;
122 |         outline: none;
123 |         cursor: pointer;
124 |         display: flex;
125 |         align-items: center;
126 |         justify-content: center;
127 |         font-size: 14px;
128 |         font-family: "Eina-Regular";
129 |       }
130 |       .info-button.active {
131 |         background-color: #000;
132 |       }
133 |       .popup {
134 |         position: fixed;
135 |         top: 50%;
136 |         left: 50%;
137 |         transform: translate(-50%, -50%);
138 |         width: 80%;
139 |         max-width: 600px;
140 |         background-color: #fff;
141 |         padding: 20px;
142 |         border-radius: 10px;
143 |         box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
144 |         display: none;
145 |         z-index: 999;
146 |         text-align: left;
147 |         font-family: "Eina-Regular";
148 |       }
149 |       .popup-close {
150 |         position: absolute;
151 |         top: 10px;
152 |         right: 10px;
153 |         width: 30px;
154 |         height: 30px;
155 |         border-radius: 50%;
156 |         background-color: #f00;
157 |         color: #fff;
158 |         border: none;
159 |         outline: none;
160 |         cursor: pointer;
161 |         display: flex;
162 |         align-items: center;
163 |         justify-content: center;
164 |         font-size: 18px;
165 |       }
166 |       h2 {
167 |         font-size: 24px;
168 |         margin-top: 0;
169 |       }
170 |       p {
171 |         font-size: 16px;
172 |         line-height: 1.5;
173 |         margin-bottom: 20px;
174 |       }
175 | 
176 |       /* New styles for header and button */
177 |       /* Header */
178 |       .header {
179 |         position: absolute;
180 |         top: 0;
181 |         left: 0;
182 |         right: 0;
183 |         height: 80px;
184 |         background-color: #fff;
185 |         display: flex;
186 |         align-items: center;
187 |         justify-content: flex-end;
188 |         padding: 0 20px;
189 |         font-family: "Flame";
190 |         box-sizing: border-box;
191 |         border-bottom: 1px solid #eee;
192 |         font-size: 40px;
193 |         line-height: 26px;
194 |         text-transform: uppercase;
195 |         text-align: left;
196 |       }
197 | 
198 |       .header-logo {
199 |         font-family: "Roboto", sans-serif;
200 |         font-size: 24px;
201 |         font-weight: bold;
202 |         color: #333;
203 |         text-transform: uppercase;
204 |       }
205 | 
206 |       .navbar {
207 |         position: absolute;
208 |         left: 50%;
209 |         transform: translateX(-50%);
210 |       }
211 | 
212 |       .header-nav-item {
213 |         margin-left: 30px;
214 |         font-family: "Roboto", sans-serif;
215 |         font-size: 16px;
216 |         color: #333;
217 |         text-transform: uppercase;
218 |         cursor: pointer;
219 |       }
220 | 
221 |       .header-nav-item:hover {
222 |         color: #666;
223 |       }
224 | 
225 |       .header-nav-item.active {
226 |         color: #e91e63;
227 |       }
228 | 	  
229 | 	  .mobile-display{display:none}
230 | 	  .desktop-display{display:block}
231 | 	  @media (max-width:800px){
232 | 	  . desktop-display {display:none}
233 | 	  . mobile-display {display:block}
234 | 	  }
235 | 
236 |     #pdf_container {
237 |       background: #ccc;
238 |       text-align: center;
239 |       display: none;
240 |       padding: 5px;
241 |       overflow: auto;
242 |       height: 100vh;
243 |     }
244 | 	  
245 |     </style>
246 |   </head>
247 |   
248 |   <div class="mobile-display">
249 |   <iframe src="https://docs.google.com/document/d/1LuJg7Q56Ar6PWNvqjmQh2SP-SYe16dmv/edit?usp=sharing&ouid=114465383771940359146&rtpof=true&sd=true"></iframe>
250 |   </div>
251 |  <div class="desktop-display">
252 |   <body>
253 |     <header class="header">
254 |       <nav class="navbar">
255 |         <!--<img src="burger-2.png" width="25px" alt="">--> XR Stack 
256 |         <sup><img src="png/Cclogocircle.png" width="14px" alt=""></sup>
257 |       </nav>
258 |       <button class="info-button"><marquee><span>INFO</span></marquee></button>
259 |     </header>
260 | 
261 |     <div class="pdf-container" id="pdf_container">
262 |       <!-- <object
263 |         data="pdf/xr-stack.pdf"
264 |         type="application/pdf"
265 |         width="100%"
266 |         height="800px">
267 |       </object> -->
268 |     </div>
269 |     <div class="footer">
270 |       <div class="footer-right">doi: 10.13140/RG.2.2.10465.17769</div>
271 |       <div class="footer-left">made with ☕ by Jasmine Roberts</div>
272 |     </div>
273 |     <div class="popup">
274 |       <p>
275 |         This resource is intended to detail the current software stack to
276 |         provide better understanding for anyone currently in or aspiring towards
277 |         augmented, mixed and virtual reality development. Please use and share
278 |         this resource with students and enthusiasts!
279 |       </p>
280 | 
281 |       <p>
282 |         <span
283 |           >Here is the
284 |           <a href="https://www.github.com/jasmineroberts/xr-stack"
285 |             >GitHub repo</a
286 |           >
287 |           with the associated links! <a href="https://github.com/jasmineroberts/xr-stack/blob/main/Poster/PNG/arvr-stack.png">Click here</a> to view and
288 |           download the poster!</span
289 |         >
290 |       </p>
291 |     </div></div>
292 | 
293 |     <script>
294 |       const infoButton = document.querySelector(".info-button");
295 |       const popup = document.querySelector(".popup");
296 |       const popupClose = document.querySelector(".popup-close");
297 | 
298 |       infoButton.addEventListener("click", function () {
299 |         if (popup.style.display === "block") {
300 |           popup.style.display = "none";
301 |           infoButton.classList.remove("active");
302 |           infoButton.innerHTML = "<marquee><span>INFO</span></marquee>";
303 |         } else {
304 |           popup.style.display = "block";
305 |           infoButton.classList.add("active");
306 |           infoButton.innerHTML = "<marquee><span>CLOSE</span></marquee>";
307 |         }
308 |       });
309 | 
310 |       popupClose.addEventListener("click", function () {
311 |         popup.style.display = "none";
312 |         infoButton.classList.remove("active");
313 |         infoButton.innerHTML = "<span>i</span>";
314 |       });
315 |       
316 |     </script>
317 | 
318 | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
319 | <link href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf_viewer.min.css" rel="stylesheet" type="text/css" />
320 | <script type="text/javascript">
321 |   LoadPdfFromUrl('pdf/xr-stack.pdf');
322 |     var pdfjsLib = window['pdfjs-dist/build/pdf'];
323 |     pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
324 |     var pdfDoc = null;
325 |     var scale = 1.3; //Set Scale for Zoom.
326 |     var resolution = IsMobile() ? 0.9 : 1; //Set Resolution as per Desktop and Mobile.
327 |     function LoadPdfFromUrl(url) {
328 |         //Read PDF from URL.
329 |         pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
330 |             pdfDoc = pdfDoc_;
331 |  
332 |             //Reference the Container DIV.
333 |             var pdf_container = document.getElementById("pdf_container");
334 |             pdf_container.style.display = "block";
335 |             // pdf_container.style.height = IsMobile() ? "1200px" : "820px";
336 |  
337 |             //Loop and render all pages.
338 |             for (var i = 1; i <= pdfDoc.numPages; i++) {
339 |                 RenderPage(pdf_container, i);
340 |             }
341 |         });
342 |     };
343 |     function RenderPage(pdf_container, num) {
344 |         pdfDoc.getPage(num).then(function (page) {
345 |             //Create Canvas element and append to the Container DIV.
346 |             var canvas = document.createElement('canvas');
347 |             canvas.id = 'pdf-' + num;
348 |             ctx = canvas.getContext('2d');
349 |             pdf_container.appendChild(canvas);
350 |  
351 |             //Create and add empty DIV to add SPACE between pages.
352 |             var spacer = document.createElement("div");
353 |             spacer.style.height = "20px";
354 |             pdf_container.appendChild(spacer);
355 |  
356 |             //Set the Canvas dimensions using ViewPort and Scale.
357 |             var viewport = page.getViewport({ scale: scale });
358 |             canvas.height = resolution * viewport.height;
359 |             canvas.width = resolution * viewport.width;
360 |                
361 |             //Render the PDF page.
362 |             var renderContext = {
363 |                 canvasContext: ctx,
364 |                 viewport: viewport,
365 |                 transform: [resolution, 0, 0, resolution, 0, 0]
366 |             };
367 |  
368 |             page.render(renderContext);
369 |         });
370 |     };
371 |  
372 |     function IsMobile() {
373 |         var r = new RegExp("Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini");
374 |         return r.test(navigator.userAgent);
375 |     }
376 | </script>
377 |   </body>
378 | </html>
379 | 


--------------------------------------------------------------------------------
/pdf/xr-stack.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/pdf/xr-stack.pdf


--------------------------------------------------------------------------------
/png/Cclogocircle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/png/Cclogocircle.png


--------------------------------------------------------------------------------
/png/burger-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/png/burger-2.png


--------------------------------------------------------------------------------
/png/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/png/favicon.ico


--------------------------------------------------------------------------------
/png/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/png/preview.png


--------------------------------------------------------------------------------
/png/twitter-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasmineroberts/xr-stack/9b36f6c034e6698d9740155b7b892fb853478985/png/twitter-preview.png


--------------------------------------------------------------------------------