Merge pull request #17 from BarthPaleologue/WIP

Added Main menu + game saves

README.md

@@ -53,5 +53,5 @@ Thank you to all the people who have contributed to CosmosJourneyer!
 
 ## Special Thanks
 
-- Bilal Molli for his fearless refactoring of the messy code base in its early days
+- Martin Molli for his fearless refactoring of the messy code base in its early days
 - The people from [BabylonJS](https://www.babylonjs.com/) for their amazing work on the BabylonJS framework and their help on the forum

src/html/mainMenu.html

@@ -0,0 +1,87 @@
+<div id="mainMenu">
+  <h1>CosmosJourneyer</h1>
+
+  <ul id="menuItems">
+    <li id="startButton">New Journey</li>
+    <li id="loadSaveButton">Load save</li>
+    <li class="disabled" title="Coming Soon!">Settings</li>
+    <li id="contributeButton">Contribute</li>
+    <li id="creditsButton">Credits</li>
+    <li id="aboutButton">About</li>
+  </ul>
+
+  <div id="loadSavePanel" class="rightPanel">
+    <div id="dropFileZone">
+      <p>Drop a save file here</p>
+    </div>
+  </div>
+
+  <div id="contribute" class="rightPanel">
+    <h2>Contribute</h2>
+
+    <h3>Bug reports</h3>
+
+    <p>If you experience any bug during your exploration, please add it to the <a
+      href=https://github.com/BarthPaleologue/CosmosJourneyer/issues"">issue tracker</a>. You can also send an email at
+      <a href="mailto:barth.paleologue@cosmosjourneyer.com">barth.paleologue@cosmosjourneyer.com</a>. Sending
+      screenshots and save files can help enormously with the debugging process.</p>
+
+    <h3>Know how to code?</h3>
+
+    <p>CosmosJourneyer is an open-source project which means anyone can help built it! Why not you?<br /> You can
+      check out
+      <a target="_blank"
+         href="https://github.com/BarthPaleologue/CosmosJourneyer">the repository of the project</a> for more details.
+      Please take a look at the contributing guidelines before starting to code for CosmosJourneyer.
+    </p>
+
+    <h3>Support financially</h3>
+
+    <p>Building CosmosJourneyer takes a lot of time and effort and yet is free for everyone. If you want to support the
+      project financially, you can do so on <a target="_blank" href="https://ko-fi.com/cosmosjourneyer">Ko-fi</a>. Any
+      amount is greatly appreciated and will help me keep working on CosmosJourneyer.</p>
+  </div>
+
+  <div id="credits" class="rightPanel">
+    <h2>Credits</h2>
+    <!--<p>Contributors:</p>
+    <img src="https://contrib.rocks/image?repo=BarthPaleologue/CosmosJourneyer"  alt="contributors" />-->
+    <p>Programmed by <a target="_blank" href="https://barth.paleologue.fr">Barthélemy Paléologue</a></p>
+    <p>Webpack configuration & Refactorings by <a target="_blank" href="https://github.com/happy44300">Martin Molli</a>
+    </p>
+    <p>Built with <a target="_blank" href="https://www.babylonjs.com/">Babylon.JS</a> and its awesome forum</p>
+    <p>Star colors made using <a target="_blank" href="https://www.fourmilab.ch/documents/specrend/">John Walker's
+      "Colour Rendering of Spectra"</a></p>
+    <p>Black hole shader based on <a target="_blank" href="https://www.shadertoy.com/view/tsBXW3">set111 implementation
+      on shadertoy</a></p>
+    <p>Lens flare shader based on <a target="_blank" href="https://www.shadertoy.com/view/wlcyzj">TheNosiriN
+      implementation on shadertoy</a></p>
+    <p>Fractal raymarching based on <a target="_blank" href="https://www.shadertoy.com/view/tsc3Rj">Nazlbit's
+      implementation</a> and <a target="_blank" href="https://www.shadertoy.com/view/wdjGWR">Myro's implementation</a>
+      on shadertoy</p>
+  </div>
+
+  <div id="about" class="rightPanel">
+    <h2>About</h2>
+
+    <p class="aboutText">
+      Hello fellow explorer!<br />
+      I am the creator of CosmosJourneyer, and I am glad you're interested in this project.
+      It was years in the making you see: back in 2016 already, when I was working on my 3D planetarium, I dreamed about
+      making the planets fully explorable. But then I was limited by how little I knew about computer graphics.<br />
+      <br />
+      I only started CosmosJourneyer years later as a way to escape from the stress of my studies in French "classes
+      préparatoires". At first, it was only a small procedural planet generator, which was called PlanetEngine.
+      But as ideas kept on coming, I continued working on it for years and the project grew way beyond what I had
+      imagined at first.<br />
+      <br />
+      As I understand now that such projects cannot be achieved alone, I decided to open-source CosmosJourneyer so that
+      anyone could freely use and modify it to their liking and even contribute to the project.<br />
+      <br />
+      I hope you will enjoy CosmosJourneyer as much as I enjoy making it!
+    </p>
+    <p class="signature">Barthélemy Paléologue</p>
+    <p class="aboutText">If you have any question about CosmosJourneyer, feel free to contact me at <a
+      href="mailto:barth.paleologue@cosmosjourneyer.com">barth.paleologue@cosmosjourneyer.com</a></p>
+  </div>
+</div>

src/html/pauseMenu.html

@@ -11,6 +11,8 @@ <h1>Paused</h1>
 
         <div id="shareButton" class="button">Share System</div>
 
+        <div id="saveButton" class="button">Save</div>
+
         <div id="resumeButton" class="button">Resume</div>
 
     </div>

src/shaders/matterjet.glsl

@@ -24,10 +24,12 @@ uniform sampler2D depthSampler;// the depth map of the camera
 
 uniform float time;
 
-#include "./utils/camera.glsl"
+#include "./utils/camera.glsl";
 
 #include "./utils/object.glsl";
 
+#include "./utils/rotateAround.glsl";
+
 #include "./utils/remap.glsl";
 
 #include "./utils/worldFromUV.glsl";
@@ -97,12 +99,12 @@ float spiralDensity(vec3 pointOnCone, vec3 coneAxis, float coneMaxHeight) {
     float density = 1.0;
 
     // smoothstep fadeout when the height is too much (outside of cone) or too low (too close to the star)
-    density *= smoothstep(0.0, 1.0, 1.0 - heightFraction) * smoothstep(0.0, 0.05, heightFraction);
+    density *= smoothstep(1.0, 0.0, heightFraction) * smoothstep(0.0, 0.05, heightFraction);
 
-    float d = spiralSDF(theta + time, 0.2 + heightFraction) / (0.3 + heightFraction * 2.0);
+    float d = spiralSDF(theta + time, 0.2 + sqrt(heightFraction) / 2.0) / (0.3 + heightFraction * 2.0);
     //d = pow(d, 4.0);
 
-    density *= smoothstep(0.85, 1.0, 1.0 - d);
+    density *= smoothstep(0.6, 1.0, pow(1.0 - d, 8.0)) * 2.0; //smoothstep(0.85, 1.0, 1.0 - d) * 2.0;
 
     //density *= d * 500.0;
 
@@ -124,11 +126,11 @@ void main() {
     vec4 finalColor = screenColor;
 
     const float jetHeight = 10000000e3;
-    const vec3 jetColor = vec3(0.2, 0.2, 1.0);
+    const vec3 jetColor = vec3(0.5, 0.5, 1.0);
 
 
     float t1, t2;
-    if (rayIntersectCone(camera_position, rayDir, object_position, object_rotationAxis, 0.9, t1, t2)) {
+    if (rayIntersectCone(camera_position, rayDir, object_position, object_rotationAxis, 0.95, t1, t2)) {
         if (t2 > 0.0 && t2 < maximumDistance) {
             vec3 jetPointPosition2 = camera_position + t2 * rayDir - object_position;
 

src/shaders/rings/ringsDensity.glsl

@@ -29,7 +29,12 @@ float ringDensityAtPoint(vec3 samplePoint) {
     if (relativeDistance < rings_start || relativeDistance > rings_end) return 0.0;
 
     float uvX = remap(relativeDistance, rings_start, rings_end, 0.0, 1.0);
-    float lutDensity = texture2D(rings_lut, vec2(uvX, 0.0)).x;
+    vec2 uv = vec2(uvX, 0.0);
+
+    // trick from https://www.shadertoy.com/view/3dVSzm to avoid Greenwich artifacts
+    vec2 df = fwidth(uv);
+    if(df.x > 0.5) df.x = 0.0;
+    float lutDensity = textureLod(rings_lut, uv, log2(max(df.x, df.y) * 1024.0)).r;
 
     return lutDensity;
 }

src/styles/index.scss

@@ -15,6 +15,11 @@
 //  You should have received a copy of the GNU General Public License
 //  along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
+@font-face {
+  font-family: 'Nasalization';
+  src: url('./nasalization/nasalization-rg.otf');
+}
+
 *,
 *::before,
 *::after {
@@ -35,6 +40,8 @@ body {
 
   @import "pauseMenu/index.scss";
 
+  @import "mainMenu.scss";
+
   #renderer {
     z-index: 1;
     float: left;

src/styles/mainMenu.scss

@@ -0,0 +1,149 @@
+#mainMenu {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+
+  h1 {
+    font-family: 'Nasalization', sans-serif;
+    font-size: 8em;
+    text-align: center;
+    color: white;
+    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
+    transition: 0.1s;
+  }
+
+  ul#menuItems {
+    list-style-type: none;
+    padding: 0;
+    row-gap: 10px;
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    position: absolute;
+    top: 65vh;
+    left: 5%;
+    transform: translateY(-50%);
+    transition: 0.2s ease-in-out;
+
+    li {
+      color: white;
+      font-family: Nasalization, sans-serif;
+      font-size: 2em;
+      line-height: 1.5em;
+      cursor: pointer;
+      padding: 5px 20px;
+      transition: 0.1s;
+
+      &:hover {
+        background: #002b6a;
+      }
+
+      &.disabled {
+        color: grey;
+        cursor: not-allowed;
+      }
+
+      &.disabled:hover {
+        background: black;
+      }
+    }
+  }
+
+  .rightPanel {
+    position: absolute;
+    max-width: 1400px;
+    width: 72%;
+    right: 2.5vw;
+    height: 65vh;
+    bottom: 2.5vh;
+    transition: 0.2s ease-in-out;
+
+    transform: scale(0);
+    opacity: 0;
+
+    &.visible {
+      transform: scale(1);
+      opacity: 1;
+    }
+
+    box-shadow: 0 0 20px black;
+    background: rgba(0, 0, 0, 0.8);
+
+    h2 {
+      color: white;
+      text-align: center;
+      font-family: Nasalization, sans-serif;
+      font-size: 3em;
+      margin-block: 0.6em;
+    }
+
+    h3 {
+      color: white;
+      padding: 0 20px;
+      font-family: Nasalization, sans-serif;
+      font-size: 1.5em;
+    }
+
+    #dropFileZone {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      transition: 0.1s;
+
+      &.dragover {
+        background: rgba(255, 255, 255, 0.1);
+      }
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.05);
+      }
+
+      &.invalid {
+        background: rgba(255, 0, 0, 0.1);
+      }
+
+      p {
+        color: white;
+        font-family: Nasalization, sans-serif;
+        font-size: 1.5em;
+        text-align: center;
+        line-height: 1.5em;
+        padding: 0 20px;
+      }
+    }
+
+    &#credits {
+      p {
+        text-align: center;
+      }
+    }
+
+    p {
+      color: white;
+      font-family: Nasalization, sans-serif;
+      line-height: 1.5em;
+      font-size: 1.25em;
+      padding: 0 20px;
+
+      &.signature {
+        text-align: right;
+        font-style: italic;
+        padding-right: 60px;
+      }
+    }
+
+    a {
+      color: white;
+      transition: 0.1s;
+      text-decoration: underline solid rgba(255, 255, 255, 0.5);
+
+      &:hover {
+        text-decoration: underline solid white;
+      }
+    }
+  }
+}