WebGLRenderer: Render doublesided in two calls (#21967)

* WebGLRenderer: Render doublesided in two calls

* Examples: Updated webgl_buffergeometry_instancing screenshot

* WebGLRenderer: Only draw transparent doublesided with two calls.

src/renderers/WebGLRenderer.js

@@ -1,4 +1,7 @@
 import {
+	BackSide,
+	DoubleSide,
+	FrontSide,
 	RGBAFormat,
 	HalfFloatType,
 	FloatType,
@@ -1358,7 +1361,23 @@ function WebGLRenderer( parameters ) {
 
 		} else {
 
-			_this.renderBufferDirect( camera, scene, geometry, material, object, group );
+			if ( material.transparent === true && material.side === DoubleSide ) {
+
+				material.side = BackSide;
+				material.needsUpdate = true;
+				_this.renderBufferDirect( camera, scene, geometry, material, object, group );
+
+				material.side = FrontSide;
+				material.needsUpdate = true;
+				_this.renderBufferDirect( camera, scene, geometry, material, object, group );
+
+				material.side = DoubleSide;
+
+			} else {
+
+				_this.renderBufferDirect( camera, scene, geometry, material, object, group );
+
+			}
 
 		}