+1 -1

src/lib/cards/FluidTextCard/FluidTextCard.svelte

··· 1 1 <script lang="ts"> 2 2 import type { ContentComponentProps } from '../types'; 3 3 import { onMount, onDestroy, tick } from 'svelte'; 4 4 - import ditheringTextureUrl from './text_effect_fluid-main/LDR_LLL1_0.png'; 4 4 + import ditheringTextureUrl from './LDR_LLL1_0.png'; 5 5 6 6 let { item }: ContentComponentProps = $props(); 7 7

-2

src/lib/cards/FluidTextCard/text_effect_fluid-main/.gitignore

··· 1 1 - /.DS_Store 2 2 - /.vite

src/lib/cards/FluidTextCard/text_effect_fluid-main/LDR_LLL1_0.png src/lib/cards/FluidTextCard/LDR_LLL1_0.png

-7

src/lib/cards/FluidTextCard/text_effect_fluid-main/LICENSE

··· 1 1 - Copyright 2024 flo-bit 2 2 - 3 3 - Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 4 - 5 5 - The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 6 - 7 7 - THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

-71

src/lib/cards/FluidTextCard/text_effect_fluid-main/Readme.md

··· 1 1 - # Text effect: Fluid Simulation demo 2 2 - 3 3 - [Live demo](https://flo-bit.github.io/text_effect_fluid/) (currently sometimes breaks on first open, just reload once or twice) 4 4 - 5 5 - [](https://flo-bit.github.io/text_effect_fluid/) 6 6 - 7 7 - Inspired by the current (Jan 2024) version of [the lumalabs homepage](https://lumalabs.ai/) (obviously, their effect looks *way* better, than my quick and dirty version): 8 8 - 9 9 -  10 10 - 11 11 - Adjusted version of this awesome [WebGL Fluid Simulation](https://github.com/PavelDoGreat/WebGL-Fluid-Simulation). 12 12 - 13 13 - ## How it works 14 14 - 15 15 - I wrote a short [blog post](https://flobit.substack.com/p/how-i-recreated-this-awesome-text) about my approach. 16 16 - 17 17 - ## Usage 18 18 - 19 19 - - Add `script.js` and `LDR_LLL1_0.png` to your project 20 20 - 21 21 - - Add this to your html 22 22 - 23 23 - ```html 24 24 - <div id="canvasContainer"> 25 25 - <canvas></canvas> 26 26 - <canvas id="maskCanvas"> </canvas> 27 27 - </div> 28 28 - 29 29 - <script src="./script.js"></script> 30 30 - ``` 31 31 - 32 32 - - Add this styling 33 33 - 34 34 - ```css 35 35 - html, 36 36 - body { 37 37 - overflow: hidden; 38 38 - background-color: #000; 39 39 - } 40 40 - 41 41 - body { 42 42 - margin: 0; 43 43 - } 44 44 - 45 45 - #canvasContainer { 46 46 - position: relative; 47 47 - width: 100vw; 48 48 - height: 100vh; 49 49 - } 50 50 - 51 51 - canvas { 52 52 - width: 100%; 53 53 - height: 100%; 54 54 - position: absolute; 55 55 - } 56 56 - ``` 57 57 - 58 58 - 59 59 - ## License 60 60 - 61 61 - MIT License 62 62 - 63 63 - ``` 64 64 - Copyright 2024 flo-bit 65 65 - 66 66 - Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 67 67 - 68 68 - The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 69 69 - 70 70 - THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 71 71 - ```

src/lib/cards/FluidTextCard/text_effect_fluid-main/cover.png

This is a binary file and will not be displayed.

-46

src/lib/cards/FluidTextCard/text_effect_fluid-main/index.html

··· 1 1 - <!doctype html> 2 2 - <html lang="en" class="bg-black"> 3 3 - 4 4 - <head> 5 5 - <meta charset="utf-8" /> 6 6 - <meta name="viewport" content="width=device-width, initial-scale=1" /> 7 7 - 8 8 - <title>fluid text effect</title> 9 9 - 10 10 - <style> 11 11 - html, 12 12 - body { 13 13 - overflow: hidden; 14 14 - background-color: #000; 15 15 - } 16 16 - 17 17 - body { 18 18 - margin: 0; 19 19 - } 20 20 - 21 21 - #canvasContainer { 22 22 - position: relative; 23 23 - width: 100vw; 24 24 - height: 100vh; 25 25 - } 26 26 - 27 27 - canvas { 28 28 - width: 100%; 29 29 - height: 100%; 30 30 - position: absolute; 31 31 - } 32 32 - </style> 33 33 - 34 34 - </head> 35 35 - 36 36 - <body> 37 37 - <!-- <input id="name"></input> --> 38 38 - <div id="canvasContainer"> 39 39 - <canvas></canvas> 40 40 - <canvas id="maskCanvas"> </canvas> 41 41 - </div> 42 42 - 43 43 - <script src="./script.js"></script> 44 44 - </body> 45 45 - 46 46 - </html>

src/lib/cards/FluidTextCard/text_effect_fluid-main/luma.png

This is a binary file and will not be displayed.

-1641

src/lib/cards/FluidTextCard/text_effect_fluid-main/script.js

··· 1 1 - /* 2 2 - MIT License 3 3 - 4 4 - Copyright (c) 2017 Pavel Dobryakov 5 5 - 6 6 - Permission is hereby granted, free of charge, to any person obtaining a copy 7 7 - of this software and associated documentation files (the "Software"), to deal 8 8 - in the Software without restriction, including without limitation the rights 9 9 - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 10 - copies of the Software, and to permit persons to whom the Software is 11 11 - furnished to do so, subject to the following conditions: 12 12 - 13 13 - The above copyright notice and this permission notice shall be included in all 14 14 - copies or substantial portions of the Software. 15 15 - 16 16 - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 17 - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 18 - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 19 - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 20 - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 21 - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 22 - SOFTWARE. 23 23 - */ 24 24 - 25 25 - 'use strict'; 26 26 - 27 27 - const overlayConfig = { 28 28 - text: 'flo-bit', 29 29 - fontWidth: '900', 30 30 - font: 'Arial', 31 31 - fontSize: 1/3, // percentage to canvas width 32 32 - } 33 33 - 34 34 - // overlay canvas 35 35 - 36 36 - function resizeOverlayCanvas() { 37 37 - let overlayCanvas = document.getElementById('maskCanvas'); 38 38 - let container = document.getElementById('canvasContainer'); 39 39 - 40 40 - overlayCanvas.width = container.offsetWidth; 41 41 - overlayCanvas.height = container.offsetHeight; 42 42 - 43 43 - let ctx = overlayCanvas.getContext('2d'); 44 44 - 45 45 - let dpr = window.devicePixelRatio || 1; 46 46 - let rect = overlayCanvas.getBoundingClientRect(); 47 47 - 48 48 - overlayCanvas.width = rect.width * dpr; 49 49 - overlayCanvas.height = rect.height * dpr; 50 50 - ctx.scale(dpr, dpr); 51 51 - 52 52 - ctx.fillStyle = 'black'; 53 53 - ctx.fillRect(0, 0, overlayCanvas.width, overlayCanvas.height); 54 54 - 55 55 - let fontSize = Math.round(rect.width * overlayConfig.fontSize); 56 56 - ctx.font = overlayConfig.fontWidth + ' ' + fontSize + 'px ' + overlayConfig.font; 57 57 - 58 58 - ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)'; 59 59 - ctx.lineWidth = 2; 60 60 - 61 61 - ctx.textBaseline = 'middle'; 62 62 - ctx.textAlign = 'center'; 63 63 - 64 64 - ctx.strokeText(overlayConfig.text, rect.width / 2, rect.height / 2); 65 65 - 66 66 - ctx.globalCompositeOperation = 'destination-out'; 67 67 - ctx.fillText(overlayConfig.text, rect.width / 2, rect.height / 2); 68 68 - } 69 69 - 70 70 - // const input = document.getElementById('name'); 71 71 - 72 72 - // // on change 73 73 - // input.addEventListener('change', function() { 74 74 - // overlayConfig.text = input.value; 75 75 - // resizeOverlayCanvas(); 76 76 - // }); 77 77 - 78 78 - 79 79 - // Initial resize 80 80 - resizeOverlayCanvas(); 81 81 - 82 82 - // Resize canvas on window resize 83 83 - window.addEventListener('resize', resizeOverlayCanvas); 84 84 - 85 85 - 86 86 - // Simulation section 87 87 - 88 88 - const canvas = document.getElementsByTagName('canvas')[0]; 89 89 - resizeCanvas(); 90 90 - 91 91 - let config = { 92 92 - SIM_RESOLUTION: 128, 93 93 - DYE_RESOLUTION: 1024, 94 94 - CAPTURE_RESOLUTION: 512, 95 95 - DENSITY_DISSIPATION: 1.0, 96 96 - VELOCITY_DISSIPATION: 0.1, 97 97 - PRESSURE: 0.8, 98 98 - PRESSURE_ITERATIONS: 20, 99 99 - CURL: 30, 100 100 - SPLAT_RADIUS: 0.25, 101 101 - SPLAT_FORCE: 1000, 102 102 - SHADING: true, 103 103 - COLORFUL: true, 104 104 - COLOR_UPDATE_SPEED: 10, 105 105 - PAUSED: false, 106 106 - BACK_COLOR: { r: 0, g: 0, b: 0 }, 107 107 - TRANSPARENT: false, 108 108 - BLOOM: false, 109 109 - BLOOM_ITERATIONS: 8, 110 110 - BLOOM_RESOLUTION: 256, 111 111 - BLOOM_INTENSITY: 0.8, 112 112 - BLOOM_THRESHOLD: 0.8, 113 113 - BLOOM_SOFT_KNEE: 0.7, 114 114 - SUNRAYS: true, 115 115 - SUNRAYS_RESOLUTION: 196, 116 116 - SUNRAYS_WEIGHT: 1.0, 117 117 - START_HUE: 0.5, 118 118 - END_HUE: 1.0, 119 119 - RENDER_SPEED: 0.4 120 120 - }; 121 121 - 122 122 - function PointerPrototype() { 123 123 - this.id = -1; 124 124 - this.texcoordX = 0; 125 125 - this.texcoordY = 0; 126 126 - this.prevTexcoordX = 0; 127 127 - this.prevTexcoordY = 0; 128 128 - this.deltaX = 0; 129 129 - this.deltaY = 0; 130 130 - this.down = false; 131 131 - this.moved = false; 132 132 - this.color = [30, 0, 300]; 133 133 - } 134 134 - 135 135 - let pointers = []; 136 136 - let splatStack = []; 137 137 - pointers.push(new PointerPrototype()); 138 138 - 139 139 - const { gl, ext } = getWebGLContext(canvas); 140 140 - 141 141 - if (isMobile()) { 142 142 - config.DYE_RESOLUTION = 512; 143 143 - } 144 144 - if (!ext.supportLinearFiltering) { 145 145 - config.DYE_RESOLUTION = 512; 146 146 - config.SHADING = false; 147 147 - config.BLOOM = false; 148 148 - config.SUNRAYS = false; 149 149 - } 150 150 - 151 151 - function getWebGLContext(canvas) { 152 152 - const params = { 153 153 - alpha: true, 154 154 - depth: false, 155 155 - stencil: true, 156 156 - antialias: false, 157 157 - preserveDrawingBuffer: false 158 158 - }; 159 159 - 160 160 - 161 161 - let gl = canvas.getContext('webgl2', params); 162 162 - const isWebGL2 = !!gl; 163 163 - if (!isWebGL2) 164 164 - gl = canvas.getContext('webgl', params) || canvas.getContext('experimental-webgl', params); 165 165 - 166 166 - let halfFloat; 167 167 - let supportLinearFiltering; 168 168 - if (isWebGL2) { 169 169 - gl.getExtension('EXT_color_buffer_float'); 170 170 - supportLinearFiltering = gl.getExtension('OES_texture_float_linear'); 171 171 - } else { 172 172 - halfFloat = gl.getExtension('OES_texture_half_float'); 173 173 - supportLinearFiltering = gl.getExtension('OES_texture_half_float_linear'); 174 174 - } 175 175 - 176 176 - gl.clearColor(0.0, 0.0, 0.0, 1.0); 177 177 - 178 178 - const halfFloatTexType = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES; 179 179 - let formatRGBA; 180 180 - let formatRG; 181 181 - let formatR; 182 182 - 183 183 - if (isWebGL2) { 184 184 - formatRGBA = getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, halfFloatTexType); 185 185 - formatRG = getSupportedFormat(gl, gl.RG16F, gl.RG, halfFloatTexType); 186 186 - formatR = getSupportedFormat(gl, gl.R16F, gl.RED, halfFloatTexType); 187 187 - } else { 188 188 - formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType); 189 189 - formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType); 190 190 - formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType); 191 191 - } 192 192 - 193 193 - return { 194 194 - gl, 195 195 - ext: { 196 196 - formatRGBA, 197 197 - formatRG, 198 198 - formatR, 199 199 - halfFloatTexType, 200 200 - supportLinearFiltering 201 201 - } 202 202 - }; 203 203 - } 204 204 - 205 205 - function getSupportedFormat(gl, internalFormat, format, type) { 206 206 - if (!supportRenderTextureFormat(gl, internalFormat, format, type)) { 207 207 - switch (internalFormat) { 208 208 - case gl.R16F: 209 209 - return getSupportedFormat(gl, gl.RG16F, gl.RG, type); 210 210 - case gl.RG16F: 211 211 - return getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, type); 212 212 - default: 213 213 - return null; 214 214 - } 215 215 - } 216 216 - 217 217 - return { 218 218 - internalFormat, 219 219 - format 220 220 - }; 221 221 - } 222 222 - 223 223 - function supportRenderTextureFormat(gl, internalFormat, format, type) { 224 224 - let texture = gl.createTexture(); 225 225 - gl.bindTexture(gl.TEXTURE_2D, texture); 226 226 - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 227 227 - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 228 228 - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 229 229 - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 230 230 - gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null); 231 231 - 232 232 - let fbo = gl.createFramebuffer(); 233 233 - gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); 234 234 - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); 235 235 - 236 236 - let status = gl.checkFramebufferStatus(gl.FRAMEBUFFER); 237 237 - return status == gl.FRAMEBUFFER_COMPLETE; 238 238 - } 239 239 - 240 240 - function isMobile() { 241 241 - return /Mobi|Android/i.test(navigator.userAgent); 242 242 - } 243 243 - 244 244 - class Material { 245 245 - constructor(vertexShader, fragmentShaderSource) { 246 246 - this.vertexShader = vertexShader; 247 247 - this.fragmentShaderSource = fragmentShaderSource; 248 248 - this.programs = []; 249 249 - this.activeProgram = null; 250 250 - this.uniforms = []; 251 251 - } 252 252 - 253 253 - setKeywords(keywords) { 254 254 - let hash = 0; 255 255 - for (let i = 0; i < keywords.length; i++) hash += hashCode(keywords[i]); 256 256 - 257 257 - let program = this.programs[hash]; 258 258 - if (program == null) { 259 259 - let fragmentShader = compileShader(gl.FRAGMENT_SHADER, this.fragmentShaderSource, keywords); 260 260 - program = createProgram(this.vertexShader, fragmentShader); 261 261 - this.programs[hash] = program; 262 262 - } 263 263 - 264 264 - if (program == this.activeProgram) return; 265 265 - 266 266 - this.uniforms = getUniforms(program); 267 267 - this.activeProgram = program; 268 268 - } 269 269 - 270 270 - bind() { 271 271 - gl.useProgram(this.activeProgram); 272 272 - } 273 273 - } 274 274 - 275 275 - class Program { 276 276 - constructor(vertexShader, fragmentShader) { 277 277 - this.uniforms = {}; 278 278 - this.program = createProgram(vertexShader, fragmentShader); 279 279 - this.uniforms = getUniforms(this.program); 280 280 - } 281 281 - 282 282 - bind() { 283 283 - gl.useProgram(this.program); 284 284 - } 285 285 - } 286 286 - 287 287 - function createProgram(vertexShader, fragmentShader) { 288 288 - let program = gl.createProgram(); 289 289 - gl.attachShader(program, vertexShader); 290 290 - gl.attachShader(program, fragmentShader); 291 291 - gl.linkProgram(program); 292 292 - 293 293 - if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 294 294 - console.trace(gl.getProgramInfoLog(program)); 295 295 - 296 296 - return program; 297 297 - } 298 298 - 299 299 - function getUniforms(program) { 300 300 - let uniforms = []; 301 301 - let uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS); 302 302 - for (let i = 0; i < uniformCount; i++) { 303 303 - let uniformName = gl.getActiveUniform(program, i).name; 304 304 - uniforms[uniformName] = gl.getUniformLocation(program, uniformName); 305 305 - } 306 306 - return uniforms; 307 307 - } 308 308 - 309 309 - function compileShader(type, source, keywords) { 310 310 - source = addKeywords(source, keywords); 311 311 - 312 312 - const shader = gl.createShader(type); 313 313 - gl.shaderSource(shader, source); 314 314 - gl.compileShader(shader); 315 315 - 316 316 - if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) console.trace(gl.getShaderInfoLog(shader)); 317 317 - 318 318 - return shader; 319 319 - } 320 320 - 321 321 - function addKeywords(source, keywords) { 322 322 - if (keywords == null) return source; 323 323 - let keywordsString = ''; 324 324 - keywords.forEach((keyword) => { 325 325 - keywordsString += '#define ' + keyword + '\n'; 326 326 - }); 327 327 - return keywordsString + source; 328 328 - } 329 329 - 330 330 - const baseVertexShader = compileShader( 331 331 - gl.VERTEX_SHADER, 332 332 - ` 333 333 - precision highp float; 334 334 - 335 335 - attribute vec2 aPosition; 336 336 - varying vec2 vUv; 337 337 - varying vec2 vL; 338 338 - varying vec2 vR; 339 339 - varying vec2 vT; 340 340 - varying vec2 vB; 341 341 - uniform vec2 texelSize; 342 342 - 343 343 - void main () { 344 344 - vUv = aPosition * 0.5 + 0.5; 345 345 - vL = vUv - vec2(texelSize.x, 0.0); 346 346 - vR = vUv + vec2(texelSize.x, 0.0); 347 347 - vT = vUv + vec2(0.0, texelSize.y); 348 348 - vB = vUv - vec2(0.0, texelSize.y); 349 349 - gl_Position = vec4(aPosition, 0.0, 1.0); 350 350 - } 351 351 - ` 352 352 - ); 353 353 - 354 354 - const blurVertexShader = compileShader( 355 355 - gl.VERTEX_SHADER, 356 356 - ` 357 357 - precision highp float; 358 358 - 359 359 - attribute vec2 aPosition; 360 360 - varying vec2 vUv; 361 361 - varying vec2 vL; 362 362 - varying vec2 vR; 363 363 - uniform vec2 texelSize; 364 364 - 365 365 - void main () { 366 366 - vUv = aPosition * 0.5 + 0.5; 367 367 - float offset = 1.33333333; 368 368 - vL = vUv - texelSize * offset; 369 369 - vR = vUv + texelSize * offset; 370 370 - gl_Position = vec4(aPosition, 0.0, 1.0); 371 371 - } 372 372 - ` 373 373 - ); 374 374 - 375 375 - const blurShader = compileShader( 376 376 - gl.FRAGMENT_SHADER, 377 377 - ` 378 378 - precision mediump float; 379 379 - precision mediump sampler2D; 380 380 - 381 381 - varying vec2 vUv; 382 382 - varying vec2 vL; 383 383 - varying vec2 vR; 384 384 - uniform sampler2D uTexture; 385 385 - 386 386 - void main () { 387 387 - vec4 sum = texture2D(uTexture, vUv) * 0.29411764; 388 388 - sum += texture2D(uTexture, vL) * 0.35294117; 389 389 - sum += texture2D(uTexture, vR) * 0.35294117; 390 390 - gl_FragColor = sum; 391 391 - } 392 392 - ` 393 393 - ); 394 394 - 395 395 - const copyShader = compileShader( 396 396 - gl.FRAGMENT_SHADER, 397 397 - ` 398 398 - precision mediump float; 399 399 - precision mediump sampler2D; 400 400 - 401 401 - varying highp vec2 vUv; 402 402 - uniform sampler2D uTexture; 403 403 - 404 404 - void main () { 405 405 - gl_FragColor = texture2D(uTexture, vUv); 406 406 - } 407 407 - ` 408 408 - ); 409 409 - 410 410 - const clearShader = compileShader( 411 411 - gl.FRAGMENT_SHADER, 412 412 - ` 413 413 - precision mediump float; 414 414 - precision mediump sampler2D; 415 415 - 416 416 - varying highp vec2 vUv; 417 417 - uniform sampler2D uTexture; 418 418 - uniform float value; 419 419 - 420 420 - void main () { 421 421 - gl_FragColor = value * texture2D(uTexture, vUv); 422 422 - } 423 423 - ` 424 424 - ); 425 425 - 426 426 - const colorShader = compileShader( 427 427 - gl.FRAGMENT_SHADER, 428 428 - ` 429 429 - precision mediump float; 430 430 - 431 431 - uniform vec4 color; 432 432 - 433 433 - void main () { 434 434 - gl_FragColor = color; 435 435 - } 436 436 - ` 437 437 - ); 438 438 - 439 439 - const checkerboardShader = compileShader( 440 440 - gl.FRAGMENT_SHADER, 441 441 - ` 442 442 - precision highp float; 443 443 - precision highp sampler2D; 444 444 - 445 445 - varying vec2 vUv; 446 446 - uniform sampler2D uTexture; 447 447 - uniform float aspectRatio; 448 448 - 449 449 - #define SCALE 25.0 450 450 - 451 451 - void main () { 452 452 - vec2 uv = floor(vUv * SCALE * vec2(aspectRatio, 1.0)); 453 453 - float v = mod(uv.x + uv.y, 2.0); 454 454 - v = v * 0.1 + 0.8; 455 455 - gl_FragColor = vec4(vec3(v), 1.0); 456 456 - } 457 457 - ` 458 458 - ); 459 459 - 460 460 - const displayShaderSource = ` 461 461 - precision highp float; 462 462 - precision highp sampler2D; 463 463 - 464 464 - varying vec2 vUv; 465 465 - varying vec2 vL; 466 466 - varying vec2 vR; 467 467 - varying vec2 vT; 468 468 - varying vec2 vB; 469 469 - uniform sampler2D uTexture; 470 470 - uniform sampler2D uBloom; 471 471 - uniform sampler2D uSunrays; 472 472 - uniform sampler2D uDithering; 473 473 - uniform vec2 ditherScale; 474 474 - uniform vec2 texelSize; 475 475 - 476 476 - vec3 linearToGamma (vec3 color) { 477 477 - color = max(color, vec3(0)); 478 478 - return max(1.055 * pow(color, vec3(0.416666667)) - 0.055, vec3(0)); 479 479 - } 480 480 - 481 481 - void main () { 482 482 - vec3 c = texture2D(uTexture, vUv).rgb; 483 483 - 484 484 - #ifdef SHADING 485 485 - vec3 lc = texture2D(uTexture, vL).rgb; 486 486 - vec3 rc = texture2D(uTexture, vR).rgb; 487 487 - vec3 tc = texture2D(uTexture, vT).rgb; 488 488 - vec3 bc = texture2D(uTexture, vB).rgb; 489 489 - 490 490 - float dx = length(rc) - length(lc); 491 491 - float dy = length(tc) - length(bc); 492 492 - 493 493 - vec3 n = normalize(vec3(dx, dy, length(texelSize))); 494 494 - vec3 l = vec3(0.0, 0.0, 1.0); 495 495 - 496 496 - float diffuse = clamp(dot(n, l) + 0.7, 0.7, 1.0); 497 497 - c *= diffuse; 498 498 - #endif 499 499 - 500 500 - #ifdef BLOOM 501 501 - vec3 bloom = texture2D(uBloom, vUv).rgb; 502 502 - #endif 503 503 - 504 504 - #ifdef SUNRAYS 505 505 - float sunrays = texture2D(uSunrays, vUv).r; 506 506 - c *= sunrays; 507 507 - #ifdef BLOOM 508 508 - bloom *= sunrays; 509 509 - #endif 510 510 - #endif 511 511 - 512 512 - #ifdef BLOOM 513 513 - float noise = texture2D(uDithering, vUv * ditherScale).r; 514 514 - noise = noise * 2.0 - 1.0; 515 515 - bloom += noise / 255.0; 516 516 - bloom = linearToGamma(bloom); 517 517 - c += bloom; 518 518 - #endif 519 519 - 520 520 - float a = max(c.r, max(c.g, c.b)); 521 521 - gl_FragColor = vec4(c, a); 522 522 - } 523 523 - `; 524 524 - 525 525 - const bloomPrefilterShader = compileShader( 526 526 - gl.FRAGMENT_SHADER, 527 527 - ` 528 528 - precision mediump float; 529 529 - precision mediump sampler2D; 530 530 - 531 531 - varying vec2 vUv; 532 532 - uniform sampler2D uTexture; 533 533 - uniform vec3 curve; 534 534 - uniform float threshold; 535 535 - 536 536 - void main () { 537 537 - vec3 c = texture2D(uTexture, vUv).rgb; 538 538 - float br = max(c.r, max(c.g, c.b)); 539 539 - float rq = clamp(br - curve.x, 0.0, curve.y); 540 540 - rq = curve.z * rq * rq; 541 541 - c *= max(rq, br - threshold) / max(br, 0.0001); 542 542 - gl_FragColor = vec4(c, 0.0); 543 543 - } 544 544 - ` 545 545 - ); 546 546 - 547 547 - const bloomBlurShader = compileShader( 548 548 - gl.FRAGMENT_SHADER, 549 549 - ` 550 550 - precision mediump float; 551 551 - precision mediump sampler2D; 552 552 - 553 553 - varying vec2 vL; 554 554 - varying vec2 vR; 555 555 - varying vec2 vT; 556 556 - varying vec2 vB; 557 557 - uniform sampler2D uTexture; 558 558 - 559 559 - void main () { 560 560 - vec4 sum = vec4(0.0); 561 561 - sum += texture2D(uTexture, vL); 562 562 - sum += texture2D(uTexture, vR); 563 563 - sum += texture2D(uTexture, vT); 564 564 - sum += texture2D(uTexture, vB); 565 565 - sum *= 0.25; 566 566 - gl_FragColor = sum; 567 567 - } 568 568 - ` 569 569 - ); 570 570 - 571 571 - const bloomFinalShader = compileShader( 572 572 - gl.FRAGMENT_SHADER, 573 573 - ` 574 574 - precision mediump float; 575 575 - precision mediump sampler2D; 576 576 - 577 577 - varying vec2 vL; 578 578 - varying vec2 vR; 579 579 - varying vec2 vT; 580 580 - varying vec2 vB; 581 581 - uniform sampler2D uTexture; 582 582 - uniform float intensity; 583 583 - 584 584 - void main () { 585 585 - vec4 sum = vec4(0.0); 586 586 - sum += texture2D(uTexture, vL); 587 587 - sum += texture2D(uTexture, vR); 588 588 - sum += texture2D(uTexture, vT); 589 589 - sum += texture2D(uTexture, vB); 590 590 - sum *= 0.25; 591 591 - gl_FragColor = sum * intensity; 592 592 - } 593 593 - ` 594 594 - ); 595 595 - 596 596 - const sunraysMaskShader = compileShader( 597 597 - gl.FRAGMENT_SHADER, 598 598 - ` 599 599 - precision highp float; 600 600 - precision highp sampler2D; 601 601 - 602 602 - varying vec2 vUv; 603 603 - uniform sampler2D uTexture; 604 604 - 605 605 - void main () { 606 606 - vec4 c = texture2D(uTexture, vUv); 607 607 - float br = max(c.r, max(c.g, c.b)); 608 608 - c.a = 1.0 - min(max(br * 20.0, 0.0), 0.8); 609 609 - gl_FragColor = c; 610 610 - } 611 611 - ` 612 612 - ); 613 613 - 614 614 - const sunraysShader = compileShader( 615 615 - gl.FRAGMENT_SHADER, 616 616 - ` 617 617 - precision highp float; 618 618 - precision highp sampler2D; 619 619 - 620 620 - varying vec2 vUv; 621 621 - uniform sampler2D uTexture; 622 622 - uniform float weight; 623 623 - 624 624 - #define ITERATIONS 16 625 625 - 626 626 - void main () { 627 627 - float Density = 0.3; 628 628 - float Decay = 0.95; 629 629 - float Exposure = 0.7; 630 630 - 631 631 - vec2 coord = vUv; 632 632 - vec2 dir = vUv - 0.5; 633 633 - 634 634 - dir *= 1.0 / float(ITERATIONS) * Density; 635 635 - float illuminationDecay = 1.0; 636 636 - 637 637 - float color = texture2D(uTexture, vUv).a; 638 638 - 639 639 - for (int i = 0; i < ITERATIONS; i++) 640 640 - { 641 641 - coord -= dir; 642 642 - float col = texture2D(uTexture, coord).a; 643 643 - color += col * illuminationDecay * weight; 644 644 - illuminationDecay *= Decay; 645 645 - } 646 646 - 647 647 - gl_FragColor = vec4(color * Exposure, 0.0, 0.0, 1.0); 648 648 - } 649 649 - ` 650 650 - ); 651 651 - 652 652 - const splatShader = compileShader( 653 653 - gl.FRAGMENT_SHADER, 654 654 - ` 655 655 - precision highp float; 656 656 - precision highp sampler2D; 657 657 - 658 658 - varying vec2 vUv; 659 659 - uniform sampler2D uTarget; 660 660 - uniform float aspectRatio; 661 661 - uniform vec3 color; 662 662 - uniform vec2 point; 663 663 - uniform float radius; 664 664 - 665 665 - void main () { 666 666 - vec2 p = vUv - point.xy; 667 667 - p.x *= aspectRatio; 668 668 - vec3 splat = exp(-dot(p, p) / radius) * color; 669 669 - vec3 base = texture2D(uTarget, vUv).xyz; 670 670 - gl_FragColor = vec4(base + splat, 1.0); 671 671 - } 672 672 - ` 673 673 - ); 674 674 - 675 675 - const advectionShader = compileShader( 676 676 - gl.FRAGMENT_SHADER, 677 677 - ` 678 678 - precision highp float; 679 679 - precision highp sampler2D; 680 680 - 681 681 - varying vec2 vUv; 682 682 - uniform sampler2D uVelocity; 683 683 - uniform sampler2D uSource; 684 684 - uniform vec2 texelSize; 685 685 - uniform vec2 dyeTexelSize; 686 686 - uniform float dt; 687 687 - uniform float dissipation; 688 688 - 689 689 - vec4 bilerp (sampler2D sam, vec2 uv, vec2 tsize) { 690 690 - vec2 st = uv / tsize - 0.5; 691 691 - 692 692 - vec2 iuv = floor(st); 693 693 - vec2 fuv = fract(st); 694 694 - 695 695 - vec4 a = texture2D(sam, (iuv + vec2(0.5, 0.5)) * tsize); 696 696 - vec4 b = texture2D(sam, (iuv + vec2(1.5, 0.5)) * tsize); 697 697 - vec4 c = texture2D(sam, (iuv + vec2(0.5, 1.5)) * tsize); 698 698 - vec4 d = texture2D(sam, (iuv + vec2(1.5, 1.5)) * tsize); 699 699 - 700 700 - return mix(mix(a, b, fuv.x), mix(c, d, fuv.x), fuv.y); 701 701 - } 702 702 - 703 703 - void main () { 704 704 - #ifdef MANUAL_FILTERING 705 705 - vec2 coord = vUv - dt * bilerp(uVelocity, vUv, texelSize).xy * texelSize; 706 706 - vec4 result = bilerp(uSource, coord, dyeTexelSize); 707 707 - #else 708 708 - vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize; 709 709 - vec4 result = texture2D(uSource, coord); 710 710 - #endif 711 711 - float decay = 1.0 + dissipation * dt; 712 712 - gl_FragColor = result / decay; 713 713 - }`, 714 714 - ext.supportLinearFiltering ? null : ['MANUAL_FILTERING'] 715 715 - ); 716 716 - 717 717 - const divergenceShader = compileShader( 718 718 - gl.FRAGMENT_SHADER, 719 719 - ` 720 720 - precision mediump float; 721 721 - precision mediump sampler2D; 722 722 - 723 723 - varying highp vec2 vUv; 724 724 - varying highp vec2 vL; 725 725 - varying highp vec2 vR; 726 726 - varying highp vec2 vT; 727 727 - varying highp vec2 vB; 728 728 - uniform sampler2D uVelocity; 729 729 - 730 730 - void main () { 731 731 - float L = texture2D(uVelocity, vL).x; 732 732 - float R = texture2D(uVelocity, vR).x; 733 733 - float T = texture2D(uVelocity, vT).y; 734 734 - float B = texture2D(uVelocity, vB).y; 735 735 - 736 736 - vec2 C = texture2D(uVelocity, vUv).xy; 737 737 - if (vL.x < 0.0) { L = -C.x; } 738 738 - if (vR.x > 1.0) { R = -C.x; } 739 739 - if (vT.y > 1.0) { T = -C.y; } 740 740 - if (vB.y < 0.0) { B = -C.y; } 741 741 - 742 742 - float div = 0.5 * (R - L + T - B); 743 743 - gl_FragColor = vec4(div, 0.0, 0.0, 1.0); 744 744 - } 745 745 - ` 746 746 - ); 747 747 - 748 748 - const curlShader = compileShader( 749 749 - gl.FRAGMENT_SHADER, 750 750 - ` 751 751 - precision mediump float; 752 752 - precision mediump sampler2D; 753 753 - 754 754 - varying highp vec2 vUv; 755 755 - varying highp vec2 vL; 756 756 - varying highp vec2 vR; 757 757 - varying highp vec2 vT; 758 758 - varying highp vec2 vB; 759 759 - uniform sampler2D uVelocity; 760 760 - 761 761 - void main () { 762 762 - float L = texture2D(uVelocity, vL).y; 763 763 - float R = texture2D(uVelocity, vR).y; 764 764 - float T = texture2D(uVelocity, vT).x; 765 765 - float B = texture2D(uVelocity, vB).x; 766 766 - float vorticity = R - L - T + B; 767 767 - gl_FragColor = vec4(0.5 * vorticity, 0.0, 0.0, 1.0); 768 768 - } 769 769 - ` 770 770 - ); 771 771 - 772 772 - const vorticityShader = compileShader( 773 773 - gl.FRAGMENT_SHADER, 774 774 - ` 775 775 - precision highp float; 776 776 - precision highp sampler2D; 777 777 - 778 778 - varying vec2 vUv; 779 779 - varying vec2 vL; 780 780 - varying vec2 vR; 781 781 - varying vec2 vT; 782 782 - varying vec2 vB; 783 783 - uniform sampler2D uVelocity; 784 784 - uniform sampler2D uCurl; 785 785 - uniform float curl; 786 786 - uniform float dt; 787 787 - 788 788 - void main () { 789 789 - float L = texture2D(uCurl, vL).x; 790 790 - float R = texture2D(uCurl, vR).x; 791 791 - float T = texture2D(uCurl, vT).x; 792 792 - float B = texture2D(uCurl, vB).x; 793 793 - float C = texture2D(uCurl, vUv).x; 794 794 - 795 795 - vec2 force = 0.5 * vec2(abs(T) - abs(B), abs(R) - abs(L)); 796 796 - force /= length(force) + 0.0001; 797 797 - force *= curl * C; 798 798 - force.y *= -1.0; 799 799 - 800 800 - vec2 velocity = texture2D(uVelocity, vUv).xy; 801 801 - velocity += force * dt; 802 802 - velocity = min(max(velocity, -1000.0), 1000.0); 803 803 - gl_FragColor = vec4(velocity, 0.0, 1.0); 804 804 - } 805 805 - ` 806 806 - ); 807 807 - 808 808 - const pressureShader = compileShader( 809 809 - gl.FRAGMENT_SHADER, 810 810 - ` 811 811 - precision mediump float; 812 812 - precision mediump sampler2D; 813 813 - 814 814 - varying highp vec2 vUv; 815 815 - varying highp vec2 vL; 816 816 - varying highp vec2 vR; 817 817 - varying highp vec2 vT; 818 818 - varying highp vec2 vB; 819 819 - uniform sampler2D uPressure; 820 820 - uniform sampler2D uDivergence; 821 821 - 822 822 - void main () { 823 823 - float L = texture2D(uPressure, vL).x; 824 824 - float R = texture2D(uPressure, vR).x; 825 825 - float T = texture2D(uPressure, vT).x; 826 826 - float B = texture2D(uPressure, vB).x; 827 827 - float C = texture2D(uPressure, vUv).x; 828 828 - float divergence = texture2D(uDivergence, vUv).x; 829 829 - float pressure = (L + R + B + T - divergence) * 0.25; 830 830 - gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0); 831 831 - } 832 832 - ` 833 833 - ); 834 834 - 835 835 - const gradientSubtractShader = compileShader( 836 836 - gl.FRAGMENT_SHADER, 837 837 - ` 838 838 - precision mediump float; 839 839 - precision mediump sampler2D; 840 840 - 841 841 - varying highp vec2 vUv; 842 842 - varying highp vec2 vL; 843 843 - varying highp vec2 vR; 844 844 - varying highp vec2 vT; 845 845 - varying highp vec2 vB; 846 846 - uniform sampler2D uPressure; 847 847 - uniform sampler2D uVelocity; 848 848 - 849 849 - void main () { 850 850 - float L = texture2D(uPressure, vL).x; 851 851 - float R = texture2D(uPressure, vR).x; 852 852 - float T = texture2D(uPressure, vT).x; 853 853 - float B = texture2D(uPressure, vB).x; 854 854 - vec2 velocity = texture2D(uVelocity, vUv).xy; 855 855 - velocity.xy -= vec2(R - L, T - B); 856 856 - gl_FragColor = vec4(velocity, 0.0, 1.0); 857 857 - } 858 858 - ` 859 859 - ); 860 860 - 861 861 - const blit = (() => { 862 862 - gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); 863 863 - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]), gl.STATIC_DRAW); 864 864 - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer()); 865 865 - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW); 866 866 - gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); 867 867 - gl.enableVertexAttribArray(0); 868 868 - 869 869 - return (target, clear = false) => { 870 870 - if (target == null) { 871 871 - gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); 872 872 - gl.bindFramebuffer(gl.FRAMEBUFFER, null); 873 873 - } else { 874 874 - gl.viewport(0, 0, target.width, target.height); 875 875 - gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo); 876 876 - } 877 877 - if (clear) { 878 878 - gl.clearColor(0.0, 0.0, 0.0, 1.0); 879 879 - gl.clear(gl.COLOR_BUFFER_BIT); 880 880 - } 881 881 - // CHECK_FRAMEBUFFER_STATUS(); 882 882 - gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); 883 883 - }; 884 884 - })(); 885 885 - 886 886 - function CHECK_FRAMEBUFFER_STATUS() { 887 887 - let status = gl.checkFramebufferStatus(gl.FRAMEBUFFER); 888 888 - if (status != gl.FRAMEBUFFER_COMPLETE) console.trace('Framebuffer error: ' + status); 889 889 - } 890 890 - 891 891 - let dye; 892 892 - let velocity; 893 893 - let divergence; 894 894 - let curl; 895 895 - let pressure; 896 896 - let bloom; 897 897 - let bloomFramebuffers = []; 898 898 - let sunrays; 899 899 - let sunraysTemp; 900 900 - 901 901 - let ditheringTexture = createTextureAsync('LDR_LLL1_0.png'); 902 902 - 903 903 - const blurProgram = new Program(blurVertexShader, blurShader); 904 904 - const copyProgram = new Program(baseVertexShader, copyShader); 905 905 - const clearProgram = new Program(baseVertexShader, clearShader); 906 906 - const colorProgram = new Program(baseVertexShader, colorShader); 907 907 - const checkerboardProgram = new Program(baseVertexShader, checkerboardShader); 908 908 - const bloomPrefilterProgram = new Program(baseVertexShader, bloomPrefilterShader); 909 909 - const bloomBlurProgram = new Program(baseVertexShader, bloomBlurShader); 910 910 - const bloomFinalProgram = new Program(baseVertexShader, bloomFinalShader); 911 911 - const sunraysMaskProgram = new Program(baseVertexShader, sunraysMaskShader); 912 912 - const sunraysProgram = new Program(baseVertexShader, sunraysShader); 913 913 - const splatProgram = new Program(baseVertexShader, splatShader); 914 914 - const advectionProgram = new Program(baseVertexShader, advectionShader); 915 915 - const divergenceProgram = new Program(baseVertexShader, divergenceShader); 916 916 - const curlProgram = new Program(baseVertexShader, curlShader); 917 917 - const vorticityProgram = new Program(baseVertexShader, vorticityShader); 918 918 - const pressureProgram = new Program(baseVertexShader, pressureShader); 919 919 - const gradienSubtractProgram = new Program(baseVertexShader, gradientSubtractShader); 920 920 - 921 921 - const displayMaterial = new Material(baseVertexShader, displayShaderSource); 922 922 - 923 923 - function initFramebuffers() { 924 924 - let simRes = getResolution(config.SIM_RESOLUTION); 925 925 - let dyeRes = getResolution(config.DYE_RESOLUTION); 926 926 - 927 927 - const texType = ext.halfFloatTexType; 928 928 - const rgba = ext.formatRGBA; 929 929 - const rg = ext.formatRG; 930 930 - const r = ext.formatR; 931 931 - const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST; 932 932 - 933 933 - gl.disable(gl.BLEND); 934 934 - 935 935 - if (dye == null) 936 936 - dye = createDoubleFBO( 937 937 - dyeRes.width, 938 938 - dyeRes.height, 939 939 - rgba.internalFormat, 940 940 - rgba.format, 941 941 - texType, 942 942 - filtering 943 943 - ); 944 944 - else 945 945 - dye = resizeDoubleFBO( 946 946 - dye, 947 947 - dyeRes.width, 948 948 - dyeRes.height, 949 949 - rgba.internalFormat, 950 950 - rgba.format, 951 951 - texType, 952 952 - filtering 953 953 - ); 954 954 - 955 955 - if (velocity == null) 956 956 - velocity = createDoubleFBO( 957 957 - simRes.width, 958 958 - simRes.height, 959 959 - rg.internalFormat, 960 960 - rg.format, 961 961 - texType, 962 962 - filtering 963 963 - ); 964 964 - else 965 965 - velocity = resizeDoubleFBO( 966 966 - velocity, 967 967 - simRes.width, 968 968 - simRes.height, 969 969 - rg.internalFormat, 970 970 - rg.format, 971 971 - texType, 972 972 - filtering 973 973 - ); 974 974 - 975 975 - divergence = createFBO( 976 976 - simRes.width, 977 977 - simRes.height, 978 978 - r.internalFormat, 979 979 - r.format, 980 980 - texType, 981 981 - gl.NEAREST 982 982 - ); 983 983 - curl = createFBO(simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST); 984 984 - pressure = createDoubleFBO( 985 985 - simRes.width, 986 986 - simRes.height, 987 987 - r.internalFormat, 988 988 - r.format, 989 989 - texType, 990 990 - gl.NEAREST 991 991 - ); 992 992 - 993 993 - initBloomFramebuffers(); 994 994 - initSunraysFramebuffers(); 995 995 - } 996 996 - 997 997 - function initBloomFramebuffers() { 998 998 - let res = getResolution(config.BLOOM_RESOLUTION); 999 999 - 1000 1000 - const texType = ext.halfFloatTexType; 1001 1001 - const rgba = ext.formatRGBA; 1002 1002 - const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST; 1003 1003 - 1004 1004 - bloom = createFBO(res.width, res.height, rgba.internalFormat, rgba.format, texType, filtering); 1005 1005 - 1006 1006 - bloomFramebuffers.length = 0; 1007 1007 - for (let i = 0; i < config.BLOOM_ITERATIONS; i++) { 1008 1008 - let width = res.width >> (i + 1); 1009 1009 - let height = res.height >> (i + 1); 1010 1010 - 1011 1011 - if (width < 2 || height < 2) break; 1012 1012 - 1013 1013 - let fbo = createFBO(width, height, rgba.internalFormat, rgba.format, texType, filtering); 1014 1014 - bloomFramebuffers.push(fbo); 1015 1015 - } 1016 1016 - } 1017 1017 - 1018 1018 - function initSunraysFramebuffers() { 1019 1019 - let res = getResolution(config.SUNRAYS_RESOLUTION); 1020 1020 - 1021 1021 - const texType = ext.halfFloatTexType; 1022 1022 - const r = ext.formatR; 1023 1023 - const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST; 1024 1024 - 1025 1025 - sunrays = createFBO(res.width, res.height, r.internalFormat, r.format, texType, filtering); 1026 1026 - sunraysTemp = createFBO(res.width, res.height, r.internalFormat, r.format, texType, filtering); 1027 1027 - } 1028 1028 - 1029 1029 - function createFBO(w, h, internalFormat, format, type, param) { 1030 1030 - gl.activeTexture(gl.TEXTURE0); 1031 1031 - let texture = gl.createTexture(); 1032 1032 - gl.bindTexture(gl.TEXTURE_2D, texture); 1033 1033 - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param); 1034 1034 - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param); 1035 1035 - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 1036 1036 - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 1037 1037 - gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null); 1038 1038 - 1039 1039 - let fbo = gl.createFramebuffer(); 1040 1040 - gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); 1041 1041 - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); 1042 1042 - gl.viewport(0, 0, w, h); 1043 1043 - gl.clear(gl.COLOR_BUFFER_BIT); 1044 1044 - 1045 1045 - let texelSizeX = 1.0 / w; 1046 1046 - let texelSizeY = 1.0 / h; 1047 1047 - 1048 1048 - return { 1049 1049 - texture, 1050 1050 - fbo, 1051 1051 - width: w, 1052 1052 - height: h, 1053 1053 - texelSizeX, 1054 1054 - texelSizeY, 1055 1055 - attach(id) { 1056 1056 - gl.activeTexture(gl.TEXTURE0 + id); 1057 1057 - gl.bindTexture(gl.TEXTURE_2D, texture); 1058 1058 - return id; 1059 1059 - } 1060 1060 - }; 1061 1061 - } 1062 1062 - 1063 1063 - function createDoubleFBO(w, h, internalFormat, format, type, param) { 1064 1064 - let fbo1 = createFBO(w, h, internalFormat, format, type, param); 1065 1065 - let fbo2 = createFBO(w, h, internalFormat, format, type, param); 1066 1066 - 1067 1067 - return { 1068 1068 - width: w, 1069 1069 - height: h, 1070 1070 - texelSizeX: fbo1.texelSizeX, 1071 1071 - texelSizeY: fbo1.texelSizeY, 1072 1072 - get read() { 1073 1073 - return fbo1; 1074 1074 - }, 1075 1075 - set read(value) { 1076 1076 - fbo1 = value; 1077 1077 - }, 1078 1078 - get write() { 1079 1079 - return fbo2; 1080 1080 - }, 1081 1081 - set write(value) { 1082 1082 - fbo2 = value; 1083 1083 - }, 1084 1084 - swap() { 1085 1085 - let temp = fbo1; 1086 1086 - fbo1 = fbo2; 1087 1087 - fbo2 = temp; 1088 1088 - } 1089 1089 - }; 1090 1090 - } 1091 1091 - 1092 1092 - function resizeFBO(target, w, h, internalFormat, format, type, param) { 1093 1093 - let newFBO = createFBO(w, h, internalFormat, format, type, param); 1094 1094 - copyProgram.bind(); 1095 1095 - gl.uniform1i(copyProgram.uniforms.uTexture, target.attach(0)); 1096 1096 - blit(newFBO); 1097 1097 - return newFBO; 1098 1098 - } 1099 1099 - 1100 1100 - function resizeDoubleFBO(target, w, h, internalFormat, format, type, param) { 1101 1101 - if (target.width == w && target.height == h) return target; 1102 1102 - target.read = resizeFBO(target.read, w, h, internalFormat, format, type, param); 1103 1103 - target.write = createFBO(w, h, internalFormat, format, type, param); 1104 1104 - target.width = w; 1105 1105 - target.height = h; 1106 1106 - target.texelSizeX = 1.0 / w; 1107 1107 - target.texelSizeY = 1.0 / h; 1108 1108 - return target; 1109 1109 - } 1110 1110 - 1111 1111 - function createTextureAsync(url) { 1112 1112 - let texture = gl.createTexture(); 1113 1113 - gl.bindTexture(gl.TEXTURE_2D, texture); 1114 1114 - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 1115 1115 - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 1116 1116 - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); 1117 1117 - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); 1118 1118 - gl.texImage2D( 1119 1119 - gl.TEXTURE_2D, 1120 1120 - 0, 1121 1121 - gl.RGB, 1122 1122 - 1, 1123 1123 - 1, 1124 1124 - 0, 1125 1125 - gl.RGB, 1126 1126 - gl.UNSIGNED_BYTE, 1127 1127 - new Uint8Array([255, 255, 255]) 1128 1128 - ); 1129 1129 - 1130 1130 - let obj = { 1131 1131 - texture, 1132 1132 - width: 1, 1133 1133 - height: 1, 1134 1134 - attach(id) { 1135 1135 - gl.activeTexture(gl.TEXTURE0 + id); 1136 1136 - gl.bindTexture(gl.TEXTURE_2D, texture); 1137 1137 - return id; 1138 1138 - } 1139 1139 - }; 1140 1140 - 1141 1141 - let image = new Image(); 1142 1142 - image.onload = () => { 1143 1143 - obj.width = image.width; 1144 1144 - obj.height = image.height; 1145 1145 - gl.bindTexture(gl.TEXTURE_2D, texture); 1146 1146 - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); 1147 1147 - }; 1148 1148 - image.src = url; 1149 1149 - 1150 1150 - return obj; 1151 1151 - } 1152 1152 - 1153 1153 - function updateKeywords() { 1154 1154 - let displayKeywords = []; 1155 1155 - if (config.SHADING) displayKeywords.push('SHADING'); 1156 1156 - if (config.BLOOM) displayKeywords.push('BLOOM'); 1157 1157 - if (config.SUNRAYS) displayKeywords.push('SUNRAYS'); 1158 1158 - displayMaterial.setKeywords(displayKeywords); 1159 1159 - } 1160 1160 - 1161 1161 - updateKeywords(); 1162 1162 - initFramebuffers(); 1163 1163 - multipleSplats(25); 1164 1164 - 1165 1165 - let lastUpdateTime = Date.now(); 1166 1166 - let colorUpdateTimer = 0.0; 1167 1167 - update(); 1168 1168 - 1169 1169 - function update() { 1170 1170 - const dt = calcDeltaTime() * (config.RENDER_SPEED ?? 1.0); 1171 1171 - if (resizeCanvas()) initFramebuffers(); 1172 1172 - updateColors(dt); 1173 1173 - applyInputs(); 1174 1174 - if (!config.PAUSED) step(dt); 1175 1175 - render(null); 1176 1176 - requestAnimationFrame(update); 1177 1177 - } 1178 1178 - 1179 1179 - function calcDeltaTime() { 1180 1180 - let now = Date.now(); 1181 1181 - let dt = (now - lastUpdateTime) / 1000; 1182 1182 - dt = Math.min(dt, 0.016666); 1183 1183 - lastUpdateTime = now; 1184 1184 - return dt; 1185 1185 - } 1186 1186 - 1187 1187 - function resizeCanvas() { 1188 1188 - let width = scaleByPixelRatio(canvas.clientWidth); 1189 1189 - let height = scaleByPixelRatio(canvas.clientHeight); 1190 1190 - if (canvas.width != width || canvas.height != height) { 1191 1191 - canvas.width = width; 1192 1192 - canvas.height = height; 1193 1193 - return true; 1194 1194 - } 1195 1195 - return false; 1196 1196 - } 1197 1197 - 1198 1198 - function updateColors(dt) { 1199 1199 - if (!config.COLORFUL) return; 1200 1200 - 1201 1201 - colorUpdateTimer += dt * config.COLOR_UPDATE_SPEED; 1202 1202 - if (colorUpdateTimer >= 1) { 1203 1203 - colorUpdateTimer = wrap(colorUpdateTimer, 0, 1); 1204 1204 - pointers.forEach((p) => { 1205 1205 - p.color = generateColor(); 1206 1206 - }); 1207 1207 - } 1208 1208 - } 1209 1209 - 1210 1210 - function applyInputs() { 1211 1211 - if (splatStack.length > 0) multipleSplats(splatStack.pop()); 1212 1212 - 1213 1213 - pointers.forEach((p) => { 1214 1214 - if (p.moved) { 1215 1215 - p.moved = false; 1216 1216 - splatPointer(p); 1217 1217 - } 1218 1218 - }); 1219 1219 - } 1220 1220 - 1221 1221 - function step(dt) { 1222 1222 - gl.disable(gl.BLEND); 1223 1223 - 1224 1224 - curlProgram.bind(); 1225 1225 - gl.uniform2f(curlProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); 1226 1226 - gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read.attach(0)); 1227 1227 - blit(curl); 1228 1228 - 1229 1229 - vorticityProgram.bind(); 1230 1230 - gl.uniform2f(vorticityProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); 1231 1231 - gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read.attach(0)); 1232 1232 - gl.uniform1i(vorticityProgram.uniforms.uCurl, curl.attach(1)); 1233 1233 - gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL); 1234 1234 - gl.uniform1f(vorticityProgram.uniforms.dt, dt); 1235 1235 - blit(velocity.write); 1236 1236 - velocity.swap(); 1237 1237 - 1238 1238 - divergenceProgram.bind(); 1239 1239 - gl.uniform2f(divergenceProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); 1240 1240 - gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read.attach(0)); 1241 1241 - blit(divergence); 1242 1242 - 1243 1243 - clearProgram.bind(); 1244 1244 - gl.uniform1i(clearProgram.uniforms.uTexture, pressure.read.attach(0)); 1245 1245 - gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE); 1246 1246 - blit(pressure.write); 1247 1247 - pressure.swap(); 1248 1248 - 1249 1249 - pressureProgram.bind(); 1250 1250 - gl.uniform2f(pressureProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); 1251 1251 - gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence.attach(0)); 1252 1252 - for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) { 1253 1253 - gl.uniform1i(pressureProgram.uniforms.uPressure, pressure.read.attach(1)); 1254 1254 - blit(pressure.write); 1255 1255 - pressure.swap(); 1256 1256 - } 1257 1257 - 1258 1258 - gradienSubtractProgram.bind(); 1259 1259 - gl.uniform2f(gradienSubtractProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); 1260 1260 - gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressure.read.attach(0)); 1261 1261 - gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.read.attach(1)); 1262 1262 - blit(velocity.write); 1263 1263 - velocity.swap(); 1264 1264 - 1265 1265 - advectionProgram.bind(); 1266 1266 - gl.uniform2f(advectionProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); 1267 1267 - if (!ext.supportLinearFiltering) 1268 1268 - gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, velocity.texelSizeX, velocity.texelSizeY); 1269 1269 - let velocityId = velocity.read.attach(0); 1270 1270 - gl.uniform1i(advectionProgram.uniforms.uVelocity, velocityId); 1271 1271 - gl.uniform1i(advectionProgram.uniforms.uSource, velocityId); 1272 1272 - gl.uniform1f(advectionProgram.uniforms.dt, dt); 1273 1273 - gl.uniform1f(advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION); 1274 1274 - blit(velocity.write); 1275 1275 - velocity.swap(); 1276 1276 - 1277 1277 - if (!ext.supportLinearFiltering) 1278 1278 - gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, dye.texelSizeX, dye.texelSizeY); 1279 1279 - gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read.attach(0)); 1280 1280 - gl.uniform1i(advectionProgram.uniforms.uSource, dye.read.attach(1)); 1281 1281 - gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION); 1282 1282 - blit(dye.write); 1283 1283 - dye.swap(); 1284 1284 - } 1285 1285 - 1286 1286 - function render(target) { 1287 1287 - if (config.BLOOM) applyBloom(dye.read, bloom); 1288 1288 - if (config.SUNRAYS) { 1289 1289 - applySunrays(dye.read, dye.write, sunrays); 1290 1290 - blur(sunrays, sunraysTemp, 1); 1291 1291 - } 1292 1292 - 1293 1293 - if (target == null || !config.TRANSPARENT) { 1294 1294 - gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); 1295 1295 - gl.enable(gl.BLEND); 1296 1296 - } else { 1297 1297 - gl.disable(gl.BLEND); 1298 1298 - } 1299 1299 - 1300 1300 - if (!config.TRANSPARENT) drawColor(target, normalizeColor(config.BACK_COLOR)); 1301 1301 - if (target == null && config.TRANSPARENT) drawCheckerboard(target); 1302 1302 - drawDisplay(target); 1303 1303 - } 1304 1304 - 1305 1305 - function drawColor(target, color) { 1306 1306 - colorProgram.bind(); 1307 1307 - gl.uniform4f(colorProgram.uniforms.color, color.r, color.g, color.b, 1); 1308 1308 - blit(target); 1309 1309 - } 1310 1310 - 1311 1311 - function drawCheckerboard(target) { 1312 1312 - checkerboardProgram.bind(); 1313 1313 - gl.uniform1f(checkerboardProgram.uniforms.aspectRatio, canvas.width / canvas.height); 1314 1314 - blit(target); 1315 1315 - } 1316 1316 - 1317 1317 - function drawDisplay(target) { 1318 1318 - let width = target == null ? gl.drawingBufferWidth : target.width; 1319 1319 - let height = target == null ? gl.drawingBufferHeight : target.height; 1320 1320 - 1321 1321 - displayMaterial.bind(); 1322 1322 - if (config.SHADING) gl.uniform2f(displayMaterial.uniforms.texelSize, 1.0 / width, 1.0 / height); 1323 1323 - gl.uniform1i(displayMaterial.uniforms.uTexture, dye.read.attach(0)); 1324 1324 - if (config.BLOOM) { 1325 1325 - gl.uniform1i(displayMaterial.uniforms.uBloom, bloom.attach(1)); 1326 1326 - gl.uniform1i(displayMaterial.uniforms.uDithering, ditheringTexture.attach(2)); 1327 1327 - let scale = getTextureScale(ditheringTexture, width, height); 1328 1328 - gl.uniform2f(displayMaterial.uniforms.ditherScale, scale.x, scale.y); 1329 1329 - } 1330 1330 - if (config.SUNRAYS) gl.uniform1i(displayMaterial.uniforms.uSunrays, sunrays.attach(3)); 1331 1331 - blit(target); 1332 1332 - } 1333 1333 - 1334 1334 - function applyBloom(source, destination) { 1335 1335 - if (bloomFramebuffers.length < 2) return; 1336 1336 - 1337 1337 - let last = destination; 1338 1338 - 1339 1339 - gl.disable(gl.BLEND); 1340 1340 - bloomPrefilterProgram.bind(); 1341 1341 - let knee = config.BLOOM_THRESHOLD * config.BLOOM_SOFT_KNEE + 0.0001; 1342 1342 - let curve0 = config.BLOOM_THRESHOLD - knee; 1343 1343 - let curve1 = knee * 2; 1344 1344 - let curve2 = 0.25 / knee; 1345 1345 - gl.uniform3f(bloomPrefilterProgram.uniforms.curve, curve0, curve1, curve2); 1346 1346 - gl.uniform1f(bloomPrefilterProgram.uniforms.threshold, config.BLOOM_THRESHOLD); 1347 1347 - gl.uniform1i(bloomPrefilterProgram.uniforms.uTexture, source.attach(0)); 1348 1348 - blit(last); 1349 1349 - 1350 1350 - bloomBlurProgram.bind(); 1351 1351 - for (let i = 0; i < bloomFramebuffers.length; i++) { 1352 1352 - let dest = bloomFramebuffers[i]; 1353 1353 - gl.uniform2f(bloomBlurProgram.uniforms.texelSize, last.texelSizeX, last.texelSizeY); 1354 1354 - gl.uniform1i(bloomBlurProgram.uniforms.uTexture, last.attach(0)); 1355 1355 - blit(dest); 1356 1356 - last = dest; 1357 1357 - } 1358 1358 - 1359 1359 - gl.blendFunc(gl.ONE, gl.ONE); 1360 1360 - gl.enable(gl.BLEND); 1361 1361 - 1362 1362 - for (let i = bloomFramebuffers.length - 2; i >= 0; i--) { 1363 1363 - let baseTex = bloomFramebuffers[i]; 1364 1364 - gl.uniform2f(bloomBlurProgram.uniforms.texelSize, last.texelSizeX, last.texelSizeY); 1365 1365 - gl.uniform1i(bloomBlurProgram.uniforms.uTexture, last.attach(0)); 1366 1366 - gl.viewport(0, 0, baseTex.width, baseTex.height); 1367 1367 - blit(baseTex); 1368 1368 - last = baseTex; 1369 1369 - } 1370 1370 - 1371 1371 - gl.disable(gl.BLEND); 1372 1372 - bloomFinalProgram.bind(); 1373 1373 - gl.uniform2f(bloomFinalProgram.uniforms.texelSize, last.texelSizeX, last.texelSizeY); 1374 1374 - gl.uniform1i(bloomFinalProgram.uniforms.uTexture, last.attach(0)); 1375 1375 - gl.uniform1f(bloomFinalProgram.uniforms.intensity, config.BLOOM_INTENSITY); 1376 1376 - blit(destination); 1377 1377 - } 1378 1378 - 1379 1379 - function applySunrays(source, mask, destination) { 1380 1380 - gl.disable(gl.BLEND); 1381 1381 - sunraysMaskProgram.bind(); 1382 1382 - gl.uniform1i(sunraysMaskProgram.uniforms.uTexture, source.attach(0)); 1383 1383 - blit(mask); 1384 1384 - 1385 1385 - sunraysProgram.bind(); 1386 1386 - gl.uniform1f(sunraysProgram.uniforms.weight, config.SUNRAYS_WEIGHT); 1387 1387 - gl.uniform1i(sunraysProgram.uniforms.uTexture, mask.attach(0)); 1388 1388 - blit(destination); 1389 1389 - } 1390 1390 - 1391 1391 - function blur(target, temp, iterations) { 1392 1392 - blurProgram.bind(); 1393 1393 - for (let i = 0; i < iterations; i++) { 1394 1394 - gl.uniform2f(blurProgram.uniforms.texelSize, target.texelSizeX, 0.0); 1395 1395 - gl.uniform1i(blurProgram.uniforms.uTexture, target.attach(0)); 1396 1396 - blit(temp); 1397 1397 - 1398 1398 - gl.uniform2f(blurProgram.uniforms.texelSize, 0.0, target.texelSizeY); 1399 1399 - gl.uniform1i(blurProgram.uniforms.uTexture, temp.attach(0)); 1400 1400 - blit(target); 1401 1401 - } 1402 1402 - } 1403 1403 - 1404 1404 - function splatPointer(pointer) { 1405 1405 - let dx = pointer.deltaX * config.SPLAT_FORCE * 5; 1406 1406 - let dy = pointer.deltaY * config.SPLAT_FORCE * 5; 1407 1407 - splat(pointer.texcoordX, pointer.texcoordY, dx, dy, pointer.color); 1408 1408 - } 1409 1409 - 1410 1410 - function multipleSplats(amount) { 1411 1411 - for (let i = 0; i < amount; i++) { 1412 1412 - const color = generateColor(); 1413 1413 - color.r *= 10.0; 1414 1414 - color.g *= 10.0; 1415 1415 - color.b *= 10.0; 1416 1416 - const x = Math.random(); 1417 1417 - const y = Math.random() < 0.5 ? 0.8 : 0.2; 1418 1418 - const dx = 100 * (Math.random() - 0.5); 1419 1419 - const dy = 1000 * (Math.random() - 0.5); 1420 1420 - splat(x, y, dx, dy, color); 1421 1421 - } 1422 1422 - } 1423 1423 - 1424 1424 - function splat(x, y, dx, dy, color) { 1425 1425 - splatProgram.bind(); 1426 1426 - gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read.attach(0)); 1427 1427 - gl.uniform1f(splatProgram.uniforms.aspectRatio, canvas.width / canvas.height); 1428 1428 - gl.uniform2f(splatProgram.uniforms.point, x, y); 1429 1429 - gl.uniform3f(splatProgram.uniforms.color, dx, dy, 0.0); 1430 1430 - gl.uniform1f(splatProgram.uniforms.radius, correctRadius(config.SPLAT_RADIUS / 100.0)); 1431 1431 - blit(velocity.write); 1432 1432 - velocity.swap(); 1433 1433 - 1434 1434 - gl.uniform1i(splatProgram.uniforms.uTarget, dye.read.attach(0)); 1435 1435 - gl.uniform3f(splatProgram.uniforms.color, color.r, color.g, color.b); 1436 1436 - blit(dye.write); 1437 1437 - dye.swap(); 1438 1438 - } 1439 1439 - 1440 1440 - function correctRadius(radius) { 1441 1441 - let aspectRatio = canvas.width / canvas.height; 1442 1442 - if (aspectRatio > 1) radius *= aspectRatio; 1443 1443 - return radius; 1444 1444 - } 1445 1445 - 1446 1446 - canvas.addEventListener('mousedown', (e) => { 1447 1447 - let posX = scaleByPixelRatio(e.offsetX); 1448 1448 - let posY = scaleByPixelRatio(e.offsetY); 1449 1449 - let pointer = pointers.find((p) => p.id == -1); 1450 1450 - if (pointer == null) pointer = new PointerPrototype(); 1451 1451 - updatePointerDownData(pointer, -1, posX, posY); 1452 1452 - }); 1453 1453 - 1454 1454 - document.body.addEventListener('mousemove', (e) => { 1455 1455 - let pointer = pointers[0]; 1456 1456 - // if (!pointer.down) return; 1457 1457 - let posX = scaleByPixelRatio(e.offsetX); 1458 1458 - let posY = scaleByPixelRatio(e.offsetY); 1459 1459 - updatePointerMoveData(pointer, posX, posY); 1460 1460 - }); 1461 1461 - 1462 1462 - window.addEventListener('mouseup', () => { 1463 1463 - updatePointerUpData(pointers[0]); 1464 1464 - }); 1465 1465 - 1466 1466 - document.body.addEventListener('touchstart', (e) => { 1467 1467 - e.preventDefault(); 1468 1468 - const touches = e.targetTouches; 1469 1469 - while (touches.length >= pointers.length) pointers.push(new PointerPrototype()); 1470 1470 - for (let i = 0; i < touches.length; i++) { 1471 1471 - let posX = scaleByPixelRatio(touches[i].pageX); 1472 1472 - let posY = scaleByPixelRatio(touches[i].pageY); 1473 1473 - updatePointerDownData(pointers[i + 1], touches[i].identifier, posX, posY); 1474 1474 - } 1475 1475 - }); 1476 1476 - 1477 1477 - document.body.addEventListener( 1478 1478 - 'touchmove', 1479 1479 - (e) => { 1480 1480 - e.preventDefault(); 1481 1481 - const touches = e.targetTouches; 1482 1482 - for (let i = 0; i < touches.length; i++) { 1483 1483 - let pointer = pointers[i + 1]; 1484 1484 - if (!pointer.down) continue; 1485 1485 - let posX = scaleByPixelRatio(touches[i].pageX); 1486 1486 - let posY = scaleByPixelRatio(touches[i].pageY); 1487 1487 - updatePointerMoveData(pointer, posX, posY); 1488 1488 - } 1489 1489 - }, 1490 1490 - false 1491 1491 - ); 1492 1492 - 1493 1493 - document.body.addEventListener('touchend', (e) => { 1494 1494 - const touches = e.changedTouches; 1495 1495 - for (const element of touches) { 1496 1496 - let pointer = pointers.find((p) => p.id == element.identifier); 1497 1497 - if (pointer == null) continue; 1498 1498 - updatePointerUpData(pointer); 1499 1499 - } 1500 1500 - }); 1501 1501 - 1502 1502 - // window.addEventListener('keydown', (e) => { 1503 1503 - // if (e.code === 'KeyP') config.PAUSED = !config.PAUSED; 1504 1504 - // if (e.key === ' ') splatStack.push(parseInt(Math.random() * 20) + 5); 1505 1505 - // }); 1506 1506 - 1507 1507 - function updatePointerDownData(pointer, id, posX, posY) { 1508 1508 - pointer.id = id; 1509 1509 - pointer.down = true; 1510 1510 - pointer.moved = false; 1511 1511 - pointer.texcoordX = posX / canvas.width; 1512 1512 - pointer.texcoordY = 1.0 - posY / canvas.height; 1513 1513 - pointer.prevTexcoordX = pointer.texcoordX; 1514 1514 - pointer.prevTexcoordY = pointer.texcoordY; 1515 1515 - pointer.deltaX = 0; 1516 1516 - pointer.deltaY = 0; 1517 1517 - pointer.color = generateColor(); 1518 1518 - } 1519 1519 - 1520 1520 - function updatePointerMoveData(pointer, posX, posY) { 1521 1521 - pointer.prevTexcoordX = pointer.texcoordX; 1522 1522 - pointer.prevTexcoordY = pointer.texcoordY; 1523 1523 - pointer.texcoordX = posX / canvas.width; 1524 1524 - pointer.texcoordY = 1.0 - posY / canvas.height; 1525 1525 - pointer.deltaX = correctDeltaX(pointer.texcoordX - pointer.prevTexcoordX); 1526 1526 - pointer.deltaY = correctDeltaY(pointer.texcoordY - pointer.prevTexcoordY); 1527 1527 - pointer.moved = Math.abs(pointer.deltaX) > 0 || Math.abs(pointer.deltaY) > 0; 1528 1528 - } 1529 1529 - 1530 1530 - function updatePointerUpData(pointer) { 1531 1531 - pointer.down = false; 1532 1532 - } 1533 1533 - 1534 1534 - function correctDeltaX(delta) { 1535 1535 - let aspectRatio = canvas.width / canvas.height; 1536 1536 - if (aspectRatio < 1) delta *= aspectRatio; 1537 1537 - return delta; 1538 1538 - } 1539 1539 - 1540 1540 - function correctDeltaY(delta) { 1541 1541 - let aspectRatio = canvas.width / canvas.height; 1542 1542 - if (aspectRatio > 1) delta /= aspectRatio; 1543 1543 - return delta; 1544 1544 - } 1545 1545 - 1546 1546 - function generateColor() { 1547 1547 - let c = HSVtoRGB(Math.random() * (config.END_HUE - config.START_HUE) + config.START_HUE, 1.0, 1.0); 1548 1548 - c.r *= 0.15; 1549 1549 - c.g *= 0.15; 1550 1550 - c.b *= 0.15; 1551 1551 - return c; 1552 1552 - } 1553 1553 - 1554 1554 - function HSVtoRGB(h, s, v) { 1555 1555 - let r, g, b, i, f, p, q, t; 1556 1556 - i = Math.floor(h * 6); 1557 1557 - f = h * 6 - i; 1558 1558 - p = v * (1 - s); 1559 1559 - q = v * (1 - f * s); 1560 1560 - t = v * (1 - (1 - f) * s); 1561 1561 - 1562 1562 - switch (i % 6) { 1563 1563 - case 0: 1564 1564 - (r = v), (g = t), (b = p); 1565 1565 - break; 1566 1566 - case 1: 1567 1567 - (r = q), (g = v), (b = p); 1568 1568 - break; 1569 1569 - case 2: 1570 1570 - (r = p), (g = v), (b = t); 1571 1571 - break; 1572 1572 - case 3: 1573 1573 - (r = p), (g = q), (b = v); 1574 1574 - break; 1575 1575 - case 4: 1576 1576 - (r = t), (g = p), (b = v); 1577 1577 - break; 1578 1578 - case 5: 1579 1579 - (r = v), (g = p), (b = q); 1580 1580 - break; 1581 1581 - } 1582 1582 - 1583 1583 - return { 1584 1584 - r, 1585 1585 - g, 1586 1586 - b 1587 1587 - }; 1588 1588 - } 1589 1589 - 1590 1590 - function normalizeColor(input) { 1591 1591 - let output = { 1592 1592 - r: input.r / 255, 1593 1593 - g: input.g / 255, 1594 1594 - b: input.b / 255 1595 1595 - }; 1596 1596 - return output; 1597 1597 - } 1598 1598 - 1599 1599 - function wrap(value, min, max) { 1600 1600 - let range = max - min; 1601 1601 - if (range == 0) return min; 1602 1602 - return ((value - min) % range) + min; 1603 1603 - } 1604 1604 - 1605 1605 - function getResolution(resolution) { 1606 1606 - let aspectRatio = gl.drawingBufferWidth / gl.drawingBufferHeight; 1607 1607 - if (aspectRatio < 1) aspectRatio = 1.0 / aspectRatio; 1608 1608 - 1609 1609 - let min = Math.round(resolution); 1610 1610 - let max = Math.round(resolution * aspectRatio); 1611 1611 - 1612 1612 - if (gl.drawingBufferWidth > gl.drawingBufferHeight) return { width: max, height: min }; 1613 1613 - else return { width: min, height: max }; 1614 1614 - } 1615 1615 - 1616 1616 - function getTextureScale(texture, width, height) { 1617 1617 - return { 1618 1618 - x: width / texture.width, 1619 1619 - y: height / texture.height 1620 1620 - }; 1621 1621 - } 1622 1622 - 1623 1623 - function scaleByPixelRatio(input) { 1624 1624 - let pixelRatio = window.devicePixelRatio || 1; 1625 1625 - return Math.floor(input * pixelRatio); 1626 1626 - } 1627 1627 - 1628 1628 - function hashCode(s) { 1629 1629 - if (s.length == 0) return 0; 1630 1630 - let hash = 0; 1631 1631 - for (let i = 0; i < s.length; i++) { 1632 1632 - hash = (hash << 5) - hash + s.charCodeAt(i); 1633 1633 - hash |= 0; // Convert to 32bit integer 1634 1634 - } 1635 1635 - return hash; 1636 1636 - } 1637 1637 - 1638 1638 - 1639 1639 - setInterval(() => { 1640 1640 - multipleSplats(5); 1641 1641 - }, 500)