Adds support for combined Depth+Stencil Texture (#9368)

* Adds THREE.UnsignedInt248Type and THREE.DepthStencilFormat constants

* Extends DepthTexture to allow for either THREE.DepthFormat or THREE.DepthStencilFormat

* Extends depthTexture initialization to support both DepthTextureFormat and DepthStencilFormat

* Fixes typos

* Ensures correct internal format for DepthStencil textures

* Allows to set depthTexture via options.depthTexture in constructor

src/constants.js

@@ -78,17 +78,19 @@ export var UnsignedShortType = 1012;
 export var IntType = 1013;
 export var UnsignedIntType = 1014;
 export var FloatType = 1015;
-export var HalfFloatType = 1025;
-export var UnsignedShort4444Type = 1016;
-export var UnsignedShort5551Type = 1017;
-export var UnsignedShort565Type = 1018;
-export var AlphaFormat = 1019;
-export var RGBFormat = 1020;
-export var RGBAFormat = 1021;
-export var LuminanceFormat = 1022;
-export var LuminanceAlphaFormat = 1023;
+export var HalfFloatType = 1016;
+export var UnsignedShort4444Type = 1017;
+export var UnsignedShort5551Type = 1018;
+export var UnsignedShort565Type = 1019;
+export var UnsignedInt248Type = 1020;
+export var AlphaFormat = 1021;
+export var RGBFormat = 1022;
+export var RGBAFormat = 1023;
+export var LuminanceFormat = 1024;
+export var LuminanceAlphaFormat = 1025;
 export var RGBEFormat = RGBAFormat;
 export var DepthFormat = 1026;
+export var DepthStencilFormat = 1027;
 export var RGB_S3TC_DXT1_Format = 2001;
 export var RGBA_S3TC_DXT1_Format = 2002;
 export var RGBA_S3TC_DXT3_Format = 2003;

src/renderers/WebGLRenderTarget.js

@@ -35,7 +35,7 @@ function WebGLRenderTarget( width, height, options ) {
 
 	this.depthBuffer = options.depthBuffer !== undefined ? options.depthBuffer : true;
 	this.stencilBuffer = options.stencilBuffer !== undefined ? options.stencilBuffer : true;
-	this.depthTexture = null;
+	this.depthTexture = options.depthTexture !== undefined ? options.depthTexture : null;
 
 };
 

src/renderers/WebGLRenderer.js

@@ -2749,6 +2749,7 @@ function WebGLRenderer( parameters ) {
 		if ( p === LuminanceFormat ) return _gl.LUMINANCE;
 		if ( p === LuminanceAlphaFormat ) return _gl.LUMINANCE_ALPHA;
 		if ( p === DepthFormat ) return _gl.DEPTH_COMPONENT;
+		if ( p === DepthStencilFormat ) return _gl.DEPTH_STENCIL;
 
 		if ( p === AddEquation ) return _gl.FUNC_ADD;
 		if ( p === SubtractEquation ) return _gl.FUNC_SUBTRACT;
@@ -2806,6 +2807,14 @@ function WebGLRenderer( parameters ) {
 
 		}
 
+		extension = extensions.get( 'WEBGL_depth_texture' );
+
+		if ( extension !== null ){
+
+			if ( p === THREE.UnsignedInt248Type ) return extension.UNSIGNED_INT_24_8_WEBGL;
+
+		}
+
 		return 0;
 
 	}

src/renderers/webgl/WebGLTextures.js

@@ -446,6 +446,14 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, paramT
 
 			}
 
+			// Depth stencil textures need the DEPTH_STENCIL internal format
+			// (https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/)
+			if ( texture.format === THREE.DepthStencilFormat ) {
+
+				internalFormat = _gl.DEPTH_STENCIL;
+
+			}
+
 			state.texImage2D( _gl.TEXTURE_2D, 0, internalFormat, image.width, image.height, 0, glFormat, glType, null );
 
 		} else if ( (texture && texture.isDataTexture) ) {
@@ -598,7 +606,20 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, paramT
 		setTexture2D( renderTarget.depthTexture, 0 );
 
 		var webglDepthTexture = properties.get( renderTarget.depthTexture ).__webglTexture;
-		_gl.framebufferTexture2D( _gl.FRAMEBUFFER, _gl.DEPTH_ATTACHMENT, _gl.TEXTURE_2D, webglDepthTexture, 0 );
+
+		if ( renderTarget.depthTexture.format === THREE.DepthFormat ) {
+
+			_gl.framebufferTexture2D( _gl.FRAMEBUFFER, _gl.DEPTH_ATTACHMENT, _gl.TEXTURE_2D, webglDepthTexture, 0 );
+
+		} else if ( renderTarget.depthTexture.format === THREE.DepthStencilFormat ) {
+
+			_gl.framebufferTexture2D( _gl.FRAMEBUFFER, _gl.DEPTH_STENCIL_ATTACHMENT, _gl.TEXTURE_2D, webglDepthTexture, 0 );
+
+		} else {
+
+			throw new Error('Unknown depthTexture format')
+
+		}
 
 	}
 

src/textures/DepthTexture.js

@@ -1,13 +1,22 @@
 import { Texture } from './Texture';
-import { NearestFilter, UnsignedShortType, DepthFormat } from '../constants';
+import { NearestFilter, UnsignedShortType, DepthFormat, DepthStencilFormat } from '../constants';
 
 /**
  * @author Matt DesLauriers / @mattdesl
+ * @author atix / arthursilber.de
  */
 
-function DepthTexture( width, height, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy ) {
+function DepthTexture( width, height, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy, format ) {
 
-  Texture.call( this, null, mapping, wrapS, wrapT, magFilter, minFilter, DepthFormat, type, anisotropy );
+  format = format !== undefined ? format : DepthFormat;
+
+  if ( format !== DepthFormat && format !== DepthStencilFormat ) {
+
+    throw new Error( 'DepthTexture format must be either THREE.DepthFormat or THREE.DepthStencilFormat' )
+
+  }
+
+  Texture.call( this, null, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy );
 
   this.image = { width: width, height: height };
 
@@ -23,7 +32,6 @@ function DepthTexture( width, height, type, mapping, wrapS, wrapT, magFilter, mi
 
 DepthTexture.prototype = Object.create( Texture.prototype );
 DepthTexture.prototype.constructor = DepthTexture;
-
 DepthTexture.prototype.isDepthTexture = true;
 
 export { DepthTexture };