Improve ray marching in volume rendering examples (#32235)

Author: mrdoob

examples/screenshots/webgl_volume_cloud.jpg

@@ -197,10 +197,7 @@
 
 						bounds.x = max( bounds.x, 0.0 );
 
-						vec3 p = vOrigin + bounds.x * rayDir;
-						vec3 inc = 1.0 / abs( rayDir );
-						float delta = min( inc.x, min( inc.y, inc.z ) );
-						delta /= steps;
+						float stepSize = ( bounds.y - bounds.x ) / steps;
 
 						// Jitter
 
@@ -209,13 +206,16 @@
 						uint seed = uint( gl_FragCoord.x ) * uint( 1973 ) + uint( gl_FragCoord.y ) * uint( 9277 ) + uint( frame ) * uint( 26699 );
 						vec3 size = vec3( textureSize( map, 0 ) );
 						float randNum = randomFloat( seed ) * 2.0 - 1.0;
+						vec3 p = vOrigin + bounds.x * rayDir;
 						p += rayDir * randNum * ( 1.0 / size );
 
 						//
 
 						vec4 ac = vec4( base, 0.0 );
 
-						for ( float t = bounds.x; t < bounds.y; t += delta ) {
+						for ( float i = 0.0; i < steps; i += 1.0 ) {
+
+							float t = bounds.x + i * stepSize;
 
 							float d = sample1( p + 0.5 );
 
@@ -229,7 +229,7 @@
 
 							if ( ac.a >= 0.95 ) break;
 
-							p += rayDir * delta;
+							p += rayDir * stepSize;
 
 						}
 

examples/screenshots/webgl_volume_instancing.jpg

@@ -88,9 +88,6 @@
 
 					uniform sampler3D map;
 
-					uniform float threshold;
-					uniform float steps;
-
 					vec2 hitBox( vec3 orig, vec3 dir ) {
 						const vec3 box_min = vec3( - 0.5 );
 						const vec3 box_max = vec3( 0.5 );
@@ -155,26 +152,25 @@
 
 						bounds.x = max( bounds.x, 0.0 );
 
-						vec3 p = instRayOrigin + bounds.x * instRayDirection;
-						vec3 inc = 1.0 / abs( instRayDirection );
-						float delta = min( inc.x, min( inc.y, inc.z ) );
-						delta /= 50.0;
+						float stepSize = ( bounds.y - bounds.x ) / 100.0;
+
+						vec3 p;
 
 						// march through the volume
-						for ( float t = bounds.x; t < bounds.y; t += delta ) {
+						for ( float i = 0.0; i < 100.0; i += 1.0 ) {
 
+							float t = bounds.x + i * stepSize;
+							p = instRayOrigin + t * instRayDirection;
 							float d = sample1( p + 0.5 );
 
 							if ( d > 0.5 ) {
 
-								color.rgb = p * 2.0; // normal( p + 0.5 ); // * 0.5 + ( p * 1.5 + 0.25 );
+								color.rgb = p * 2.0;
 								color.a = 1.;
 								break;
 
 							}
 
-							p += instRayDirection * delta;
-
 						}
 
 						if ( color.a == 0.0 ) discard;

examples/screenshots/webgl_volume_perlin.jpg

@@ -166,13 +166,12 @@
 
 						bounds.x = max( bounds.x, 0.0 );
 
-						vec3 p = vOrigin + bounds.x * rayDir;
-						vec3 inc = 1.0 / abs( rayDir );
-						float delta = min( inc.x, min( inc.y, inc.z ) );
-						delta /= steps;
+						float stepSize = ( bounds.y - bounds.x ) / steps;
 
-						for ( float t = bounds.x; t < bounds.y; t += delta ) {
+						for ( float i = 0.0; i < steps; i += 1.0 ) {
 
+							float t = bounds.x + i * stepSize;
+							vec3 p = vOrigin + t * rayDir;
 							float d = sample1( p + 0.5 );
 
 							if ( d > threshold ) {
@@ -183,8 +182,6 @@
 
 							}
 
-							p += rayDir * delta;
-
 						}
 
 						if ( color.a == 0.0 ) discard;