feature: improve pixel sorter

src/entities/PixelSorter.ts

@@ -96,6 +96,7 @@ export class PixelSorter extends Entity {
     // -- sort -------------------------------------------------------------------------------------
     let dir = 1.0 / 32.0;
     let comp = 1.0 / 32.0;
+    const sortMaterials: Material[] = [];
 
     while ( dir < 1.0 ) {
       const isFirst = dir === 1.0 / 32.0;
@@ -116,6 +117,7 @@ export class PixelSorter extends Entity {
         'sampler1',
         bufferIndex.texture,
       );
+      sortMaterials.push( material );
 
       entityMain.components.push( new Quad( {
         target: isLast ? options.target : this.swapBuffer.i,
@@ -136,10 +138,14 @@ export class PixelSorter extends Entity {
     // -- update uniform ---------------------------------------------------------------------------
     auto( 'PixelSorter/amp', ( { value } ) => {
       indexMaterials.map( ( material ) => {
-        material.addUniform( 'threshold', '1f', value );
+        material.addUniform( 'threshold', '1f', Math.abs( value ) );
       } );
 
-      entityMain.active = 0.001 < value;
+      sortMaterials.map( ( material ) => {
+        material.addUniform( 'reverse', '1i', ( value < 0.0 ) ? 1 : 0 );
+      } );
+
+      entityMain.active = 0.001 < Math.abs( value );
       entityBypass.active = !entityMain.active;
     } );
   }

src/shaders/pixel-sorter-index.frag

@@ -15,6 +15,7 @@ uniform sampler2D sampler0;
 uniform sampler2D sampler1;
 
 vec2 getValue( vec2 uv ) {
+  // distance to the nearest wall, width of its current section, vec2( left, right )
   return ( ( uv.x < 0.0 ) || ( 1.0 < uv.x ) )
     ? vec2( 0.0 )
     : ( mul == 1.0 )
@@ -30,7 +31,11 @@ void main() {
 
   for ( int i = 1; i < 8; i ++ ) {
     vec2 uvc = uv - vec2( i, 0 ) / resolution * mul;
-    vec2 texc = getValue( uvc );
+    float texc = getValue( uvc ).x;
-    fragColor.xy = min( fragColor.xy, texc + mul * float( i ) );
+    fragColor.x = min( fragColor.x, texc + mul * float( i ) );
+
+    uvc = uv + vec2( i, 0 ) / resolution * mul;
+    texc = getValue( uvc ).y;
+    fragColor.y = min( fragColor.y, texc + mul * float( i ) );
   }
 }

src/shaders/pixel-sorter.frag

@@ -10,6 +10,7 @@ in vec2 vUv;
 
 out vec4 fragColor;
 
+uniform bool reverse;
 uniform float dir;
 uniform float comp;
 uniform vec2 resolution;
@@ -20,6 +21,7 @@ float positiveOrHuge( float i ) {
   return 0.0 < i ? i : 1E9;
 }
 
+// not accurate! it's just for aesthetics
 void main() {
   vec2 uv = vUv;
 
@@ -30,11 +32,11 @@ void main() {
     return;
   }
 
-  float index = texIndex.x - 1.0;
+  float index = ( reverse ? texIndex.y : texIndex.x ) - 1.0;
   float width = texIndex.x + texIndex.y - 1.0;
 
-  bool isCompRight = mod( index, 2.0 * comp * width ) < comp * width;
+  bool isCompHigher = mod( index, 2.0 * comp * width ) < comp * width;
-  float offset = floor( ( isCompRight ? comp : -comp ) * width + 0.5 );
+  float offset = floor( ( ( isCompHigher ^^ reverse ) ? comp : -comp ) * width + 0.5 );
 
   vec2 uvc = uv;
   uvc.x += offset / resolution.x;
@@ -49,7 +51,7 @@ void main() {
   float vc = dot( cColor.xyz, RGB );
 
   bool shouldSwap = mod( index / ( 2.0 * dir * width ), 2.0 ) < 1.0;
-  shouldSwap = shouldSwap ^^ isCompRight;
+  shouldSwap = shouldSwap ^^ isCompHigher;
   shouldSwap = shouldSwap ^^ ( vc < vp );
   if ( shouldSwap ) {
     fragColor = cColor;