WebGLMultipleRenderTargets: Add multisampling support. #24001

RenaudRohlinger · 2022-05-03T10:15:07Z

Description

Added multisampling support for WebGLMultipleRenderTargets.

Example (build is included in order to run the example):

This contribution is funded by Utsubo

[WebGLMultipleRenderTarget] Support Multisampling clean bufferattributes code clean bufferattributes code

CodyJasonBennett · 2022-05-03T16:36:19Z

Live link: https://rawcdn.githack.com/mrdoob/three.js/cdb312b1dd45f182306b82daa3ff065a6d456fa6/examples/index.html#webgl2_multiple_rendertargets_multisampled

CodyJasonBennett · 2022-05-03T16:53:18Z

examples/webgl2_multiple_rendertargets_multisampled.html

+				renderTarget.depthTexture = new THREE.DepthTexture( 512, 512 );
+				renderTarget.depthTexture.type = THREE.FloatType;


I don't see this used in the example anywhere. Just testing depth/stencil attachments?

When using MRT in threejs that is the only way to get a proper depth buffer, otherwise you will get weird behaviors when two geometries overlap 🤷

CodyJasonBennett · 2022-05-03T17:01:08Z

Can also reproduce the black screen issue on iOS, but if you toggle multisampling off/on again, you can see that the textures aren't correctly re-populated via blit.

This isn't present in my previous WebGL 2 example (#23300 (comment)), so we must be going wrong somewhere.

src/renderers/webgl/WebGLTextures.js

Mugen87 · 2022-05-04T08:56:38Z

I wonder why the E2E test fails. The screenshot in the PR looks as expected...

Mugen87 · 2022-05-04T08:57:23Z

Ideally, this PR is also tested on a Oculus Quest 2 since it affects its multisampling code path.

RenaudRohlinger · 2022-05-05T00:49:44Z

I wonder why the E2E test fails. The screenshot in the PR looks as expected...

Ah, maybe it's because I pushed two different versions of the screenshot? "ERROR! Diff wrong in 0.521 of pixels in file: webgl2_multiple_rendertargets_multisampled"

EDIT: Seems to be fixed

src/renderers/webgl/WebGLTextures.js

CodyJasonBennett · 2022-05-05T06:37:26Z

Ran through the WebXR examples (ball shooter, hands, layers) on my Quest 2 without issue.

Issues in iOS Safari are still evident. Tried digging locally and everything looks correct as far as the changes. Notably, textures appear to retain color passed to gl.clearBufferfv before calling gl.blitFramebuffer.

RenaudRohlinger · 2022-05-05T07:01:25Z

We tried with WebXR and I can confirm that everything seems to work fine.

Issues in iOS Safari are still evident. Tried digging locally and everything looks correct as far as the changes. Notably, textures appear to retain color passed to gl.clearBufferfv before calling gl.blitFramebuffer.

@CodyJasonBennett Are you sure that it is correctly working on your example and just a fortunate configuration? I wonder if you try to add a loop or a slightly more complex setup.

I would suspect a Metal WebGL issue.

CodyJasonBennett · 2022-05-05T07:27:07Z

I've tried toggling mipmaps and disabling everything that didn't deal with color attachments to compare with the blit method here https://gist.github.com/CodyJasonBennett/edbc4372d3c9a921ebc3e46cb5899ba8. Both this and the simplified demo appear to work.

I'm not sure how to verify whether the multi-sampled render buffers are populated after render either, but I found it peculiar that they seemingly have no color output (blit appears to be copying everything correctly).

Mugen87 · 2022-05-05T09:14:20Z

Tested the PR a bit more on a Pixel 4a and macOS. Looking good so far 👍 .

I have currently no iOS device at hand so I can't investigate the mentioned black screen.

Mugen87 · 2022-05-06T07:40:01Z

I wonder what would be the real fix in WebGL?

If it's possible to reproduce the issue with a plain, minimalistic WebGL example (so without three.js), one could report the issue at the WebKit bugtracker.

BTW: An example with three.js would maybe work, too. Sometimes it is just easier for the browser devs to have a stripped-down test with no dependencies.

RenaudRohlinger · 2022-05-06T07:51:47Z

@Mugen87 I see, I will try to make a basic reproduction another time and submit it to WebKit bugtracker. In my opinion, this PR is now ready to merge. CI is ok, it does not change the previous behavior for MSAA anymore and works on all recent browsers 👍

Mugen87 · 2022-05-06T07:52:46Z

Great! Can you then please remove the build files from the PR?

RenaudRohlinger · 2022-05-06T07:57:46Z

Done!

Create `DepthTexture` without parameters.

ligaofeng0901 · 2022-05-09T03:37:23Z

cool! The demo looks good

ligaofeng0901 · 2022-05-22T03:33:07Z

Can this pr be merged in r141? Or there is something else to do?

RenaudRohlinger · 2022-05-23T15:21:09Z

@ligaofeng0901 In my opinion everything is ready to be merged and this PR does not introduce any change except enhancement. In our company, we've been using it in production for 2 weeks and had no issues reported 👍

mrdoob · 2022-05-25T10:08:31Z

Thanks!

marcofugaro · 2022-05-26T12:47:55Z

Is it me or the MRT + multisample example is way laggier now? Even with samples set to 1.

https://raw.githack.com/mrdoob/three.js/764cf0fa5919e891bc259253e0464dc8033d5fcd/examples/webgl2_multiple_rendertargets.html

RenaudRohlinger · 2022-05-26T14:54:32Z

I used stencil buffer instead of a float depth texture to have a more precise quality. Using back float depth texture might be the solution 🤔

RenaudRohlinger · 2022-05-27T00:48:59Z

@marcofugaro Maybe the previous version that was using temporary FBO dedicated for the MRT Multisample was better? The new one was introduced to prevent the usage of temporary FBO but might be heavier indeed.3ba011d#diff-6bdac4da85be606f09e2ab24b41c761b23ced0d9acaa720e2f2200d938a714e9R1745-R1759

@CodyJasonBennett

RenaudRohlinger · 2022-08-11T17:22:54Z

@jcyuan You should try THREE.FloatType for the depthTexture. Also I'm not sure stencil will work, better disable stencilBuffer if possible.

jcyuan · 2022-08-11T18:35:52Z

@jcyuan You should try THREE.FloatType for the depthTexture. Also I'm not sure stencil will work, better disable stencilBuffer if possible.

solved! it was a mistake by re-use FBOs, i created 2 FBOs for 4 RTs.
really sorry, and thanks so much for your help!

* setUsage does not update attributes after the buffer is created * check is not necessary in the buffer creation * clean code * prevent unnecessary double buffer update * fix lint * [WebGLMultipleRenderTarget] Support Multisampling [WebGLMultipleRenderTarget] Support Multisampling clean bufferattributes code clean bufferattributes code * removed unused code * added build for tests * pupeeter screenshot * better example * resets the active FBO back to the multisampled FBO after blitting. * lint * use mask instead of COLOR_BUFFER_BIT * Update webgl2_multiple_rendertargets_multisampled.html * wip fix safari * removed use of temporary buffers and fix safari and ios example * fix lint * fix pupeeter example? * prevent unecessary fbo creation for non-mrt * fix * fix puppeeter rendering black screenshot * remove build * Update webgl2_multiple_rendertargets_multisampled.html Create `DepthTexture` without parameters. * remove unecessary framebuffer render and texture instructions * example: usage of stencil buffer instead of depth texture Co-authored-by: Michael Herzog <[email protected]>

prophetw · 2023-07-25T08:09:04Z

OMG So amazing! Any document about this implement? Confused Why ？ @RenaudRohlinger

RenaudRohlinger · 2023-07-25T09:52:17Z

@prophetw Just like a WebGLRenderTarget you have to use the samples property:

renderTarget = new THREE.WebGLMultipleRenderTargets(
	window.innerWidth * window.devicePixelRatio,
	window.innerHeight * window.devicePixelRatio,
	2,
	{
	  samples: 4
	}
);

// or renderTarget.samples = 4

Here the official example:
https://threejs.org/examples/?q=mrt#webgl2_multiple_rendertargets

arminheller · 2023-07-26T20:16:31Z

I will cancel with pleasure

…

On Tue, Jul 25, 2023 at 11:41 AM Prophet ***@***.***> wrote: OMG So amazing! Any document about this implement? Confused Why ？ @RenaudRohlinger <https://github.com/RenaudRohlinger> — Reply to this email directly, view it on GitHub <#24001 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BBMJAQSWUHNGUGXZPGPENYLXR55SPANCNFSM5U6O4ABA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

prophetw · 2023-07-27T01:49:14Z

I investigated MSAA MRT FBO, and got a result that WebGL2 may only support one Color_ATTACHMENT copy(blitFramebuffer).
But after see this commit, it makes me feel what!!!!! Curious about the WebGL blitFramebuffer copy part why write like that.

prophetw · 2023-07-27T02:14:49Z

And i found a issue
MSAA performance drop with depth-stencil blit
https://groups.google.com/g/webgl-dev-list/c/iwIYWPPJwoQ

CodyJasonBennett · 2023-07-27T02:16:23Z

See #26143. This only affects D3Dx via ANGLE which is software emulated here.

RenaudRohlinger added 7 commits April 28, 2022 11:40

setUsage does not update attributes after the buffer is created

9e9b16b

check is not necessary in the buffer creation

80097c5

clean code

9ed32bf

prevent unnecessary double buffer update

c38ecde

fix lint

13b1ff3

Merge branch 'mrdoob:dev' into dev

e4ecf73

[WebGLMultipleRenderTarget] Support Multisampling

ded9004

[WebGLMultipleRenderTarget] Support Multisampling clean bufferattributes code clean bufferattributes code

RenaudRohlinger force-pushed the mrt-msaa branch from 63a9214 to ded9004 Compare May 3, 2022 10:35

RenaudRohlinger added 4 commits May 3, 2022 20:42

removed unused code

f609b06

added build for tests

0094629

pupeeter screenshot

9279469

better example

66f6345

CodyJasonBennett reviewed May 3, 2022

View reviewed changes

Mugen87 reviewed May 4, 2022

View reviewed changes

src/renderers/webgl/WebGLTextures.js Outdated Show resolved Hide resolved

Mugen87 reviewed May 4, 2022

View reviewed changes

src/renderers/webgl/WebGLTextures.js Show resolved Hide resolved

RenaudRohlinger added 3 commits May 5, 2022 09:57

resets the active FBO back to the multisampled FBO after blitting.

d001f2b

lint

0dd797d

use mask instead of COLOR_BUFFER_BIT

d6185e4

CodyJasonBennett reviewed May 5, 2022

View reviewed changes

src/renderers/webgl/WebGLTextures.js Outdated Show resolved Hide resolved

Update webgl2_multiple_rendertargets_multisampled.html

2911b9f

Mugen87 changed the title ~~[WebGLMultipleRenderTargets] Supports multisampling~~ WebGLMultipleRenderTargets: Add multisampling support. May 5, 2022

fix puppeeter rendering black screenshot

cdb312b

RenaudRohlinger requested a review from Mugen87 May 6, 2022 07:52

remove build

081dd25

Update webgl2_multiple_rendertargets_multisampled.html

9da967e

Create `DepthTexture` without parameters.

Mugen87 approved these changes May 6, 2022

View reviewed changes

CodyJasonBennett mentioned this pull request May 7, 2022

Outline & SelectiveBloom over-lapping meshes pmndrs/react-postprocessing#124

Open

remove unecessary framebuffer render and texture instructions

964e0de

RenaudRohlinger added 2 commits May 25, 2022 08:58

Merge remote-tracking branch 'upstream/dev' into mrt-msaa

d8b797b

example: usage of stencil buffer instead of depth texture

a440215

mrdoob merged commit 714a21b into mrdoob:dev May 25, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WebGLMultipleRenderTargets: Add multisampling support. #24001

WebGLMultipleRenderTargets: Add multisampling support. #24001

RenaudRohlinger commented May 3, 2022 •

edited

Loading

CodyJasonBennett commented May 3, 2022 •

edited

Loading

CodyJasonBennett May 3, 2022 •

edited

Loading

RenaudRohlinger May 3, 2022

CodyJasonBennett commented May 3, 2022 •

edited

Loading

Mugen87 commented May 4, 2022

Mugen87 commented May 4, 2022 •

edited

Loading

RenaudRohlinger commented May 5, 2022 •

edited

Loading

CodyJasonBennett commented May 5, 2022

RenaudRohlinger commented May 5, 2022

CodyJasonBennett commented May 5, 2022 •

edited

Loading

Mugen87 commented May 5, 2022 •

edited

Loading

Mugen87 commented May 6, 2022 •

edited

Loading

RenaudRohlinger commented May 6, 2022

Mugen87 commented May 6, 2022

RenaudRohlinger commented May 6, 2022

ligaofeng0901 commented May 9, 2022

ligaofeng0901 commented May 22, 2022 •

edited

Loading

RenaudRohlinger commented May 23, 2022

mrdoob commented May 25, 2022

marcofugaro commented May 26, 2022

RenaudRohlinger commented May 26, 2022

RenaudRohlinger commented May 27, 2022

RenaudRohlinger commented Aug 11, 2022

jcyuan commented Aug 11, 2022

prophetw commented Jul 25, 2023

RenaudRohlinger commented Jul 25, 2023

arminheller commented Jul 26, 2023 via email

prophetw commented Jul 27, 2023

prophetw commented Jul 27, 2023

CodyJasonBennett commented Jul 27, 2023 •

edited

Loading

		renderTarget.depthTexture = new THREE.DepthTexture( 512, 512 );
		renderTarget.depthTexture.type = THREE.FloatType;

WebGLMultipleRenderTargets: Add multisampling support. #24001

WebGLMultipleRenderTargets: Add multisampling support. #24001

Conversation

RenaudRohlinger commented May 3, 2022 • edited Loading

CodyJasonBennett commented May 3, 2022 • edited Loading

CodyJasonBennett May 3, 2022 • edited Loading

Choose a reason for hiding this comment

RenaudRohlinger May 3, 2022

Choose a reason for hiding this comment

CodyJasonBennett commented May 3, 2022 • edited Loading

Mugen87 commented May 4, 2022

Mugen87 commented May 4, 2022 • edited Loading

RenaudRohlinger commented May 5, 2022 • edited Loading

CodyJasonBennett commented May 5, 2022

RenaudRohlinger commented May 5, 2022

CodyJasonBennett commented May 5, 2022 • edited Loading

Mugen87 commented May 5, 2022 • edited Loading

Mugen87 commented May 6, 2022 • edited Loading

RenaudRohlinger commented May 6, 2022

Mugen87 commented May 6, 2022

RenaudRohlinger commented May 6, 2022

ligaofeng0901 commented May 9, 2022

ligaofeng0901 commented May 22, 2022 • edited Loading

RenaudRohlinger commented May 23, 2022

mrdoob commented May 25, 2022

marcofugaro commented May 26, 2022

RenaudRohlinger commented May 26, 2022

RenaudRohlinger commented May 27, 2022

RenaudRohlinger commented Aug 11, 2022

jcyuan commented Aug 11, 2022

prophetw commented Jul 25, 2023

RenaudRohlinger commented Jul 25, 2023

arminheller commented Jul 26, 2023 via email

prophetw commented Jul 27, 2023

prophetw commented Jul 27, 2023

CodyJasonBennett commented Jul 27, 2023 • edited Loading

RenaudRohlinger commented May 3, 2022 •

edited

Loading

CodyJasonBennett commented May 3, 2022 •

edited

Loading

CodyJasonBennett May 3, 2022 •

edited

Loading

CodyJasonBennett commented May 3, 2022 •

edited

Loading

Mugen87 commented May 4, 2022 •

edited

Loading

RenaudRohlinger commented May 5, 2022 •

edited

Loading

CodyJasonBennett commented May 5, 2022 •

edited

Loading

Mugen87 commented May 5, 2022 •

edited

Loading

Mugen87 commented May 6, 2022 •

edited

Loading

ligaofeng0901 commented May 22, 2022 •

edited

Loading

CodyJasonBennett commented Jul 27, 2023 •

edited

Loading