Replaced TwoPassDoubleSide with material.forceSinglePass (#25239)

* Replaced TwoPassDoubleSide with object.renderDoubleSideSinglePass.

* Renamed renderDoubleSideSinglePass to renderForceSinglePass.

* Enabled renderForceSinglePass in webgl_buffergeometry_instancing example.

* Update src/renderers/webgl/WebGLShadowMap.js

Co-authored-by: Levi Pesin <[email protected]>

* Restored TwoPassDoubleSide constant and made it "backwards compatible".

* Moved object.renderForceSinglePass to material.forceSinglePass.

* Editor: Updated forceSinglePass UI.

* Docs: Removed TwoPassDoubleSide reference.

* Examples: Updated webgl_postprocessing_dof2.

* Updated ObjectLoader and MaterialLoader.

Co-authored-by: Levi Pesin <[email protected]>

docs/api/en/constants/Materials.html

@@ -20,15 +20,11 @@
 		THREE.FrontSide
 		THREE.BackSide
 		THREE.DoubleSide
-		THREE.TwoPassDoubleSide
 		</code>
 		<p>
 		Defines which side of faces will be rendered - front, back or both.
 		Default is [page:Constant FrontSide].
 		</p>
-		<p>
-		[page:Materials TwoPassDoubleSide] will renderer double-sided transparent materials in two passes in back-front order to mitigate transparency artifacts.
-		</p>
 
 		<h2>Blending Mode</h2>
 		<code>

docs/api/en/materials/Material.html

@@ -260,7 +260,7 @@
 		<p>
 		Defines which side of faces will be rendered - front, back or both.
 		Default is [page:Materials THREE.FrontSide].
-		Other options are [page:Materials THREE.BackSide], [page:Materials THREE.DoubleSide] or [page:Materials THREE.TwoPassDoubleSide].
+		Other options are [page:Materials THREE.BackSide] or [page:Materials THREE.DoubleSide].
 		</p>
 
 		<h3>[property:Boolean toneMapped]</h3>

docs/api/fr/constants/Materials.html

@@ -20,15 +20,11 @@
 		THREE.FrontSide
 		THREE.BackSide
 		THREE.DoubleSide
-		THREE.TwoPassDoubleSide
 		</code>
 		<p>
 		Définit quel côté des faces sera rendu - avant, arrière ou les deux.
 		La valeur par défaut est [page:Constant FrontSide].
 		</p>
-		<p>
-		[page:Materials TwoPassDoubleSide] will renderer double-sided transparent materials in two passes in back-front order to mitigate transparency artifacts.
-		</p>
 
 		<h2>Mode de fusion</h2>
 		<code>

docs/api/it/constants/Materials.html

@@ -22,15 +22,11 @@
 		THREE.FrontSide
 		THREE.BackSide
 		THREE.DoubleSide
-		THREE.TwoPassDoubleSide
 		</code>
 		<p>
       Definisce quale lato delle facce sarà visualizzato - frontale, retro o entrambi.
       Il valore predefinito è [page:Constant FrontSide].
 		</p>
-		<p>
-		[page:Materials TwoPassDoubleSide] will renderer double-sided transparent materials in two passes in back-front order to mitigate transparency artifacts.
-		</p>
 
 		<h2>Modalità Blending</h2>
 		<code>

docs/api/it/materials/Material.html

@@ -276,7 +276,7 @@
 		<p>
 			Definisce quale lato delle facce sarà visualizzato - frontale, posteriore o entrambi.
 			Il valore predefinito è [page:Materials THREE.FrontSide].
-			Altre opzioni sono [page:Materials THREE.BackSide], [page:Materials THREE.DoubleSide] e [page:Materials THREE.TwoPassDoubleSide].
+			Altre opzioni sono [page:Materials THREE.BackSide] e [page:Materials THREE.DoubleSide].
 		</p>
 
 		<h3>[property:Boolean toneMapped]</h3>

docs/api/ko/constants/Materials.html

@@ -23,7 +23,6 @@
 		THREE.FrontSide
 		THREE.BackSide
 		THREE.DoubleSide
-		THREE.TwoPassDoubleSide
 		</code>
 		<p>
 		어느 측면(앞,뒤 혹은 둘 다)이 렌더링 될 지 정의합니다.

docs/api/pt-br/constants/Materials.html

@@ -19,15 +19,11 @@
 		THREE.FrontSide
 		THREE.BackSide
 		THREE.DoubleSide
-		THREE.TwoPassDoubleSide
 		</code>
 		<p>
 		Define qual lado das faces será renderizado - frente, verso ou ambos.
 		O padrão é [page:Constant FrontSide].
 		</p>
-		<p>
-		[page:Materials TwoPassDoubleSide] will renderer double-sided transparent materials in two passes in back-front order to mitigate transparency artifacts.
-		</p>
 
 		<h2>Modo de Mesclagem (Blending Mode)</h2>
 		<code>

docs/api/zh/constants/Materials.html

@@ -20,15 +20,11 @@
 		THREE.FrontSide
 		THREE.BackSide
 		THREE.DoubleSide
-		THREE.TwoPassDoubleSide
 		</code>
 		<p>
 			定义了哪一边的面将会被渲染 —— 正面，或是反面，还是两个面都渲染。
 			默认值是[page:Constant FrontSide]（只渲染正面）。
 		</p>
-		<p>
-		[page:Materials TwoPassDoubleSide] will renderer double-sided transparent materials in two passes in back-front order to mitigate transparency artifacts.
-		</p>
 
 		<h2>混合模式</h2>
 		<code>

docs/api/zh/materials/Material.html

@@ -226,7 +226,7 @@
 
 <h3>[property:Integer side]</h3>
 <p> 定义将要渲染哪一面 - 正面，背面或两者。
-	默认为[page:Materials THREE.FrontSide]。其他选项有[page:Materials THREE.BackSide], [page:Materials THREE.DoubleSide] 和 [page:Materials THREE.TwoPassDoubleSide]。
+	默认为[page:Materials THREE.FrontSide]。其他选项有[page:Materials THREE.BackSide] 和 [page:Materials THREE.DoubleSide]。
 </p>
 
 <h3>[property:Boolean toneMapped]</h3>

editor/js/Sidebar.Material.js

@@ -306,8 +306,7 @@ function SidebarMaterial( editor ) {
 	const materialSideOptions = {
 		0: 'Front',
 		1: 'Back',
-		2: 'Double',
-		3: 'TwoPassDouble'
+		2: 'Double'
 	};
 
 	const materialSide = new SidebarMaterialConstantProperty( editor, 'side', strings.getKey( 'sidebar/material/side' ), materialSideOptions );
@@ -352,6 +351,11 @@ function SidebarMaterial( editor ) {
 	const materialTransparent = new SidebarMaterialBooleanProperty( editor, 'transparent', strings.getKey( 'sidebar/material/transparent' ) );
 	container.add( materialTransparent );
 
+	// forceSinglePass
+
+	const materialForceSinglePass = new SidebarMaterialBooleanProperty( editor, 'forceSinglePass', strings.getKey( 'sidebar/material/forcesinglepass' ) );
+	container.add( materialForceSinglePass );
+
 	// alpha test
 
 	const materialAlphaTest = new SidebarMaterialNumberProperty( editor, 'alphaTest', strings.getKey( 'sidebar/material/alphatest' ), [ 0, 1 ] );

editor/js/Strings.js

@@ -298,6 +298,7 @@ function Strings( config ) {
 			'sidebar/material/blending': 'Blending',
 			'sidebar/material/opacity': 'Opacity',
 			'sidebar/material/transparent': 'Transparent',
+			'sidebar/material/forcesinglepass': 'Force Single Pass',
 			'sidebar/material/alphatest': 'Alpha Test',
 			'sidebar/material/depthtest': 'Depth Test',
 			'sidebar/material/depthwrite': 'Depth Write',
@@ -649,6 +650,7 @@ function Strings( config ) {
 			'sidebar/material/blending': 'Mélange',
 			'sidebar/material/opacity': 'Opacité',
 			'sidebar/material/transparent': 'Transparence',
+			'sidebar/material/forcesinglepass': 'Force Single Pass',
 			'sidebar/material/alphatest': 'Test de transparence',
 			'sidebar/material/depthtest': 'Depth Test',
 			'sidebar/material/depthwrite': 'Depth Write',
@@ -1000,6 +1002,7 @@ function Strings( config ) {
 			'sidebar/material/blending': '混合',
 			'sidebar/material/opacity': '透明度',
 			'sidebar/material/transparent': '透明性',
+			'sidebar/material/forcesinglepass': 'Force Single Pass',
 			'sidebar/material/alphatest': 'α测试',
 			'sidebar/material/depthtest': '深度测试',
 			'sidebar/material/depthwrite': '深度缓冲',

examples/webgl_buffergeometry_instancing.html

@@ -166,6 +166,7 @@
 				vertexShader: document.getElementById( 'vertexShader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
 				side: THREE.DoubleSide,
+				forceSinglePass: true,
 				transparent: true
 
 			} );

examples/webgl_geometry_convex.html

@@ -118,7 +118,7 @@
 				const meshMaterial = new THREE.MeshLambertMaterial( {
 					color: 0xffffff,
 					opacity: 0.5,
-					side: THREE.TwoPassDoubleSide,
+					side: THREE.DoubleSide,
 					transparent: true
 				} );
 

examples/webgl_postprocessing_dof2.html

@@ -109,7 +109,8 @@
 					shininess: 0.5,
 					specular: 0xffffff,
 					envMap: textureCube,
-					side: THREE.DoubleSide
+					side: THREE.DoubleSide,
+					forceSinglePass: true
 				} );
 
 				const rand = Math.random;

src/constants.js

@@ -12,7 +12,7 @@ export const VSMShadowMap = 3;
 export const FrontSide = 0;
 export const BackSide = 1;
 export const DoubleSide = 2;
-export const TwoPassDoubleSide = 3;
+export const TwoPassDoubleSide = 2; // r149
 export const NoBlending = 0;
 export const NormalBlending = 1;
 export const AdditiveBlending = 2;

src/loaders/MaterialLoader.js

@@ -152,6 +152,7 @@ class MaterialLoader extends Loader {
 
 		if ( json.alphaToCoverage !== undefined ) material.alphaToCoverage = json.alphaToCoverage;
 		if ( json.premultipliedAlpha !== undefined ) material.premultipliedAlpha = json.premultipliedAlpha;
+		if ( json.forceSinglePass !== undefined ) material.forceSinglePass = json.forceSinglePass;
 
 		if ( json.visible !== undefined ) material.visible = json.visible;
 

src/materials/Material.js

@@ -64,6 +64,7 @@ class Material extends EventDispatcher {
 
 		this.alphaToCoverage = false;
 		this.premultipliedAlpha = false;
+		this.forceSinglePass = false;
 
 		this.visible = true;
 
@@ -345,6 +346,7 @@ class Material extends EventDispatcher {
 		if ( this.alphaTest > 0 ) data.alphaTest = this.alphaTest;
 		if ( this.alphaToCoverage === true ) data.alphaToCoverage = this.alphaToCoverage;
 		if ( this.premultipliedAlpha === true ) data.premultipliedAlpha = this.premultipliedAlpha;
+		if ( this.forceSinglePass === true ) data.forceSinglePass = this.forceSinglePass;
 
 		if ( this.wireframe === true ) data.wireframe = this.wireframe;
 		if ( this.wireframeLinewidth > 1 ) data.wireframeLinewidth = this.wireframeLinewidth;
@@ -465,6 +467,7 @@ class Material extends EventDispatcher {
 		this.alphaTest = source.alphaTest;
 		this.alphaToCoverage = source.alphaToCoverage;
 		this.premultipliedAlpha = source.premultipliedAlpha;
+		this.forceSinglePass = source.forceSinglePass;
 
 		this.visible = source.visible;
 

src/renderers/WebGLRenderer.js

@@ -1,8 +1,8 @@
 import {
 	REVISION,
 	BackSide,
-	TwoPassDoubleSide,
 	FrontSide,
+	DoubleSide,
 	RGBAFormat,
 	HalfFloatType,
 	FloatType,
@@ -828,7 +828,7 @@ function WebGLRenderer( parameters = {} ) {
 
 		function prepare( material, scene, object ) {
 
-			if ( material.transparent === true && material.side === TwoPassDoubleSide ) {
+			if ( material.transparent === true && material.side === DoubleSide && material.forceSinglePass === false ) {
 
 				material.side = BackSide;
 				material.needsUpdate = true;
@@ -838,7 +838,7 @@ function WebGLRenderer( parameters = {} ) {
 				material.needsUpdate = true;
 				getProgram( material, scene, object );
 
-				material.side = TwoPassDoubleSide;
+				material.side = DoubleSide;
 
 			} else {
 
@@ -1312,7 +1312,7 @@ function WebGLRenderer( parameters = {} ) {
 
 		material.onBeforeRender( _this, scene, camera, geometry, object, group );
 
-		if ( material.transparent === true && material.side === TwoPassDoubleSide ) {
+		if ( material.transparent === true && material.side === DoubleSide && material.forceSinglePass === false ) {
 
 			material.side = BackSide;
 			material.needsUpdate = true;
@@ -1322,7 +1322,7 @@ function WebGLRenderer( parameters = {} ) {
 			material.needsUpdate = true;
 			_this.renderBufferDirect( camera, scene, geometry, material, object, group );
 
-			material.side = TwoPassDoubleSide;
+			material.side = DoubleSide;
 
 		} else {
 

src/renderers/webgl/WebGLShadowMap.js

@@ -1,4 +1,4 @@
-import { FrontSide, BackSide, DoubleSide, TwoPassDoubleSide, NearestFilter, PCFShadowMap, VSMShadowMap, RGBADepthPacking, NoBlending } from '../../constants.js';
+import { FrontSide, BackSide, DoubleSide, NearestFilter, PCFShadowMap, VSMShadowMap, RGBADepthPacking, NoBlending } from '../../constants.js';
 import { WebGLRenderTarget } from '../WebGLRenderTarget.js';
 import { MeshDepthMaterial } from '../../materials/MeshDepthMaterial.js';
 import { MeshDistanceMaterial } from '../../materials/MeshDistanceMaterial.js';
@@ -28,7 +28,7 @@ function WebGLShadowMap( _renderer, _objects, _capabilities ) {
 
 		_maxTextureSize = _capabilities.maxTextureSize;
 
-	const shadowSide = { [ FrontSide ]: BackSide, [ BackSide ]: FrontSide, [ DoubleSide ]: DoubleSide, [ TwoPassDoubleSide ]: DoubleSide };
+	const shadowSide = { [ FrontSide ]: BackSide, [ BackSide ]: FrontSide, [ DoubleSide ]: DoubleSide };
 
 	const shadowMaterialVertical = new ShaderMaterial( {
 		defines: {