Merge branch 'release/0.3.1'

EepyBerry · Oct 30, 2024 · 5c539f8 · 5c539f8
2 parents f0a9df9 + 7898b4f
commit 5c539f8
Show file tree

Hide file tree

Showing 18 changed files with 2,120 additions and 1,406 deletions.
diff --git a/index.html b/index.html
@@ -14,7 +14,17 @@
       rel="stylesheet"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Lagrange</title>
+    <title>Lagrange · Procedural Planet Builder</title>
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "Lagrange - Procedural Planet Builder",
+        "alternateName": "Lagrange",
+        "url": "https://lagrange.eepyberry.me",
+        "image": "https://lagrange.eepyberry.me/lagrange_logo_raster.png"
+      }
+    </script>
   </head>
   <body>
     <div id="app" style="flex: 1; display: flex; flex-direction: column"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lagrange",
-  "version": "0.3.0a",
+  "version": "0.3.1",
   "private": true,
   "type": "module",
   "scripts": {
@@ -26,40 +26,40 @@
   "author": "EepyBerry",
   "license": "BSD-3-Clause",
   "dependencies": {
-    "@floating-ui/vue": "^1.0.6",
-    "@unhead/vue": "^1.9.14",
-    "dexie": "^4.0.7",
+    "@floating-ui/vue": "^1.1.5",
+    "@unhead/vue": "^1.11.10",
+    "dexie": "^4.0.9",
     "file-saver": "^2.0.5",
     "iconify-icon": "^2.1.0",
     "jszip": "^3.10.1",
-    "nanoid": "^5.0.7",
+    "nanoid": "^5.0.8",
     "pako": "^2.1.0",
-    "three": "^0.166.0",
+    "three": "^0.169.0",
     "three-custom-shader-material": "^5.4.0",
-    "vue": "^3.4.21",
-    "vue-accessible-color-picker": "^5.0.1",
-    "vue-i18n": "^9.13.1",
-    "vue-router": "^4.3.3"
+    "vue": "^3.5.12",
+    "vue-accessible-color-picker": "^5.1.0",
+    "vue-i18n": "^10.0.4",
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.8.0",
+    "@rushstack/eslint-patch": "^1.10.4",
     "@types/file-saver": "^2.0.7",
-    "@types/node": "^20.14.11",
+    "@types/node": "^22.8.4",
     "@types/pako": "^2.0.3",
-    "@types/three": "^0.165.0",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/eslint-config-typescript": "^13.0.0",
+    "@types/three": "^0.169.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/eslint-config-typescript": "^14.1.3",
     "@vue/tsconfig": "^0.5.1",
-    "eslint": "^8.57.0",
+    "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.23.0",
-    "npm-run-all2": "^6.1.2",
+    "eslint-plugin-vue": "^9.30.0",
+    "npm-run-all2": "^7.0.1",
     "prettier": "^3.3.3",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.75.0",
-    "typescript": "~5.4.0",
-    "vite": "^5.2.8",
-    "vite-plugin-vue-devtools": "^7.0.25",
-    "vue-tsc": "^2.0.11"
+    "sass": "^1.80.5",
+    "typescript": "~5.6.3",
+    "vite": "^5.4.10",
+    "vite-plugin-vue-devtools": "^7.5.6",
+    "vue-tsc": "^2.1.8"
   }
 }
diff --git a/public/lagrange_logo.svg b/public/lagrange_logo.svg
diff --git a/public/lagrange_logo_raster.png b/public/lagrange_logo_raster.png
diff --git a/src/assets/glsl/atmosphere.frag.glsl b/src/assets/glsl/atmosphere.frag.glsl
@@ -41,7 +41,7 @@ void main() {
 
     // something went horribly wrong so set the pixel transparent
     if ( e.x > e.y ) {
-        csm_DiffuseColor = vec4(0.0);
+        gl_FragColor = vec4(0.0);
         return;
     }
 
@@ -55,10 +55,10 @@ void main() {
     vec4 tint = vec4(u_tint, 1.0);
 
     if (u_color_mode == 0) {
-        csm_DiffuseColor = I_shifted * u_intensity;
+        gl_FragColor = I_shifted * u_intensity;
     } else if (u_color_mode == 1) {
-        csm_DiffuseColor = whitescale(I_gamma) * tint_to_matrix(tint) * u_intensity;
+        gl_FragColor = whitescale(I_gamma) * tint_to_matrix(tint) * u_intensity;
     } else {
-        csm_DiffuseColor = I_shifted * tint * u_intensity;
+        gl_FragColor = I_shifted * tint * u_intensity;
     }
 }
diff --git a/src/components/controls/ControlsBiomes.vue b/src/components/controls/ControlsBiomes.vue
@@ -139,6 +139,7 @@
 
       <ParameterCategory>{{ $t('editor.controls.biomes.biome_list') }}</ParameterCategory>
       <template v-for="(b, index) in LG_PLANET_DATA.biomesParams" :key="b.id">
+        <!-- prettier-ignore-attribute -->
         <ParameterBiome
           :index="index"
           :max-index="LG_PLANET_DATA.biomesParams.length - 1"

diff --git a/src/components/controls/ControlsClouds.vue b/src/components/controls/ControlsClouds.vue
@@ -25,6 +25,7 @@
       <ParameterColor v-model="LG_PLANET_DATA.cloudsColor">
         {{ $t('editor.controls.clouds.rgba_color') }}
       </ParameterColor>
+      <!-- prettier-ignore-attribute -->
       <ParameterColorRamp
         mode="opacity"
         v-model="(LG_PLANET_DATA.cloudsColorRamp as ColorRamp)"

diff --git a/src/components/controls/ControlsSurface.vue b/src/components/controls/ControlsSurface.vue
@@ -38,6 +38,7 @@
       {{ $t('editor.general.noise_fbm_octaves') }}
     </ParameterSlider>
     <ParameterDivider />
+    <!-- prettier-ignore-attribute -->
     <ParameterColorRamp
       mode="rgb"
       v-model="(LG_PLANET_DATA.planetSurfaceColorRamp as ColorRamp)"

diff --git a/src/components/main/AppFooter.vue b/src/components/main/AppFooter.vue
@@ -54,6 +54,7 @@ footer {
   align-self: center;
   gap: 1rem;
   z-index: 5;
+  backdrop-filter: blur(8px) brightness(50%);
 
   #footer-nav {
     display: flex;

diff --git a/src/components/parameters/ParameterColorRamp.vue b/src/components/parameters/ParameterColorRamp.vue
@@ -96,7 +96,7 @@
             default-format="hex"
             :alpha-channel="mode === 'rgba' ? 'show' : 'hide'"
             :color="pickerIdInitColor"
-            @color-change="updateStepColor(step, $event.colors.hex)"
+            @color-change="updateStepColor(step as ColorRampStep, $event.colors.hex)"
           >
             <template #hue-range-input-label>
               <span class="visually-hidden">Hue</span>

diff --git a/src/components/parameters/ParameterSlider.vue b/src/components/parameters/ParameterSlider.vue
@@ -2,6 +2,7 @@
   <label :for="id">
     <slot>ParameterName</slot>
   </label>
+  <!-- prettier-ignore-attribute -->
   <InputSliderElement
     class="lg"
     :class="extras"

diff --git a/src/core/models/color-ramp.model.ts b/src/core/models/color-ramp.model.ts
@@ -26,7 +26,7 @@ export class ColorRampStep {
     isBound: boolean = false,
   ): ColorRampStep {
     const step = new ColorRampStep(color, factor, isBound)
-    step.alpha = alpha
+    step.alpha = alpha ?? 1.0
     return step
   }
 
@@ -107,6 +107,7 @@ export class ColorRamp extends ChangeTracker {
 
   public sortSteps() {
     this._steps.sort((a, b) => a.factor - b.factor)
+    this.markForChange(this._changePrefix)
   }
 
   public addStep() {

diff --git a/src/core/services/planet-editor.service.ts b/src/core/services/planet-editor.service.ts
@@ -26,6 +26,7 @@ import {
   createGeometryComponent,
   createPerspectiveCameraComponent,
   createRendererComponent,
+  createCustomShaderMaterialComponent,
   createShaderMaterialComponent,
 } from '@core/three/component.builder'
 import { SceneElements } from '@core/models/scene-elements.model'
@@ -99,7 +100,7 @@ export function createPlanet(data: PlanetData): { mesh: THREE.Mesh; texs: DataTe
   const surfaceTex = createRampTexture(LG_BUFFER_SURFACE, SURFACE_TEXTURE_SIZE, data.planetSurfaceColorRamp.steps)
   const biomeTex = createBiomeTexture(LG_BUFFER_BIOME, BIOME_TEXTURE_SIZE, data.biomesParams)
 
-  const material = createShaderMaterialComponent(
+  const material = createCustomShaderMaterialComponent(
     planetVertShader,
     planetFragShader,
     {
@@ -167,7 +168,7 @@ export function createClouds(data: PlanetData): { mesh: THREE.Mesh; texs: DataTe
   const geometry = createGeometryComponent(GeometryType.SPHERE, cloudHeight)
   const opacityTex = createRampTexture(LG_BUFFER_CLOUDS, CLOUDS_TEXTURE_SIZE, data.cloudsColorRamp.steps)
 
-  const material = createShaderMaterialComponent(
+  const material = createCustomShaderMaterialComponent(
     cloudsVertShader,
     cloudsFragShader,
     {
@@ -199,22 +200,17 @@ export function createAtmosphere(data: PlanetData, sunPos: THREE.Vector3): THREE
   const atmosHeight = data.atmosphereHeight / ATMOSPHERE_HEIGHT_DIVIDER
   const atmosDensity = data.atmosphereDensityScale / ATMOSPHERE_HEIGHT_DIVIDER
   const geometry = createGeometryComponent(GeometryType.SPHERE, atmosHeight)
-  const material = createShaderMaterialComponent(
-    atmosphereVertShader,
-    atmosphereFragShader,
-    {
-      u_light_position: { value: sunPos },
-      u_light_intensity: { value: data.sunLightIntensity },
-      u_surface_radius: { value: 1.0 },
-      u_radius: { value: 1.0 + atmosHeight },
-      u_density: { value: atmosDensity },
-      u_intensity: { value: data.atmosphereIntensity },
-      u_color_mode: { value: ColorMode.REALISTIC },
-      u_hue: { value: data.atmosphereHue },
-      u_tint: { value: data.atmosphereTint },
-    },
-    THREE.ShaderMaterial,
-  )
+  const material = createShaderMaterialComponent(atmosphereVertShader, atmosphereFragShader, {
+    u_light_position: { value: sunPos },
+    u_light_intensity: { value: data.sunLightIntensity },
+    u_surface_radius: { value: 1.0 },
+    u_radius: { value: 1.0 + atmosHeight },
+    u_density: { value: atmosDensity },
+    u_intensity: { value: data.atmosphereIntensity },
+    u_color_mode: { value: ColorMode.REALISTIC },
+    u_hue: { value: data.atmosphereHue },
+    u_tint: { value: data.atmosphereTint },
+  })
   material.transparent = true
 
   const mesh = new THREE.Mesh(geometry, material)

diff --git a/src/core/three/component.builder.ts b/src/core/three/component.builder.ts
@@ -95,22 +95,34 @@ export function createGeometryComponent(type: GeometryType, addtlRadius: number
  * @param baseMaterial (optional) base material to use
  * @returns the RawShaderMaterial instance
  */
-export function createShaderMaterialComponent<T extends MaterialConstructor>(
+export function createCustomShaderMaterialComponent<T extends MaterialConstructor>(
   vertexShader: string,
   fragmentShader?: string,
   uniforms?: { [uniform: string]: THREE.IUniform<any> },
   baseMaterial?: T,
 ): CustomShaderMaterial<T> {
   const mat = new CustomShaderMaterial({
     baseMaterial: baseMaterial ?? THREE.MeshStandardMaterial,
-    vertexShader: vertexShader,
+    vertexShader,
     fragmentShader: fragmentShader ? resolveImports(fragmentShader) : undefined,
     uniforms,
     silent: true,
   })
   return mat
 }
 
+export function createShaderMaterialComponent(
+  vertexShader: string,
+  fragmentShader?: string,
+  uniforms?: { [uniform: string]: THREE.IUniform<any> },
+): THREE.ShaderMaterial {
+  return new THREE.ShaderMaterial({
+    vertexShader,
+    fragmentShader: fragmentShader ? resolveImports(fragmentShader) : undefined,
+    uniforms,
+  })
+}
+
 /**
  * Creates standard OrbitControls
  * @param camera the camera to control