Skip to content
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

Jump to bottom

WebGLMultipleRenderTargets: Add multisampling support. #24001

Merged
merged 27 commits into from
May 25, 2022
Merged

WebGLMultipleRenderTargets: Add multisampling support. #24001

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
9e9b16b
setUsage does not update attributes after the buffer is created
RenaudRohlinger Apr 28, 2022
80097c5
check is not necessary in the buffer creation
RenaudRohlinger Apr 28, 2022
9ed32bf
clean code
RenaudRohlinger Apr 28, 2022
c38ecde
prevent unnecessary double buffer update
RenaudRohlinger Apr 28, 2022
13b1ff3
fix lint
RenaudRohlinger Apr 28, 2022
e4ecf73
Merge branch 'mrdoob:dev' into dev
RenaudRohlinger May 3, 2022
ded9004
[WebGLMultipleRenderTarget] Support Multisampling
RenaudRohlinger May 3, 2022
f609b06
removed unused code
RenaudRohlinger May 3, 2022
0094629
added build for tests
RenaudRohlinger May 3, 2022
9279469
pupeeter screenshot
RenaudRohlinger May 3, 2022
66f6345
better example
RenaudRohlinger May 3, 2022
d001f2b
resets the active FBO back to the multisampled FBO after blitting.
RenaudRohlinger May 5, 2022
0dd797d
lint
RenaudRohlinger May 5, 2022
d6185e4
use mask instead of COLOR_BUFFER_BIT
RenaudRohlinger May 5, 2022
2911b9f
Update webgl2_multiple_rendertargets_multisampled.html
Mugen87 May 5, 2022
6784fe6
wip fix safari
RenaudRohlinger May 5, 2022
3ba011d
removed use of temporary buffers and fix safari and ios example
RenaudRohlinger May 6, 2022
c807a65
fix lint
RenaudRohlinger May 6, 2022
2144d87
fix pupeeter example?
RenaudRohlinger May 6, 2022
d9ab6ec
prevent unecessary fbo creation for non-mrt
RenaudRohlinger May 6, 2022
ba7f770
fix
RenaudRohlinger May 6, 2022
cdb312b
fix puppeeter rendering black screenshot
RenaudRohlinger May 6, 2022
081dd25
remove build
RenaudRohlinger May 6, 2022
9da967e
Update webgl2_multiple_rendertargets_multisampled.html
Mugen87 May 6, 2022
964e0de
remove unecessary framebuffer render and texture instructions
RenaudRohlinger May 10, 2022
d8b797b
Merge remote-tracking branch 'upstream/dev' into mrt-msaa
RenaudRohlinger May 24, 2022
a440215
example: usage of stencil buffer instead of depth texture
RenaudRohlinger May 25, 2022
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
89 changes: 59 additions & 30 deletions build/three.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16792,7 +16792,15 @@ function WebGLTextures(_gl, extensions, state, properties, capabilities, utils,

if (renderTargetProperties.__webglDepthbuffer) _gl.deleteRenderbuffer(renderTargetProperties.__webglDepthbuffer);
if (renderTargetProperties.__webglMultisampledFramebuffer) _gl.deleteFramebuffer(renderTargetProperties.__webglMultisampledFramebuffer);
if (renderTargetProperties.__webglColorRenderbuffer) _gl.deleteRenderbuffer(renderTargetProperties.__webglColorRenderbuffer);
if (renderTargetProperties.__webglMultisampledTempWrite) _gl.deleteFramebuffer(renderTargetProperties.__webglMultisampledTempWrite);
if (renderTargetProperties.__webglMultisampledTempRead) _gl.deleteFramebuffer(renderTargetProperties.__webglMultisampledTempRead);

if (renderTargetProperties.__webglColorRenderbuffer) {
for (let i = 0; i < renderTargetProperties.__webglColorRenderbuffer.length; i++) {
if (renderTargetProperties.__webglColorRenderbuffer[i]) _gl.deleteRenderbuffer(renderTargetProperties.__webglColorRenderbuffer[i]);
}
}

if (renderTargetProperties.__webglDepthRenderbuffer) _gl.deleteRenderbuffer(renderTargetProperties.__webglDepthRenderbuffer);
}

Expand Down Expand Up @@ -17596,22 +17604,31 @@ function WebGLTextures(_gl, extensions, state, properties, capabilities, utils,
} else {
console.warn('THREE.WebGLRenderer: WebGLMultipleRenderTargets can only be used with WebGL2 or WEBGL_draw_buffers extension.');
}
} else if (isWebGL2 && renderTarget.samples > 0 && useMultisampledRTT(renderTarget) === false) {
}

if (isWebGL2 && renderTarget.samples > 0 && useMultisampledRTT(renderTarget) === false) {
const textures = isMultipleRenderTargets ? texture : [texture];
renderTargetProperties.__webglMultisampledFramebuffer = _gl.createFramebuffer();
renderTargetProperties.__webglColorRenderbuffer = _gl.createRenderbuffer();
renderTargetProperties.__webglMultisampledTempRead = _gl.createFramebuffer();
renderTargetProperties.__webglMultisampledTempWrite = _gl.createFramebuffer();
renderTargetProperties.__webglColorRenderbuffer = [];
state.bindFramebuffer(_gl.FRAMEBUFFER, renderTargetProperties.__webglMultisampledFramebuffer);

_gl.bindRenderbuffer(_gl.RENDERBUFFER, renderTargetProperties.__webglColorRenderbuffer);
for (let i = 0; i < textures.length; i++) {
const texture = textures[i];
renderTargetProperties.__webglColorRenderbuffer[i] = _gl.createRenderbuffer();

const glFormat = utils.convert(texture.format, texture.encoding);
const glType = utils.convert(texture.type);
const glInternalFormat = getInternalFormat(texture.internalFormat, glFormat, glType, texture.encoding);
const samples = getRenderTargetSamples(renderTarget);
_gl.bindRenderbuffer(_gl.RENDERBUFFER, renderTargetProperties.__webglColorRenderbuffer[i]);

_gl.renderbufferStorageMultisample(_gl.RENDERBUFFER, samples, glInternalFormat, renderTarget.width, renderTarget.height);
const glFormat = utils.convert(texture.format, texture.encoding);
const glType = utils.convert(texture.type);
const glInternalFormat = getInternalFormat(texture.internalFormat, glFormat, glType, texture.encoding);
const samples = getRenderTargetSamples(renderTarget);

state.bindFramebuffer(_gl.FRAMEBUFFER, renderTargetProperties.__webglMultisampledFramebuffer);
_gl.renderbufferStorageMultisample(_gl.RENDERBUFFER, samples, glInternalFormat, renderTarget.width, renderTarget.height);

_gl.framebufferRenderbuffer(_gl.FRAMEBUFFER, _gl.COLOR_ATTACHMENT0, _gl.RENDERBUFFER, renderTargetProperties.__webglColorRenderbuffer);
_gl.framebufferRenderbuffer(_gl.FRAMEBUFFER, _gl.COLOR_ATTACHMENT0 + i, _gl.RENDERBUFFER, renderTargetProperties.__webglColorRenderbuffer[i]);
}

_gl.bindRenderbuffer(_gl.RENDERBUFFER, null);

Expand Down Expand Up @@ -17703,40 +17720,51 @@ function WebGLTextures(_gl, extensions, state, properties, capabilities, utils,

function updateMultisampleRenderTarget(renderTarget) {
if (isWebGL2 && renderTarget.samples > 0 && useMultisampledRTT(renderTarget) === false) {
const textures = renderTarget.isWebGLMultipleRenderTargets ? renderTarget.texture : [renderTarget.texture];
const width = renderTarget.width;
const height = renderTarget.height;
let mask = _gl.COLOR_BUFFER_BIT;
const invalidationArray = [_gl.COLOR_ATTACHMENT0];
const depthStyle = renderTarget.stencilBuffer ? _gl.DEPTH_STENCIL_ATTACHMENT : _gl.DEPTH_ATTACHMENT;
const renderTargetProperties = properties.get(renderTarget);

if (renderTarget.depthBuffer) {
invalidationArray.push(depthStyle);
}
for (let i = 0; i < textures.length; i++) {
if (renderTarget.depthBuffer) {
invalidationArray.push(depthStyle);
}

const renderTargetProperties = properties.get(renderTarget);
const ignoreDepthValues = renderTargetProperties.__ignoreDepthValues !== undefined ? renderTargetProperties.__ignoreDepthValues : false;
const ignoreDepthValues = renderTargetProperties.__ignoreDepthValues !== undefined ? renderTargetProperties.__ignoreDepthValues : false;

if (ignoreDepthValues === false) {
if (renderTarget.depthBuffer) mask |= _gl.DEPTH_BUFFER_BIT;
if (renderTarget.stencilBuffer) mask |= _gl.STENCIL_BUFFER_BIT;
}
if (ignoreDepthValues === false) {
if (renderTarget.depthBuffer) mask |= _gl.DEPTH_BUFFER_BIT;
if (renderTarget.stencilBuffer) mask |= _gl.STENCIL_BUFFER_BIT;
}

state.bindFramebuffer(_gl.READ_FRAMEBUFFER, renderTargetProperties.__webglMultisampledFramebuffer);
state.bindFramebuffer(_gl.DRAW_FRAMEBUFFER, renderTargetProperties.__webglFramebuffer);
state.bindFramebuffer(_gl.READ_FRAMEBUFFER, renderTargetProperties.__webglMultisampledTempRead);
state.bindFramebuffer(_gl.DRAW_FRAMEBUFFER, renderTargetProperties.__webglMultisampledTempWrite);

if (ignoreDepthValues === true) {
_gl.invalidateFramebuffer(_gl.READ_FRAMEBUFFER, [depthStyle]);
_gl.framebufferRenderbuffer(_gl.READ_FRAMEBUFFER, _gl.COLOR_ATTACHMENT0, _gl.RENDERBUFFER, renderTargetProperties.__webglColorRenderbuffer[i]);

_gl.invalidateFramebuffer(_gl.DRAW_FRAMEBUFFER, [depthStyle]);
}
if (ignoreDepthValues === true) {
_gl.invalidateFramebuffer(_gl.READ_FRAMEBUFFER, [depthStyle]);

_gl.blitFramebuffer(0, 0, width, height, 0, 0, width, height, mask, _gl.NEAREST);
_gl.invalidateFramebuffer(_gl.DRAW_FRAMEBUFFER, [depthStyle]);
}

const webglTexture = properties.get(textures[i]).__webglTexture;

_gl.framebufferTexture2D(_gl.DRAW_FRAMEBUFFER, _gl.COLOR_ATTACHMENT0, _gl.TEXTURE_2D, webglTexture, 0);

_gl.blitFramebuffer(0, 0, width, height, 0, 0, width, height, mask, _gl.NEAREST);

if (supportsInvalidateFramebuffer) {
_gl.invalidateFramebuffer(_gl.READ_FRAMEBUFFER, invalidationArray);
}

if (supportsInvalidateFramebuffer) {
_gl.invalidateFramebuffer(_gl.READ_FRAMEBUFFER, invalidationArray);
state.bindFramebuffer(_gl.READ_FRAMEBUFFER, null);
state.bindFramebuffer(_gl.DRAW_FRAMEBUFFER, null);
}

state.bindFramebuffer(_gl.READ_FRAMEBUFFER, null);
state.bindFramebuffer(_gl.DRAW_FRAMEBUFFER, renderTargetProperties.__webglMultisampledFramebuffer);
}
}
Expand Down Expand Up @@ -36785,3 +36813,4 @@ exports.ZeroSlopeEnding = ZeroSlopeEnding;
exports.ZeroStencilOp = ZeroStencilOp;
exports._SRGBAFormat = _SRGBAFormat;
exports.sRGBEncoding = sRGBEncoding;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhyZWUuY2pzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9
89 changes: 59 additions & 30 deletions build/three.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16794,7 +16794,15 @@

if (renderTargetProperties.__webglDepthbuffer) _gl.deleteRenderbuffer(renderTargetProperties.__webglDepthbuffer);
if (renderTargetProperties.__webglMultisampledFramebuffer) _gl.deleteFramebuffer(renderTargetProperties.__webglMultisampledFramebuffer);
if (renderTargetProperties.__webglColorRenderbuffer) _gl.deleteRenderbuffer(renderTargetProperties.__webglColorRenderbuffer);
if (renderTargetProperties.__webglMultisampledTempWrite) _gl.deleteFramebuffer(renderTargetProperties.__webglMultisampledTempWrite);
if (renderTargetProperties.__webglMultisampledTempRead) _gl.deleteFramebuffer(renderTargetProperties.__webglMultisampledTempRead);

if (renderTargetProperties.__webglColorRenderbuffer) {
for (let i = 0; i < renderTargetProperties.__webglColorRenderbuffer.length; i++) {
if (renderTargetProperties.__webglColorRenderbuffer[i]) _gl.deleteRenderbuffer(renderTargetProperties.__webglColorRenderbuffer[i]);
}
}

if (renderTargetProperties.__webglDepthRenderbuffer) _gl.deleteRenderbuffer(renderTargetProperties.__webglDepthRenderbuffer);
}

Expand Down Expand Up @@ -17598,22 +17606,31 @@
} else {
console.warn('THREE.WebGLRenderer: WebGLMultipleRenderTargets can only be used with WebGL2 or WEBGL_draw_buffers extension.');
}
} else if (isWebGL2 && renderTarget.samples > 0 && useMultisampledRTT(renderTarget) === false) {
}

if (isWebGL2 && renderTarget.samples > 0 && useMultisampledRTT(renderTarget) === false) {
const textures = isMultipleRenderTargets ? texture : [texture];
renderTargetProperties.__webglMultisampledFramebuffer = _gl.createFramebuffer();
renderTargetProperties.__webglColorRenderbuffer = _gl.createRenderbuffer();
renderTargetProperties.__webglMultisampledTempRead = _gl.createFramebuffer();
renderTargetProperties.__webglMultisampledTempWrite = _gl.createFramebuffer();
renderTargetProperties.__webglColorRenderbuffer = [];
state.bindFramebuffer(_gl.FRAMEBUFFER, renderTargetProperties.__webglMultisampledFramebuffer);

_gl.bindRenderbuffer(_gl.RENDERBUFFER, renderTargetProperties.__webglColorRenderbuffer);
for (let i = 0; i < textures.length; i++) {
const texture = textures[i];
renderTargetProperties.__webglColorRenderbuffer[i] = _gl.createRenderbuffer();

const glFormat = utils.convert(texture.format, texture.encoding);
const glType = utils.convert(texture.type);
const glInternalFormat = getInternalFormat(texture.internalFormat, glFormat, glType, texture.encoding);
const samples = getRenderTargetSamples(renderTarget);
_gl.bindRenderbuffer(_gl.RENDERBUFFER, renderTargetProperties.__webglColorRenderbuffer[i]);

_gl.renderbufferStorageMultisample(_gl.RENDERBUFFER, samples, glInternalFormat, renderTarget.width, renderTarget.height);
const glFormat = utils.convert(texture.format, texture.encoding);
const glType = utils.convert(texture.type);
const glInternalFormat = getInternalFormat(texture.internalFormat, glFormat, glType, texture.encoding);
const samples = getRenderTargetSamples(renderTarget);

state.bindFramebuffer(_gl.FRAMEBUFFER, renderTargetProperties.__webglMultisampledFramebuffer);
_gl.renderbufferStorageMultisample(_gl.RENDERBUFFER, samples, glInternalFormat, renderTarget.width, renderTarget.height);

_gl.framebufferRenderbuffer(_gl.FRAMEBUFFER, _gl.COLOR_ATTACHMENT0, _gl.RENDERBUFFER, renderTargetProperties.__webglColorRenderbuffer);
_gl.framebufferRenderbuffer(_gl.FRAMEBUFFER, _gl.COLOR_ATTACHMENT0 + i, _gl.RENDERBUFFER, renderTargetProperties.__webglColorRenderbuffer[i]);
}

_gl.bindRenderbuffer(_gl.RENDERBUFFER, null);

Expand Down Expand Up @@ -17705,40 +17722,51 @@

function updateMultisampleRenderTarget(renderTarget) {
if (isWebGL2 && renderTarget.samples > 0 && useMultisampledRTT(renderTarget) === false) {
const textures = renderTarget.isWebGLMultipleRenderTargets ? renderTarget.texture : [renderTarget.texture];
const width = renderTarget.width;
const height = renderTarget.height;
let mask = _gl.COLOR_BUFFER_BIT;
const invalidationArray = [_gl.COLOR_ATTACHMENT0];
const depthStyle = renderTarget.stencilBuffer ? _gl.DEPTH_STENCIL_ATTACHMENT : _gl.DEPTH_ATTACHMENT;
const renderTargetProperties = properties.get(renderTarget);

if (renderTarget.depthBuffer) {
invalidationArray.push(depthStyle);
}
for (let i = 0; i < textures.length; i++) {
if (renderTarget.depthBuffer) {
invalidationArray.push(depthStyle);
}

const renderTargetProperties = properties.get(renderTarget);
const ignoreDepthValues = renderTargetProperties.__ignoreDepthValues !== undefined ? renderTargetProperties.__ignoreDepthValues : false;
const ignoreDepthValues = renderTargetProperties.__ignoreDepthValues !== undefined ? renderTargetProperties.__ignoreDepthValues : false;

if (ignoreDepthValues === false) {
if (renderTarget.depthBuffer) mask |= _gl.DEPTH_BUFFER_BIT;
if (renderTarget.stencilBuffer) mask |= _gl.STENCIL_BUFFER_BIT;
}
if (ignoreDepthValues === false) {
if (renderTarget.depthBuffer) mask |= _gl.DEPTH_BUFFER_BIT;
if (renderTarget.stencilBuffer) mask |= _gl.STENCIL_BUFFER_BIT;
}

state.bindFramebuffer(_gl.READ_FRAMEBUFFER, renderTargetProperties.__webglMultisampledFramebuffer);
state.bindFramebuffer(_gl.DRAW_FRAMEBUFFER, renderTargetProperties.__webglFramebuffer);
state.bindFramebuffer(_gl.READ_FRAMEBUFFER, renderTargetProperties.__webglMultisampledTempRead);
state.bindFramebuffer(_gl.DRAW_FRAMEBUFFER, renderTargetProperties.__webglMultisampledTempWrite);

if (ignoreDepthValues === true) {
_gl.invalidateFramebuffer(_gl.READ_FRAMEBUFFER, [depthStyle]);
_gl.framebufferRenderbuffer(_gl.READ_FRAMEBUFFER, _gl.COLOR_ATTACHMENT0, _gl.RENDERBUFFER, renderTargetProperties.__webglColorRenderbuffer[i]);

_gl.invalidateFramebuffer(_gl.DRAW_FRAMEBUFFER, [depthStyle]);
}
if (ignoreDepthValues === true) {
_gl.invalidateFramebuffer(_gl.READ_FRAMEBUFFER, [depthStyle]);

_gl.blitFramebuffer(0, 0, width, height, 0, 0, width, height, mask, _gl.NEAREST);
_gl.invalidateFramebuffer(_gl.DRAW_FRAMEBUFFER, [depthStyle]);
}

const webglTexture = properties.get(textures[i]).__webglTexture;

_gl.framebufferTexture2D(_gl.DRAW_FRAMEBUFFER, _gl.COLOR_ATTACHMENT0, _gl.TEXTURE_2D, webglTexture, 0);

_gl.blitFramebuffer(0, 0, width, height, 0, 0, width, height, mask, _gl.NEAREST);

if (supportsInvalidateFramebuffer) {
_gl.invalidateFramebuffer(_gl.READ_FRAMEBUFFER, invalidationArray);
}

if (supportsInvalidateFramebuffer) {
_gl.invalidateFramebuffer(_gl.READ_FRAMEBUFFER, invalidationArray);
state.bindFramebuffer(_gl.READ_FRAMEBUFFER, null);
state.bindFramebuffer(_gl.DRAW_FRAMEBUFFER, null);
}

state.bindFramebuffer(_gl.READ_FRAMEBUFFER, null);
state.bindFramebuffer(_gl.DRAW_FRAMEBUFFER, renderTargetProperties.__webglMultisampledFramebuffer);
}
}
Expand Down Expand Up @@ -36791,3 +36819,4 @@
Object.defineProperty(exports, '__esModule', { value: true });

}));
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhyZWUuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=
3 changes: 2 additions & 1 deletion build/three.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading