super-three 0.136.1 → 0.144.0

package/examples/jsm/postprocessing/AdaptiveToneMappingPass.js

@@ -1,9 +1,7 @@
 import {
-	LinearFilter,
 	LinearMipmapLinearFilter,
 	MeshBasicMaterial,
 	NoBlending,
-	RGBAFormat,
 	ShaderMaterial,
 	UniformsUtils,
 	WebGLRenderTarget
@@ -215,19 +213,19 @@ class AdaptiveToneMappingPass extends Pass {
 
 		}
 
-		const pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat }; // was RGB format. changed to RGBA format. see discussion in #8415 / #8450
 
-		this.luminanceRT = new WebGLRenderTarget( this.resolution, this.resolution, pars );
+		this.luminanceRT = new WebGLRenderTarget( this.resolution, this.resolution );
 		this.luminanceRT.texture.name = 'AdaptiveToneMappingPass.l';
 		this.luminanceRT.texture.generateMipmaps = false;
 
-		this.previousLuminanceRT = new WebGLRenderTarget( this.resolution, this.resolution, pars );
+		this.previousLuminanceRT = new WebGLRenderTarget( this.resolution, this.resolution );
 		this.previousLuminanceRT.texture.name = 'AdaptiveToneMappingPass.pl';
 		this.previousLuminanceRT.texture.generateMipmaps = false;
 
 		// We only need mipmapping for the current luminosity because we want a down-sampled version to sample in our adaptive shader
-		pars.minFilter = LinearMipmapLinearFilter;
-		pars.generateMipmaps = true;
+
+		const pars = { minFilter: LinearMipmapLinearFilter, generateMipmaps: true };
+
 		this.currentLuminanceRT = new WebGLRenderTarget( this.resolution, this.resolution, pars );
 		this.currentLuminanceRT.texture.name = 'AdaptiveToneMappingPass.cl';
 

package/examples/jsm/postprocessing/AfterimagePass.js

@@ -1,8 +1,6 @@
 import {
-	LinearFilter,
 	MeshBasicMaterial,
 	NearestFilter,
-	RGBAFormat,
 	ShaderMaterial,
 	UniformsUtils,
 	WebGLRenderTarget
@@ -25,19 +23,11 @@ class AfterimagePass extends Pass {
 		this.uniforms[ 'damp' ].value = damp;
 
 		this.textureComp = new WebGLRenderTarget( window.innerWidth, window.innerHeight, {
-
-			minFilter: LinearFilter,
 			magFilter: NearestFilter,
-			format: RGBAFormat
-
 		} );
 
 		this.textureOld = new WebGLRenderTarget( window.innerWidth, window.innerHeight, {
-
-			minFilter: LinearFilter,
 			magFilter: NearestFilter,
-			format: RGBAFormat
-
 		} );
 
 		this.shaderMaterial = new ShaderMaterial( {

package/examples/jsm/postprocessing/BloomPass.js

@@ -1,14 +1,11 @@
 import {
 	AdditiveBlending,
-	LinearFilter,
-	RGBAFormat,
 	ShaderMaterial,
 	UniformsUtils,
 	Vector2,
 	WebGLRenderTarget
 } from 'three';
 import { Pass, FullScreenQuad } from './Pass.js';
-import { CopyShader } from '../shaders/CopyShader.js';
 import { ConvolutionShader } from '../shaders/ConvolutionShader.js';
 
 class BloomPass extends Pass {
@@ -19,28 +16,22 @@ class BloomPass extends Pass {
 
 		// render targets
 
-		const pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat };
-
-		this.renderTargetX = new WebGLRenderTarget( resolution, resolution, pars );
+		this.renderTargetX = new WebGLRenderTarget( resolution, resolution );
 		this.renderTargetX.texture.name = 'BloomPass.x';
-		this.renderTargetY = new WebGLRenderTarget( resolution, resolution, pars );
+		this.renderTargetY = new WebGLRenderTarget( resolution, resolution );
 		this.renderTargetY.texture.name = 'BloomPass.y';
 
-		// copy material
-
-		if ( CopyShader === undefined ) console.error( 'THREE.BloomPass relies on CopyShader' );
-
-		const copyShader = CopyShader;
+		// combine material
 
-		this.copyUniforms = UniformsUtils.clone( copyShader.uniforms );
+		this.combineUniforms = UniformsUtils.clone( CombineShader.uniforms );
 
-		this.copyUniforms[ 'opacity' ].value = strength;
+		this.combineUniforms[ 'strength' ].value = strength;
 
-		this.materialCopy = new ShaderMaterial( {
+		this.materialCombine = new ShaderMaterial( {
 
-			uniforms: this.copyUniforms,
-			vertexShader: copyShader.vertexShader,
-			fragmentShader: copyShader.fragmentShader,
+			uniforms: this.combineUniforms,
+			vertexShader: CombineShader.vertexShader,
+			fragmentShader: CombineShader.fragmentShader,
 			blending: AdditiveBlending,
 			transparent: true
 
@@ -102,9 +93,9 @@ class BloomPass extends Pass {
 
 		// Render original scene with superimposed blur to texture
 
-		this.fsQuad.material = this.materialCopy;
+		this.fsQuad.material = this.materialCombine;
 
-		this.copyUniforms[ 'tDiffuse' ].value = this.renderTargetY.texture;
+		this.combineUniforms[ 'tDiffuse' ].value = this.renderTargetY.texture;
 
 		if ( maskActive ) renderer.state.buffers.stencil.setTest( true );
 
@@ -116,6 +107,43 @@ class BloomPass extends Pass {
 
 }
 
+const CombineShader = {
+
+	uniforms: {
+
+		'tDiffuse': { value: null },
+		'strength': { value: 1.0 }
+
+	},
+
+	vertexShader: /* glsl */`
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+
+	fragmentShader: /* glsl */`
+
+		uniform float strength;
+
+		uniform sampler2D tDiffuse;
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vec4 texel = texture2D( tDiffuse, vUv );
+			gl_FragColor = strength * texel;
+
+		}`
+
+};
+
 BloomPass.blurX = new Vector2( 0.001953125, 0.0 );
 BloomPass.blurY = new Vector2( 0.0, 0.001953125 );
 

package/examples/jsm/postprocessing/DotScreenPass.js

@@ -13,7 +13,7 @@ class DotScreenPass extends Pass {
 
 		if ( DotScreenShader === undefined ) console.error( 'THREE.DotScreenPass relies on DotScreenShader' );
 
-		var shader = DotScreenShader;
+		const shader = DotScreenShader;
 
 		this.uniforms = UniformsUtils.clone( shader.uniforms );
 

package/examples/jsm/postprocessing/EffectComposer.js

@@ -2,10 +2,8 @@ import {
 	BufferGeometry,
 	Clock,
 	Float32BufferAttribute,
-	LinearFilter,
 	Mesh,
 	OrthographicCamera,
-	RGBAFormat,
 	Vector2,
 	WebGLRenderTarget
 } from 'three';
@@ -22,18 +20,12 @@ class EffectComposer {
 
 		if ( renderTarget === undefined ) {
 
-			const parameters = {
-				minFilter: LinearFilter,
-				magFilter: LinearFilter,
-				format: RGBAFormat
-			};
-
 			const size = renderer.getSize( new Vector2() );
 			this._pixelRatio = renderer.getPixelRatio();
 			this._width = size.width;
 			this._height = size.height;
 
-			renderTarget = new WebGLRenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio, parameters );
+			renderTarget = new WebGLRenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio );
 			renderTarget.texture.name = 'EffectComposer.rt1';
 
 		} else {

package/examples/jsm/postprocessing/LUTPass.js

@@ -117,7 +117,7 @@ class LUTPass extends ShaderPass {
 
 			if ( v ) {
 
-				const is3dTextureDefine = v.isDataTexture3D ? 1 : 0;
+				const is3dTextureDefine = v.isData3DTexture ? 1 : 0;
 				if ( is3dTextureDefine !== material.defines.USE_3DTEXTURE ) {
 
 					material.defines.USE_3DTEXTURE = is3dTextureDefine;
@@ -126,7 +126,7 @@ class LUTPass extends ShaderPass {
 				}
 
 				material.uniforms.lutSize.value = v.image.width;
-				if ( v.isDataTexture3D ) {
+				if ( v.isData3DTexture ) {
 
 					material.uniforms.lut3d.value = v;
 

package/examples/jsm/postprocessing/OutlinePass.js

@@ -2,13 +2,10 @@ import {
 	AdditiveBlending,
 	Color,
 	DoubleSide,
-	LinearFilter,
 	Matrix4,
-	MeshBasicMaterial,
 	MeshDepthMaterial,
 	NoBlending,
 	RGBADepthPacking,
-	RGBAFormat,
 	ShaderMaterial,
 	UniformsUtils,
 	Vector2,
@@ -41,14 +38,10 @@ class OutlinePass extends Pass {
 
 		this.resolution = ( resolution !== undefined ) ? new Vector2( resolution.x, resolution.y ) : new Vector2( 256, 256 );
 
-		const pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat };
-
 		const resx = Math.round( this.resolution.x / this.downSampleRatio );
 		const resy = Math.round( this.resolution.y / this.downSampleRatio );
 
-		this.maskBufferMaterial = new MeshBasicMaterial( { color: 0xffffff } );
-		this.maskBufferMaterial.side = DoubleSide;
-		this.renderTargetMaskBuffer = new WebGLRenderTarget( this.resolution.x, this.resolution.y, pars );
+		this.renderTargetMaskBuffer = new WebGLRenderTarget( this.resolution.x, this.resolution.y );
 		this.renderTargetMaskBuffer.texture.name = 'OutlinePass.mask';
 		this.renderTargetMaskBuffer.texture.generateMipmaps = false;
 
@@ -61,26 +54,26 @@ class OutlinePass extends Pass {
 		this.prepareMaskMaterial.side = DoubleSide;
 		this.prepareMaskMaterial.fragmentShader = replaceDepthToViewZ( this.prepareMaskMaterial.fragmentShader, this.renderCamera );
 
-		this.renderTargetDepthBuffer = new WebGLRenderTarget( this.resolution.x, this.resolution.y, pars );
+		this.renderTargetDepthBuffer = new WebGLRenderTarget( this.resolution.x, this.resolution.y );
 		this.renderTargetDepthBuffer.texture.name = 'OutlinePass.depth';
 		this.renderTargetDepthBuffer.texture.generateMipmaps = false;
 
-		this.renderTargetMaskDownSampleBuffer = new WebGLRenderTarget( resx, resy, pars );
+		this.renderTargetMaskDownSampleBuffer = new WebGLRenderTarget( resx, resy );
 		this.renderTargetMaskDownSampleBuffer.texture.name = 'OutlinePass.depthDownSample';
 		this.renderTargetMaskDownSampleBuffer.texture.generateMipmaps = false;
 
-		this.renderTargetBlurBuffer1 = new WebGLRenderTarget( resx, resy, pars );
+		this.renderTargetBlurBuffer1 = new WebGLRenderTarget( resx, resy );
 		this.renderTargetBlurBuffer1.texture.name = 'OutlinePass.blur1';
 		this.renderTargetBlurBuffer1.texture.generateMipmaps = false;
-		this.renderTargetBlurBuffer2 = new WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ), pars );
+		this.renderTargetBlurBuffer2 = new WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ) );
 		this.renderTargetBlurBuffer2.texture.name = 'OutlinePass.blur2';
 		this.renderTargetBlurBuffer2.texture.generateMipmaps = false;
 
 		this.edgeDetectionMaterial = this.getEdgeDetectionMaterial();
-		this.renderTargetEdgeBuffer1 = new WebGLRenderTarget( resx, resy, pars );
+		this.renderTargetEdgeBuffer1 = new WebGLRenderTarget( resx, resy );
 		this.renderTargetEdgeBuffer1.texture.name = 'OutlinePass.edge1';
 		this.renderTargetEdgeBuffer1.texture.generateMipmaps = false;
-		this.renderTargetEdgeBuffer2 = new WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ), pars );
+		this.renderTargetEdgeBuffer2 = new WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ) );
 		this.renderTargetEdgeBuffer2.texture.name = 'OutlinePass.edge2';
 		this.renderTargetEdgeBuffer2.texture.generateMipmaps = false;
 
@@ -129,7 +122,7 @@ class OutlinePass extends Pass {
 
 		function replaceDepthToViewZ( string, camera ) {
 
-			var type = camera.isPerspectiveCamera ? 'perspective' : 'orthographic';
+			const type = camera.isPerspectiveCamera ? 'perspective' : 'orthographic';
 
 			return string.replace( /DEPTH_TO_VIEW_Z/g, type + 'DepthToViewZ' );
 
@@ -451,9 +444,9 @@ class OutlinePass extends Pass {
 					#include <morphtarget_vertex>
 					#include <skinning_vertex>
 					#include <project_vertex>
+					#include <worldpos_vertex>
 
 					vPosition = mvPosition;
-					vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );
 					projTexCoord = textureMatrix * worldPosition;
 
 				}`,
@@ -562,12 +555,14 @@ class OutlinePass extends Pass {
 
 				void main() {
 					vec2 invSize = 1.0 / texSize;
-					float weightSum = gaussianPdf(0.0, kernelRadius);
+					float sigma = kernelRadius/2.0;
+					float weightSum = gaussianPdf(0.0, sigma);
 					vec4 diffuseSum = texture2D( colorTexture, vUv) * weightSum;
 					vec2 delta = direction * invSize * kernelRadius/float(MAX_RADIUS);
 					vec2 uvOffset = delta;
 					for( int i = 1; i <= MAX_RADIUS; i ++ ) {
-						float w = gaussianPdf(uvOffset.x, kernelRadius);
+						float x = kernelRadius * float(i) / float(MAX_RADIUS);
+						float w = gaussianPdf(x, sigma);
 						vec4 sample1 = texture2D( colorTexture, vUv + uvOffset);
 						vec4 sample2 = texture2D( colorTexture, vUv - uvOffset);
 						diffuseSum += ((sample1 + sample2) * w);

package/examples/jsm/postprocessing/SAOPass.js

@@ -5,13 +5,11 @@ import {
 	DepthTexture,
 	DstAlphaFactor,
 	DstColorFactor,
-	LinearFilter,
 	MeshDepthMaterial,
 	MeshNormalMaterial,
 	NearestFilter,
 	NoBlending,
 	RGBADepthPacking,
-	RGBAFormat,
 	ShaderMaterial,
 	UniformsUtils,
 	UnsignedShortType,
@@ -64,18 +62,13 @@ class SAOPass extends Pass {
 
 		this.resolution = new Vector2( resolution.x, resolution.y );
 
-		this.saoRenderTarget = new WebGLRenderTarget( this.resolution.x, this.resolution.y, {
-			minFilter: LinearFilter,
-			magFilter: LinearFilter,
-			format: RGBAFormat
-		} );
+		this.saoRenderTarget = new WebGLRenderTarget( this.resolution.x, this.resolution.y );
 		this.blurIntermediateRenderTarget = this.saoRenderTarget.clone();
 		this.beautyRenderTarget = this.saoRenderTarget.clone();
 
 		this.normalRenderTarget = new WebGLRenderTarget( this.resolution.x, this.resolution.y, {
 			minFilter: NearestFilter,
-			magFilter: NearestFilter,
-			format: RGBAFormat
+			magFilter: NearestFilter
 		} );
 		this.depthRenderTarget = this.normalRenderTarget.clone();
 

package/examples/jsm/postprocessing/SSAARenderPass.js

@@ -1,8 +1,6 @@
 import {
 	AdditiveBlending,
 	Color,
-	LinearFilter,
-	RGBAFormat,
 	ShaderMaterial,
 	UniformsUtils,
 	WebGLRenderTarget
@@ -46,7 +44,6 @@ class SSAARenderPass extends Pass {
 			uniforms: this.copyUniforms,
 			vertexShader: copyShader.vertexShader,
 			fragmentShader: copyShader.fragmentShader,
-			premultipliedAlpha: true,
 			transparent: true,
 			blending: AdditiveBlending,
 			depthTest: false,
@@ -78,7 +75,7 @@ class SSAARenderPass extends Pass {
 
 		if ( ! this.sampleRenderTarget ) {
 
-			this.sampleRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat } );
+			this.sampleRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height );
 			this.sampleRenderTarget.texture.name = 'SSAARenderPass.sample';
 
 		}

package/examples/jsm/postprocessing/SSRPass.js

@@ -9,7 +9,6 @@ import {
 	MeshBasicMaterial,
 	NearestFilter,
 	NoBlending,
-	RGBAFormat,
 	ShaderMaterial,
 	UniformsUtils,
 	UnsignedShortType,
@@ -163,7 +162,6 @@ class SSRPass extends Pass {
 		this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height, {
 			minFilter: NearestFilter,
 			magFilter: NearestFilter,
-			format: RGBAFormat,
 			depthTexture: depthTexture,
 			depthBuffer: true
 		} );
@@ -171,8 +169,7 @@ class SSRPass extends Pass {
 		//for bouncing
 		this.prevRenderTarget = new WebGLRenderTarget( this.width, this.height, {
 			minFilter: NearestFilter,
-			magFilter: NearestFilter,
-			format: RGBAFormat,
+			magFilter: NearestFilter
 		} );
 
 		// normal render target
@@ -180,7 +177,6 @@ class SSRPass extends Pass {
 		this.normalRenderTarget = new WebGLRenderTarget( this.width, this.height, {
 			minFilter: NearestFilter,
 			magFilter: NearestFilter,
-			format: RGBAFormat,
 			type: HalfFloatType,
 		} );
 
@@ -188,8 +184,7 @@ class SSRPass extends Pass {
 
 		this.metalnessRenderTarget = new WebGLRenderTarget( this.width, this.height, {
 			minFilter: NearestFilter,
-			magFilter: NearestFilter,
-			format: RGBAFormat
+			magFilter: NearestFilter
 		} );
 
 
@@ -198,8 +193,7 @@ class SSRPass extends Pass {
 
 		this.ssrRenderTarget = new WebGLRenderTarget( this.width, this.height, {
 			minFilter: NearestFilter,
-			magFilter: NearestFilter,
-			format: RGBAFormat
+			magFilter: NearestFilter
 		} );
 
 		this.blurRenderTarget = this.ssrRenderTarget.clone();

package/examples/jsm/postprocessing/TAARenderPass.js

@@ -28,7 +28,7 @@ class TAARenderPass extends SSAARenderPass {
 
 	render( renderer, writeBuffer, readBuffer, deltaTime ) {
 
-		if ( ! this.accumulate ) {
+		if ( this.accumulate === false ) {
 
 			super.render( renderer, writeBuffer, readBuffer, deltaTime );
 
@@ -39,21 +39,21 @@ class TAARenderPass extends SSAARenderPass {
 
 		const jitterOffsets = _JitterVectors[ 5 ];
 
-		if ( ! this.sampleRenderTarget ) {
+		if ( this.sampleRenderTarget === undefined ) {
 
 			this.sampleRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height, this.params );
 			this.sampleRenderTarget.texture.name = 'TAARenderPass.sample';
 
 		}
 
-		if ( ! this.holdRenderTarget ) {
+		if ( this.holdRenderTarget === undefined ) {
 
 			this.holdRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height, this.params );
 			this.holdRenderTarget.texture.name = 'TAARenderPass.hold';
 
 		}
 
-		if ( this.accumulate && this.accumulateIndex === - 1 ) {
+		if ( this.accumulateIndex === - 1 ) {
 
 			super.render( renderer, this.holdRenderTarget, readBuffer, deltaTime );
 

package/examples/jsm/postprocessing/UnrealBloomPass.js

@@ -1,9 +1,7 @@
 import {
 	AdditiveBlending,
 	Color,
-	LinearFilter,
 	MeshBasicMaterial,
-	RGBAFormat,
 	ShaderMaterial,
 	UniformsUtils,
 	Vector2,
@@ -38,27 +36,26 @@ class UnrealBloomPass extends Pass {
 		this.clearColor = new Color( 0, 0, 0 );
 
 		// render targets
-		const pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat };
 		this.renderTargetsHorizontal = [];
 		this.renderTargetsVertical = [];
 		this.nMips = 5;
 		let resx = Math.round( this.resolution.x / 2 );
 		let resy = Math.round( this.resolution.y / 2 );
 
-		this.renderTargetBright = new WebGLRenderTarget( resx, resy, pars );
+		this.renderTargetBright = new WebGLRenderTarget( resx, resy );
 		this.renderTargetBright.texture.name = 'UnrealBloomPass.bright';
 		this.renderTargetBright.texture.generateMipmaps = false;
 
 		for ( let i = 0; i < this.nMips; i ++ ) {
 
-			const renderTargetHorizonal = new WebGLRenderTarget( resx, resy, pars );
+			const renderTargetHorizonal = new WebGLRenderTarget( resx, resy );
 
 			renderTargetHorizonal.texture.name = 'UnrealBloomPass.h' + i;
 			renderTargetHorizonal.texture.generateMipmaps = false;
 
 			this.renderTargetsHorizontal.push( renderTargetHorizonal );
 
-			const renderTargetVertical = new WebGLRenderTarget( resx, resy, pars );
+			const renderTargetVertical = new WebGLRenderTarget( resx, resy );
 
 			renderTargetVertical.texture.name = 'UnrealBloomPass.v' + i;
 			renderTargetVertical.texture.generateMipmaps = false;
@@ -357,7 +354,6 @@ class UnrealBloomPass extends Pass {
 				'blurTexture3': { value: null },
 				'blurTexture4': { value: null },
 				'blurTexture5': { value: null },
-				'dirtTexture': { value: null },
 				'bloomStrength': { value: 1.0 },
 				'bloomFactors': { value: null },
 				'bloomTintColors': { value: null },
@@ -378,7 +374,6 @@ class UnrealBloomPass extends Pass {
 				uniform sampler2D blurTexture3;
 				uniform sampler2D blurTexture4;
 				uniform sampler2D blurTexture5;
-				uniform sampler2D dirtTexture;
 				uniform float bloomStrength;
 				uniform float bloomRadius;
 				uniform float bloomFactors[NUM_MIPS];

package/examples/jsm/renderers/CSS2DRenderer.js

@@ -10,6 +10,8 @@ class CSS2DObject extends Object3D {
 
 		super();
 
+		this.isCSS2DObject = true;
+
 		this.element = element;
 
 		this.element.style.position = 'absolute';
@@ -45,8 +47,6 @@ class CSS2DObject extends Object3D {
 
 }
 
-CSS2DObject.prototype.isCSS2DObject = true;
-
 //
 
 const _vector = new Vector3();
@@ -85,8 +85,8 @@ class CSS2DRenderer {
 
 		this.render = function ( scene, camera ) {
 
-			if ( scene.autoUpdate === true ) scene.updateMatrixWorld();
-			if ( camera.parent === null ) camera.updateMatrixWorld();
+			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
 
 			_viewMatrix.copy( camera.matrixWorldInverse );
 			_viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix );
@@ -113,25 +113,29 @@ class CSS2DRenderer {
 
 			if ( object.isCSS2DObject ) {
 
-				object.onBeforeRender( _this, scene, camera );
-
 				_vector.setFromMatrixPosition( object.matrixWorld );
 				_vector.applyMatrix4( _viewProjectionMatrix );
 
-				const element = object.element;
+				const visible = ( object.visible === true ) && ( _vector.z >= - 1 && _vector.z <= 1 ) && ( object.layers.test( camera.layers ) === true );
+				object.element.style.display = ( visible === true ) ? '' : 'none';
 
-				if ( /apple/i.test( navigator.vendor ) ) {
+				if ( visible === true ) {
 
-					// https://github.com/mrdoob/three.js/issues/21415
-					element.style.transform = 'translate(-50%,-50%) translate(' + Math.round( _vector.x * _widthHalf + _widthHalf ) + 'px,' + Math.round( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
+					object.onBeforeRender( _this, scene, camera );
 
-				} else {
+					const element = object.element;
 
 					element.style.transform = 'translate(-50%,-50%) translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
 
-				}
+					if ( element.parentNode !== domElement ) {
+
+						domElement.appendChild( element );
 
-				element.style.display = ( object.visible && _vector.z >= - 1 && _vector.z <= 1 ) ? '' : 'none';
+					}
+
+					object.onAfterRender( _this, scene, camera );
+
+				}
 
 				const objectData = {
 					distanceToCameraSquared: getDistanceToSquared( camera, object )
@@ -139,14 +143,6 @@ class CSS2DRenderer {
 
 				cache.objects.set( object, objectData );
 
-				if ( element.parentNode !== domElement ) {
-
-					domElement.appendChild( element );
-
-				}
-
-				object.onAfterRender( _this, scene, camera );
-
 			}
 
 			for ( let i = 0, l = object.children.length; i < l; i ++ ) {
@@ -184,6 +180,12 @@ class CSS2DRenderer {
 
 			const sorted = filterAndFlatten( scene ).sort( function ( a, b ) {
 
+				if ( a.renderOrder !== b.renderOrder ) {
+
+					return b.renderOrder - a.renderOrder;
+
+				}
+
 				const distanceA = cache.objects.get( a ).distanceToCameraSquared;
 				const distanceB = cache.objects.get( b ).distanceToCameraSquared;