diff --git a/packages/core/src/framebuffer/Framebuffer.js b/packages/core/src/framebuffer/Framebuffer.js index 482ad1b..018753e 100644 --- a/packages/core/src/framebuffer/Framebuffer.js +++ b/packages/core/src/framebuffer/Framebuffer.js @@ -1,5 +1,6 @@ import Runner from 'mini-runner'; import Texture from '../textures/BaseTexture'; +import DepthResource from '../textures/resources/DepthResource'; import { FORMATS, TYPES } from '@pixi/constants'; /** @@ -74,7 +75,7 @@ addDepthTexture(texture) { /* eslint-disable max-len */ - this.depthTexture = texture || new Texture(null, { scaleMode: 0, + this.depthTexture = texture || new Texture(new DepthResource(null, { width: this.width, height: this.height }), { scaleMode: 0, resolution: 1, width: this.width, height: this.height, diff --git a/packages/core/src/framebuffer/Framebuffer.js b/packages/core/src/framebuffer/Framebuffer.js index 482ad1b..018753e 100644 --- a/packages/core/src/framebuffer/Framebuffer.js +++ b/packages/core/src/framebuffer/Framebuffer.js @@ -1,5 +1,6 @@ import Runner from 'mini-runner'; import Texture from '../textures/BaseTexture'; +import DepthResource from '../textures/resources/DepthResource'; import { FORMATS, TYPES } from '@pixi/constants'; /** @@ -74,7 +75,7 @@ addDepthTexture(texture) { /* eslint-disable max-len */ - this.depthTexture = texture || new Texture(null, { scaleMode: 0, + this.depthTexture = texture || new Texture(new DepthResource(null, { width: this.width, height: this.height }), { scaleMode: 0, resolution: 1, width: this.width, height: this.height, diff --git a/packages/core/src/framebuffer/FramebufferSystem.js b/packages/core/src/framebuffer/FramebufferSystem.js index e4bdf16..dcd36a6 100644 --- a/packages/core/src/framebuffer/FramebufferSystem.js +++ b/packages/core/src/framebuffer/FramebufferSystem.js @@ -46,18 +46,21 @@ this.current = this.unknownFramebuffer; this.viewport = new Rectangle(); this.hasMRT = true; + this.writeDepthTexture = true; this.disposeAll(true); // webgl2 - if (!gl.drawBuffers) + if (this.renderer.context.webGLVersion === 1) { // webgl 1! let nativeDrawBuffersExtension = this.renderer.context.extensions.drawBuffers; + let nativeDepthTextureExtension = this.renderer.context.extensions.depthTexture; if (settings.PREFER_ENV === ENV.WEBGL_LEGACY) { nativeDrawBuffersExtension = null; + nativeDepthTextureExtension = null; } if (nativeDrawBuffersExtension) @@ -73,6 +76,11 @@ // empty }; } + + if (!nativeDepthTextureExtension) + { + this.writeDepthTexture = false; + } } } @@ -335,9 +343,9 @@ if (framebuffer.depthTexture) { - const depthTextureExt = this.renderer.context.extensions.depthTexture; + const writeDepthTexture = this.writeDepthTexture; - if (depthTextureExt) + if (writeDepthTexture) { const depthTexture = framebuffer.depthTexture; @@ -358,7 +366,10 @@ gl.bindRenderbuffer(gl.RENDERBUFFER, fbo.stencil); // TODO.. this is depth AND stencil? - gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, fbo.stencil); + if (!framebuffer.depthTexture) + { // you can't have both, so one should take priority if enabled + gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, fbo.stencil); + } gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, framebuffer.width, framebuffer.height); // fbo.enableStencil(); } diff --git a/packages/core/src/framebuffer/Framebuffer.js b/packages/core/src/framebuffer/Framebuffer.js index 482ad1b..018753e 100644 --- a/packages/core/src/framebuffer/Framebuffer.js +++ b/packages/core/src/framebuffer/Framebuffer.js @@ -1,5 +1,6 @@ import Runner from 'mini-runner'; import Texture from '../textures/BaseTexture'; +import DepthResource from '../textures/resources/DepthResource'; import { FORMATS, TYPES } from '@pixi/constants'; /** @@ -74,7 +75,7 @@ addDepthTexture(texture) { /* eslint-disable max-len */ - this.depthTexture = texture || new Texture(null, { scaleMode: 0, + this.depthTexture = texture || new Texture(new DepthResource(null, { width: this.width, height: this.height }), { scaleMode: 0, resolution: 1, width: this.width, height: this.height, diff --git a/packages/core/src/framebuffer/FramebufferSystem.js b/packages/core/src/framebuffer/FramebufferSystem.js index e4bdf16..dcd36a6 100644 --- a/packages/core/src/framebuffer/FramebufferSystem.js +++ b/packages/core/src/framebuffer/FramebufferSystem.js @@ -46,18 +46,21 @@ this.current = this.unknownFramebuffer; this.viewport = new Rectangle(); this.hasMRT = true; + this.writeDepthTexture = true; this.disposeAll(true); // webgl2 - if (!gl.drawBuffers) + if (this.renderer.context.webGLVersion === 1) { // webgl 1! let nativeDrawBuffersExtension = this.renderer.context.extensions.drawBuffers; + let nativeDepthTextureExtension = this.renderer.context.extensions.depthTexture; if (settings.PREFER_ENV === ENV.WEBGL_LEGACY) { nativeDrawBuffersExtension = null; + nativeDepthTextureExtension = null; } if (nativeDrawBuffersExtension) @@ -73,6 +76,11 @@ // empty }; } + + if (!nativeDepthTextureExtension) + { + this.writeDepthTexture = false; + } } } @@ -335,9 +343,9 @@ if (framebuffer.depthTexture) { - const depthTextureExt = this.renderer.context.extensions.depthTexture; + const writeDepthTexture = this.writeDepthTexture; - if (depthTextureExt) + if (writeDepthTexture) { const depthTexture = framebuffer.depthTexture; @@ -358,7 +366,10 @@ gl.bindRenderbuffer(gl.RENDERBUFFER, fbo.stencil); // TODO.. this is depth AND stencil? - gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, fbo.stencil); + if (!framebuffer.depthTexture) + { // you can't have both, so one should take priority if enabled + gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, fbo.stencil); + } gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, framebuffer.width, framebuffer.height); // fbo.enableStencil(); } diff --git a/packages/core/src/textures/resources/DepthResource.js b/packages/core/src/textures/resources/DepthResource.js new file mode 100644 index 0000000..79c5186 --- /dev/null +++ b/packages/core/src/textures/resources/DepthResource.js @@ -0,0 +1,58 @@ +import BufferResource from './BufferResource'; + +/** + * Resource type for DepthTexture. + * @class + * @extends PIXI.resources.BufferResource + * @memberof PIXI.resources + */ +export default class DepthResource extends BufferResource +{ + /** + * Upload the texture to the GPU. + * @param {PIXI.Renderer} renderer Upload to the renderer + * @param {PIXI.BaseTexture} baseTexture Reference to parent texture + * @param {PIXI.GLTexture} glTexture glTexture + * @returns {boolean} true is success + */ + upload(renderer, baseTexture, glTexture) + { + const gl = renderer.gl; + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha); + + if (glTexture.width === baseTexture.width && glTexture.height === baseTexture.height) + { + gl.texSubImage2D( + baseTexture.target, + 0, + 0, + 0, + baseTexture.width, + baseTexture.height, + baseTexture.format, + baseTexture.type, + this.data + ); + } + else + { + glTexture.width = baseTexture.width; + glTexture.height = baseTexture.height; + + gl.texImage2D( + baseTexture.target, + 0, + gl.DEPTH_COMPONENT16, // Needed for depth to render properly in webgl2.0 + baseTexture.width, + baseTexture.height, + 0, + baseTexture.format, + baseTexture.type, + this.data + ); + } + + return true; + } +}