WebGLRenderer: Sort objects in clip space. (#28571)

* fix sorting for objects with positive view z

* Sorting input changed to clip space z

* Fix sorting input clip space calculation

* Actually fix sorting input clip space calculation

* Add Vector4.setFromMatrixPosition

* Add docs for Vector4.setFromMatrixPosition

docs/api/en/math/Vector4.html

@@ -321,6 +321,12 @@
 			and [page:.w w] to the angle.
 		</p>
 
+		<h3>[method:this setFromMatrixPosition]( [param:Matrix4 m] )</h3>
+		<p>
+			Sets this vector to the position elements of the
+			[link:https://en.wikipedia.org/wiki/Transformation_matrix transformation matrix] [page:Matrix4 m].
+		</p>
+
 		<h3>
 			[method:this setComponent]( [param:Integer index], [param:Float value] )
 		</h3>

src/math/Vector4.js

@@ -413,6 +413,19 @@ class Vector4 {
 
 	}
 
+	setFromMatrixPosition( m ) {
+
+		const e = m.elements;
+
+		this.x = e[ 12 ];
+		this.y = e[ 13 ];
+		this.z = e[ 14 ];
+		this.w = e[ 15 ];
+
+		return this;
+
+	}
+
 	min( v ) {
 
 		this.x = Math.min( this.x, v.x );

src/renderers/WebGLRenderer.js

@@ -200,6 +200,8 @@ class WebGLRenderer {
 
 		const _vector3 = new Vector3();
 
+		const _vector4 = new Vector4();
+
 		const _emptyScene = { background: null, fog: null, environment: null, overrideMaterial: null, isScene: true };
 
 		let _renderBackground = false;
@@ -1331,7 +1333,7 @@ class WebGLRenderer {
 
 						if ( sortObjects ) {
 
-							_vector3.setFromMatrixPosition( object.matrixWorld )
+							_vector4.setFromMatrixPosition( object.matrixWorld )
 								.applyMatrix4( _projScreenMatrix );
 
 						}
@@ -1341,7 +1343,7 @@ class WebGLRenderer {
 
 						if ( material.visible ) {
 
-							currentRenderList.push( object, geometry, material, groupOrder, _vector3.z, null );
+							currentRenderList.push( object, geometry, material, groupOrder, _vector4.z, null );
 
 						}
 
@@ -1359,16 +1361,16 @@ class WebGLRenderer {
 							if ( object.boundingSphere !== undefined ) {
 
 								if ( object.boundingSphere === null ) object.computeBoundingSphere();
-								_vector3.copy( object.boundingSphere.center );
+								_vector4.copy( object.boundingSphere.center );
 
 							} else {
 
 								if ( geometry.boundingSphere === null ) geometry.computeBoundingSphere();
-								_vector3.copy( geometry.boundingSphere.center );
+								_vector4.copy( geometry.boundingSphere.center );
 
 							}
 
-							_vector3
+							_vector4
 								.applyMatrix4( object.matrixWorld )
 								.applyMatrix4( _projScreenMatrix );
 
@@ -1385,7 +1387,7 @@ class WebGLRenderer {
 
 								if ( groupMaterial && groupMaterial.visible ) {
 
-									currentRenderList.push( object, geometry, groupMaterial, groupOrder, _vector3.z, group );
+									currentRenderList.push( object, geometry, groupMaterial, groupOrder, _vector4.z, group );
 
 								}
 
@@ -1393,7 +1395,7 @@ class WebGLRenderer {
 
 						} else if ( material.visible ) {
 
-							currentRenderList.push( object, geometry, material, groupOrder, _vector3.z, null );
+							currentRenderList.push( object, geometry, material, groupOrder, _vector4.z, null );
 
 						}
 

test/unit/src/math/Vector4.tests.js

@@ -290,6 +290,19 @@ export default QUnit.module( 'Maths', () => {
 
 		} );
 
+		QUnit.test( 'setFromMatrixPosition', ( assert ) => {
+
+			const a = new Vector4();
+			const m = new Matrix4().set( 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53 );
+
+			a.setFromMatrixPosition( m );
+			assert.strictEqual( a.x, 7, 'Check x' );
+			assert.strictEqual( a.y, 19, 'Check y' );
+			assert.strictEqual( a.z, 37, 'Check z' );
+			assert.strictEqual( a.w, 53, 'Check w' );
+
+		} );
+
 		QUnit.todo( 'min', ( assert ) => {
 
 			assert.ok( false, 'everything\'s gonna be alright' );