CSS2DObject and CSS3DObject visibility needs to consider whether ancestors are visible (#28293)

* CSS2DObject and CSS3DObject visibility needs to consider whether ancestors are visible

* Update CSS2DRenderer.js

Clean up.

* Update CSS3DRenderer.js

Clean up.

* Update CSS3DRenderer.js

More clean up.

* Optimize CSS renderers code

* Update CSS2DRenderer.js

Clean up.

* Update CSS3DRenderer.js

Clean up.

* Update CSS2DRenderer.js

Simplify code.

* Update CSS3DRenderer.js

Simplify code.

---------

Co-authored-by: Michael Herzog <[email protected]>

examples/jsm/renderers/CSS2DRenderer.js

@@ -96,6 +96,7 @@ class CSS2DRenderer {
 			_viewMatrix.copy( camera.matrixWorldInverse );
 			_viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix );
 
+			hideObject( scene );
 			renderObject( scene, scene, camera );
 			zOrder( scene );
 
@@ -114,15 +115,27 @@ class CSS2DRenderer {
 
 		};
 
+		function hideObject( object ) {
+
+			if ( object.isCSS2DObject ) object.element.style.display = 'none';
+
+			for ( let i = 0, l = object.children.length; i < l; i ++ ) {
+
+				hideObject( object.children[ i ] );
+
+			}
+		}
+
 		function renderObject( object, scene, camera ) {
 
+			if ( object.visible === false ) return;
+
 			if ( object.isCSS2DObject ) {
 
 				_vector.setFromMatrixPosition( object.matrixWorld );
 				_vector.applyMatrix4( _viewProjectionMatrix );
 
-				const visible = ( object.visible === true ) && ( _vector.z >= - 1 && _vector.z <= 1 ) && ( object.layers.test( camera.layers ) === true );
-				object.element.style.display = ( visible === true ) ? '' : 'none';
+				const visible = ( _vector.z >= - 1 && _vector.z <= 1 ) && ( object.layers.test( camera.layers ) === true );
 
 				if ( visible === true ) {
 
@@ -130,6 +143,8 @@ class CSS2DRenderer {
 
 					const element = object.element;
 
+					element.style.display = '';
+
 					element.style.transform = 'translate(' + ( - 100 * object.center.x ) + '%,' + ( - 100 * object.center.y ) + '%)' + 'translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
 
 					if ( element.parentNode !== domElement ) {

examples/jsm/renderers/CSS3DRenderer.js

@@ -172,6 +172,7 @@ class CSS3DRenderer {
 
 			}
 
+			hideObject( scene );
 			renderObject( scene, scene, camera, cameraCSSMatrix );
 
 		};
@@ -251,12 +252,25 @@ class CSS3DRenderer {
 
 		}
 
+		function hideObject( object ) {
+
+			if ( object.isCSS3DObject ) object.element.style.display = 'none';
+	  
+			for ( let i = 0, l = object.children.length; i < l; i ++ ) {
+
+			  hideObject( object.children[ i ] );
+
+			}
+
+		}
+
 		function renderObject( object, scene, camera, cameraCSSMatrix ) {
 
+			if ( object.visible === false ) return;
+
 			if ( object.isCSS3DObject ) {
 
-				const visible = ( object.visible === true ) && ( object.layers.test( camera.layers ) === true );
-				object.element.style.display = ( visible === true ) ? '' : 'none';
+				const visible = ( object.layers.test( camera.layers ) === true );
 
 				if ( visible === true ) {
 
@@ -293,6 +307,8 @@ class CSS3DRenderer {
 					const element = object.element;
 					const cachedObject = cache.objects.get( object );
 
+					element.style.display = '';
+
 					if ( cachedObject === undefined || cachedObject.style !== style ) {
 
 						element.style.transform = style;