WebGLRenderer: Support custom painter sort functions.

docs/api/en/renderers/WebGLRenderer.html

@@ -471,6 +471,16 @@ <h3>[method:null setScissorTest]( [param:Boolean boolean] )</h3>
 			scissor area will be affected by further renderer actions.
 		</p>
 
+		<h3>[method:null setOpaqueSort]( [param:Function method] )</h3>
+		<p>
+		Sets the costum opaque sort function for the WebGLRenderLists. Pass null to use the default painterSortStable function.
+		</p>
+
+		<h3>[method:null setTransparentSort]( [param:Function method] )</h3>
+		<p>
+		Sets the costum transparent sort function for the WebGLRenderLists. Pass null to use the default reversePainterSortStable function. In some cases the transparent materials sort may get rendered in the wrong order. This issue may cause materials to rendere behind other materials instead of the front of them and vice versa.
+		</p>
+
 		<h3>[method:null setSize]( [param:Integer width], [param:Integer height], [param:Boolean updateStyle] )</h3>
 		<p>
 		Resizes the output canvas to (width, height) with device pixel ratio taken into account,

src/renderers/WebGLRenderer.d.ts

@@ -258,6 +258,16 @@ export class WebGLRenderer implements Renderer {
 	 */
 	setScissorTest( enable: boolean ): void;
 
+	/**
+	 * Sets the costum opaque sort function for the WebGLRenderLists. Pass null to use the default painterSortStable function.
+	 */
+	setOpaqueSort( method: Function ): void;
+
+	/**
+	 * Sets the costum transparent sort function for the WebGLRenderLists. Pass null to use the default reversePainterSortStable function.
+	 */
+	setTransparentSort( method: Function ): void;
+
 	/**
 	 * Returns a THREE.Color instance with the current clear color.
 	 */

src/renderers/WebGLRenderer.js

@@ -253,6 +253,8 @@ function WebGLRenderer( parameters ) {
 
 	var background, morphtargets, bufferRenderer, indexedBufferRenderer;
 
+	var opaqueSort, transparentSort;
+
 	var utils;
 
 	function initGLContext() {
@@ -505,6 +507,18 @@ function WebGLRenderer( parameters ) {
 
 	};
 
+	this.setOpaqueSort = function ( method ) {
+
+		opaqueSort = typeof method === 'function' ? method : null;
+
+	};
+
+	this.setTransparentSort = function ( method ) {
+
+		transparentSort = typeof method === 'function' ? method : null;
+
+	};
+
 	// Clearing
 
 	this.getClearColor = function () {
@@ -1154,7 +1168,7 @@ function WebGLRenderer( parameters ) {
 
 		if ( _this.sortObjects === true ) {
 
-			currentRenderList.sort();
+			currentRenderList.sort( opaqueSort, transparentSort );
 
 		}
 

src/renderers/webgl/WebGLRenderLists.js

@@ -130,10 +130,10 @@ function WebGLRenderList() {
 
 	}
 
-	function sort() {
+	function sort( costumOpaqueSort, costumTransparentSort ) {
 
-		if ( opaque.length > 1 ) opaque.sort( painterSortStable );
-		if ( transparent.length > 1 ) transparent.sort( reversePainterSortStable );
+		if ( opaque.length > 1 ) opaque.sort( costumOpaqueSort || painterSortStable );
+		if ( transparent.length > 1 ) transparent.sort( costumTransparentSort || reversePainterSortStable );
 
 	}