fix: speed up shader by converting vector into scalar operations

1 files changed, 64 insertions, 57 deletions

diff --git a/main.js b/main.js
index 31043c7..09f3f13 100644
--- a/main.js
+++ b/main.js
@@ -93,47 +93,68 @@ function mix(vec_x, vec_y, scalar) {
   return add(mul(vec_x, 1 - scalar), mul(vec_y, scalar));
 }
 
+function len_add_mul(vev_a, vec_b, scalar) {
+  
+}
+
 // https://www.shadertoy.com/view/ldSXWK
-function lensflare(uv, pos) {
+function lensflare(u, v, pos_x, pos_y) {
   const intensity = 1.5;
-  // const main = add(uv, mul(pos, -1));
-  const uvd = mul(uv, length(uv));
-
-  // let dist = length(main); dist = Math.pow(dist, .1);
-
-  // const f1 = max(0.01-Math.pow(length(add(uv,mul(pos,1.2))),1.9),.0)*7.0;
-
-  const f2 = Math.max(1.0 / (1.0 + 32.0 * Math.pow(length(add(uvd, mul(pos, 0.8))), 2.0)), .0) * 0.1;
-  const f22 = Math.max(1.0 / (1.0 + 32.0 * Math.pow(length(add(uvd, mul(pos, 0.85))), 2.0)), .0) * 0.08;
-  const f23 = Math.max(1.0 / (1.0 + 32.0 * Math.pow(length(add(uvd, mul(pos, 0.9))), 2.0)), .0) * 0.06;
-
-  let uvx = mix(uv, uvd, -0.5);
-
-  const f4 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, 0.4))), 2.4), .0) * 6.0;
-  const f42 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, 0.45))), 2.4), .0) * 5.0;
-  const f43 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, 0.5))), 2.4), .0) * 3.0;
-
-  uvx = mix(uv, uvd, -.4);
-
-  const f5 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, 0.2))), 5.5), .0) * 2.0;
-  const f52 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, 0.4))), 5.5), .0) * 2.0;
-  const f53 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, 0.6))), 5.5), .0) * 2.0;
-
-  uvx = mix(uv, uvd, -0.5);
-
-  const f6 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, -0.3))), 1.6), .0) * 6.0;
-  const f62 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, -0.325))), 1.6), .0) * 3.0;
-  const f63 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, -0.35))), 1.6), .0) * 5.0;
-
-  let c = [
-    f2 + f4 + f5 + f6,
-    f22 + f42 + f52 + f62,
-    f23 + f43 + f53 + f63
+  const uv_len = Math.sqrt(u * u + v * v);
+  const uvd_x = u * uv_len;
+  const uvd_y = v * uv_len;
+  const uvd_len = Math.sqrt(uvd_x * uvd_x + uvd_y * uvd_y);
+
+  const uvd_pos_x = uvd_x + pos_x;
+  const uvd_pos_y = uvd_y + pos_y;
+  let temp = (uvd_pos_x * uvd_pos_x + uvd_pos_y * uvd_pos_y) * .8 * .8
+  const f2 = Math.max(1.0 / (1.0 + 32.0 * (temp)), .0) * 0.1;
+  temp = (uvd_pos_x * uvd_pos_x + uvd_pos_y * uvd_pos_y) * .85 * .85
+  const f22 = Math.max(1.0 / (1.0 + 32.0 * (temp)), .0) * 0.08;
+  temp = (uvd_pos_x * uvd_pos_x + uvd_pos_y * uvd_pos_y) * .9 * .9
+  const f23 = Math.max(1.0 / (1.0 + 32.0 * (temp)), .0) * 0.06;
+
+  let uvx_x = u * (1 + 0.5) + uvd_x * 0.5;
+  let uvx_y = v * (1 + 0.5) + uvd_y * 0.5;
+  let uvx_pos_x = uvx_x + pos_x;
+  let uvx_pos_y = uvx_y + pos_y;
+
+  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .4 * .4
+  const f4 = Math.max(0.01 - Math.pow((temp), 1.2), .0) * 6.0;
+  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .45 * .45
+  const f42 = Math.max(0.01 - Math.pow((temp), 1.2), .0) * 5.0;
+  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .5 * .5
+  const f43 = Math.max(0.01 - Math.pow((temp), 1.2), .0) * 3.0;
+
+  uvx_x = u * (1 + 0.4) + uvd_x * 0.4;
+  uvx_y = v * (1 + 0.4) + uvd_y * 0.4;
+  uvx_pos_x = uvx_x + pos_x;
+  uvx_pos_y = uvx_y + pos_y;
+
+  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .2 * .2
+  const f5 = Math.max(0.01 - Math.pow((temp), 2.475), .0) * 2.0;
+  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .4 * .4
+  const f52 = Math.max(0.01 - Math.pow((temp), 2.475), .0) * 2.0;
+  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .6 * .6
+  const f53 = Math.max(0.01 - Math.pow((temp), 2.75), .0) * 2.0;
+
+  uvx_x = u * (1 + 0.5) + uvd_x * 0.5;
+  uvx_y = v * (1 + 0.5) + uvd_y * 0.5;
+  uvx_pos_x = uvx_x - pos_x;
+  uvx_pos_y = uvx_y - pos_y;
+
+  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .3 * .3
+  const f6 = Math.max(0.01 - Math.pow(temp, 0.8), .0) * 6.0;
+  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .325 * .325
+  const f62 = Math.max(0.01 - Math.pow(temp, 0.8), .0) * 3.0;
+  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .35 * .35
+  const f63 = Math.max(0.01 - Math.pow(temp, 0.8), .0) * 5.0;
+
+  return [
+    ((f2 + f4 + f5 + f6) * 1.3 - uvd_len * .05) * intensity,
+    ((f22 + f42 + f52 + f62) * 1.3 - uvd_len * .05) * intensity,
+    ((f23 + f43 + f53 + f63) * 1.3 - uvd_len * .05) * intensity
   ];
-
-  c = mul(c, 1.3).map(e => e - length(uvd) * .05);
-
-  return mul(c, intensity);
 }
 
 function draw(viewport_scale) {
@@ -154,16 +175,6 @@ function draw(viewport_scale) {
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
   ctx.filter = '';
 
-  // for (let y = 0; y < canvas.height; y++) {
-  //   for (let x = 0; x < canvas.width; x++) {
-  //     let uv = [x / canvas.width, y / canvas.height];
-  //     // uv[0] *= canvas.width / canvas.height;
-  //     // let color = lensflare(uv, [.5,.5]);
-  //     ctx.fillStyle = `rgb(${[...uv,0].map(e => Math.floor(e * 255)).join()})`;
-  //     ctx.fillRect(x,y,1,1);
-  //   }
-  // }
-
   var imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height);
   const pixel_count = imgdata.data.length / 4;
   for (let i = 0; i < pixel_count; i++) {
@@ -172,15 +183,11 @@ function draw(viewport_scale) {
     let u = (x / canvas.width - .5) * canvas.width / canvas.height;
     let v = y / canvas.height - .5;
 
-    // imgdata.data[4*i] = u * 255;
-    // imgdata.data[4*i+1] = v * 255;
-    // imgdata.data[4*i+2] = 0
-    // imgdata.data[4*i+3] = 255; 
-
-    let color = lensflare([u, v], [0.3, 0.3]);
-    imgdata.data[4 * i] = color[0] * 255;
-    imgdata.data[4 * i + 1] = color[1] * 255;
-    imgdata.data[4 * i + 2] = color[2] * 255;
+    let color = lensflare(u, v, 0.3, 0.3);
+    const a = (color[0] + color[1] + color[2]) / 3;
+    imgdata.data[4 * i] += 1.2 * color[0] * 255;
+    imgdata.data[4 * i + 1] += 1.5 * color[1] * 255;
+    imgdata.data[4 * i + 2] += 1.3 * color[2] * 255;
     imgdata.data[4 * i + 3] = 255;
   }
   ctx.putImageData(imgdata, 0, 0);