Merge pull request #15 from Triadica/multiple-blend

blend blur multiple times

.github/workflows/upload.yaml

@@ -26,7 +26,7 @@ jobs:
     - name: "prepare modules"
       run: >
         mkdir -p ~/.config/calcit/modules/ && cd ~/.config/calcit/modules/
-        && git clone https://github.com/Quamolit/touch-control.git
+        && git clone https://github.com/Quamolit/touch-control.git --branch 0.0.12
         && git clone https://github.com/mvc-works/pointed-prompt.git
         && git clone https://github.com/Respo/respo.calcit.git
 

README.md

@@ -4,6 +4,8 @@
 
 - Live Demo https://r.tiye.me/Quatrefoil-GL/triadica-space/
 
+parameters: `effects=on/off & dev=release/dev & tab=axis/lamps/...`
+
 ### Object definition
 
 For example:

shaders/branches.frag

@@ -0,0 +1,69 @@
+
+precision mediump float;
+
+varying float v_s;
+varying float v_r;
+varying float v_color_index;
+
+
+float hue2rgb(float f1, float f2, float hue) {
+    if (hue < 0.0)
+        hue += 1.0;
+    else if (hue > 1.0)
+        hue -= 1.0;
+    float res;
+    if ((6.0 * hue) < 1.0)
+        res = f1 + (f2 - f1) * 6.0 * hue;
+    else if ((2.0 * hue) < 1.0)
+        res = f2;
+    else if ((3.0 * hue) < 2.0)
+        res = f1 + (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0;
+    else
+        res = f1;
+    return res;
+}
+
+vec3 hsl2rgb(vec3 hsl) {
+    vec3 rgb;
+
+    if (hsl.y == 0.0) {
+        rgb = vec3(hsl.z); // Luminance
+    } else {
+        float f2;
+
+        if (hsl.z < 0.5)
+            f2 = hsl.z * (1.0 + hsl.y);
+        else
+            f2 = hsl.z + hsl.y - hsl.y * hsl.z;
+
+        float f1 = 2.0 * hsl.z - f2;
+
+        rgb.r = hue2rgb(f1, f2, hsl.x + (1.0/3.0));
+        rgb.g = hue2rgb(f1, f2, hsl.x);
+        rgb.b = hue2rgb(f1, f2, hsl.x - (1.0/3.0));
+    }
+    return rgb;
+}
+
+vec3 hsl2rgb(float h, float s, float l) {
+    return hsl2rgb(vec3(h, s, l));
+}
+
+void main() {
+  // if (v_r > (-0.8 * v_s)) {
+  //   // gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  //   float factor = smoothstep(0.0, 0.4, 1.0- (v_r + v_s)/10.0);
+
+  //   gl_FragColor = vec4(0.6 + factor, 0.6 + factor, 1.0 - factor, 1.0);
+  // // } else if (z_color > -1.0) {
+  // //   gl_FragColor = vec4(0.7, 0.7, 1.0, 1.0);
+  // } else {
+  //   gl_FragColor = vec4(0.8, 0.8, 0.5, 1.0);
+  // }
+
+  // float vv = 1.0/z;
+  // gl_FragColor = vec4(vv, vv, vv, 1.0);
+
+  // gl_FragColor = vec4(1.0, 0.5, 0.5, 1.0);
+  gl_FragColor = vec4(hsl2rgb(0.0, 1.0, 1.0 - v_color_index * 0.06), 1.0);
+}

shaders/branches.vert

@@ -0,0 +1,59 @@
+uniform vec4 u_offsets;
+
+uniform float coneBackScale;
+uniform vec3 lookPoint; // direction in front, transformed into a specific length
+uniform vec3 upwardDirection; // direction up over head, better unit vector
+uniform float viewportRatio;
+uniform vec3 cameraPosition;
+
+attribute vec3 a_position;
+attribute float a_color_index;
+
+varying float v_r;
+varying float v_s;
+varying float v_color_index;
+
+float square(float a) {
+  return a * a;
+}
+
+struct PointResult {
+  vec3 point;
+  float r;
+  float s;
+};
+
+PointResult transform_perspective(vec3 p) {
+  vec3 moved_point = p - cameraPosition;
+  // trying to get right direction at length 1
+  vec3 rightward = cross(upwardDirection, lookPoint) / 600.0;
+
+  float s = coneBackScale;
+
+  float r = dot(moved_point, lookPoint) / square(length(lookPoint));
+
+  if (r < (s * -0.8)) {
+    // make it disappear with depth test since it's probably behind the camera
+    return PointResult(vec3(0.0, 0.0, 10000.), r, s);
+  }
+
+  float screen_scale = (s + 1.0) / (r + s);
+  float y_next = dot(moved_point, upwardDirection) * screen_scale;
+  float x_next = - dot(moved_point, rightward) * screen_scale;
+
+  float z_next = r;
+
+  return PointResult(vec3(x_next, y_next / viewportRatio, z_next), r, s);
+}
+
+void main() {
+  PointResult result = transform_perspective(a_position);
+  vec3 pos_next = result.point;
+
+  v_s = result.s;
+  v_r = result.r;
+  v_color_index = a_color_index;
+
+  gl_Position = vec4(pos_next * 0.001, 1.0);
+  // gl_Position = vec4(a_position/10000.0, 1.0);
+}

shaders/drag-point.frag

@@ -0,0 +1,26 @@
+
+precision mediump float;
+
+
+varying float v_s;
+varying float v_r;
+varying float v_color_index;
+
+void main() {
+  // if (v_r > (-0.8 * v_s)) {
+    // gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    // float factor = smoothstep(0.0, 0.4, 1.0- (v_r + v_s)/10.0);
+
+    // gl_FragColor = vec4(0.6 + factor, 0.6 + factor, 1.0 - factor, 1.0);
+  // } else if (z_color > -1.0) {
+  //   gl_FragColor = vec4(0.7, 0.7, 1.0, 1.0);
+
+  if (v_color_index > 0.5) {
+    gl_FragColor = vec4(1.0, 1.0, 0.2, 1.0);
+  } else {
+    gl_FragColor = vec4(0.6, 0.2, 1.0, 1.0);
+  }
+
+  // float vv = 1.0/z;
+  // gl_FragColor = vec4(vv, vv, vv, 1.0);
+}

shaders/drag-point.vert

@@ -0,0 +1,59 @@
+uniform vec4 u_offsets;
+
+uniform float coneBackScale;
+uniform vec3 lookPoint; // direction in front, transformed into a specific length
+uniform vec3 upwardDirection; // direction up over head, better unit vector
+uniform float viewportRatio;
+uniform vec3 cameraPosition;
+
+attribute vec3 a_position;
+attribute float a_color_index;
+
+varying float v_r;
+varying float v_s;
+varying float v_color_index;
+
+float square(float a) {
+  return a * a;
+}
+
+struct PointResult {
+  vec3 point;
+  float r;
+  float s;
+};
+
+PointResult transform_perspective(vec3 p) {
+  vec3 moved_point = p - cameraPosition;
+  // trying to get right direction at length 1
+  vec3 rightward = cross(upwardDirection, lookPoint) / 600.0;
+
+  float s = coneBackScale;
+
+  float r = dot(moved_point, lookPoint) / square(length(lookPoint));
+
+  if (r < (s * -0.8)) {
+    // make it disappear with depth test since it's probably behind the camera
+    return PointResult(vec3(0.0, 0.0, 10000.), r, s);
+  }
+
+  float screen_scale = (s + 1.0) / (r + s);
+  float y_next = dot(moved_point, upwardDirection) * screen_scale;
+  float x_next = - dot(moved_point, rightward) * screen_scale;
+
+  float z_next = r;
+
+  return PointResult(vec3(x_next, y_next / viewportRatio, z_next), r, s);
+}
+
+void main() {
+  PointResult result = transform_perspective(a_position);
+  vec3 pos_next = result.point;
+
+  v_s = result.s;
+  v_r = result.r;
+  v_color_index = a_color_index;
+
+  gl_Position = vec4(pos_next * 0.001, 1.0);
+  // gl_Position = vec4(a_position/10000.0, 1.0);
+}

shaders/effect-mix.frag

@@ -28,25 +28,16 @@ void main() {
   // blur_y on effect_x_tex, and apply to original picture
   vec4 draw_color = texture2D(draw_tex, v_texcoord);
 
-  vec4 whole_glow = vec4(0.0, 0.0, 0.0, 1.0);
-  int count = 0;
-
-  for (int i = -repeat; i <= repeat; i++) {
-    vec4 blur_x_color = texture2D(effect_x_tex, v_texcoord + vec2(0.0, i) / 400.0);
-    vec4 glow = blur_x_color * normal_distribution(0.1*float(i), 0.8);
-    whole_glow += blur_x_color;
-  }
-  whole_glow /= 2.0 * float(repeat) + 1.0;
   // gl_FragColor = whole_glow;
 
   // if (max_glow_value > color_strength(draw_color)) {
   //   gl_FragColor += max_glow;
   // }
 
-  // vec4 blur_x_color_try = texture2D(effect_x_tex, v_texcoord);
-  // gl_FragColor = blur_x_color_try;
+  vec4 blurred = texture2D(effect_x_tex, v_texcoord);
+  // gl_FragColor = blurred;
   // gl_FragColor = draw_color;
-  gl_FragColor = draw_color * 0.7 + whole_glow * 0.3;
+  gl_FragColor = draw_color * 0.7 + blurred * 0.4;
   // gl_FragColor = whole_glow;
 
   // gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);

shaders/effect-x.frag

@@ -1,9 +1,9 @@
-
 precision mediump float;
 
 varying vec2 v_texcoord;
 
 uniform sampler2D tex1;
+uniform float direction; // 1 for x, 0 for y
 
 // float color_strength(vec4 color) {
 //   return dot(color.rgb, vec3(0.2126, 0.7152, 0.0722));
@@ -21,7 +21,37 @@ float normal_distribution(float d, float sigma) {
   return exp(-0.5 * square(d / sigma)) / (sigma * SQRT_2PI);
 }
 
-const int repeat = 6;
+// fake my own blur
+float fake_distribute(int i) {
+  if (i < 0) {
+    i = -i;
+  }
+  if (i == 0) {
+    return 0.5;
+  } else if (i == 1) {
+    return 0.20854;
+  } else if (i == 2) {
+    return 0.10866;
+  } else if (i == 3) {
+    return 0.05681;
+  } else if (i == 4) {
+    return 0.01275;
+  } else if (i == 5) {
+    return 0.00621;
+  } else if (i == 6) {
+    return 0.008457;
+  } else if (i == 7) {
+    return 0.005208;
+  } else if (i == 8) {
+    return 0.00304;
+  } else if (i == 9) {
+    return 0.001679;
+  } else {
+    return 0.00077;
+  }
+}
+
+const int repeat = 5;
 
 void main() {
   // blur pixels at x direction
@@ -30,11 +60,17 @@ void main() {
   vec4 whole_glow = vec4(0.0, 0.0, 0.0, 1.0);
 
   for (int i = -repeat; i <= repeat; i++) {
-    vec4 color2 = texture2D(tex1, v_texcoord + vec2(i, 0.0) / 400.0);
-    vec4 out_glow = color2 * normal_distribution(0.2*float(i), 0.8);
-    whole_glow += out_glow;
+    vec4 color2 = vec4(0.0, 0.0, 0.0, 1.0);
+    if (direction < 0.5) {
+      color2 = texture2D(tex1, v_texcoord + vec2(0.0, i) / 800.0);
+    } else {
+      color2 = texture2D(tex1, v_texcoord + vec2(i, 0.0) / 800.0);
+    }
+    // float ratio = normal_distribution(0.5*float(i), 4.0);
+    float ratio = fake_distribute(i);
+    whole_glow += color2 * ratio;
   }
-  // whole_glow /= 2.0 * float(repeat) + 1.0;
+  // whole_glow /= 3.0;
   gl_FragColor = whole_glow;
 
   // gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);