Material: Add `TwoPassDoubleSide`. (#25165)

* Material: Add `TwoPassDoubleSide`.

* Updated screenshots.

docs/api/en/constants/Materials.html

@@ -20,11 +20,15 @@
 		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] and [page:Materials THREE.DoubleSide].
+		Other options are [page:Materials THREE.BackSide], [page:Materials THREE.DoubleSide] or [page:Materials THREE.TwoPassDoubleSide].
 		</p>
 
 		<h3>[property:Boolean toneMapped]</h3>

docs/api/fr/constants/Materials.html

@@ -20,11 +20,15 @@
 		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,11 +22,15 @@
 		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] e [page:Materials THREE.DoubleSide].
+			Altre opzioni sono [page:Materials THREE.BackSide], [page:Materials THREE.DoubleSide] e [page:Materials THREE.TwoPassDoubleSide].
 		</p>
 
 		<h3>[property:Boolean toneMapped]</h3>

docs/api/ko/constants/Materials.html

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

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

@@ -19,11 +19,15 @@
 		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,11 +20,15 @@
 		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.FrontSide]。其他选项有[page:Materials THREE.BackSide], [page:Materials THREE.DoubleSide] 和 [page:Materials THREE.TwoPassDoubleSide]。
 </p>
 
 <h3>[property:Boolean toneMapped]</h3>

editor/js/Sidebar.Material.js

@@ -306,7 +306,8 @@ function SidebarMaterial( editor ) {
 	const materialSideOptions = {
 		0: 'Front',
 		1: 'Back',
-		2: 'Double'
+		2: 'Double',
+		3: 'TwoPassDouble'
 	};
 
 	const materialSide = new SidebarMaterialConstantProperty( editor, 'side', strings.getKey( 'sidebar/material/side' ), materialSideOptions );

src/constants.js

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

src/objects/Mesh.js

@@ -5,7 +5,7 @@ import { Ray } from '../math/Ray.js';
 import { Matrix4 } from '../math/Matrix4.js';
 import { Object3D } from '../core/Object3D.js';
 import { Triangle } from '../math/Triangle.js';
-import { DoubleSide, BackSide } from '../constants.js';
+import { BackSide, FrontSide } from '../constants.js';
 import { MeshBasicMaterial } from '../materials/MeshBasicMaterial.js';
 import { BufferGeometry } from '../core/BufferGeometry.js';
 
@@ -276,7 +276,7 @@ function checkIntersection( object, material, raycaster, ray, pA, pB, pC, point
 
 	} else {
 
-		intersect = ray.intersectTriangle( pA, pB, pC, material.side !== DoubleSide, point );
+		intersect = ray.intersectTriangle( pA, pB, pC, ( material.side === FrontSide ), point );
 
 	}
 

src/renderers/WebGLRenderer.js

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