made synthwave pixel shader automatically resize

script.js

@@ -5,6 +5,7 @@ function loadingScreenSynthwave() {
   addStars()
 
   setLoadingProgress("Starting synthwave animation...")
+  defShaderMaterial()
   preAnimateSynthwave(25)
   animateSynthwave(0)
 }

synthwaveEffect.js

@@ -18,7 +18,21 @@ const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.inner
   type: THREE.UNSIGNED_BYTE
 })
 
-const shaderMaterial = new THREE.ShaderMaterial({
+let shaderMaterial
+let shaderPass
+
+
+function defShaderMaterial() {
+  shaderMaterial = makeShaderMaterial()
+
+  shaderPass = new THREE.ShaderPass(shaderMaterial)
+  composer.addPass(shaderPass)
+  shaderPass.material.uniforms.tDiffuse.value = renderTarget.texture
+}
+
+
+function makeShaderMaterial() {
+  return new THREE.ShaderMaterial({
     vertexShader: `
       varying vec2 vUv;
 
@@ -35,7 +49,6 @@ const shaderMaterial = new THREE.ShaderMaterial({
       uniform sampler2D tDiffuse;
       uniform float pxDensity;
       uniform vec2 resolution;
-    uniform float aspectRatio;
 
       float brightness(vec3 c) {
         return (c.r + c.g + c.b) / 3.0;
@@ -45,7 +58,7 @@ const shaderMaterial = new THREE.ShaderMaterial({
         vec2 uv = vUv;
 
         vec2 screenPxCount = vec2(resolution.x / pxDensity, resolution.y / pxDensity);
-      screenPxCount = vec2(256.0, 164.0);
+        //screenPxCount = vec2(256.0, 164.0);
         vec2 p = floor(uv * screenPxCount) / screenPxCount;
 
         vec4 color = texture2D(tDiffuse, p);
@@ -72,15 +85,17 @@ const shaderMaterial = new THREE.ShaderMaterial({
       centerColor: { value: new THREE.Color(0x323232) },
       tDiffuse: { value: null },
       pxDensity: { value: pxDensity },
-    resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
-    aspectRatio: { value: camera.aspect }
+      resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
     }
-})
+  })
+}
 
-const shaderPass = new THREE.ShaderPass(shaderMaterial)
-composer.addPass(shaderPass)
 
-shaderPass.material.uniforms.tDiffuse.value = renderTarget.texture
+function updateShaderMatPxDensity() {
+  shaderMaterial.uniforms.resolution.value = new THREE.Vector2(window.innerWidth, window.innerHeight)
+  shaderMaterial.uniforms.pxDensity.value = pxDensity
+}
+
 
 // TODO: add pixelation shader
 
@@ -400,4 +415,5 @@ function onResizeSynthwave() {
   composer.setSize(window.innerWidth, window.innerHeight)
   camera.aspect = window.innerWidth / window.innerHeight
   camera.updateProjectionMatrix()
+  if (shaderMaterial) { updateShaderMatPxDensity() }
 }