···
39
39
},
40
40
{
41
41
rules: {
42
42
-
// '@typescript-eslint/naming-convention': [
43
43
-
// 'error',
44
44
-
// {
45
45
-
// selector: 'variableLike',
46
46
-
// format: ['snake_case', 'UPPER_CASE', 'PascalCase'],
47
47
-
// leadingUnderscore: 'allow',
48
48
-
// },
49
49
-
// {
50
50
-
// selector: 'parameter',
51
51
-
// modifiers: ['destructured'],
52
52
-
// format: null,
53
53
-
// },
54
54
-
// {
55
55
-
// selector: 'variable',
56
56
-
// modifiers: ['destructured'],
57
57
-
// format: null,
58
58
-
// },
59
59
-
// ],
42
42
+
'@typescript-eslint/naming-convention': [
43
43
+
'error',
44
44
+
{
45
45
+
selector: 'variableLike',
46
46
+
format: ['snake_case', 'UPPER_CASE', 'PascalCase'],
47
47
+
leadingUnderscore: 'allow',
48
48
+
},
49
49
+
{
50
50
+
selector: 'parameter',
51
51
+
modifiers: ['destructured'],
52
52
+
format: null,
53
53
+
},
54
54
+
{
55
55
+
selector: 'variable',
56
56
+
modifiers: ['destructured'],
57
57
+
format: null,
58
58
+
},
59
59
+
],
60
60
'@typescript-eslint/no-unused-expressions': 'off',
61
61
'@typescript-eslint/no-unused-vars': [
62
62
'error',
···
36
36
}
37
37
`
38
38
39
39
-
var basicFragShader = `void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
40
40
-
fragColor = texture2D(iChannel0, gl_FragCoord.xy / iResolution.xy);
41
41
-
}
42
42
-
`
43
43
-
44
44
-
const basicVertexShader = `#version 300 es
39
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
56
-
const quadVertices = new Float32Array([
51
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
64
-
premultipliedAlpha: false,
59
59
+
premultiplied_alpha: false,
65
60
antialias: true,
66
66
-
preserveDrawingBuffer: false,
67
67
-
powerPreference: 'high-performance',
61
61
+
preserve_drawing_buffer: false,
62
62
+
power_preference: 'high-performance',
68
63
}
69
64
70
65
var gl = canvas.getContext('webgl2', opts)
71
66
72
67
// timing
73
73
-
var isPlaying = false
74
74
-
var firstDrawTime = 0
75
75
-
var prevDrawTime = 0
68
68
+
var is_playing = false
69
69
+
var first_draw_time = 0
70
70
+
var prev_draw_time = 0
76
71
77
72
// callback
78
78
-
var onDrawCallback
73
73
+
var on_draw_callback
79
74
80
75
// uniforms
81
81
-
var iFrame = 0
82
82
-
var iMouse = { x: 0, y: 0, clickX: 0, clickY: 0 }
83
83
-
var iStream = 0
84
84
-
var iVolume = 0
76
76
+
var iframe = 0
77
77
+
var imouse = { x: 0, y: 0, clickX: 0, clickY: 0 }
78
78
+
var istream = 0
79
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
98
-
var fragmentShaders = {}
99
99
-
var vertexShaders = {}
93
93
+
var fragment_shaders = {}
94
94
+
var vertex_shaders = {}
100
95
var location = {} // uniform location
101
96
var flip = {} // a b flip
102
102
-
var quadBuffer // two full screen triangles
97
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
115
-
atexture[key] = createTexture()
116
116
-
btexture[key] = createTexture()
117
117
-
aframebuf[key] = createFrameBuffer(atexture[key])
118
118
-
bframebuf[key] = createFrameBuffer(btexture[key])
110
110
+
atexture[key] = create_texture()
111
111
+
btexture[key] = create_texture()
112
112
+
aframebuf[key] = create_frame_buffer(atexture[key])
113
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
124
-
quadBuffer = gl.createBuffer()
125
125
-
gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer)
126
126
-
gl.bufferData(gl.ARRAY_BUFFER, quadVertices, gl.STATIC_DRAW)
119
119
+
quad_buffer = gl.createBuffer()
120
120
+
gl.bindBuffer(gl.ARRAY_BUFFER, quad_buffer)
121
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
138
-
iMouse.x = event.offsetX
139
139
-
iMouse.y = canvas.height - event.offsetY
133
133
+
imouse.x = event.offsetX
134
134
+
imouse.y = canvas.height - event.offsetY
140
135
})
141
136
142
137
canvas.addEventListener('mousedown', (event) => {
143
143
-
iMouse.clickX = event.offsetX
144
144
-
iMouse.clickY = canvas.height - event.offsetY
138
138
+
imouse.clickX = event.offsetX
139
139
+
imouse.clickY = canvas.height - event.offsetY
145
140
})
146
141
147
142
canvas.addEventListener('mouseup', () => {
148
148
-
iMouse.clickX = 0
149
149
-
iMouse.clickY = 0
143
143
+
imouse.clickX = 0
144
144
+
imouse.clickY = 0
150
145
})
151
146
}
152
147
153
153
-
var createTexture = () => {
148
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
174
-
var createFrameBuffer = (texture) => {
169
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
183
-
var compileProgram = (key) => {
178
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
189
-
if (vertexShaders[key]) {
190
190
-
gl.deleteShader(vertexShaders[key])
191
191
-
vertexShaders[key] = null
184
184
+
if (vertex_shaders[key]) {
185
185
+
gl.deleteShader(vertex_shaders[key])
186
186
+
vertex_shaders[key] = null
192
187
}
193
193
-
if (fragmentShaders[key]) {
194
194
-
gl.deleteShader(fragmentShaders[key])
195
195
-
fragmentShaders[key] = null
188
188
+
if (fragment_shaders[key]) {
189
189
+
gl.deleteShader(fragment_shaders[key])
190
190
+
fragment_shaders[key] = null
196
191
}
197
192
198
193
var vert = gl.createShader(gl.VERTEX_SHADER)
199
199
-
gl.shaderSource(vert, basicVertexShader)
194
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
208
-
var fragSource = hdr + common + sourcecode[key]
203
203
+
var frag_source = hdr + common + sourcecode[key]
209
204
var frag = gl.createShader(gl.FRAGMENT_SHADER)
210
210
-
gl.shaderSource(frag, fragSource)
205
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
215
-
console.error(fragSource)
210
210
+
console.error(frag_source)
216
211
gl.deleteShader(frag)
217
212
return null
218
213
}
219
214
220
220
-
var newProgram = gl.createProgram()
221
221
-
gl.attachShader(newProgram, vert)
222
222
-
gl.attachShader(newProgram, frag)
223
223
-
gl.linkProgram(newProgram)
215
215
+
var new_program = gl.createProgram()
216
216
+
gl.attachShader(new_program, vert)
217
217
+
gl.attachShader(new_program, frag)
218
218
+
gl.linkProgram(new_program)
224
219
225
220
gl.deleteShader(vert)
226
221
gl.deleteShader(frag)
227
222
228
228
-
if (!gl.getProgramParameter(newProgram, gl.LINK_STATUS)) {
229
229
-
console.error('Program initialization failed: ' + gl.getProgramInfoLog(newProgram))
223
223
+
if (!gl.getProgramParameter(new_program, gl.LINK_STATUS)) {
224
224
+
console.error('Program initialization failed: ' + gl.getProgramInfoLog(new_program))
230
225
return null
231
226
}
232
227
233
228
// uniform locations
234
234
-
location[key]['iResolution'] = gl.getUniformLocation(newProgram, 'iResolution')
235
235
-
location[key]['iTime'] = gl.getUniformLocation(newProgram, 'iTime')
236
236
-
location[key]['iTimeDelta'] = gl.getUniformLocation(newProgram, 'iTimeDelta')
237
237
-
location[key]['iFrameRate'] = gl.getUniformLocation(newProgram, 'iFrameRate')
238
238
-
location[key]['iFrame'] = gl.getUniformLocation(newProgram, 'iFrame')
239
239
-
location[key]['iChannelTime'] = gl.getUniformLocation(newProgram, 'iChannelTime[0]')
240
240
-
location[key]['iChannelResolution'] = gl.getUniformLocation(newProgram, 'iChannelResolution[0]')
241
241
-
location[key]['iChannel0'] = gl.getUniformLocation(newProgram, 'iChannel0')
242
242
-
location[key]['iChannel1'] = gl.getUniformLocation(newProgram, 'iChannel1')
243
243
-
location[key]['iChannel2'] = gl.getUniformLocation(newProgram, 'iChannel2')
244
244
-
location[key]['iChannel3'] = gl.getUniformLocation(newProgram, 'iChannel3')
245
245
-
location[key]['iMouse'] = gl.getUniformLocation(newProgram, 'iMouse')
246
246
-
location[key]['iDate'] = gl.getUniformLocation(newProgram, 'iDate')
247
247
-
location[key]['iSampleRate'] = gl.getUniformLocation(newProgram, 'iSampleRate')
248
248
-
location[key]['iStream'] = gl.getUniformLocation(newProgram, 'iStream')
249
249
-
location[key]['iVolume'] = gl.getUniformLocation(newProgram, 'iVolume')
250
250
-
location[key]['vertexInPosition'] = gl.getAttribLocation(newProgram, 'vertexInPosition')
229
229
+
location[key]['iResolution'] = gl.getUniformLocation(new_program, 'iResolution')
230
230
+
location[key]['iTime'] = gl.getUniformLocation(new_program, 'iTime')
231
231
+
location[key]['iTimeDelta'] = gl.getUniformLocation(new_program, 'iTimeDelta')
232
232
+
location[key]['iFrameRate'] = gl.getUniformLocation(new_program, 'iFrameRate')
233
233
+
location[key]['iFrame'] = gl.getUniformLocation(new_program, 'iFrame')
234
234
+
location[key]['iChannelTime'] = gl.getUniformLocation(new_program, 'iChannelTime[0]')
235
235
+
location[key]['iChannelResolution'] = gl.getUniformLocation(
236
236
+
new_program,
237
237
+
'iChannelResolution[0]',
238
238
+
)
239
239
+
location[key]['iChannel0'] = gl.getUniformLocation(new_program, 'iChannel0')
240
240
+
location[key]['iChannel1'] = gl.getUniformLocation(new_program, 'iChannel1')
241
241
+
location[key]['iChannel2'] = gl.getUniformLocation(new_program, 'iChannel2')
242
242
+
location[key]['iChannel3'] = gl.getUniformLocation(new_program, 'iChannel3')
243
243
+
location[key]['iMouse'] = gl.getUniformLocation(new_program, 'iMouse')
244
244
+
location[key]['iDate'] = gl.getUniformLocation(new_program, 'iDate')
245
245
+
location[key]['iSampleRate'] = gl.getUniformLocation(new_program, 'iSampleRate')
246
246
+
location[key]['iStream'] = gl.getUniformLocation(new_program, 'iStream')
247
247
+
location[key]['iVolume'] = gl.getUniformLocation(new_program, 'iVolume')
248
248
+
location[key]['vertexInPosition'] = gl.getAttribLocation(new_program, 'vertexInPosition')
251
249
252
252
-
vertexShaders[key] = vert
253
253
-
fragmentShaders[key] = frag
254
254
-
return newProgram
250
250
+
vertex_shaders[key] = vert
251
251
+
fragment_shaders[key] = frag
252
252
+
return new_program
255
253
}
256
254
257
255
var repeat = (times, arr) => {
···
262
260
return result
263
261
}
264
262
265
265
-
var setShader = (config, key) => {
263
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
282
-
program[key] = compileProgram(key)
280
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
290
-
atexture[key] = createTexture()
291
291
-
btexture[key] = createTexture()
292
292
-
aframebuf[key] = createFrameBuffer(atexture[key])
293
293
-
bframebuf[key] = createFrameBuffer(btexture[key])
288
288
+
atexture[key] = create_texture()
289
289
+
btexture[key] = create_texture()
290
290
+
aframebuf[key] = create_frame_buffer(atexture[key])
291
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
311
-
var now = isPlaying ? Date.now() : prevDrawTime
309
309
+
var now = is_playing ? Date.now() : prev_draw_time
312
310
var date = new Date(now)
313
311
314
312
// first draw?
315
315
-
if (firstDrawTime == 0) {
316
316
-
firstDrawTime = now
313
313
+
if (first_draw_time == 0) {
314
314
+
first_draw_time = now
317
315
}
318
316
319
317
// call callback
320
320
-
if (onDrawCallback) {
321
321
-
onDrawCallback()
318
318
+
if (on_draw_callback) {
319
319
+
on_draw_callback()
322
320
}
323
321
324
322
// time difference between frames in seconds
325
325
-
var iTimeDelta = (now - prevDrawTime) * 0.001
323
323
+
var itime_delta = (now - prev_draw_time) * 0.001
326
324
327
325
// time in seconds
328
328
-
var iTime = (now - firstDrawTime) * 0.001
329
329
-
var iDate = [date.getFullYear(), date.getMonth(), date.getDate(), date.getTime() * 0.001]
326
326
+
var itime = (now - first_draw_time) * 0.001
327
327
+
var idate = [date.getFullYear(), date.getMonth(), date.getDate(), date.getTime() * 0.001]
330
328
331
329
// channel uniforms
332
332
-
var iChannelTimes = new Float32Array(repeat(4, [iTime]))
333
333
-
var iChannelResolutions = new Float32Array(repeat(4, [gl.canvas.width, gl.canvas.height, 0]))
330
330
+
var ichannel_times = new Float32Array(repeat(4, [itime]))
331
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
360
-
gl.uniform1f(location[key]['iTime'], iTime)
361
361
-
gl.uniform1f(location[key]['iTimeDelta'], iTimeDelta)
358
358
+
gl.uniform1f(location[key]['iTime'], itime)
359
359
+
gl.uniform1f(location[key]['iTimeDelta'], itime_delta)
362
360
gl.uniform1f(location[key]['iFrameRate'], 60)
363
363
-
gl.uniform1i(location[key]['iFrame'], iFrame)
364
364
-
gl.uniform1fv(location[key]['iChannelTime'], iChannelTimes)
365
365
-
gl.uniform3fv(location[key]['iChannelResolution'], iChannelResolutions)
361
361
+
gl.uniform1i(location[key]['iFrame'], iframe)
362
362
+
gl.uniform1fv(location[key]['iChannelTime'], ichannel_times)
363
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
370
-
gl.uniform4f(location[key]['iMouse'], iMouse.x, iMouse.y, iMouse.clickX, iMouse.clickY)
371
371
-
gl.uniform4f(location[key]['iDate'], iDate[0], iDate[1], iDate[2], iDate[3])
368
368
+
gl.uniform4f(location[key]['iMouse'], imouse.x, imouse.y, imouse.clickX, imouse.clickY)
369
369
+
gl.uniform4f(location[key]['iDate'], idate[0], idate[1], idate[2], idate[3])
372
370
gl.uniform1f(location[key]['iSampleRate'], 44100)
373
373
-
gl.uniform1f(location[key]['iStream'], iStream)
374
374
-
gl.uniform1f(location[key]['iVolume'], iVolume)
371
371
+
gl.uniform1f(location[key]['iStream'], istream)
372
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
380
-
gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer)
378
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
392
-
prevDrawTime = now
390
390
+
prev_draw_time = now
393
391
394
392
// frame counter
395
395
-
iFrame++
393
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
402
-
if (isPlaying) {
400
400
+
if (is_playing) {
403
401
draw()
404
402
raf(animate)
405
403
}
406
404
}
407
405
408
408
-
this.setCommon = (source) => {
406
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
418
-
program[key] = compileProgram(key)
416
416
+
program[key] = compile_program(key)
419
417
}
420
418
})
421
419
}
422
420
423
423
-
this.setBufferA = (config) => {
424
424
-
setShader(config, 'A')
421
421
+
this.set_buffer_a = (config) => {
422
422
+
set_shader(config, 'A')
425
423
}
426
424
427
427
-
this.setBufferB = (config) => {
428
428
-
setShader(config, 'B')
425
425
+
this.set_buffer_b = (config) => {
426
426
+
set_shader(config, 'B')
429
427
}
430
428
431
431
-
this.setBufferC = (config) => {
432
432
-
setShader(config, 'C')
429
429
+
this.set_buffer_c = (config) => {
430
430
+
set_shader(config, 'C')
433
431
}
434
432
435
435
-
this.setBufferD = (config) => {
436
436
-
setShader(config, 'D')
433
433
+
this.set_buffer_d = (config) => {
434
434
+
set_shader(config, 'D')
437
435
}
438
436
439
439
-
this.setImage = (config) => {
440
440
-
setShader(config, 'Image')
437
437
+
this.set_image = (config) => {
438
438
+
set_shader(config, 'Image')
441
439
}
442
440
443
443
-
this.setOnDraw = (callback) => {
444
444
-
onDrawCallback = callback
441
441
+
this.set_on_draw = (callback) => {
442
442
+
on_draw_callback = callback
445
443
}
446
444
447
447
-
this.setStream = (value) => {
448
448
-
iStream = value
445
445
+
this.set_stream = (value) => {
446
446
+
istream = value
449
447
}
450
448
451
451
-
this.setVolume = (value) => {
452
452
-
iVolume = value
449
449
+
this.set_volume = (value) => {
450
450
+
ivolume = value
453
451
}
454
452
455
455
-
this.addTexture = (texture, key) => {
453
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
478
-
return (prevDrawTime - firstDrawTime) * 0.001
476
476
+
return (prev_draw_time - first_draw_time) * 0.001
479
477
}
480
478
481
481
-
this.isPlaying = () => isPlaying
479
479
+
this.is_playing = () => is_playing
482
480
483
481
this.reset = () => {
484
482
var now = new Date()
485
485
-
firstDrawTime = now
486
486
-
prevDrawTime = now
487
487
-
iFrame = 0
483
483
+
first_draw_time = now
484
484
+
prev_draw_time = now
485
485
+
iframe = 0
488
486
draw()
489
487
}
490
488
491
489
this.pause = () => {
492
492
-
isPlaying = false
490
490
+
is_playing = false
493
491
}
494
492
495
493
this.play = () => {
496
496
-
if (!isPlaying) {
497
497
-
isPlaying = true
494
494
+
if (!is_playing) {
495
495
+
is_playing = true
498
496
var now = Date.now()
499
499
-
var elapsed = prevDrawTime - firstDrawTime
500
500
-
firstDrawTime = now - elapsed
501
501
-
prevDrawTime = now
497
497
+
var elapsed = prev_draw_time - first_draw_time
498
498
+
first_draw_time = now - elapsed
499
499
+
prev_draw_time = now
502
500
animate()
503
501
}
504
502
}
505
503
506
506
-
var recreateTextures = () => {
504
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
516
-
atexture[key] = createTexture()
517
517
-
btexture[key] = createTexture()
518
518
-
aframebuf[key] = createFrameBuffer(atexture[key])
519
519
-
bframebuf[key] = createFrameBuffer(btexture[key])
514
514
+
atexture[key] = create_texture()
515
515
+
btexture[key] = create_texture()
516
516
+
aframebuf[key] = create_frame_buffer(atexture[key])
517
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
530
-
recreateTextures()
528
528
+
recreate_textures()
531
529
532
530
// Reset timing to avoid glitches
533
531
var now = Date.now()
534
534
-
var elapsed = prevDrawTime - firstDrawTime
535
535
-
firstDrawTime = now - elapsed
536
536
-
prevDrawTime = now
532
532
+
var elapsed = prev_draw_time - first_draw_time
533
533
+
first_draw_time = now - elapsed
534
534
+
prev_draw_time = now
537
535
538
536
// Force a redraw
539
539
-
if (!isPlaying) {
537
537
+
if (!is_playing) {
540
538
draw()
541
539
}
542
540
}
543
541
544
542
this.destroy = () => {
545
543
// Stop animation loop
546
546
-
isPlaying = false
544
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
554
-
if (vertexShaders[key]) {
555
555
-
gl.deleteShader(vertexShaders[key])
556
556
-
vertexShaders[key] = null
552
552
+
if (vertex_shaders[key]) {
553
553
+
gl.deleteShader(vertex_shaders[key])
554
554
+
vertex_shaders[key] = null
557
555
}
558
558
-
if (fragmentShaders[key]) {
559
559
-
gl.deleteShader(fragmentShaders[key])
560
560
-
fragmentShaders[key] = null
556
556
+
if (fragment_shaders[key]) {
557
557
+
gl.deleteShader(fragment_shaders[key])
558
558
+
fragment_shaders[key] = null
561
559
}
562
560
})
563
561
···
582
580
})
583
581
584
582
// Delete quad buffer
585
585
-
if (quadBuffer) {
586
586
-
gl.deleteBuffer(quadBuffer)
587
587
-
quadBuffer = null
583
583
+
if (quad_buffer) {
584
584
+
gl.deleteBuffer(quad_buffer)
585
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
595
-
const loseContext = gl.getExtension('WEBGL_lose_context')
596
596
-
if (loseContext) {
597
597
-
loseContext.loseContext()
593
593
+
const lose_context = gl.getExtension('WEBGL_lose_context')
594
594
+
if (lose_context) {
595
595
+
lose_context.loseContext()
598
596
}
599
597
600
598
// Clear callback
601
601
-
onDrawCallback = null
599
599
+
on_draw_callback = null
602
600
603
601
// Nullify gl reference
604
602
gl = null
···
1
1
<script lang="ts">
2
2
import { start_visualizer } from './visualizer'
3
3
import { ShaderToyLite } from './ShaderToyLite.js'
4
4
-
import { onDestroy, onMount, untrack } from 'svelte'
4
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
109
-
toy.setCommon('')
110
110
-
toy.setImage({ source: imageShader, iChannel0: 'A' })
109
109
+
toy.set_common('')
110
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
139
-
main_vis.toy?.setStream(info.stream)
140
140
-
main_vis.toy?.setVolume(info.volume)
139
139
+
main_vis.toy?.set_stream(info.stream)
140
140
+
main_vis.toy?.set_volume(info.volume)
141
141
// Also update transition toy if it exists
142
142
-
next_vis.toy?.setStream(info.stream)
143
143
-
next_vis.toy?.setVolume(info.volume)
142
142
+
next_vis.toy?.set_stream(info.stream)
143
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
171
-
next_vis.toy.setBufferA({ source: shaders[newShaderIndex].shader })
171
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
300
-
toy.setBufferA({ source: shaders[0].shader })
300
300
+
toy.set_buffer_a({ source: shaders[0].shader })
301
301
toy.play()
302
302
vis.toy = toy
303
303
}