Merge pull request #3 from flo-bit/main

link
flo-bit · Oct 27, 2024 · bc8d710 · bc8d710
2 parents 887b3c7 + 38c9536
commit bc8d710
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 97 deletions.
diff --git a/index.html b/index.html
@@ -1,39 +1,45 @@
 <!doctype html>
 <html lang="en">
 
-  <head>
-    <script>
-      !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
-      posthog.init('phc_1Q4q6SdTwvStnxFWbmdOIusLc5ve0u6Fk7WpsHPoAlD',{api_host:'https://eu.i.posthog.com', person_profiles: 'identified_only', persistence: 'memory'})
-    </script>
-
-    <title>tiny planets</title>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, user-scalable=no"
-    />
-
-    <link
-      rel="icon"
-      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌎</text></svg>"
-    />
-
-    <link rel="stylesheet" href="./index.css" />
-  </head>
-
-  <body class="bg-black"></body>
-    <button
-      id="button"
-      class="hidden p-2 px-3 border border-white/20 rounded-md text-white z-10 bg-white/10 absolute bottom-2 right-2 font-semibold text-lg hover:bg-white/20"
-    >
-      random
-    </button>
-
-    <canvas id="root"></canvas>
-
-    <a class="absolute bottom-2 left-3 text-cyan-400 text-sm font-semibold hover:text-cyan-300 transition-colors duration-100" href="https://flo-bit.dev" target="_blank">made by flo-bit</a>
-
-    <script src="src/script.ts" type="module"></script>
-  </body>
-</html>
+<head>
+  <script>
+    !function (t, e) { var o, n, p, r; e.__SV || (window.posthog = e, e._i = [], e.init = function (i, s, a) { function g(t, e) { var o = e.split("."); 2 == o.length && (t = t[o[0]], e = o[1]), t[e] = function () { t.push([e].concat(Array.prototype.slice.call(arguments, 0))) } } (p = t.createElement("script")).type = "text/javascript", p.async = !0, p.src = s.api_host.replace(".i.posthog.com", "-assets.i.posthog.com") + "/static/array.js", (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(p, r); var u = e; for (void 0 !== a ? u = e[a] = [] : a = "posthog", u.people = u.people || [], u.toString = function (t) { var e = "posthog"; return "posthog" !== a && (e += "." + a), t || (e += " (stub)"), e }, u.people.toString = function () { return u.toString(1) + ".people (stub)" }, o = "capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "), n = 0; n < o.length; n++)g(u, o[n]); e._i.push([i, s, a]) }, e.__SV = 1) }(document, window.posthog || []);
+    posthog.init('phc_1Q4q6SdTwvStnxFWbmdOIusLc5ve0u6Fk7WpsHPoAlD', { api_host: 'https://eu.i.posthog.com', person_profiles: 'identified_only', persistence: 'memory' })
+  </script>
+
+  <title>tiny planets</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+
+  <link rel="icon"
+    href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌎</text></svg>" />
+
+  <link rel="stylesheet" href="./index.css" />
+</head>
+
+<body class="bg-black"></body>
+<button id="button"
+  class="hidden p-2 px-3 border border-white/20 rounded-md text-white z-10 bg-white/10 absolute bottom-2 right-2 font-semibold text-lg hover:bg-white/20">
+  random
+</button>
+
+<canvas id="root"></canvas>
+
+<a class="absolute bottom-2 left-3 text-cyan-400 text-sm font-semibold hover:text-cyan-300 transition-colors duration-100"
+  href="https://flo-bit.dev" target="_blank">made by flo-bit</a>
+
+
+<a class="absolute top-2 right-3 text-zinc-300 hover:text-zinc-200 transition-colors duration-100"
+  href="https://github.com/flo-bit/tiny-planets" target="_blank">
+  <span class="sr-only">GitHub Code</span>
+  <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" class="w-8 h-8">
+    <path fill-rule="evenodd"
+      d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+      clip-rule="evenodd" />
+  </svg>
+</a>
+
+<script src="src/script.ts" type="module"></script>
+</body>
+
+</html>
diff --git a/src/script.ts b/src/script.ts
@@ -61,10 +61,12 @@ scene.add(ambientLight);
 
 let total = 0;
 let lastDelta = 0;
+
+let rotate = true;
 renderer.setAnimationLoop((delta) => {
   renderer.render(scene, camera);
 
-  planetMesh.rotation.y += 0.001;
+  if (rotate) planetMesh.rotation.y += 0.001;
 
   if (lastDelta > 0) {
     total += delta - lastDelta;
@@ -91,6 +93,10 @@ document.addEventListener("keydown", (event) => {
   } else if (event.key === "3") {
     createPlanet("snowForest");
   }
+
+  if (event.key === " ") {
+    rotate = !rotate;
+  }
 });
 
 // button press

diff --git a/src/worlds/biome.ts b/src/worlds/biome.ts
@@ -1,13 +1,12 @@
 import { UberNoise, type NoiseOptions } from "uber-noise";
-import { Color, ColorRepresentation, Vector3 } from "three";
+import { Color, type ColorRepresentation, Vector3 } from "three";
 
 import {
   ColorGradient,
   type ColorGradientOptions,
 } from "./helper/colorgradient";
 import { biomePresets } from "./presets";
 import { Octree } from "./helper/octree";
-import { type VertexInfo } from "./types";
 
 export type VegetationItem = {
   name: string;

diff --git a/src/worlds/materials/OceanCausticsMaterial.ts b/src/worlds/materials/OceanCausticsMaterial.ts
@@ -5,7 +5,9 @@ import {
 import { noise } from "./noise";
 
 export class PlanetMaterialWithCaustics extends MeshStandardMaterial {
-  constructor(parameters: MeshStandardMaterialParameters) {
+  constructor(
+    parameters: MeshStandardMaterialParameters & { shape: "sphere" | "plane" },
+  ) {
     super(parameters);
 
     this.onBeforeCompile = (shader) => {
@@ -48,11 +50,11 @@ export class PlanetMaterialWithCaustics extends MeshStandardMaterial {
         "#include <color_fragment>",
         `#include <color_fragment>
         vec3 pos = vPos * 3.0;
-        float len = length(vPos);
+        ${parameters.shape == "plane" ? "float len = vPos.y;" : "float len = length(vPos) - 1.0;"}
         // Fade in
-        float fadeIn = smoothstep(0.96, 0.985, len);
+        float fadeIn = smoothstep(-0.04, -0.015, len);
         // Fade out
-        float fadeOut = 1.0 - smoothstep(0.994, 0.999, len);
+        float fadeOut = 1.0 - smoothstep(-0.006, -0.001, len);
         float causticIntensity = fadeIn * fadeOut * 0.7;
         diffuseColor.rgb = mix(diffuseColor.rgb, vec3(1.0), causticIntensity * smoothstep(0.0, 1.0, caustics(vec4(pos, time * 0.05))));
     `,

diff --git a/src/worlds/planet.ts b/src/worlds/planet.ts
@@ -31,6 +31,8 @@ export type PlanetOptions = {
   material?: "normal" | "caustics";
 
   biome?: BiomeOptions;
+
+  shape?: "sphere" | "plane";
 };
 
 export class Planet {
@@ -46,7 +48,14 @@ export class Planet {
 
   vegetationPositions?: Record<string, Vector3[]>;
 
+  shape: "sphere" | "plane" = "sphere";
+
+  tempQuaternion = new Quaternion();
+
   constructor(options: PlanetOptions = {}) {
+    this.shape = options.shape ?? this.shape;
+    options.shape = this.shape;
+
     this.options = options;
 
     this.biome = new Biome(options.biome);
@@ -110,7 +119,10 @@ export class Planet {
 
     const material =
       this.options.material === "caustics"
-        ? new PlanetMaterialWithCaustics(materialOptions)
+        ? new PlanetMaterialWithCaustics({
+            ...materialOptions,
+            shape: this.shape,
+          })
         : new MeshStandardMaterial(materialOptions);
 
     const planetMesh = new Mesh(geometry, material);
@@ -257,14 +269,15 @@ export class Planet {
   updatePosition(item: Object3D, pos: Vector3) {
     item.position.copy(pos);
 
-    const currentRotation = new Quaternion();
-    const a = item.up.clone().normalize();
-    const b = pos.clone().normalize();
+    if (this.shape === "sphere") {
+      const a = item.up.clone().normalize();
+      const b = pos.clone().normalize();
 
-    currentRotation.setFromUnitVectors(a, b);
+      this.tempQuaternion.setFromUnitVectors(a, b);
 
-    item.quaternion.copy(currentRotation);
+      item.quaternion.copy(this.tempQuaternion);
 
-    item.up = b;
+      item.up = b;
+    }
   }
 }
diff --git a/src/worlds/presets.ts b/src/worlds/presets.ts
@@ -1,5 +1,5 @@
 import { type BiomeOptions } from "./biome";
-import { PlanetOptions } from "./planet";
+import { type PlanetOptions } from "./planet";
 
 const beachBiome: BiomeOptions = {
   noise: {