BatchedMesh: update example, fix depth conversion & auxiliary buffer (#27228)

* BatchedMesh: bit-cast depth f32 to u32 & fix auxiliary array

Signed-off-by: Guilherme Avila <[email protected]>

* webgl_mesh_batch: make custom sort self-contained

Signed-off-by: Guilherme Avila <[email protected]>

* webgl_mesh_batch: remove global auxiliary buffer

Signed-off-by: Guilherme Avila <[email protected]>

* clean-up / lint

Signed-off-by: Guilherme Avila <[email protected]>

---------

Signed-off-by: Guilherme Avila <[email protected]>

Author: sciecode

examples/jsm/utils/SortUtils.js

@@ -5,20 +5,16 @@ const POWER = 3;
 const BIT_MAX = 32;
 const BIN_BITS = 1 << POWER;
 const BIN_SIZE = 1 << BIN_BITS;
+const BIN_MAX = BIN_SIZE - 1;
 const ITERATIONS = BIT_MAX / BIN_BITS;
 
 const bins = new Array( ITERATIONS );
-const caches = new Array( ITERATIONS );
-const bins_buffer = new ArrayBuffer( 2 * ITERATIONS * BIN_SIZE * 4 );
+const bins_buffer = new ArrayBuffer( ( ITERATIONS + 1 ) * BIN_SIZE * 4 );
 
 let c = 0;
-for ( let i = 0; i < ITERATIONS; i ++ ) {
-
+for ( let i = 0; i < ( ITERATIONS + 1 ); i ++ ) {
 	bins[ i ] = new Uint32Array( bins_buffer, c, BIN_SIZE );
 	c += BIN_SIZE * 4;
-	caches[ i ] = new Uint32Array( bins_buffer, c, BIN_SIZE );
-	c += BIN_SIZE * 4;
-
 }
 
 const defaultGet = ( el ) => el;
@@ -48,7 +44,7 @@ export const radixSort = ( arr, opt ) => {
 		recurse = ( cache, depth, start ) => {
 
 			let prev = 0;
-			for ( let j = BIN_SIZE - 1; j >= 0; j -- ) {
+			for ( let j = BIN_MAX; j >= 0; j -- ) {
 
 				const cur = cache[ j ], diff = cur - prev;
 				if ( diff != 0 ) {
@@ -136,20 +132,20 @@ export const radixSort = ( arr, opt ) => {
 		const shift = ( 3 - depth ) << POWER;
 		const end = start + len;
 
-		const bin = bins[ depth ];
-		const cache = caches[ depth ];
+		const cache = bins[ depth ];
+		const bin = bins[ depth + 1 ];
 
 		bin.fill( 0 );
 
 		for ( let j = start; j < end; j ++ )
-			bin[ ( get( a[ j ] ) >> shift ) & ( BIN_SIZE - 1 ) ] ++;
+			bin[ ( get( a[ j ] ) >> shift ) & BIN_MAX ] ++;
 
 		accumulate( bin );
 
 		cache.set( bin );
 
 		for ( let j = end - 1; j >= start; j -- )
-			b[ start + -- bin[ ( get( a[ j ] ) >> shift ) & ( BIN_SIZE - 1 ) ] ] = a[ j ];
+			b[ start + -- bin[ ( get( a[ j ] ) >> shift ) & BIN_MAX ] ] = a[ j ];
 
 		if ( depth == ITERATIONS - 1 ) return;
 

examples/webgl_mesh_batch.html

@@ -287,18 +287,17 @@
 			// initialize options
 			this._options = this._options || {
 				get: el => el.z,
-				aux: new Array( list.length ),
+				aux: new Array( this._maxGeometryCount )
 			};
 
 			const options = this._options;
 			options.reversed = this.material.transparent;
 
 			// convert depth to unsigned 32 bit range
-			const den = camera.far;
+			const factor = ( 2**32 - 1 ) / camera.far; // UINT32_MAX / max_depth
 			for ( let i = 0, l = list.length; i < l; i ++ ) {
 
-				const el = list[ i ];
-				el.z = ( 1 << 30 ) * ( el.z / den );
+				list[i].z *= factor;
 
 			}