Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
May 22, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c95ea92
update rendertarget setup logic
gkjohnson May 22, 2024
4a441ad
rearrange
gkjohnson May 22, 2024
c250937
simplification
gkjohnson May 22, 2024
d8a347b
More variable sharing
gkjohnson May 22, 2024
8439146
More simplification
gkjohnson May 22, 2024
2881478
Support other depth attachment types
gkjohnson May 22, 2024
cb3b9fc
Updates
gkjohnson May 22, 2024
c4826b8
fix internal depth buffer target
gkjohnson May 22, 2024
ea0316b
reduce code redundancy
gkjohnson May 22, 2024
4c76d98
Update example
gkjohnson May 22, 2024
1fc4fa9
Update docs
gkjohnson May 22, 2024
6378078
Add 248 type support
gkjohnson May 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions docs/api/en/textures/DepthTexture.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,7 @@ <h3>

[page:Number height] -- height of the texture.<br />

[page:Constant type] -- Default is [page:Textures THREE.UnsignedIntType]
when using [page:Textures DepthFormat] and [page:Textures THREE.UnsignedInt248Type]
when using [page:Textures DepthStencilFormat].
See [page:Textures type constants] for other choices.<br />
[page:Constant type] -- Default is [page:Textures THREE.UnsignedIntType]. See [page:DepthTexture DepthTexture.type] for other choices.<br />

[page:Constant mapping] -- See [page:Textures mapping mode constants] for
details.<br />
Expand Down Expand Up @@ -87,10 +84,14 @@ <h3>[page:Texture.format format]</h3>

<h3>[page:Texture.type type]</h3>
<p>
Default is [page:Textures THREE.UnsignedIntType] when using [page:Textures DepthFormat]
and [page:Textures THREE.UnsignedInt248Type] when using
[page:Textures DepthStencilFormat]. See [page:Textures format constants]
for details.<br />
Default is [page:Textures THREE.UnsignedIntType]. The following are options and how they map to internal
gl depth format types depending on the stencil format, as well:

[page:Textures THREE.UnsignedIntType] -- Uses DEPTH_COMPONENT24 or DEPTH24_STENCIL8 internally.<br />

[page:Textures THREE.FloatType] -- Uses DEPTH_COMPONENT32F or DEPTH32F_STENCIL8 internally.<br />

[page:Textures THREE.UnsignedShortType] -- Uses DEPTH_COMPONENT16 internally. Stencil buffer is unsupported when using this type.<br />
</p>

<h3>[page:Texture.magFilter magFilter]</h3>
Expand Down
16 changes: 11 additions & 5 deletions examples/webgl_depth_texture.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,11 +86,12 @@

const params = {
format: THREE.DepthFormat,
type: THREE.UnsignedShortType
type: THREE.UnsignedShortType,
samples: 0,
};

const formats = { DepthFormat: THREE.DepthFormat, DepthStencilFormat: THREE.DepthStencilFormat };
const types = { UnsignedShortType: THREE.UnsignedShortType, UnsignedIntType: THREE.UnsignedIntType, UnsignedInt248Type: THREE.UnsignedInt248Type };
const types = { UnsignedShortType: THREE.UnsignedShortType, UnsignedIntType: THREE.UnsignedIntType, FloatType: THREE.FloatType };

init();

Expand Down Expand Up @@ -130,6 +131,7 @@

gui.add( params, 'format', formats ).onChange( setupRenderTarget );
gui.add( params, 'type', types ).onChange( setupRenderTarget );
gui.add( params, 'samples', 0, 16, 1 ).onChange( setupRenderTarget );
gui.open();

}
Expand All @@ -138,13 +140,17 @@

if ( target ) target.dispose();

const format = parseFloat( params.format );
const type = parseFloat( params.type );
const format = parseInt( params.format );
const type = parseInt( params.type );
const samples = parseInt( params.samples );

target = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
const dpr = renderer.getPixelRatio();
target = new THREE.WebGLRenderTarget( window.innerWidth * dpr, window.innerHeight * dpr );
target.texture.minFilter = THREE.NearestFilter;
target.texture.magFilter = THREE.NearestFilter;
target.stencilBuffer = ( format === THREE.DepthStencilFormat ) ? true : false;
target.samples = samples;

target.depthTexture = new THREE.DepthTexture();
target.depthTexture.format = format;
target.depthTexture.type = type;
Expand Down
127 changes: 58 additions & 69 deletions src/renderers/webgl/WebGLTextures.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { LinearFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, NearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, RGBAFormat, DepthFormat, DepthStencilFormat, UnsignedIntType, UnsignedInt248Type, FloatType, MirroredRepeatWrapping, ClampToEdgeWrapping, RepeatWrapping, UnsignedByteType, NoColorSpace, LinearSRGBColorSpace, NeverCompare, AlwaysCompare, LessCompare, LessEqualCompare, EqualCompare, GreaterEqualCompare, GreaterCompare, NotEqualCompare, SRGBTransfer, LinearTransfer } from '../../constants.js';
import { LinearFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, NearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, RGBAFormat, DepthFormat, DepthStencilFormat, UnsignedIntType, FloatType, MirroredRepeatWrapping, ClampToEdgeWrapping, RepeatWrapping, UnsignedByteType, NoColorSpace, LinearSRGBColorSpace, NeverCompare, AlwaysCompare, LessCompare, LessEqualCompare, EqualCompare, GreaterEqualCompare, GreaterCompare, NotEqualCompare, SRGBTransfer, LinearTransfer, UnsignedShortType, UnsignedInt248Type } from '../../constants.js';
import { createElementNS } from '../../utils.js';
import { ColorManagement } from '../../math/ColorManagement.js';
import { Vector2 } from '../../math/Vector2.js';
Expand Down Expand Up @@ -196,6 +196,48 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,

}

function getInternalDepthFormat( useStencil, depthType ) {

let glInternalFormat;
if ( useStencil ) {

if ( depthType === null || depthType === UnsignedIntType || depthType === UnsignedInt248Type ) {

glInternalFormat = _gl.DEPTH24_STENCIL8;

} else if ( depthType === FloatType ) {

glInternalFormat = _gl.DEPTH32F_STENCIL8;

} else if ( depthType === UnsignedShortType ) {

glInternalFormat = _gl.DEPTH24_STENCIL8;
console.warn( 'DepthTexture: 16 bit depth attachment is not supported with stencil. Using 24-bit attachment.' );

}

} else {

if ( depthType === null || depthType === UnsignedIntType || depthType === UnsignedInt248Type ) {

glInternalFormat = _gl.DEPTH_COMPONENT24;

} else if ( depthType === FloatType ) {

glInternalFormat = _gl.DEPTH_COMPONENT32F;

} else if ( depthType === UnsignedShortType ) {

glInternalFormat = _gl.DEPTH_COMPONENT16;

}

}

return glInternalFormat;

}

function getMipLevels( texture, image ) {

if ( textureNeedsGenerateMipmaps( texture ) === true || ( texture.isFramebufferTexture && texture.minFilter !== NearestFilter && texture.minFilter !== LinearFilter ) ) {
Expand Down Expand Up @@ -710,23 +752,7 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,

if ( texture.isDepthTexture ) {

// populate depth texture with dummy data

glInternalFormat = _gl.DEPTH_COMPONENT16;

if ( texture.type === FloatType ) {

glInternalFormat = _gl.DEPTH_COMPONENT32F;

} else if ( texture.type === UnsignedIntType ) {

glInternalFormat = _gl.DEPTH_COMPONENT24;

} else if ( texture.type === UnsignedInt248Type ) {

glInternalFormat = _gl.DEPTH24_STENCIL8;

}
glInternalFormat = getInternalDepthFormat( texture.format === DepthStencilFormat, texture.type );

//

Expand Down Expand Up @@ -1433,74 +1459,37 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,

}


// Setup storage for internal depth/stencil buffers and bind to correct framebuffer
function setupRenderBufferStorage( renderbuffer, renderTarget, isMultisample ) {

_gl.bindRenderbuffer( _gl.RENDERBUFFER, renderbuffer );

if ( renderTarget.depthBuffer && ! renderTarget.stencilBuffer ) {

let glInternalFormat = _gl.DEPTH_COMPONENT24;

if ( isMultisample || useMultisampledRTT( renderTarget ) ) {
Copy link
Collaborator

@Mugen87 Mugen87 May 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Collaborator Author

@gkjohnson gkjohnson May 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

@Mugen87 Mugen87 May 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good! I definitely prefer the PRs approach.


const depthTexture = renderTarget.depthTexture;

if ( depthTexture && depthTexture.isDepthTexture ) {

if ( depthTexture.type === FloatType ) {

glInternalFormat = _gl.DEPTH_COMPONENT32F;

} else if ( depthTexture.type === UnsignedIntType ) {

glInternalFormat = _gl.DEPTH_COMPONENT24;

}

}

const samples = getRenderTargetSamples( 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 );

}

_gl.framebufferRenderbuffer( _gl.FRAMEBUFFER, _gl.DEPTH_ATTACHMENT, _gl.RENDERBUFFER, renderbuffer );
if ( renderTarget.depthBuffer ) {

} else if ( renderTarget.depthBuffer && renderTarget.stencilBuffer ) {
// retrieve the depth attachment types
const depthTexture = renderTarget.depthTexture;
const depthType = depthTexture && depthTexture.isDepthTexture ? depthTexture.type : null;
const glInternalFormat = getInternalDepthFormat( renderTarget.stencilBuffer, depthType );
const glAttachmentType = renderTarget.stencilBuffer ? _gl.DEPTH_STENCIL_ATTACHMENT : _gl.DEPTH_ATTACHMENT;

// set up the attachment
const samples = getRenderTargetSamples( renderTarget );
const isUseMultisampledRTT = useMultisampledRTT( renderTarget );
if ( isUseMultisampledRTT ) {

if ( isMultisample && useMultisampledRTT( renderTarget ) === false ) {

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

} else if ( useMultisampledRTT( renderTarget ) ) {
} else if ( isMultisample ) {

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

} else {

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

}


_gl.framebufferRenderbuffer( _gl.FRAMEBUFFER, _gl.DEPTH_STENCIL_ATTACHMENT, _gl.RENDERBUFFER, renderbuffer );
_gl.framebufferRenderbuffer( _gl.FRAMEBUFFER, glAttachmentType, _gl.RENDERBUFFER, renderbuffer );

} else {

Expand Down