diff --git a/assets/workers/ShaderWorker.ts b/assets/workers/ShaderWorker.ts index e2326ff..c0a4967 100644 --- a/assets/workers/ShaderWorker.ts +++ b/assets/workers/ShaderWorker.ts @@ -11,11 +11,14 @@ const shaderOptions = { quality: 6, framerate: 1000 / 60 } const bounds = { left: 0, bottom: 0 } const screen = { width: 0, height: 0, devicePixelRatio: 0 } +const _colorStart = [0, 0, 0] +const _colorEnd = [0, 0, 0] + let fragmentShader = resolveLygia(noise); let canvas: OffscreenCanvas -async function main(canvas: OffscreenCanvas, fragmentShader2: string, _colorStart: [number, number, number], _colorEnd: [number, number, number]) { +async function main(canvas: OffscreenCanvas, fragmentShader2: string) { const gl = canvas.getContext("webgl"); if (!gl) { return; @@ -109,9 +112,7 @@ async function main(canvas: OffscreenCanvas, fragmentShader2: string, _colorStar const aspectRatio = Math.max(screen.width, screen.height) * screen.devicePixelRatio - gl2.uniform2f(offset, bounds.left, -bounds.bottom); - // console.log(canvas.getBoundingClientRect().left * window.devicePixelRatio) gl2.uniform1i(quality, shaderOptions.quality) gl2.uniform2f(resolutionLocation, aspectRatio, aspectRatio); gl2.uniform3f(colorStart, _colorStart[0], _colorStart[1], _colorStart[2]); @@ -122,9 +123,11 @@ async function main(canvas: OffscreenCanvas, fragmentShader2: string, _colorStar 0, // offset 6, // num vertices to process ); + requestAnimationFrame(render) } - self.clearInterval(interval) - interval = self.setInterval(() => requestAnimationFrame(render), shaderOptions.framerate) + // self.clearInterval(interval) + // interval = self.setInterval(() => requestAnimationFrame(render), shaderOptions.framerate) + requestAnimationFrame(render) } self.addEventListener("message", (e) => { @@ -132,25 +135,31 @@ self.addEventListener("message", (e) => { if (data.command == "initShader") { canvas = data.canvas } else if (data.command == "killShader") { + console.log("killShader") self.clearInterval(interval) } else { + console.log(screen.devicePixelRatio) bounds.bottom = data.bounds.bottom bounds.left = data.bounds.left screen.devicePixelRatio = data.screen.devicePixelRatio screen.width = data.screen.width screen.height = data.screen.height + _colorStart[0] = data.colorStart[0] + _colorStart[1] = data.colorStart[1] + _colorStart[2] = data.colorStart[2] + _colorEnd[0] = data.colorEnd[0] + _colorEnd[1] = data.colorEnd[1] + _colorEnd[2] = data.colorEnd[2] if (data.command == "reloadShader") { shaderOptions.quality = data.shaderOptions.quality shaderOptions.framerate = data.shaderOptions.framerate - - reloadShader(data.canvas, data.colorStart, data.colorEnd) + reloadShader() } } }) -async function reloadShader(canvas: OffscreenCanvas, _colorStart: [number, number, number], _colorEnd: [number, number, number]) { +async function reloadShader() { if (!canvas) { return } let fragmentShader2 = fragmentShader.replace("#define FBM_OCTAVES 6", "#define FBM_OCTAVES " + shaderOptions.quality); - self.clearInterval(interval) - main(canvas, fragmentShader2, _colorStart, _colorEnd); + main(canvas, fragmentShader2); } \ No newline at end of file diff --git a/components/AnimatedBackground.vue b/components/AnimatedBackground.vue index a014fd8..3b57ee5 100644 --- a/components/AnimatedBackground.vue +++ b/components/AnimatedBackground.vue @@ -1,6 +1,6 @@