write-height/index.html at main · edibotopic/write-height · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WriteHeight | Convert Greyscale Images to 3D Models</title>
    <meta name="description" content="Easily make interactive 3D models from greyscale images and heightmaps">
    <link rel="apple-touch-icon" sizes="180x180" href="./assets/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
    <link rel="manifest" href="./assets/site.webmanifest">
    <link rel="mask-icon" href="./assets/safari-pinned-tab.svg" color="#201b1b">
    <link rel="shortcut icon" href="./assets/favicon.ico">
    <meta name="msapplication-TileColor" content="#000000">
    <meta name="msapplication-config" content="./assets/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <link rel="stylesheet" href="./styles/main.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    />
  </head>

  <body>
    <div id="header">
      <h1>
        WriteHeight <span id="bar">|</span>
        <span id="subhead">greyscale to 3D</span>
      </h1>
    </div>

    <div class="render-container">
      <img title="source image" id="output" src="" hidden />
      <canvas
        title=""
        id="renderCanvas"
      ></canvas>
    </div>

    <div class="button-group">
      <label
        title="invert heightmap"
        class="action-icons"
        id="invert"
      >
        <i class="fa fa-arrows-v" aria-hidden="true"></i>
      </label>
      <label
        title="color by height"
        class="action-icons"
        id="heightGradient"
      >
        <i class="fa fa-mountain" aria-hidden="true"></i>
      </label>
      <label
        title="reload current model"
        class="action-icons"
        id="reload"
      >
        <i class="fa fa-redo" aria-hidden="true"></i>
      </label>
      <label
        title="show a random model"
        class="action-icons"
        id="refresh"
      >
        <i class="fa fa-random" aria-hidden="true"></i>
      </label>
      <form>
        <label title="upload a greyscale image" class="action-icons" for="img">
          <i class="fa fa-upload" aria-hidden="true"></i>
        </label>
        <input
          type="file"
          id="img"
          name="img"
          accept="image/*"
          onchange="loadFile(event); meshify();"
        />
      </form>
      <label
        title="read about the application"
        class="action-icons"
        onclick="window.open('https://edibotopic.github.io/write-height/about.html')"
      >
        <i class="fa-solid fa-question" aria-hidden="true"></i>
      </label>
    </div>

    <div class="filter-control">
      <details>
        <summary>Experimental Filters</summary>
        <div class="filter-sliders">
          <div class="filter-item">
            <label for="blurSlider">Smooth: <span id="blurValue">0</span></label>
            <input type="range" id="blurSlider" min="0" max="10" value="0" step="1">
          </div>
          <div class="filter-item">
            <label for="contrastSlider">Contrast: <span id="contrastValue">100%</span></label>
            <input type="range" id="contrastSlider" min="0" max="200" value="100" step="5">
          </div>
          <div class="filter-item">
            <label for="brightnessSlider">Brightness: <span id="brightnessValue">100%</span></label>
            <input type="range" id="brightnessSlider" min="0" max="200" value="100" step="5">
          </div>
        </div>
      </details>
    </div>

    <script>
      const loadFile = function (event) {
        const image = document.getElementById('output')
        image.src = URL.createObjectURL(event.target.files[0])
        resetOriginalImage()
        heightGradientState = false
        const heightGradientBtn = document.getElementById('heightGradient')
        if (heightGradientBtn) {
          heightGradientBtn.classList.remove('disabled')
        }
        updateButtonStates()
      }

      function updateButtonStates() {
        // Update visual state of toggle buttons to match current state
        const invertBtn = document.getElementById('invert')
        const heightGradientBtn = document.getElementById('heightGradient')

        if (invertHeightmap) {
          invertBtn.style.color = '#ee82ee'
        } else {
          invertBtn.style.color = ''
        }

        if (heightGradientState) {
          heightGradientBtn.style.color = '#ee82ee'
        } else {
          heightGradientBtn.style.color = ''
        }
      }

      function hideUIForHeightGradient() {
        // Hide experimental filters
        const filterControl = document.querySelector('.filter-control')
        if (filterControl) {
          filterControl.classList.add('hidden')
        }

        // Hide LOD panel (Babylon GUI)
        if (currentLODPanel) {
          currentLODPanel.isVisible = false
        }
      }

      function showUIForHeightGradient() {
        // Show experimental filters
        const filterControl = document.querySelector('.filter-control')
        if (filterControl) {
          filterControl.classList.remove('hidden')
        }

        // Show LOD panel (Babylon GUI)
        if (currentLODPanel) {
          currentLODPanel.isVisible = true
        }
      }

      // Invert toggle
      window.addEventListener('DOMContentLoaded', () => {
        const invertBtn = document.getElementById('invert')
        invertBtn.addEventListener('click', () => {
          invertHeightmap = !invertHeightmap
          // Toggle visual state
          if (invertHeightmap) {
            invertBtn.style.color = '#ee82ee'
          } else {
            invertBtn.style.color = ''
          }
          regenerateMesh()
        })

        // Height gradient - one-way action with confirmation
        const heightGradientBtn = document.getElementById('heightGradient')
        heightGradientBtn.addEventListener('click', () => {
          if (!heightGradientState && !heightGradientBtn.classList.contains('disabled')) {
            // Only allow turning ON, not OFF
            const confirmed = confirm('Apply height-based terrain colors? (Reload model to return to solid colors)')
            if (confirmed) {
              heightGradientState = true
              heightGradientBtn.style.color = '#ee82ee'
              heightGradientBtn.classList.add('disabled')
              if (currentModel) {
                applyHeightGradient(currentModel)
              }
              // Hide LOD and experimental filters
              hideUIForHeightGradient()
            }
          }
        })

        // Reload current model
        const reloadBtn = document.getElementById('reload')
        reloadBtn.addEventListener('click', () => {
          const image = document.getElementById('output')
          if (image.src) {
            // Reset states
            heightGradientState = false
            resetOriginalImage()

            // Reset filters to defaults
            const blurSlider = document.getElementById('blurSlider')
            const contrastSlider = document.getElementById('contrastSlider')
            const brightnessSlider = document.getElementById('brightnessSlider')
            if (blurSlider) blurSlider.value = 0
            if (contrastSlider) contrastSlider.value = 100
            if (brightnessSlider) brightnessSlider.value = 100

            // Trigger filter update
            if (blurSlider) blurSlider.dispatchEvent(new Event('input'))

            // Re-enable height gradient button
            heightGradientBtn.classList.remove('disabled')

            // Show LOD and experimental filters
            showUIForHeightGradient()

            // Regenerate mesh
            meshify()
            updateButtonStates()
          }
        })
      })
    </script>

    <script type="module" src="./scripts/main.js"></script>
  </body>
</html>