snake_case · kasper.space/ferrum@ce240bc

+18 -18

eslint.config.mjs

··· 39 39 }, 40 40 { 41 41 rules: { 42 - // '@typescript-eslint/naming-convention': [ 43 - // 'error', 44 - // { 45 - // selector: 'variableLike', 46 - // format: ['snake_case', 'UPPER_CASE', 'PascalCase'], 47 - // leadingUnderscore: 'allow', 48 - // }, 49 - // { 50 - // selector: 'parameter', 51 - // modifiers: ['destructured'], 52 - // format: null, 53 - // }, 54 - // { 55 - // selector: 'variable', 56 - // modifiers: ['destructured'], 57 - // format: null, 58 - // }, 59 - // ], 42 + '@typescript-eslint/naming-convention': [ 43 + 'error', 44 + { 45 + selector: 'variableLike', 46 + format: ['snake_case', 'UPPER_CASE', 'PascalCase'], 47 + leadingUnderscore: 'allow', 48 + }, 49 + { 50 + selector: 'parameter', 51 + modifiers: ['destructured'], 52 + format: null, 53 + }, 54 + { 55 + selector: 'variable', 56 + modifiers: ['destructured'], 57 + format: null, 58 + }, 59 + ], 60 60 '@typescript-eslint/no-unused-expressions': 'off', 61 61 '@typescript-eslint/no-unused-vars': [ 62 62 'error',

+154 -156

src/lib/visualizer/ShaderToyLite.js

··· 36 36 } 37 37 ` 38 38 39 - var basicFragShader = `void mainImage( out vec4 fragColor, in vec2 fragCoord ) { 40 - fragColor = texture2D(iChannel0, gl_FragCoord.xy / iResolution.xy); 41 - } 42 - ` 43 - 44 - const basicVertexShader = `#version 300 es 39 + const basic_vertex_shader = `#version 300 es 45 40 #ifdef GL_ES 46 41 precision highp float; 47 42 precision highp int; ··· 53 48 } 54 49 ` 55 50 56 - const quadVertices = new Float32Array([ 51 + const quad_vertices = new Float32Array([ 57 52 -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 58 53 ]) 59 54 ··· 61 56 alpha: false, 62 57 depth: false, 63 58 stencil: false, 64 - premultipliedAlpha: false, 59 + premultiplied_alpha: false, 65 60 antialias: true, 66 - preserveDrawingBuffer: false, 67 - powerPreference: 'high-performance', 61 + preserve_drawing_buffer: false, 62 + power_preference: 'high-performance', 68 63 } 69 64 70 65 var gl = canvas.getContext('webgl2', opts) 71 66 72 67 // timing 73 - var isPlaying = false 74 - var firstDrawTime = 0 75 - var prevDrawTime = 0 68 + var is_playing = false 69 + var first_draw_time = 0 70 + var prev_draw_time = 0 76 71 77 72 // callback 78 - var onDrawCallback 73 + var on_draw_callback 79 74 80 75 // uniforms 81 - var iFrame = 0 82 - var iMouse = { x: 0, y: 0, clickX: 0, clickY: 0 } 83 - var iStream = 0 84 - var iVolume = 0 76 + var iframe = 0 77 + var imouse = { x: 0, y: 0, clickX: 0, clickY: 0 } 78 + var istream = 0 79 + var ivolume = 0 85 80 86 81 // shader common source 87 82 var common = '' ··· 95 90 var aframebuf = {} // front buffer (output) 96 91 var bframebuf = {} // back buffer (output) 97 92 var program = {} // webgl program 98 - var fragmentShaders = {} 99 - var vertexShaders = {} 93 + var fragment_shaders = {} 94 + var vertex_shaders = {} 100 95 var location = {} // uniform location 101 96 var flip = {} // a b flip 102 - var quadBuffer // two full screen triangles 97 + var quad_buffer // two full screen triangles 103 98 104 99 var setup = () => { 105 100 gl.getExtension('OES_texture_float_linear') ··· 112 107 program[key] = null 113 108 location[key] = {} 114 109 if (key != 'Image') { 115 - atexture[key] = createTexture() 116 - btexture[key] = createTexture() 117 - aframebuf[key] = createFrameBuffer(atexture[key]) 118 - bframebuf[key] = createFrameBuffer(btexture[key]) 110 + atexture[key] = create_texture() 111 + btexture[key] = create_texture() 112 + aframebuf[key] = create_frame_buffer(atexture[key]) 113 + bframebuf[key] = create_frame_buffer(btexture[key]) 119 114 flip[key] = false 120 115 } 121 116 }) 122 117 123 118 // bind the geometry 124 - quadBuffer = gl.createBuffer() 125 - gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer) 126 - gl.bufferData(gl.ARRAY_BUFFER, quadVertices, gl.STATIC_DRAW) 119 + quad_buffer = gl.createBuffer() 120 + gl.bindBuffer(gl.ARRAY_BUFFER, quad_buffer) 121 + gl.bufferData(gl.ARRAY_BUFFER, quad_vertices, gl.STATIC_DRAW) 127 122 128 123 // Set viewport size 129 124 gl.viewport(0, 0, gl.canvas.width, gl.canvas.height) ··· 135 130 }) 136 131 137 132 canvas.addEventListener('mousemove', (event) => { 138 - iMouse.x = event.offsetX 139 - iMouse.y = canvas.height - event.offsetY 133 + imouse.x = event.offsetX 134 + imouse.y = canvas.height - event.offsetY 140 135 }) 141 136 142 137 canvas.addEventListener('mousedown', (event) => { 143 - iMouse.clickX = event.offsetX 144 - iMouse.clickY = canvas.height - event.offsetY 138 + imouse.clickX = event.offsetX 139 + imouse.clickY = canvas.height - event.offsetY 145 140 }) 146 141 147 142 canvas.addEventListener('mouseup', () => { 148 - iMouse.clickX = 0 149 - iMouse.clickY = 0 143 + imouse.clickX = 0 144 + imouse.clickY = 0 150 145 }) 151 146 } 152 147 153 - var createTexture = () => { 148 + var create_texture = () => { 154 149 var texture = gl.createTexture() 155 150 gl.bindTexture(gl.TEXTURE_2D, texture) 156 151 gl.texImage2D( ··· 171 166 return texture 172 167 } 173 168 174 - var createFrameBuffer = (texture) => { 169 + var create_frame_buffer = (texture) => { 175 170 var framebuffer = gl.createFramebuffer() 176 171 gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer) 177 172 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0) ··· 180 175 return framebuffer 181 176 } 182 177 183 - var compileProgram = (key) => { 178 + var compile_program = (key) => { 184 179 // Delete previous program + shaders if they exist 185 180 if (program[key]) { 186 181 gl.deleteProgram(program[key]) 187 182 program[key] = null 188 183 } 189 - if (vertexShaders[key]) { 190 - gl.deleteShader(vertexShaders[key]) 191 - vertexShaders[key] = null 184 + if (vertex_shaders[key]) { 185 + gl.deleteShader(vertex_shaders[key]) 186 + vertex_shaders[key] = null 192 187 } 193 - if (fragmentShaders[key]) { 194 - gl.deleteShader(fragmentShaders[key]) 195 - fragmentShaders[key] = null 188 + if (fragment_shaders[key]) { 189 + gl.deleteShader(fragment_shaders[key]) 190 + fragment_shaders[key] = null 196 191 } 197 192 198 193 var vert = gl.createShader(gl.VERTEX_SHADER) 199 - gl.shaderSource(vert, basicVertexShader) 194 + gl.shaderSource(vert, basic_vertex_shader) 200 195 gl.compileShader(vert) 201 196 202 197 if (!gl.getShaderParameter(vert, gl.COMPILE_STATUS)) { ··· 205 200 return null 206 201 } 207 202 208 - var fragSource = hdr + common + sourcecode[key] 203 + var frag_source = hdr + common + sourcecode[key] 209 204 var frag = gl.createShader(gl.FRAGMENT_SHADER) 210 - gl.shaderSource(frag, fragSource) 205 + gl.shaderSource(frag, frag_source) 211 206 gl.compileShader(frag) 212 207 213 208 if (!gl.getShaderParameter(frag, gl.COMPILE_STATUS)) { 214 209 console.error('Fragment Shader compilation failed: ' + gl.getShaderInfoLog(frag)) 215 - console.error(fragSource) 210 + console.error(frag_source) 216 211 gl.deleteShader(frag) 217 212 return null 218 213 } 219 214 220 - var newProgram = gl.createProgram() 221 - gl.attachShader(newProgram, vert) 222 - gl.attachShader(newProgram, frag) 223 - gl.linkProgram(newProgram) 215 + var new_program = gl.createProgram() 216 + gl.attachShader(new_program, vert) 217 + gl.attachShader(new_program, frag) 218 + gl.linkProgram(new_program) 224 219 225 220 gl.deleteShader(vert) 226 221 gl.deleteShader(frag) 227 222 228 - if (!gl.getProgramParameter(newProgram, gl.LINK_STATUS)) { 229 - console.error('Program initialization failed: ' + gl.getProgramInfoLog(newProgram)) 223 + if (!gl.getProgramParameter(new_program, gl.LINK_STATUS)) { 224 + console.error('Program initialization failed: ' + gl.getProgramInfoLog(new_program)) 230 225 return null 231 226 } 232 227 233 228 // uniform locations 234 - location[key]['iResolution'] = gl.getUniformLocation(newProgram, 'iResolution') 235 - location[key]['iTime'] = gl.getUniformLocation(newProgram, 'iTime') 236 - location[key]['iTimeDelta'] = gl.getUniformLocation(newProgram, 'iTimeDelta') 237 - location[key]['iFrameRate'] = gl.getUniformLocation(newProgram, 'iFrameRate') 238 - location[key]['iFrame'] = gl.getUniformLocation(newProgram, 'iFrame') 239 - location[key]['iChannelTime'] = gl.getUniformLocation(newProgram, 'iChannelTime[0]') 240 - location[key]['iChannelResolution'] = gl.getUniformLocation(newProgram, 'iChannelResolution[0]') 241 - location[key]['iChannel0'] = gl.getUniformLocation(newProgram, 'iChannel0') 242 - location[key]['iChannel1'] = gl.getUniformLocation(newProgram, 'iChannel1') 243 - location[key]['iChannel2'] = gl.getUniformLocation(newProgram, 'iChannel2') 244 - location[key]['iChannel3'] = gl.getUniformLocation(newProgram, 'iChannel3') 245 - location[key]['iMouse'] = gl.getUniformLocation(newProgram, 'iMouse') 246 - location[key]['iDate'] = gl.getUniformLocation(newProgram, 'iDate') 247 - location[key]['iSampleRate'] = gl.getUniformLocation(newProgram, 'iSampleRate') 248 - location[key]['iStream'] = gl.getUniformLocation(newProgram, 'iStream') 249 - location[key]['iVolume'] = gl.getUniformLocation(newProgram, 'iVolume') 250 - location[key]['vertexInPosition'] = gl.getAttribLocation(newProgram, 'vertexInPosition') 229 + location[key]['iResolution'] = gl.getUniformLocation(new_program, 'iResolution') 230 + location[key]['iTime'] = gl.getUniformLocation(new_program, 'iTime') 231 + location[key]['iTimeDelta'] = gl.getUniformLocation(new_program, 'iTimeDelta') 232 + location[key]['iFrameRate'] = gl.getUniformLocation(new_program, 'iFrameRate') 233 + location[key]['iFrame'] = gl.getUniformLocation(new_program, 'iFrame') 234 + location[key]['iChannelTime'] = gl.getUniformLocation(new_program, 'iChannelTime[0]') 235 + location[key]['iChannelResolution'] = gl.getUniformLocation( 236 + new_program, 237 + 'iChannelResolution[0]', 238 + ) 239 + location[key]['iChannel0'] = gl.getUniformLocation(new_program, 'iChannel0') 240 + location[key]['iChannel1'] = gl.getUniformLocation(new_program, 'iChannel1') 241 + location[key]['iChannel2'] = gl.getUniformLocation(new_program, 'iChannel2') 242 + location[key]['iChannel3'] = gl.getUniformLocation(new_program, 'iChannel3') 243 + location[key]['iMouse'] = gl.getUniformLocation(new_program, 'iMouse') 244 + location[key]['iDate'] = gl.getUniformLocation(new_program, 'iDate') 245 + location[key]['iSampleRate'] = gl.getUniformLocation(new_program, 'iSampleRate') 246 + location[key]['iStream'] = gl.getUniformLocation(new_program, 'iStream') 247 + location[key]['iVolume'] = gl.getUniformLocation(new_program, 'iVolume') 248 + location[key]['vertexInPosition'] = gl.getAttribLocation(new_program, 'vertexInPosition') 251 249 252 - vertexShaders[key] = vert 253 - fragmentShaders[key] = frag 254 - return newProgram 250 + vertex_shaders[key] = vert 251 + fragment_shaders[key] = frag 252 + return new_program 255 253 } 256 254 257 255 var repeat = (times, arr) => { ··· 262 260 return result 263 261 } 264 262 265 - var setShader = (config, key) => { 263 + var set_shader = (config, key) => { 266 264 // Unbind before deleting 267 265 gl.bindTexture(gl.TEXTURE_2D, null) 268 266 gl.bindFramebuffer(gl.FRAMEBUFFER, null) ··· 279 277 if (config) { 280 278 if (config.source) { 281 279 sourcecode[key] = config.source 282 - program[key] = compileProgram(key) 280 + program[key] = compile_program(key) 283 281 if (!program[key]) { 284 282 console.error('Failed to compile ' + key) 285 283 } ··· 287 285 288 286 // Recreate textures/framebuffers for buffers 289 287 if (key !== 'Image') { 290 - atexture[key] = createTexture() 291 - btexture[key] = createTexture() 292 - aframebuf[key] = createFrameBuffer(atexture[key]) 293 - bframebuf[key] = createFrameBuffer(btexture[key]) 288 + atexture[key] = create_texture() 289 + btexture[key] = create_texture() 290 + aframebuf[key] = create_frame_buffer(atexture[key]) 291 + bframebuf[key] = create_frame_buffer(btexture[key]) 294 292 flip[key] = false 295 293 } 296 294 ··· 308 306 309 307 var draw = () => { 310 308 // current time 311 - var now = isPlaying ? Date.now() : prevDrawTime 309 + var now = is_playing ? Date.now() : prev_draw_time 312 310 var date = new Date(now) 313 311 314 312 // first draw? 315 - if (firstDrawTime == 0) { 316 - firstDrawTime = now 313 + if (first_draw_time == 0) { 314 + first_draw_time = now 317 315 } 318 316 319 317 // call callback 320 - if (onDrawCallback) { 321 - onDrawCallback() 318 + if (on_draw_callback) { 319 + on_draw_callback() 322 320 } 323 321 324 322 // time difference between frames in seconds 325 - var iTimeDelta = (now - prevDrawTime) * 0.001 323 + var itime_delta = (now - prev_draw_time) * 0.001 326 324 327 325 // time in seconds 328 - var iTime = (now - firstDrawTime) * 0.001 329 - var iDate = [date.getFullYear(), date.getMonth(), date.getDate(), date.getTime() * 0.001] 326 + var itime = (now - first_draw_time) * 0.001 327 + var idate = [date.getFullYear(), date.getMonth(), date.getDate(), date.getTime() * 0.001] 330 328 331 329 // channel uniforms 332 - var iChannelTimes = new Float32Array(repeat(4, [iTime])) 333 - var iChannelResolutions = new Float32Array(repeat(4, [gl.canvas.width, gl.canvas.height, 0])) 330 + var ichannel_times = new Float32Array(repeat(4, [itime])) 331 + var ichannel_resolutions = new Float32Array(repeat(4, [gl.canvas.width, gl.canvas.height, 0])) 334 332 335 333 ;['A', 'B', 'C', 'D', 'Image'].forEach((key) => { 336 334 if (program[key]) { ··· 357 355 358 356 // uniforms 359 357 gl.uniform3f(location[key]['iResolution'], gl.canvas.width, gl.canvas.height, 1.0) 360 - gl.uniform1f(location[key]['iTime'], iTime) 361 - gl.uniform1f(location[key]['iTimeDelta'], iTimeDelta) 358 + gl.uniform1f(location[key]['iTime'], itime) 359 + gl.uniform1f(location[key]['iTimeDelta'], itime_delta) 362 360 gl.uniform1f(location[key]['iFrameRate'], 60) 363 - gl.uniform1i(location[key]['iFrame'], iFrame) 364 - gl.uniform1fv(location[key]['iChannelTime'], iChannelTimes) 365 - gl.uniform3fv(location[key]['iChannelResolution'], iChannelResolutions) 361 + gl.uniform1i(location[key]['iFrame'], iframe) 362 + gl.uniform1fv(location[key]['iChannelTime'], ichannel_times) 363 + gl.uniform3fv(location[key]['iChannelResolution'], ichannel_resolutions) 366 364 gl.uniform1i(location[key]['iChannel0'], 0) 367 365 gl.uniform1i(location[key]['iChannel1'], 1) 368 366 gl.uniform1i(location[key]['iChannel2'], 2) 369 367 gl.uniform1i(location[key]['iChannel3'], 3) 370 - gl.uniform4f(location[key]['iMouse'], iMouse.x, iMouse.y, iMouse.clickX, iMouse.clickY) 371 - gl.uniform4f(location[key]['iDate'], iDate[0], iDate[1], iDate[2], iDate[3]) 368 + gl.uniform4f(location[key]['iMouse'], imouse.x, imouse.y, imouse.clickX, imouse.clickY) 369 + gl.uniform4f(location[key]['iDate'], idate[0], idate[1], idate[2], idate[3]) 372 370 gl.uniform1f(location[key]['iSampleRate'], 44100) 373 - gl.uniform1f(location[key]['iStream'], iStream) 374 - gl.uniform1f(location[key]['iVolume'], iVolume) 371 + gl.uniform1f(location[key]['iStream'], istream) 372 + gl.uniform1f(location[key]['iVolume'], ivolume) 375 373 376 374 // viewport 377 375 gl.viewport(0, 0, gl.canvas.width, gl.canvas.height) 378 376 379 377 // vertexs 380 - gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer) 378 + gl.bindBuffer(gl.ARRAY_BUFFER, quad_buffer) 381 379 gl.vertexAttribPointer(location[key]['vertexInPosition'], 2, gl.FLOAT, false, 0, 0) 382 380 gl.enableVertexAttribArray(location[key]['vertexInPosition']) 383 381 ··· 389 387 }) 390 388 391 389 // time of last draw 392 - prevDrawTime = now 390 + prev_draw_time = now 393 391 394 392 // frame counter 395 - iFrame++ 393 + iframe++ 396 394 } 397 395 398 396 const raf = create_singular_request_animation_frame() 399 397 400 398 // Animation loop 401 399 var animate = () => { 402 - if (isPlaying) { 400 + if (is_playing) { 403 401 draw() 404 402 raf(animate) 405 403 } 406 404 } 407 405 408 - this.setCommon = (source) => { 406 + this.set_common = (source) => { 409 407 if (source === undefined) { 410 408 source = '' 411 409 } ··· 415 413 common = source 416 414 ;['A', 'B', 'C', 'D', 'Image'].forEach((key) => { 417 415 if (program[key]) { 418 - program[key] = compileProgram(key) 416 + program[key] = compile_program(key) 419 417 } 420 418 }) 421 419 } 422 420 423 - this.setBufferA = (config) => { 424 - setShader(config, 'A') 421 + this.set_buffer_a = (config) => { 422 + set_shader(config, 'A') 425 423 } 426 424 427 - this.setBufferB = (config) => { 428 - setShader(config, 'B') 425 + this.set_buffer_b = (config) => { 426 + set_shader(config, 'B') 429 427 } 430 428 431 - this.setBufferC = (config) => { 432 - setShader(config, 'C') 429 + this.set_buffer_c = (config) => { 430 + set_shader(config, 'C') 433 431 } 434 432 435 - this.setBufferD = (config) => { 436 - setShader(config, 'D') 433 + this.set_buffer_d = (config) => { 434 + set_shader(config, 'D') 437 435 } 438 436 439 - this.setImage = (config) => { 440 - setShader(config, 'Image') 437 + this.set_image = (config) => { 438 + set_shader(config, 'Image') 441 439 } 442 440 443 - this.setOnDraw = (callback) => { 444 - onDrawCallback = callback 441 + this.set_on_draw = (callback) => { 442 + on_draw_callback = callback 445 443 } 446 444 447 - this.setStream = (value) => { 448 - iStream = value 445 + this.set_stream = (value) => { 446 + istream = value 449 447 } 450 448 451 - this.setVolume = (value) => { 452 - iVolume = value 449 + this.set_volume = (value) => { 450 + ivolume = value 453 451 } 454 452 455 - this.addTexture = (texture, key) => { 453 + this.add_texture = (texture, key) => { 456 454 if (atexture[key]) { 457 455 gl.deleteTexture(atexture[key]) 458 456 atexture[key] = null ··· 475 473 } 476 474 477 475 this.time = () => { 478 - return (prevDrawTime - firstDrawTime) * 0.001 476 + return (prev_draw_time - first_draw_time) * 0.001 479 477 } 480 478 481 - this.isPlaying = () => isPlaying 479 + this.is_playing = () => is_playing 482 480 483 481 this.reset = () => { 484 482 var now = new Date() 485 - firstDrawTime = now 486 - prevDrawTime = now 487 - iFrame = 0 483 + first_draw_time = now 484 + prev_draw_time = now 485 + iframe = 0 488 486 draw() 489 487 } 490 488 491 489 this.pause = () => { 492 - isPlaying = false 490 + is_playing = false 493 491 } 494 492 495 493 this.play = () => { 496 - if (!isPlaying) { 497 - isPlaying = true 494 + if (!is_playing) { 495 + is_playing = true 498 496 var now = Date.now() 499 - var elapsed = prevDrawTime - firstDrawTime 500 - firstDrawTime = now - elapsed 501 - prevDrawTime = now 497 + var elapsed = prev_draw_time - first_draw_time 498 + first_draw_time = now - elapsed 499 + prev_draw_time = now 502 500 animate() 503 501 } 504 502 } 505 503 506 - var recreateTextures = () => { 504 + var recreate_textures = () => { 507 505 ;['A', 'B', 'C', 'D'].forEach((key) => { 508 506 if (atexture[key]) { 509 507 // Delete old textures ··· 513 511 gl.deleteFramebuffer(bframebuf[key]) 514 512 515 513 // Create new textures with updated canvas size 516 - atexture[key] = createTexture() 517 - btexture[key] = createTexture() 518 - aframebuf[key] = createFrameBuffer(atexture[key]) 519 - bframebuf[key] = createFrameBuffer(btexture[key]) 514 + atexture[key] = create_texture() 515 + btexture[key] = create_texture() 516 + aframebuf[key] = create_frame_buffer(atexture[key]) 517 + bframebuf[key] = create_frame_buffer(btexture[key]) 520 518 flip[key] = false 521 519 } 522 520 }) ··· 527 525 gl.viewport(0, 0, gl.canvas.width, gl.canvas.height) 528 526 529 527 // Recreate all textures and framebuffers with new dimensions 530 - recreateTextures() 528 + recreate_textures() 531 529 532 530 // Reset timing to avoid glitches 533 531 var now = Date.now() 534 - var elapsed = prevDrawTime - firstDrawTime 535 - firstDrawTime = now - elapsed 536 - prevDrawTime = now 532 + var elapsed = prev_draw_time - first_draw_time 533 + first_draw_time = now - elapsed 534 + prev_draw_time = now 537 535 538 536 // Force a redraw 539 - if (!isPlaying) { 537 + if (!is_playing) { 540 538 draw() 541 539 } 542 540 } 543 541 544 542 this.destroy = () => { 545 543 // Stop animation loop 546 - isPlaying = false 544 + is_playing = false 547 545 548 546 // Delete all programs and shaders 549 547 ;['A', 'B', 'C', 'D', 'Image'].forEach((key) => { ··· 551 549 gl.deleteProgram(program[key]) 552 550 program[key] = null 553 551 } 554 - if (vertexShaders[key]) { 555 - gl.deleteShader(vertexShaders[key]) 556 - vertexShaders[key] = null 552 + if (vertex_shaders[key]) { 553 + gl.deleteShader(vertex_shaders[key]) 554 + vertex_shaders[key] = null 557 555 } 558 - if (fragmentShaders[key]) { 559 - gl.deleteShader(fragmentShaders[key]) 560 - fragmentShaders[key] = null 556 + if (fragment_shaders[key]) { 557 + gl.deleteShader(fragment_shaders[key]) 558 + fragment_shaders[key] = null 561 559 } 562 560 }) 563 561 ··· 582 580 }) 583 581 584 582 // Delete quad buffer 585 - if (quadBuffer) { 586 - gl.deleteBuffer(quadBuffer) 587 - quadBuffer = null 583 + if (quad_buffer) { 584 + gl.deleteBuffer(quad_buffer) 585 + quad_buffer = null 588 586 } 589 587 590 588 // Clear event listeners (store references during setup to remove them) ··· 592 590 // If you need to remove them, store handler references in setup() 593 591 594 592 // Lose WebGL context to free GPU memory 595 - const loseContext = gl.getExtension('WEBGL_lose_context') 596 - if (loseContext) { 597 - loseContext.loseContext() 593 + const lose_context = gl.getExtension('WEBGL_lose_context') 594 + if (lose_context) { 595 + lose_context.loseContext() 598 596 } 599 597 600 598 // Clear callback 601 - onDrawCallback = null 599 + on_draw_callback = null 602 600 603 601 // Nullify gl reference 604 602 gl = null

+9 -9

src/lib/visualizer/Visualizer.svelte

··· 1 1 <script lang="ts"> 2 2 import { start_visualizer } from './visualizer' 3 3 import { ShaderToyLite } from './ShaderToyLite.js' 4 - import { onDestroy, onMount, untrack } from 'svelte' 4 + import { onDestroy } from 'svelte' 5 5 import { audioContext, mediaElementSource } from '$lib/player' 6 6 import Player from '$components/Player.svelte' 7 7 import { fly } from 'svelte/transition' ··· 106 106 ` 107 107 function create_toy(canvas: HTMLCanvasElement) { 108 108 const toy = new ShaderToyLite(canvas) 109 - toy.setCommon('') 110 - toy.setImage({ source: imageShader, iChannel0: 'A' }) 109 + toy.set_common('') 110 + toy.set_image({ source: imageShader, iChannel0: 'A' }) 111 111 return toy 112 112 } 113 113 ··· 136 136 let autoTransitionTimeout: ReturnType<typeof setTimeout> | undefined 137 137 138 138 const visualizer = start_visualizer(audioContext, mediaElementSource, (info) => { 139 - main_vis.toy?.setStream(info.stream) 140 - main_vis.toy?.setVolume(info.volume) 139 + main_vis.toy?.set_stream(info.stream) 140 + main_vis.toy?.set_volume(info.volume) 141 141 // Also update transition toy if it exists 142 - next_vis.toy?.setStream(info.stream) 143 - next_vis.toy?.setVolume(info.volume) 142 + next_vis.toy?.set_stream(info.stream) 143 + next_vis.toy?.set_volume(info.volume) 144 144 }) 145 145 146 146 let pendingTransition: number | null = null ··· 168 168 next_vis.should_resize = false 169 169 schedule_resize(next_vis) 170 170 } 171 - next_vis.toy.setBufferA({ source: shaders[newShaderIndex].shader }) 171 + next_vis.toy.set_buffer_a({ source: shaders[newShaderIndex].shader }) 172 172 next_vis.toy.play() 173 173 174 174 const animation_new = next_vis.canvas.animate( ··· 297 297 vis.canvas = canvas 298 298 if (vis.is_main && !vis.toy) { 299 299 const toy = create_toy(canvas) 300 - toy.setBufferA({ source: shaders[0].shader }) 300 + toy.set_buffer_a({ source: shaders[0].shader }) 301 301 toy.play() 302 302 vis.toy = toy 303 303 }

Configure Feed

Configure Feed