Merge pull request #12801 from gam0022/improve-raymarching-example-v2

Improve raymarching example v2

examples/webgl_raymarching_reflect.html

@@ -202,10 +202,13 @@
 			void main(void) {
 
 				// screen position
-				vec2 screenPos = ( gl_FragCoord.xy * 2.0 - resolution ) / min( resolution.x, resolution.y );
+				vec2 screenPos = ( gl_FragCoord.xy * 2.0 - resolution ) / resolution;
 
-				// convert ray direction from screen coordinate to world coordinate
-				vec3 ray = (cameraWorldMatrix * cameraProjectionMatrixInverse * vec4( screenPos.xy, 1.0, 1.0 )).xyz;
+				// ray direction in normalized device coordinate
+				vec4 ndcRay = vec4( screenPos.xy, 1.0, 1.0 );
+
+				// convert ray direction from normalized device coordinate to world coordinate
+				vec3 ray = ( cameraWorldMatrix * cameraProjectionMatrixInverse * ndcRay ).xyz;
 				ray = normalize( ray );
 
 				// camera position
@@ -342,8 +345,6 @@
 
 				if ( camera.position.y < 0 ) camera.position.y = 0;
 
-				material.uniforms.resolution.value.set( canvas.width, canvas.height );
-				material.uniforms.cameraProjectionMatrixInverse.value.getInverse( camera.projectionMatrix );
 
 				renderer.render( scene, camera );
 
@@ -371,6 +372,12 @@
 
 				}
 
+				camera.aspect = canvas.width / canvas.height;
+				camera.updateProjectionMatrix();
+
+				material.uniforms.resolution.value.set( canvas.width, canvas.height );
+				material.uniforms.cameraProjectionMatrixInverse.value.getInverse( camera.projectionMatrix );
+
 			}
 
 		</script>