Merge branch 'dev'

kalegd · Aug 16, 2024 · 88496b1 · 88496b1
2 parents 3273a38 + 1ca3a07
commit 88496b1
Show file tree

Hide file tree

Showing 68 changed files with 1,951 additions and 199 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ Create 3D websites easily that run on AR, VR, Desktop, and Mobile devices with D
 
 </div>
 
-#### How to use
+### How to use
 Go to the [Digital Bacon Editor](https://digitalbacon.io/app) to create a 3D website and then save your project zip file. You can then host your project using the below html snippet (or just [fork this repo](https://github.com/kalegd/DigitalBaconSampleProject) and replace my-project.zip with your project file)
 ```html
 <html>
@@ -39,7 +39,9 @@ Go to the [Digital Bacon Editor](https://digitalbacon.io/app) to create a 3D web
 </html>
 ```
 
-To enable multi-user sessions on your website, you'll need an authUrl and socketUrl from a third party service like [My Digital Bacon](https://mydigitalbacon.com) and add those to your setup parameters like so
+### Adding Multi-User Support
+
+You'll need an authUrl and socketUrl tied to a server to handle all the handshaking and management between users. [My Digital Bacon](https://mydigitalbacon.com) offers a free tier that you can use for this purpose, just create an account and add your website's origin as an external project and you'll get the necessary urls to be plugged into your setup parameters like so
 ```javascript
 let params = {
     projectFilePath: './my-project.zip',
@@ -49,7 +51,7 @@ let params = {
 setup("my-container-id", params);
 ```
 
-## Local Network Testing
+### Local Network Testing
 
 If you want to test your changes with another device on your local network, you can run `npm run start-ssl`. Before doing this you'll need to create both cert.pem and key.pem files. Mac Users can generate these files via `openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem`
 

diff --git a/articles.html b/articles.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>3D Website Building Articles</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="stylesheet" href="/css/resources.css">
+    <link rel="stylesheet" href="/css/articles.css">
+    <link href="https://fonts.cdnfonts.com/css/montserrat" rel="stylesheet">
+  </head>
+  <body>
+    <div id="doc-container">
+      <div class="sidebar">
+        <a href="/">
+          <img src="/images/digital_bacon_pig_compressed.png" alt="Digital Bacon logo" class="logo">
+        </a>
+        <div id="sidebar-navigation">
+          <ul>
+            <li>
+              <a href="#section/Tutorials">
+                <label type="section" role="menuitem">
+                  <span title="Tutorials">Tutorials</span>
+                </label>
+              </a>
+            </li>
+            <li>
+              <a href="#section/TipsAndTricks">
+                <label type="section" role="menuitem">
+                  <span title="TipsAndTricks">Tips and Tricks</span>
+                </label>
+              </a>
+            </li>
+            <li>
+              <a href="#section/DeveloperContent">
+                <label type="section" role="menuitem">
+                  <span title="DeveloperContent">Developer Content</span>
+                </label>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="main-content">
+        <a class="only-large-screen" href="/">
+          <img src="/images/digital_bacon_pig_compressed.png" alt="Digital Bacon logo" class="logo">
+        </a>
+        <h1 id="section/Tutorials">Tutorials</h1>
+        <p>Coming Soon!</p>
+        <!--<ul class="article-list">
+          <li>
+            <a href="/articles/creating-a-lens-of-truth">
+              <h3>Creating a Lens of Truth</h3>
+              <p>In this tutorial, we'll hide a secret message behind a painting and then create a tool to see it</p>
+            </a>
+          </li>
+        </ul>-->
+        <h1 id="section/TipsAndTricks">Tips and Tricks</h1>
+        <p>Coming Soon!</p>
+        <!--<ul class="article-list">
+          <li>
+            <a href="/articles/the-transparency-problem">
+              <h3>The Transparency Problem</h3>
+              <p>Transparent asset not showing what's behind it correctly? Let's dive into why that happens and how to fix it by updating the render order for different objects</p>
+            </a>
+          </li>
+        </ul>-->
+        <h1 id="section/DeveloperContent">Developer Content</h1>
+        <p>Coming Soon!</p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/articles/creating-a-lens-of-truth.html b/articles/creating-a-lens-of-truth.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Digital Bacon Tutorials - Creating a Lens of Truth</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="stylesheet" href="/css/articles.css">
+    <link href="https://fonts.cdnfonts.com/css/montserrat" rel="stylesheet">
+  </head>
+  <body>
+    <div class="header-nav-bar">
+      <span class="p-16px w-50px">
+        <a href="/">
+          <img src="/images/digital_bacon_pig_compressed.png" alt="Digital Bacon logo" class="logo">
+        </a>
+      </span>
+      <span><a href="/articles">Back to all Articles</a></span>
+    </div>
+    <div class="content">
+      <h1 class="ta-center">Creating a Lens of Truth</h1>
+      <p>In this tutorial, we'll hide a secret message behind a painting and then create a tool to see it</p>
+      <blockquote><a href="#">See this tutorial on YouTube</a></blockquote>
+      <img src="/articles/images/transparency_problem.png" alt="Digital Bacon Transparency Problem">
+      <p><em>The Lens of Truth we'll be creating in action</em></p>
+      <h3>Setting up our Scene</h3>
+      <p>Let's open up the <a href="/app">Digital Bacon Editor</a> and create an exhibit wall. Opening the virtual menu and select Library -&gt; Shapes -&gt; Plus (+) button -&gt; Box. Then you can set your box width + height to 1 meter or your preferred dimensions and add a new Standard Material to it to set the color</p>
+      <p>Now let's add our secret message to the wall and then a painting on top of it. There's a plugin to conveniently add Text to Digital Bacon websites. If you're using the default project then you can just add it from the Other Assets section. Otherwise just copy and paste the plugin from the <a href="/plugins">plugins page</a></p>
+      <img src="/articles/images/transparency_problem.png" alt="Digital Bacon Transparency Problem">
+      <p><em>You should have something like this now</em></p>
+      <p>To keep performance smooth and maintain high frame rates, rendering engines try to avoid unnecessary calculations. They skip over the parts of assets that are hidden behind others. The renderer only takes the geometry of an asset into account when seeing what should be skipped, not its material or transparency. You might think nothing would ever be displayed behind a transparent asset then right?</p>
+      <p>Fortunately, the rendering engine renders all solid assets first. This ensures that a transparent asset won't block a solid one from being displayed. The issue is usually encountered among multiple transparent assets. To get around this, rendering engines oftentimes let you specify the <code>Render Order</code> for an asset. Assets with a higher render order won't prevent assets with a lower render order from being displayed</p>
+      <h3>Solution</h3>
+      <p>Increase the render order of the transparent asset that is hiding other assets or decrease the render order for the asset(s) being hidden to solve the transparency problem. When using the <a href="/app">Digital Bacon Editor</a>, the Render Order attribute is typically found on the last page of an asset when editing via the virtual menu</p>
+      <img src="/articles/images/transparency_problem_2.png" alt="Digital Bacon Transparency Problem Solved">
+      <p><em>After increasing the render order of our piggy, the ocean is now perfectly visible behind it 😄</em></p>
+      <p>Once you've cleaned up those transparency issues on your website, it's time to share your work online. Check out <a href="https://mydigitalbacon.com">My Digital Bacon</a> as an easy to use and convenient hosting service. The user-friendly platform offers a free tier with no payment details required, so you can explore all their features risk-free. Plus, if you choose to host elsewhere, My Digital Bacon can still enable multi-user sessions using its servers to enhance the user experience of your website</p>
+    </div>
+  </body>
+</html>
diff --git a/articles/images/transparency_problem.png b/articles/images/transparency_problem.png
diff --git a/articles/images/transparency_problem_2.png b/articles/images/transparency_problem_2.png
diff --git a/articles/the-transparency-problem.html b/articles/the-transparency-problem.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Digital Bacon Tips and Tricks - The Transparency Problem</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="stylesheet" href="/css/articles.css">
+    <link href="https://fonts.cdnfonts.com/css/montserrat" rel="stylesheet">
+  </head>
+  <body>
+    <div class="header-nav-bar">
+      <span class="p-16px w-50px">
+        <a href="/">
+          <img src="/images/digital_bacon_pig_compressed.png" alt="Digital Bacon logo" class="logo">
+        </a>
+      </span>
+      <span><a href="/articles">Back to all Articles</a></span>
+    </div>
+    <div class="content">
+      <h1 class="ta-center">The Transparency Problem</h1>
+      <p>Transparent asset not showing what's behind it correctly? Let's dive into why that happens and how to fix it by updating the render order for different objects</p>
+      <img src="/articles/images/transparency_problem.png" alt="Digital Bacon Transparency Problem">
+      <p><em>After uploading a png photo of our piggy to the Digital Bacon Editor, the ocean disappears behind the transparent portions of the image at certain angles 😑</em></p>
+      <h3>Why things disappear behind transparent assets</h3>
+      <p>To understand why, we need to learn about how rendering engines decide what to display</p>
+      <p>To keep performance smooth and maintain high frame rates, rendering engines try to avoid unnecessary calculations. They skip over the parts of assets that are hidden behind others. The renderer only takes the geometry of an asset into account when seeing what should be skipped, not its material or transparency. You might think nothing would ever be displayed behind a transparent asset then right?</p>
+      <p>Fortunately, the rendering engine renders all solid assets first. This ensures that a transparent asset won't block a solid one from being displayed. The issue is usually encountered among multiple transparent assets. To get around this, rendering engines oftentimes let you specify the <code>Render Order</code> for an asset. Assets with a higher render order won't prevent assets with a lower render order from being displayed</p>
+      <h3>Solution</h3>
+      <p>Increase the render order of the transparent asset that is hiding other assets or decrease the render order for the asset(s) being hidden to solve the transparency problem. When using the <a href="/app">Digital Bacon Editor</a>, the Render Order attribute is typically found on the last page of an asset when editing via the virtual menu</p>
+      <img src="/articles/images/transparency_problem_2.png" alt="Digital Bacon Transparency Problem Solved">
+      <p><em>After increasing the render order of our piggy, the ocean is now perfectly visible behind it 😄</em></p>
+      <p>Once you've cleaned up those transparency issues on your website, it's time to share your work online. Check out <a href="https://mydigitalbacon.com">My Digital Bacon</a> as an easy to use and convenient hosting service. The user-friendly platform offers a free tier with no payment details required, so you can explore all their features risk-free. Plus, if you choose to host elsewhere, My Digital Bacon can still enable multi-user sessions using its servers to enhance the user experience of your website</p>
+    </div>
+  </body>
+</html>
diff --git a/build/DigitalBacon.js b/build/DigitalBacon.js
diff --git a/build/DigitalBacon.min.js b/build/DigitalBacon.min.js
diff --git a/css/articles.css b/css/articles.css
@@ -0,0 +1,119 @@
+body {
+    font-family: Montserrat, sans-serif;
+    text-rendering: optimizespeed !important;
+    -webkit-font-smoothing: antialiased;
+}
+
+h3 {
+    color: #3e3e3e;
+}
+
+blockquote {
+    margin-inline-start: 0px;
+    padding-inline-start: 40px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    border-left-style: solid;
+    border-left-color: #404040;
+    font-style: italic;
+}
+
+img {
+    max-height: 100%;
+    max-width: 100%;
+}
+
+.article-list {
+    list-style: none;
+    padding-inline-start: 0;
+}
+
+.article-list li {
+    box-shadow: 0.01rem 0.01rem .15rem rgba(0, 0, 0, 0.3);
+    background-color: white;
+    cursor: pointer;
+    max-width: 600px;
+    padding: 1rem;
+}
+
+.article-list li a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.article-list li:hover {
+    background-color: #fafafa;
+}
+
+.header-nav-bar {
+    align-items: center;
+    border-bottom: solid 1px #f2f2f2;
+    display: flex;
+    flex-direction: row;
+    height: 50px;
+    width: 100%;
+}
+
+.header-nav-bar a {
+    color: #3d3d3d;
+    text-decoration: none;
+}
+
+.header-nav-bar a:hover {
+    text-decoration: underline;
+}
+
+.content {
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    margin-top: 50px;
+    max-width: 680px;
+    width: 85%;
+}
+
+.content h1 {
+    font-family: Montserrat, sans-serif;
+    font-weight: 400;
+    font-size: 1.85714em;
+    line-height: 1.6em;
+    color: rgb(50, 50, 159);
+}
+
+.content a:visited {
+    color: blue;
+}
+
+.content p, .content blockquote {
+    line-height: 24px;
+}
+
+.content p code {
+    background-color: #efefef;
+    border-radius: 3px;
+    font-size: 16px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+.content img {
+    border-radius: 6px;
+}
+
+.p-16px {
+    padding: 16px;
+}
+
+.ta-center {
+    text-align: center;
+}
+
+.w-50px {
+    width: 50px;
+}
+
+.w-50 {
+    width: 50%;
+}
diff --git a/css/index.css b/css/index.css
@@ -71,18 +71,18 @@ a, a:hover, a:active, a:visited {
     padding: 0px 7px;
 }
 
-#features, #resources {
+#who-this-is-for, #resources {
     background: rgba(255, 255, 255, 0.5);
     padding: 1px 20px;
     min-height: 100%;
-    color: #4723D9;
+    color: rgba(0, 0, 0, 0.8);
 }
 
-#hosting, #contact-us {
+#features, #contact-us {
     background: rgba(0, 0, 0, 0.5);
     padding: 1px 20px;
     min-height: 100%;
-    color: #ffc7e5;
+    color: #ffffff;
 }
 
 #footer {
@@ -93,7 +93,7 @@ a, a:hover, a:active, a:visited {
     width: 100%;
 }
 
-.dark-box, .light-box {
+.dark-box, .light-box, .darker-box {
     height: 180px;
     max-width: 250px;
     border-radius: 8px;
@@ -107,6 +107,11 @@ a, a:hover, a:active, a:visited {
     color: white;
 }
 
+.darker-box {
+    background-color: rgba(0, 0, 0, 0.85);
+    color: white;
+}
+
 .light-box {
     background-color: rgba(255, 255, 255, 0.75);
     color: black;

diff --git a/css/resources.css b/css/resources.css
@@ -294,7 +294,7 @@ table.basic-table tr:nth-child(even) {
     padding-top: 10px;
 }
 
-.template-buttons > a {
+.template-buttons > a, .green-button {
     background-color: #673ab7;
     border-radius: 4px;
     color: #ffffff;
@@ -304,8 +304,8 @@ table.basic-table tr:nth-child(even) {
     text-decoration: none;
 }
 
-.template-buttons > a:nth-child(2) {
-    background-color: #8ab73a;
+.template-buttons > a:nth-child(2), .green-button {
+    background-color: #4bb83a;
 }
 
 .bold {
@@ -340,14 +340,14 @@ table.basic-table tr:nth-child(even) {
     padding: 10px;
 }
 
-.pb-40 {
-    padding-bottom: 40px;
-}
-
 .c-blue {
     color: rgb(50, 50, 159);
 }
 
+.pb-40 {
+    padding-bottom: 40px;
+}
+
 @media screen and (max-width: 30rem) {
     td {
         min-width: auto !important;

diff --git a/images/icons/text_icon_white.png b/images/icons/text_icon_white.png