| 206 | } |
| 207 | |
| 208 | function startGUI () { |
| 209 | var gui = new dat.GUI({ width: 300 }); |
| 210 | gui.add(config, 'DYE_RESOLUTION', { 'high': 1024, 'medium': 512, 'low': 256, 'very low': 128 }).name('quality').onFinishChange(initFramebuffers); |
| 211 | gui.add(config, 'SIM_RESOLUTION', { '32': 32, '64': 64, '128': 128, '256': 256 }).name('sim resolution').onFinishChange(initFramebuffers); |
| 212 | gui.add(config, 'DENSITY_DISSIPATION', 0, 4.0).name('density diffusion'); |
| 213 | gui.add(config, 'VELOCITY_DISSIPATION', 0, 4.0).name('velocity diffusion'); |
| 214 | gui.add(config, 'PRESSURE', 0.0, 1.0).name('pressure'); |
| 215 | gui.add(config, 'CURL', 0, 50).name('vorticity').step(1); |
| 216 | gui.add(config, 'SPLAT_RADIUS', 0.01, 1.0).name('splat radius'); |
| 217 | gui.add(config, 'SHADING').name('shading').onFinishChange(updateKeywords); |
| 218 | gui.add(config, 'COLORFUL').name('colorful'); |
| 219 | gui.add(config, 'PAUSED').name('paused').listen(); |
| 220 | |
| 221 | gui.add({ fun: () => { |
| 222 | splatStack.push(parseInt(Math.random() * 20) + 5); |
| 223 | } }, 'fun').name('Random splats'); |
| 224 | |
| 225 | let bloomFolder = gui.addFolder('Bloom'); |
| 226 | bloomFolder.add(config, 'BLOOM').name('enabled').onFinishChange(updateKeywords); |
| 227 | bloomFolder.add(config, 'BLOOM_INTENSITY', 0.1, 2.0).name('intensity'); |
| 228 | bloomFolder.add(config, 'BLOOM_THRESHOLD', 0.0, 1.0).name('threshold'); |
| 229 | |
| 230 | let sunraysFolder = gui.addFolder('Sunrays'); |
| 231 | sunraysFolder.add(config, 'SUNRAYS').name('enabled').onFinishChange(updateKeywords); |
| 232 | sunraysFolder.add(config, 'SUNRAYS_WEIGHT', 0.3, 1.0).name('weight'); |
| 233 | |
| 234 | let captureFolder = gui.addFolder('Capture'); |
| 235 | captureFolder.addColor(config, 'BACK_COLOR').name('background color'); |
| 236 | captureFolder.add(config, 'TRANSPARENT').name('transparent'); |
| 237 | captureFolder.add({ fun: captureScreenshot }, 'fun').name('take screenshot'); |
| 238 | |
| 239 | let github = gui.add({ fun : () => { |
| 240 | window.open('https://github.com/PavelDoGreat/WebGL-Fluid-Simulation'); |
| 241 | ga('send', 'event', 'link button', 'github'); |
| 242 | } }, 'fun').name('Github'); |
| 243 | github.__li.className = 'cr function bigFont'; |
| 244 | github.__li.style.borderLeft = '3px solid #8C8C8C'; |
| 245 | let githubIcon = document.createElement('span'); |
| 246 | github.domElement.parentElement.appendChild(githubIcon); |
| 247 | githubIcon.className = 'icon github'; |
| 248 | |
| 249 | let twitter = gui.add({ fun : () => { |
| 250 | ga('send', 'event', 'link button', 'twitter'); |
| 251 | window.open('https://twitter.com/PavelDoGreat'); |
| 252 | } }, 'fun').name('Twitter'); |
| 253 | twitter.__li.className = 'cr function bigFont'; |
| 254 | twitter.__li.style.borderLeft = '3px solid #8C8C8C'; |
| 255 | let twitterIcon = document.createElement('span'); |
| 256 | twitter.domElement.parentElement.appendChild(twitterIcon); |
| 257 | twitterIcon.className = 'icon twitter'; |
| 258 | |
| 259 | let discord = gui.add({ fun : () => { |
| 260 | ga('send', 'event', 'link button', 'discord'); |
| 261 | window.open('https://discordapp.com/invite/CeqZDDE'); |
| 262 | } }, 'fun').name('Discord'); |
| 263 | discord.__li.className = 'cr function bigFont'; |
| 264 | discord.__li.style.borderLeft = '3px solid #8C8C8C'; |
| 265 | let discordIcon = document.createElement('span'); |