Adding controls for lighting - not totally working yet though

ChrisMBarr · Jul 30, 2023 · bb45f07 · bb45f07
1 parent 71d2b8b
commit bb45f07
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 8 deletions.
diff --git a/src/index.html b/src/index.html
@@ -198,9 +198,101 @@ <h5 class="card-title">Lighting</h5>
             </div>
 
             <div id="lighting-controls" style="display: none">
+              <div class="form-control-wrapper">
+                <label class="form-label" for="ctrl-lighting-lighting-color">
+                  Lighting Color
+                  <i class="bi bi-question-circle-fill tip" title="????"></i>
+                </label>
+                <div class="row">
+                  <div class="col-sm-9">
+                    <input
+                      type="color"
+                      class="form-control form-control-color w-100"
+                      value="#FFFFFF"
+                      id="ctrl-lighting-lighting-color"
+                      data-target="#noise-filter feDiffuseLighting"
+                      data-target-attr="lighting-color"
+                      data-force-reload-svg="true"
+                    />
+                  </div>
+                  <output class="col-sm-3"></output>
+                </div>
+              </div>
+
+              <div class="form-control-wrapper">
+                <label class="form-label" for="ctrl-lighting-surface-scale">
+                  Surface Scale
+                  <i class="bi bi-question-circle-fill tip" title="????"></i>
+                </label>
+                <div class="row">
+                  <div class="col-sm-9">
+                    <input
+                      type="range"
+                      class="form-range"
+                      id="ctrl-lighting-surface-scale"
+                      min="1"
+                      max="6"
+                      value="1"
+                      step="1"
+                      data-target="#noise-filter feDiffuseLighting"
+                      data-target-attr="surfaceScale"
+                      data-force-reload-svg="true"
+                    />
+                  </div>
+                  <output class="col-sm-3"></output>
+                </div>
+              </div>
 
+              <div class="form-control-wrapper">
+                <label class="form-label" for="ctrl-lighting-azimuth">
+                  Azimuth
+                  <i class="bi bi-question-circle-fill tip" title="????"></i>
+                </label>
+                <div class="row">
+                  <div class="col-sm-9">
+                    <input
+                      type="range"
+                      class="form-range"
+                      id="ctrl-lighting-azimuth"
+                      min="1"
+                      max="360"
+                      value="1"
+                      step="1"
+                      data-target="#noise-filter feDistantLight"
+                      data-target-attr="azimuth"
+                      data-force-reload-svg="true"
+                    />
+                  </div>
+                  <output class="col-sm-3"></output>
+                </div>
+              </div>
+
+              <div class="form-control-wrapper">
+                <label class="form-label" for="ctrl-lighting-elevation">
+                  Elevation
+                  <i class="bi bi-question-circle-fill tip" title="????"></i>
+                </label>
+                <div class="row">
+                  <div class="col-sm-9">
+                    <input
+                      type="range"
+                      class="form-range"
+                      id="ctrl-lighting-elevation"
+                      min="1"
+                      max="360"
+                      value="1"
+                      step="1"
+                      data-target="#noise-filter feDistantLight"
+                      data-target-attr="elevation"
+                      data-force-reload-svg="true"
+                    />
+                  </div>
+                  <output class="col-sm-3"></output>
+                </div>
+              </div>
             </div>
           </div>
+        </div>
         </div> -->
 
         <div class="card m-3 mb-0">
@@ -425,14 +517,8 @@ <h5 id="code-modal-title" class="modal-title">Your Texture Code</h5>
     <main class="w-100">
       <div id="demo-output" class="w-100 h-100">
         <svg class="w-100 h-100">
-          <filter id="noise-filter" result="noise">
-            <feTurbulence
-              type="turbulence"
-              baseFrequency="0.69"
-              numOctaves="1"
-              seed="0"
-              stitchTiles="stitch"
-            ></feTurbulence>
+          <filter id="noise-filter">
+            <feTurbulence stitchTiles="stitch" result="noise"></feTurbulence>
           </filter>
 
           <rect

diff --git a/src/script.js b/src/script.js
@@ -21,6 +21,16 @@ Array.from($$('#svg-controls .form-control-wrapper')).forEach((ctrl) => {
       const isChecked = $enableInput.checked;
       $enableTargets.forEach((t) => (t.disabled = !isChecked));
 
+      if ($enableInput.id === 'ctrl-enable-lighting') {
+        //special condition when enabling/disabling lighting
+        const $svgFilter = $('#noise-filter');
+        if (isChecked) {
+          $svgFilter.appendChild(createLightingElement());
+        } else {
+          $svgFilter.querySelector('feDiffuseLighting').remove();
+        }
+      }
+
       $enableTargets.forEach((t) => updateTexture(t, $outputDisplay, false));
     });
 
@@ -128,6 +138,13 @@ function getPropsAsCssString(obj) {
     .join(' ');
 }
 
+function createLightingElement() {
+  const diffuseLightingEl = document.createElement('feDiffuseLighting');
+  diffuseLightingEl.setAttribute('in', 'noise'); //needs to match the `result` property on the `feTurbulence` element
+  diffuseLightingEl.appendChild(document.createElement('feDistantLight'));
+  return diffuseLightingEl;
+}
+
 //================================================
 // Buttons
 //================================================