Add exposure slider (not working?)

js/controllers/toolbar_controller.js

@@ -1,7 +1,7 @@
 // Global ATON
 import { Controller } from "@hotwired/stimulus"
 import AppState from "../state.js";
-import { createLightSlider } from "../utils/environment.js";
+import { createExposureSlider, createLightSlider } from "../utils/environment.js";
 
 const html = String.raw;
 const panelHeader = html`
@@ -39,12 +39,15 @@ export default class extends Controller {
     #buildSettingsPanel(panel) {
         const fragment = this.#cloneTemplate('tmpl-settings');
         let sliderContainer = fragment.querySelector('[data-sliders-container]');
+        let exposureContainer = fragment.querySelector('[data-slider-exposure-container]'); 
 
         ['x', 'y', 'z'].forEach((axis, i) => {
             const label = ['Asse X', 'Asse Y', 'Asse Z'][i];
             sliderContainer.appendChild(createLightSlider(axis, label, [-2, 2], 0.1));
         })
 
+        exposureContainer.appendChild(createExposureSlider('Valore', [0, 5]));
+
         panel.appendChild(fragment);
     }
 }

js/scene.js

@@ -43,6 +43,7 @@ function init () {
     AppState.renderer = ATON._renderer;
     AppState.shadows = config.scene.shadows;
     AppState.lightDirection = ATON.getMainLightDirection();
+    AppState.exposure = config.scene.initialExposure;
 
     ATON.Nav.setUserControl(true);
 }

js/state.js

@@ -29,6 +29,10 @@ let AppState = {
     layersMenuBuilt: false,
     initialRotation: null,
     lightDirection: [],
+    /**
+     * @type {Number}
+     */
+    exposure: null,
     camera: null,
     renderer: null,
     ambientOcclusion : true,

js/utils/environment.js

@@ -23,10 +23,10 @@ export function toggleAmbientOcclusion(isEnabled) {
     console.log('Ambient occlusion', isEnabled ? 'ON' : 'OFF');
 }
 /**
- * 
+ * Slider to change light direction, based on ATON.UI
  * @param {String} direction - The axis direction, one of 'x','y','z'
  * @param {String} label - The slider label
- * @param {Number[]} range - The slider's range
+ * @param {Array<Number>} range - The slider's range
  * @param {Number} step - The slider's step
  */
 export function createLightSlider(direction, label, range, step) {
@@ -52,4 +52,30 @@ export function createLightSlider(direction, label, range, step) {
     lightSlider.querySelector('input').step = step;
 
     return lightSlider;
+}
+/**
+ * Slider to change the env exposure level, based on ATON.UI
+ * @param {String} label - The slider label
+ * @param {Array<Number>} range - The slider's range
+ * @param {Number} step - The slider's step
+ */
+export function createExposureSlider(label, range, step = 0.2) {
+    const currentVal = AppState.exposure;
+
+    const exposureSlider = ATON.UI.createSlider({
+        range,
+        label,
+        value: Number.parseFloat(currentVal).toPrecision(2),
+        oninput: val => {
+            ATON.setExposure(val);
+            AppState.exposure = val;
+
+            console.debug(ATON.getExposure());
+        },
+    });
+
+    exposureSlider.classList.add('ms-4');
+    exposureSlider.querySelector('input').step = step;
+
+    return exposureSlider;
 }

scenes/ssgp/index.html

@@ -99,9 +99,16 @@
     <template id="tmpl-settings">
         <div data-controller="settings">
             <h2 class="fs-5 ms-2 mb-3 mt-3">
-                <i class="bi bi-lightbulb me-1"></i> Direzione luce
+                <i class="bi bi-lightbulb me-1"></i> Illuminazione
             </h2>
+            <h3 class="fs-6 ms-4 mb-3 mt-3">
+                Direzione (x, y, z)
+            </h3>
             <div data-sliders-container></div>
+            <h3 class="fs-6 ms-4 mb-3 mt-3">
+                Intensità
+            </h3>
+            <div data-slider-exposure-container></div>
             <h2 class="fs-5 ms-2 mb-3 mt-3">
                 <i class="bi bi-brightness-high me-1"></i> Ambiente
             </h2>