DepthTexture: Update depth + stencil textures to work with multi sample RTT, make formats consistent

[gkjohnson]

Related issue: --

Description

I expect this hasn't been touched much since WebGL has been removed but there were a few issues I noticed with DepthTextures when I was experimenting with them for #28423:

• A stencil attachment could not be used with a 32F depth type.
• A stencil attachment could not be used when a multi sample render target is used.
• Using a stencil format didn't work at all unless using UnsignedInt248 type

You can see in the current depth texture example that using a stencil buffer breaks the page. With this PR:

• DepthTexture.type is allowed to be set to FloatType, UnsignedIntType, and UnsignedShortType. If a stencil attachment is required then the appropriate internal type is selected. Stencil is unsupported for UnsignedShortType. The UnsignedInt248Type remains for backwards compatibility and does the same as UnsignedIntType.
• The internal depth attachment for the multi sample textures is now created with the same format as the assigned depth texture.
• Code redundancy has been reduced in WebGLTextures.
• The depth texture demo has been modified to test all the new options including render target samples option.

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

Filesize dev	Filesize PR	Diff
679.8 kB (168.5 kB)	679.6 kB (168.5 kB)	-203 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

Filesize dev	Filesize PR	Diff
457.7 kB (110.5 kB)	457.5 kB (110.6 kB)	-189 B

[Mugen87]

I'm not sure why the if checks were different in the renderTarget.depthBuffer && ! renderTarget.stencilBuffer branch compared to renderTarget.depthBuffer && renderTarget.stencilBuffer. Why did you choose the below pattern?

if ( isUseMultisampledRTT ) {

	multisampledRTTExt.renderbufferStorageMultisampleEXT( _gl.RENDERBUFFER, samples, glInternalFormat, renderTarget.width, renderTarget.height );

} else if ( isMultisample ) {

	_gl.renderbufferStorageMultisample( _gl.RENDERBUFFER, samples, glInternalFormat, renderTarget.width, renderTarget.height );

} else {

	_gl.renderbufferStorage( _gl.RENDERBUFFER, glInternalFormat, renderTarget.width, renderTarget.height );

}

and not this one:

if ( isMultisample || useMultisampledRTT( renderTarget ) ) {

	if ( useMultisampledRTT( renderTarget ) ) {

		multisampledRTTExt.renderbufferStorageMultisampleEXT( _gl.RENDERBUFFER, samples, glInternalFormat, renderTarget.width, renderTarget.height );

	} else {

		_gl.renderbufferStorageMultisample( _gl.RENDERBUFFER, samples, glInternalFormat, renderTarget.width, renderTarget.height );

	}

} else {

	_gl.renderbufferStorage( _gl.RENDERBUFFER, glInternalFormat, renderTarget.width, renderTarget.height );

}

Are they functional equivalent?

[gkjohnson]

Yup! They're the same. I just thought it was easier to read. We can check using a table to make sure they get into the same branches.

Condition Layout 1

if ( isUseMultisampledRTT ) {

	// Branch A

} else if ( isMultisample ) {

	// Branch B

}

Table

	isUseMultisampledRTT = true	isUseMultisampledRTT = false
isMultisample = true	A	B
isMultisample = false	A	None

Condition Layout 2

if ( isMultisample || isUseMultisampledRTT ) {

	if ( isUseMultisampledRTT ) {

		// Branch A

	} else {

		// Branch B

	}

}

Table

	isUseMultisampledRTT = true	isUseMultisampledRTT = false
isMultisample = true	A	B
isMultisample = false	A	None

Condition Layout 3

if ( isMultisample && isUseMultisampledRTT === false ) {

	// Branch B

} else if ( isUseMultisampledRTT ) {

	// Branch A

}

Table

	isUseMultisampledRTT = true	isUseMultisampledRTT = false
isMultisample = true	A	B
isMultisample = false	A	None

[Mugen87]

Good! I definitely prefer the PRs approach.