diff --git a/src/core/const.js b/src/core/const.js index 9cc0879..fffad5b 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -155,8 +155,8 @@ * @property {number} NEAREST Pixelating scaling */ export const SCALE_MODES = { - LINEAR: 0, - NEAREST: 1, + LINEAR: 1, + NEAREST: 0, }; /** diff --git a/src/core/const.js b/src/core/const.js index 9cc0879..fffad5b 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -155,8 +155,8 @@ * @property {number} NEAREST Pixelating scaling */ export const SCALE_MODES = { - LINEAR: 0, - NEAREST: 1, + LINEAR: 1, + NEAREST: 0, }; /** diff --git a/src/core/renderers/webgl/managers/FramebufferManager.js b/src/core/renderers/webgl/managers/FramebufferManager.js index 743c39c..1638b70 100644 --- a/src/core/renderers/webgl/managers/FramebufferManager.js +++ b/src/core/renderers/webgl/managers/FramebufferManager.js @@ -1,5 +1,4 @@ import WebGLManager from './WebGLManager'; -import { GLFramebuffer, GLTexture } from 'pixi-gl-core'; /** * @class @@ -29,6 +28,8 @@ this.drawBufferExtension = this.gl.getExtension('WEBGL_draw_buffers'); } + // public API + bind(framebuffer) { const gl = this.gl; @@ -36,6 +37,7 @@ if(framebuffer) { // TODO cacheing layer! + const fbo = framebuffer.glFrameBuffers[this.CONTEXT_UID] || this.initFramebuffer(framebuffer); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.framebuffer); // makesure all textures are unbound.. @@ -45,23 +47,43 @@ { fbo.dirtyId = framebuffer.dirtyId; - this.updateFramebuffer(framebuffer); + if(fbo.dirtyFormat !== framebuffer.dirtyFormat) + { + fbo.dirtyFormat = framebuffer.dirtyFormat; + this.updateFramebuffer(framebuffer); + } + else if(fbo.dirtySize !== framebuffer.dirtySize) + { + fbo.dirtySize = framebuffer.dirtySize; + this.resizeFramebuffer(framebuffer) + } } - if(framebuffer.colorTextures[0].texturePart) - { + for (var i = 0; i < framebuffer.colorTextures.length; i++) + { + if(framebuffer.colorTextures[i].texturePart) + { + this.renderer.texture.unbind(framebuffer.colorTextures[i].texture) + } + else + { + this.renderer.texture.unbind(framebuffer.colorTextures[i]) + } + } - this.renderer.texture.unbind(framebuffer.colorTextures[0].texture) - } - else - { + if(framebuffer.depthTexture) + { + this.renderer.texture.unbind(framebuffer.depthTexture); + } - this.renderer.texture.unbind(framebuffer.colorTextures[0]) - } + gl.viewport(0,0,framebuffer.width, framebuffer.height); + } else { gl.bindFramebuffer(gl.FRAMEBUFFER, null); + + gl.viewport(0,0,this.renderer.width, this.renderer.height); } } @@ -74,17 +96,38 @@ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); } + // private functions... + initFramebuffer(framebuffer) { - var fbo = GLFramebuffer.createRGBA(this.gl, framebuffer.width, framebuffer.height); + const gl = this.gl; + + // TODO - make this a class? + var fbo = { + framebuffer:gl.createFramebuffer(), + stencil:null, + dirtyId:0, + dirtyFormat:0, + dirtySize:0, + } framebuffer.glFrameBuffers[this.CONTEXT_UID] = fbo; - console.log('framebuffer created!', fbo) - return fbo; } + resizeFramebuffer(framebuffer) + { + const gl = this.gl; + const fbo = framebuffer.glFrameBuffers[this.CONTEXT_UID]; + + if(framebuffer.stencil || framebuffer.depth) + { + gl.bindRenderbuffer(gl.RENDERBUFFER, this.stencil); + gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, framebuffer.width, framebuffer.height); + } + } + updateFramebuffer(framebuffer) { const gl = this.gl; @@ -109,7 +152,7 @@ if(texture.texturePart) { - this.renderer.newTextureManager.bindTexture(texture.texture, 0); + this.renderer.texture.bind(texture.texture, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, @@ -119,7 +162,7 @@ } else { - this.renderer.newTextureManager.bindTexture(texture, 0); + this.renderer.texture.bind(texture, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, @@ -136,9 +179,34 @@ this.drawBufferExtension.drawBuffersWEBGL(activeTextures); } + if(framebuffer.depthTexture) + { + var depthTextureExt = gl.getExtension("WEBKIT_WEBGL_depth_texture"); + + if(depthTextureExt) + { + let depthTexture = framebuffer.depthTexture; + + this.renderer.texture.bind(depthTexture, 0); + + gl.framebufferTexture2D(gl.FRAMEBUFFER, + gl.DEPTH_ATTACHMENT, + gl.TEXTURE_2D, + depthTexture.glTextures[this.CONTEXT_UID].texture, + 0); + } + } + if(framebuffer.stencil || framebuffer.depth) { - fbo.enableStencil(); + fbo.stencil = gl.createRenderbuffer(); + + gl.bindRenderbuffer(gl.RENDERBUFFER, fbo.stencil); + + // TODO.. this is depth AND stencil? + 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/src/core/const.js b/src/core/const.js index 9cc0879..fffad5b 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -155,8 +155,8 @@ * @property {number} NEAREST Pixelating scaling */ export const SCALE_MODES = { - LINEAR: 0, - NEAREST: 1, + LINEAR: 1, + NEAREST: 0, }; /** diff --git a/src/core/renderers/webgl/managers/FramebufferManager.js b/src/core/renderers/webgl/managers/FramebufferManager.js index 743c39c..1638b70 100644 --- a/src/core/renderers/webgl/managers/FramebufferManager.js +++ b/src/core/renderers/webgl/managers/FramebufferManager.js @@ -1,5 +1,4 @@ import WebGLManager from './WebGLManager'; -import { GLFramebuffer, GLTexture } from 'pixi-gl-core'; /** * @class @@ -29,6 +28,8 @@ this.drawBufferExtension = this.gl.getExtension('WEBGL_draw_buffers'); } + // public API + bind(framebuffer) { const gl = this.gl; @@ -36,6 +37,7 @@ if(framebuffer) { // TODO cacheing layer! + const fbo = framebuffer.glFrameBuffers[this.CONTEXT_UID] || this.initFramebuffer(framebuffer); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.framebuffer); // makesure all textures are unbound.. @@ -45,23 +47,43 @@ { fbo.dirtyId = framebuffer.dirtyId; - this.updateFramebuffer(framebuffer); + if(fbo.dirtyFormat !== framebuffer.dirtyFormat) + { + fbo.dirtyFormat = framebuffer.dirtyFormat; + this.updateFramebuffer(framebuffer); + } + else if(fbo.dirtySize !== framebuffer.dirtySize) + { + fbo.dirtySize = framebuffer.dirtySize; + this.resizeFramebuffer(framebuffer) + } } - if(framebuffer.colorTextures[0].texturePart) - { + for (var i = 0; i < framebuffer.colorTextures.length; i++) + { + if(framebuffer.colorTextures[i].texturePart) + { + this.renderer.texture.unbind(framebuffer.colorTextures[i].texture) + } + else + { + this.renderer.texture.unbind(framebuffer.colorTextures[i]) + } + } - this.renderer.texture.unbind(framebuffer.colorTextures[0].texture) - } - else - { + if(framebuffer.depthTexture) + { + this.renderer.texture.unbind(framebuffer.depthTexture); + } - this.renderer.texture.unbind(framebuffer.colorTextures[0]) - } + gl.viewport(0,0,framebuffer.width, framebuffer.height); + } else { gl.bindFramebuffer(gl.FRAMEBUFFER, null); + + gl.viewport(0,0,this.renderer.width, this.renderer.height); } } @@ -74,17 +96,38 @@ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); } + // private functions... + initFramebuffer(framebuffer) { - var fbo = GLFramebuffer.createRGBA(this.gl, framebuffer.width, framebuffer.height); + const gl = this.gl; + + // TODO - make this a class? + var fbo = { + framebuffer:gl.createFramebuffer(), + stencil:null, + dirtyId:0, + dirtyFormat:0, + dirtySize:0, + } framebuffer.glFrameBuffers[this.CONTEXT_UID] = fbo; - console.log('framebuffer created!', fbo) - return fbo; } + resizeFramebuffer(framebuffer) + { + const gl = this.gl; + const fbo = framebuffer.glFrameBuffers[this.CONTEXT_UID]; + + if(framebuffer.stencil || framebuffer.depth) + { + gl.bindRenderbuffer(gl.RENDERBUFFER, this.stencil); + gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, framebuffer.width, framebuffer.height); + } + } + updateFramebuffer(framebuffer) { const gl = this.gl; @@ -109,7 +152,7 @@ if(texture.texturePart) { - this.renderer.newTextureManager.bindTexture(texture.texture, 0); + this.renderer.texture.bind(texture.texture, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, @@ -119,7 +162,7 @@ } else { - this.renderer.newTextureManager.bindTexture(texture, 0); + this.renderer.texture.bind(texture, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, @@ -136,9 +179,34 @@ this.drawBufferExtension.drawBuffersWEBGL(activeTextures); } + if(framebuffer.depthTexture) + { + var depthTextureExt = gl.getExtension("WEBKIT_WEBGL_depth_texture"); + + if(depthTextureExt) + { + let depthTexture = framebuffer.depthTexture; + + this.renderer.texture.bind(depthTexture, 0); + + gl.framebufferTexture2D(gl.FRAMEBUFFER, + gl.DEPTH_ATTACHMENT, + gl.TEXTURE_2D, + depthTexture.glTextures[this.CONTEXT_UID].texture, + 0); + } + } + if(framebuffer.stencil || framebuffer.depth) { - fbo.enableStencil(); + fbo.stencil = gl.createRenderbuffer(); + + gl.bindRenderbuffer(gl.RENDERBUFFER, fbo.stencil); + + // TODO.. this is depth AND stencil? + 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/src/core/renderers/webgl/managers/NewTextureManager.js b/src/core/renderers/webgl/managers/NewTextureManager.js index fae0c10..d192842 100644 --- a/src/core/renderers/webgl/managers/NewTextureManager.js +++ b/src/core/renderers/webgl/managers/NewTextureManager.js @@ -26,6 +26,7 @@ null ]; + this.currentLocation = -1; } /** @@ -61,7 +62,11 @@ location = location || 0; - gl.activeTexture(gl.TEXTURE0 + location); + if(this.currentLocation !== location) + { + this.currentLocation = location; + gl.activeTexture(gl.TEXTURE0 + location); + } if(texture && texture.valid) { @@ -92,8 +97,13 @@ if(this.boundTextures[i] === texture) { - gl.activeTexture(gl.TEXTURE0 + i); - gl.bindTexture(gl.TEXTURE_2D, this.emptyGLTexture.texture); + if(this.currentLocation !== i) + { + gl.activeTexture(gl.TEXTURE0 + i); + this.currentLocation = i; + } + + gl.bindTexture(gl.TEXTURE_2D, this.emptyTextures[texture.target].texture); this.boundTextures[i] = null; } } @@ -103,8 +113,8 @@ { const gl = this.gl; - var glTexture = new GLTexture(this.gl); - + var glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -117,12 +127,13 @@ { const glTexture = texture.glTextures[this.CONTEXT_UID]; const gl = this.gl; + //console.log(gl); // TODO there are only 3 textures as far as im aware? // Cube / 2D and later 3d. (the latter is WebGL2, we will get to that soon!) if(texture.target === gl.TEXTURE_CUBE_MAP) { - console.log( gl.UNSIGNED_BYTE) + // console.log( gl.UNSIGNED_BYTE) for (var i = 0; i < texture.sides.length; i++) { // TODO - we should only upload what changed.. @@ -131,12 +142,28 @@ if(texturePart.resource) { - gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + texturePart.side, + if(texturePart.resource.uploadable) + { + + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + texturePart.side, + 0, + texture.format, + texture.format, + texture.type, + texturePart.resource.source); + } + else + { + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + texturePart.side, 0, texture.format, + texture.width, + texture.height, + 0, texture.format, texture.type, texturePart.resource.source); + } } else { @@ -156,7 +183,15 @@ { if(texture.resource) { - glTexture.upload(texture.resource.source); + if(texture.resource.uploadable) + { + glTexture.upload(texture.resource.source); + + } + else + { + glTexture.uploadData(texture.resource.source, texture.width, texture.height); + } } else { diff --git a/src/core/const.js b/src/core/const.js index 9cc0879..fffad5b 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -155,8 +155,8 @@ * @property {number} NEAREST Pixelating scaling */ export const SCALE_MODES = { - LINEAR: 0, - NEAREST: 1, + LINEAR: 1, + NEAREST: 0, }; /** diff --git a/src/core/renderers/webgl/managers/FramebufferManager.js b/src/core/renderers/webgl/managers/FramebufferManager.js index 743c39c..1638b70 100644 --- a/src/core/renderers/webgl/managers/FramebufferManager.js +++ b/src/core/renderers/webgl/managers/FramebufferManager.js @@ -1,5 +1,4 @@ import WebGLManager from './WebGLManager'; -import { GLFramebuffer, GLTexture } from 'pixi-gl-core'; /** * @class @@ -29,6 +28,8 @@ this.drawBufferExtension = this.gl.getExtension('WEBGL_draw_buffers'); } + // public API + bind(framebuffer) { const gl = this.gl; @@ -36,6 +37,7 @@ if(framebuffer) { // TODO cacheing layer! + const fbo = framebuffer.glFrameBuffers[this.CONTEXT_UID] || this.initFramebuffer(framebuffer); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.framebuffer); // makesure all textures are unbound.. @@ -45,23 +47,43 @@ { fbo.dirtyId = framebuffer.dirtyId; - this.updateFramebuffer(framebuffer); + if(fbo.dirtyFormat !== framebuffer.dirtyFormat) + { + fbo.dirtyFormat = framebuffer.dirtyFormat; + this.updateFramebuffer(framebuffer); + } + else if(fbo.dirtySize !== framebuffer.dirtySize) + { + fbo.dirtySize = framebuffer.dirtySize; + this.resizeFramebuffer(framebuffer) + } } - if(framebuffer.colorTextures[0].texturePart) - { + for (var i = 0; i < framebuffer.colorTextures.length; i++) + { + if(framebuffer.colorTextures[i].texturePart) + { + this.renderer.texture.unbind(framebuffer.colorTextures[i].texture) + } + else + { + this.renderer.texture.unbind(framebuffer.colorTextures[i]) + } + } - this.renderer.texture.unbind(framebuffer.colorTextures[0].texture) - } - else - { + if(framebuffer.depthTexture) + { + this.renderer.texture.unbind(framebuffer.depthTexture); + } - this.renderer.texture.unbind(framebuffer.colorTextures[0]) - } + gl.viewport(0,0,framebuffer.width, framebuffer.height); + } else { gl.bindFramebuffer(gl.FRAMEBUFFER, null); + + gl.viewport(0,0,this.renderer.width, this.renderer.height); } } @@ -74,17 +96,38 @@ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); } + // private functions... + initFramebuffer(framebuffer) { - var fbo = GLFramebuffer.createRGBA(this.gl, framebuffer.width, framebuffer.height); + const gl = this.gl; + + // TODO - make this a class? + var fbo = { + framebuffer:gl.createFramebuffer(), + stencil:null, + dirtyId:0, + dirtyFormat:0, + dirtySize:0, + } framebuffer.glFrameBuffers[this.CONTEXT_UID] = fbo; - console.log('framebuffer created!', fbo) - return fbo; } + resizeFramebuffer(framebuffer) + { + const gl = this.gl; + const fbo = framebuffer.glFrameBuffers[this.CONTEXT_UID]; + + if(framebuffer.stencil || framebuffer.depth) + { + gl.bindRenderbuffer(gl.RENDERBUFFER, this.stencil); + gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, framebuffer.width, framebuffer.height); + } + } + updateFramebuffer(framebuffer) { const gl = this.gl; @@ -109,7 +152,7 @@ if(texture.texturePart) { - this.renderer.newTextureManager.bindTexture(texture.texture, 0); + this.renderer.texture.bind(texture.texture, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, @@ -119,7 +162,7 @@ } else { - this.renderer.newTextureManager.bindTexture(texture, 0); + this.renderer.texture.bind(texture, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, @@ -136,9 +179,34 @@ this.drawBufferExtension.drawBuffersWEBGL(activeTextures); } + if(framebuffer.depthTexture) + { + var depthTextureExt = gl.getExtension("WEBKIT_WEBGL_depth_texture"); + + if(depthTextureExt) + { + let depthTexture = framebuffer.depthTexture; + + this.renderer.texture.bind(depthTexture, 0); + + gl.framebufferTexture2D(gl.FRAMEBUFFER, + gl.DEPTH_ATTACHMENT, + gl.TEXTURE_2D, + depthTexture.glTextures[this.CONTEXT_UID].texture, + 0); + } + } + if(framebuffer.stencil || framebuffer.depth) { - fbo.enableStencil(); + fbo.stencil = gl.createRenderbuffer(); + + gl.bindRenderbuffer(gl.RENDERBUFFER, fbo.stencil); + + // TODO.. this is depth AND stencil? + 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/src/core/renderers/webgl/managers/NewTextureManager.js b/src/core/renderers/webgl/managers/NewTextureManager.js index fae0c10..d192842 100644 --- a/src/core/renderers/webgl/managers/NewTextureManager.js +++ b/src/core/renderers/webgl/managers/NewTextureManager.js @@ -26,6 +26,7 @@ null ]; + this.currentLocation = -1; } /** @@ -61,7 +62,11 @@ location = location || 0; - gl.activeTexture(gl.TEXTURE0 + location); + if(this.currentLocation !== location) + { + this.currentLocation = location; + gl.activeTexture(gl.TEXTURE0 + location); + } if(texture && texture.valid) { @@ -92,8 +97,13 @@ if(this.boundTextures[i] === texture) { - gl.activeTexture(gl.TEXTURE0 + i); - gl.bindTexture(gl.TEXTURE_2D, this.emptyGLTexture.texture); + if(this.currentLocation !== i) + { + gl.activeTexture(gl.TEXTURE0 + i); + this.currentLocation = i; + } + + gl.bindTexture(gl.TEXTURE_2D, this.emptyTextures[texture.target].texture); this.boundTextures[i] = null; } } @@ -103,8 +113,8 @@ { const gl = this.gl; - var glTexture = new GLTexture(this.gl); - + var glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -117,12 +127,13 @@ { const glTexture = texture.glTextures[this.CONTEXT_UID]; const gl = this.gl; + //console.log(gl); // TODO there are only 3 textures as far as im aware? // Cube / 2D and later 3d. (the latter is WebGL2, we will get to that soon!) if(texture.target === gl.TEXTURE_CUBE_MAP) { - console.log( gl.UNSIGNED_BYTE) + // console.log( gl.UNSIGNED_BYTE) for (var i = 0; i < texture.sides.length; i++) { // TODO - we should only upload what changed.. @@ -131,12 +142,28 @@ if(texturePart.resource) { - gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + texturePart.side, + if(texturePart.resource.uploadable) + { + + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + texturePart.side, + 0, + texture.format, + texture.format, + texture.type, + texturePart.resource.source); + } + else + { + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + texturePart.side, 0, texture.format, + texture.width, + texture.height, + 0, texture.format, texture.type, texturePart.resource.source); + } } else { @@ -156,7 +183,15 @@ { if(texture.resource) { - glTexture.upload(texture.resource.source); + if(texture.resource.uploadable) + { + glTexture.upload(texture.resource.source); + + } + else + { + glTexture.uploadData(texture.resource.source, texture.width, texture.height); + } } else { diff --git a/src/core/textures/new/FrameBuffer.js b/src/core/textures/new/FrameBuffer.js index f67f458..10e7364 100644 --- a/src/core/textures/new/FrameBuffer.js +++ b/src/core/textures/new/FrameBuffer.js @@ -11,7 +11,9 @@ this.stencil = false; this.depth = false; - this.dirtyId = 0; + this.dirtyId = 0; + this.dirtyFormat = 0; + this.dirtySize = 0; this.depthTexture = null; this.colorTextures = []; @@ -27,18 +29,22 @@ addColorTexture(index, texture) { // TODO add some validation to the texture - same width / height etc? - this.colorTextures[index || 0] = texture || new Texture(this.width, this.height, 'rgba');// || new Texture(); + this.colorTextures[index || 0] = texture || new Texture(this.width, this.height);// || new Texture(); - this.dirtyId++; + this.dirtyId++; + this.dirtyFormat++; return this; } - addDepthTexture() + addDepthTexture(texture) { - this.depthTexture[0] = new Texture(this.width, this.height, 'depth');// || new Texture(); - this.dirtyId++; + this.depthTexture = texture || new Texture(this.width, this.height, 6402, 5123)//UNSIGNED_SHORT; + + + this.dirtyId++; + this.dirtyFormat++; return this; } @@ -46,7 +52,8 @@ { this.depth = true; - this.dirtyId++; + this.dirtyId++; + this.dirtyFormat++; return this; } @@ -55,17 +62,30 @@ { this.stencil = true; - this.dirtyId++; + this.dirtyId++; + this.dirtyFormat++; return this; } resize(width, height) { + if(width === this.width && height === this.height)return; + this.width = width; this.height = height; this.dirtyId++; + this.dirtySize++; + + for (var i = 0; i < this.colorTextures.length; i++) { + this.colorTextures[i].resize(width, height); + } + + if(this.depthTexture) + { + this.depthTexture.resize(width, height) + } } diff --git a/src/core/const.js b/src/core/const.js index 9cc0879..fffad5b 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -155,8 +155,8 @@ * @property {number} NEAREST Pixelating scaling */ export const SCALE_MODES = { - LINEAR: 0, - NEAREST: 1, + LINEAR: 1, + NEAREST: 0, }; /** diff --git a/src/core/renderers/webgl/managers/FramebufferManager.js b/src/core/renderers/webgl/managers/FramebufferManager.js index 743c39c..1638b70 100644 --- a/src/core/renderers/webgl/managers/FramebufferManager.js +++ b/src/core/renderers/webgl/managers/FramebufferManager.js @@ -1,5 +1,4 @@ import WebGLManager from './WebGLManager'; -import { GLFramebuffer, GLTexture } from 'pixi-gl-core'; /** * @class @@ -29,6 +28,8 @@ this.drawBufferExtension = this.gl.getExtension('WEBGL_draw_buffers'); } + // public API + bind(framebuffer) { const gl = this.gl; @@ -36,6 +37,7 @@ if(framebuffer) { // TODO cacheing layer! + const fbo = framebuffer.glFrameBuffers[this.CONTEXT_UID] || this.initFramebuffer(framebuffer); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.framebuffer); // makesure all textures are unbound.. @@ -45,23 +47,43 @@ { fbo.dirtyId = framebuffer.dirtyId; - this.updateFramebuffer(framebuffer); + if(fbo.dirtyFormat !== framebuffer.dirtyFormat) + { + fbo.dirtyFormat = framebuffer.dirtyFormat; + this.updateFramebuffer(framebuffer); + } + else if(fbo.dirtySize !== framebuffer.dirtySize) + { + fbo.dirtySize = framebuffer.dirtySize; + this.resizeFramebuffer(framebuffer) + } } - if(framebuffer.colorTextures[0].texturePart) - { + for (var i = 0; i < framebuffer.colorTextures.length; i++) + { + if(framebuffer.colorTextures[i].texturePart) + { + this.renderer.texture.unbind(framebuffer.colorTextures[i].texture) + } + else + { + this.renderer.texture.unbind(framebuffer.colorTextures[i]) + } + } - this.renderer.texture.unbind(framebuffer.colorTextures[0].texture) - } - else - { + if(framebuffer.depthTexture) + { + this.renderer.texture.unbind(framebuffer.depthTexture); + } - this.renderer.texture.unbind(framebuffer.colorTextures[0]) - } + gl.viewport(0,0,framebuffer.width, framebuffer.height); + } else { gl.bindFramebuffer(gl.FRAMEBUFFER, null); + + gl.viewport(0,0,this.renderer.width, this.renderer.height); } } @@ -74,17 +96,38 @@ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); } + // private functions... + initFramebuffer(framebuffer) { - var fbo = GLFramebuffer.createRGBA(this.gl, framebuffer.width, framebuffer.height); + const gl = this.gl; + + // TODO - make this a class? + var fbo = { + framebuffer:gl.createFramebuffer(), + stencil:null, + dirtyId:0, + dirtyFormat:0, + dirtySize:0, + } framebuffer.glFrameBuffers[this.CONTEXT_UID] = fbo; - console.log('framebuffer created!', fbo) - return fbo; } + resizeFramebuffer(framebuffer) + { + const gl = this.gl; + const fbo = framebuffer.glFrameBuffers[this.CONTEXT_UID]; + + if(framebuffer.stencil || framebuffer.depth) + { + gl.bindRenderbuffer(gl.RENDERBUFFER, this.stencil); + gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, framebuffer.width, framebuffer.height); + } + } + updateFramebuffer(framebuffer) { const gl = this.gl; @@ -109,7 +152,7 @@ if(texture.texturePart) { - this.renderer.newTextureManager.bindTexture(texture.texture, 0); + this.renderer.texture.bind(texture.texture, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, @@ -119,7 +162,7 @@ } else { - this.renderer.newTextureManager.bindTexture(texture, 0); + this.renderer.texture.bind(texture, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, @@ -136,9 +179,34 @@ this.drawBufferExtension.drawBuffersWEBGL(activeTextures); } + if(framebuffer.depthTexture) + { + var depthTextureExt = gl.getExtension("WEBKIT_WEBGL_depth_texture"); + + if(depthTextureExt) + { + let depthTexture = framebuffer.depthTexture; + + this.renderer.texture.bind(depthTexture, 0); + + gl.framebufferTexture2D(gl.FRAMEBUFFER, + gl.DEPTH_ATTACHMENT, + gl.TEXTURE_2D, + depthTexture.glTextures[this.CONTEXT_UID].texture, + 0); + } + } + if(framebuffer.stencil || framebuffer.depth) { - fbo.enableStencil(); + fbo.stencil = gl.createRenderbuffer(); + + gl.bindRenderbuffer(gl.RENDERBUFFER, fbo.stencil); + + // TODO.. this is depth AND stencil? + 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/src/core/renderers/webgl/managers/NewTextureManager.js b/src/core/renderers/webgl/managers/NewTextureManager.js index fae0c10..d192842 100644 --- a/src/core/renderers/webgl/managers/NewTextureManager.js +++ b/src/core/renderers/webgl/managers/NewTextureManager.js @@ -26,6 +26,7 @@ null ]; + this.currentLocation = -1; } /** @@ -61,7 +62,11 @@ location = location || 0; - gl.activeTexture(gl.TEXTURE0 + location); + if(this.currentLocation !== location) + { + this.currentLocation = location; + gl.activeTexture(gl.TEXTURE0 + location); + } if(texture && texture.valid) { @@ -92,8 +97,13 @@ if(this.boundTextures[i] === texture) { - gl.activeTexture(gl.TEXTURE0 + i); - gl.bindTexture(gl.TEXTURE_2D, this.emptyGLTexture.texture); + if(this.currentLocation !== i) + { + gl.activeTexture(gl.TEXTURE0 + i); + this.currentLocation = i; + } + + gl.bindTexture(gl.TEXTURE_2D, this.emptyTextures[texture.target].texture); this.boundTextures[i] = null; } } @@ -103,8 +113,8 @@ { const gl = this.gl; - var glTexture = new GLTexture(this.gl); - + var glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -117,12 +127,13 @@ { const glTexture = texture.glTextures[this.CONTEXT_UID]; const gl = this.gl; + //console.log(gl); // TODO there are only 3 textures as far as im aware? // Cube / 2D and later 3d. (the latter is WebGL2, we will get to that soon!) if(texture.target === gl.TEXTURE_CUBE_MAP) { - console.log( gl.UNSIGNED_BYTE) + // console.log( gl.UNSIGNED_BYTE) for (var i = 0; i < texture.sides.length; i++) { // TODO - we should only upload what changed.. @@ -131,12 +142,28 @@ if(texturePart.resource) { - gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + texturePart.side, + if(texturePart.resource.uploadable) + { + + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + texturePart.side, + 0, + texture.format, + texture.format, + texture.type, + texturePart.resource.source); + } + else + { + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + texturePart.side, 0, texture.format, + texture.width, + texture.height, + 0, texture.format, texture.type, texturePart.resource.source); + } } else { @@ -156,7 +183,15 @@ { if(texture.resource) { - glTexture.upload(texture.resource.source); + if(texture.resource.uploadable) + { + glTexture.upload(texture.resource.source); + + } + else + { + glTexture.uploadData(texture.resource.source, texture.width, texture.height); + } } else { diff --git a/src/core/textures/new/FrameBuffer.js b/src/core/textures/new/FrameBuffer.js index f67f458..10e7364 100644 --- a/src/core/textures/new/FrameBuffer.js +++ b/src/core/textures/new/FrameBuffer.js @@ -11,7 +11,9 @@ this.stencil = false; this.depth = false; - this.dirtyId = 0; + this.dirtyId = 0; + this.dirtyFormat = 0; + this.dirtySize = 0; this.depthTexture = null; this.colorTextures = []; @@ -27,18 +29,22 @@ addColorTexture(index, texture) { // TODO add some validation to the texture - same width / height etc? - this.colorTextures[index || 0] = texture || new Texture(this.width, this.height, 'rgba');// || new Texture(); + this.colorTextures[index || 0] = texture || new Texture(this.width, this.height);// || new Texture(); - this.dirtyId++; + this.dirtyId++; + this.dirtyFormat++; return this; } - addDepthTexture() + addDepthTexture(texture) { - this.depthTexture[0] = new Texture(this.width, this.height, 'depth');// || new Texture(); - this.dirtyId++; + this.depthTexture = texture || new Texture(this.width, this.height, 6402, 5123)//UNSIGNED_SHORT; + + + this.dirtyId++; + this.dirtyFormat++; return this; } @@ -46,7 +52,8 @@ { this.depth = true; - this.dirtyId++; + this.dirtyId++; + this.dirtyFormat++; return this; } @@ -55,17 +62,30 @@ { this.stencil = true; - this.dirtyId++; + this.dirtyId++; + this.dirtyFormat++; return this; } resize(width, height) { + if(width === this.width && height === this.height)return; + this.width = width; this.height = height; this.dirtyId++; + this.dirtySize++; + + for (var i = 0; i < this.colorTextures.length; i++) { + this.colorTextures[i].resize(width, height); + } + + if(this.depthTexture) + { + this.depthTexture.resize(width, height) + } } diff --git a/src/core/textures/new/Texture.js b/src/core/textures/new/Texture.js index 8012f80..d88032e 100644 --- a/src/core/textures/new/Texture.js +++ b/src/core/textures/new/Texture.js @@ -1,11 +1,11 @@ -import TextureStyle from './TextureStyle'; import ImageResource from './resources/ImageResource'; +import BufferResource from './resources/BufferResource'; import settings from '../../settings'; export default class Texture { - constructor(width, height, format) + constructor(width, height, format, type) { /** * The width of texture @@ -32,7 +32,7 @@ * * @member {Boolean} */ - this.premultiplyAlpha = false; + this.premultiplyAlpha = true; /** * [wrapMode description] @@ -55,12 +55,10 @@ * @member {Number} */ this.format = format || 6408//gl.RGBA; - this.type = 5121; + this.type = type || 5121; //UNSIGNED_BYTE this.target = 3553; // gl.TEXTURE_2D - this.data = null; - this.glTextures = {}; this._new = true; @@ -84,8 +82,11 @@ if(this.resource === resource) { - this.width = resource.width; - this.height = resource.height; + if(resource.width !== -1 && resource.hight !== -1) + { + this.width = resource.width; + this.height = resource.height; + } this.validate(); @@ -99,6 +100,14 @@ }) } + resize(width, height) + { + this.width = width; + this.height = height; + + this.dirtyId++; + } + validate() { let valid = true; @@ -121,4 +130,27 @@ return texture; } + + static fromFloat32Array(width, height, float32Array) + { + var texture = new Texture(width, height, 6408, 5126); + + float32Array = float32Array || new Float32Array(width*height*4); + + texture.setResource(new BufferResource(float32Array)); + + return texture; + } + + static fromUint8Array(width, height, uint8Array) + { + var texture = new Texture(width, height, 6408, 5121); + + uint8Array = uint8Array || new Uint8Array(width*height*4); + + texture.setResource(new BufferResource(uint8Array)); + + return texture; + } + } \ No newline at end of file diff --git a/src/core/const.js b/src/core/const.js index 9cc0879..fffad5b 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -155,8 +155,8 @@ * @property {number} NEAREST Pixelating scaling */ export const SCALE_MODES = { - LINEAR: 0, - NEAREST: 1, + LINEAR: 1, + NEAREST: 0, }; /** diff --git a/src/core/renderers/webgl/managers/FramebufferManager.js b/src/core/renderers/webgl/managers/FramebufferManager.js index 743c39c..1638b70 100644 --- a/src/core/renderers/webgl/managers/FramebufferManager.js +++ b/src/core/renderers/webgl/managers/FramebufferManager.js @@ -1,5 +1,4 @@ import WebGLManager from './WebGLManager'; -import { GLFramebuffer, GLTexture } from 'pixi-gl-core'; /** * @class @@ -29,6 +28,8 @@ this.drawBufferExtension = this.gl.getExtension('WEBGL_draw_buffers'); } + // public API + bind(framebuffer) { const gl = this.gl; @@ -36,6 +37,7 @@ if(framebuffer) { // TODO cacheing layer! + const fbo = framebuffer.glFrameBuffers[this.CONTEXT_UID] || this.initFramebuffer(framebuffer); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.framebuffer); // makesure all textures are unbound.. @@ -45,23 +47,43 @@ { fbo.dirtyId = framebuffer.dirtyId; - this.updateFramebuffer(framebuffer); + if(fbo.dirtyFormat !== framebuffer.dirtyFormat) + { + fbo.dirtyFormat = framebuffer.dirtyFormat; + this.updateFramebuffer(framebuffer); + } + else if(fbo.dirtySize !== framebuffer.dirtySize) + { + fbo.dirtySize = framebuffer.dirtySize; + this.resizeFramebuffer(framebuffer) + } } - if(framebuffer.colorTextures[0].texturePart) - { + for (var i = 0; i < framebuffer.colorTextures.length; i++) + { + if(framebuffer.colorTextures[i].texturePart) + { + this.renderer.texture.unbind(framebuffer.colorTextures[i].texture) + } + else + { + this.renderer.texture.unbind(framebuffer.colorTextures[i]) + } + } - this.renderer.texture.unbind(framebuffer.colorTextures[0].texture) - } - else - { + if(framebuffer.depthTexture) + { + this.renderer.texture.unbind(framebuffer.depthTexture); + } - this.renderer.texture.unbind(framebuffer.colorTextures[0]) - } + gl.viewport(0,0,framebuffer.width, framebuffer.height); + } else { gl.bindFramebuffer(gl.FRAMEBUFFER, null); + + gl.viewport(0,0,this.renderer.width, this.renderer.height); } } @@ -74,17 +96,38 @@ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); } + // private functions... + initFramebuffer(framebuffer) { - var fbo = GLFramebuffer.createRGBA(this.gl, framebuffer.width, framebuffer.height); + const gl = this.gl; + + // TODO - make this a class? + var fbo = { + framebuffer:gl.createFramebuffer(), + stencil:null, + dirtyId:0, + dirtyFormat:0, + dirtySize:0, + } framebuffer.glFrameBuffers[this.CONTEXT_UID] = fbo; - console.log('framebuffer created!', fbo) - return fbo; } + resizeFramebuffer(framebuffer) + { + const gl = this.gl; + const fbo = framebuffer.glFrameBuffers[this.CONTEXT_UID]; + + if(framebuffer.stencil || framebuffer.depth) + { + gl.bindRenderbuffer(gl.RENDERBUFFER, this.stencil); + gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, framebuffer.width, framebuffer.height); + } + } + updateFramebuffer(framebuffer) { const gl = this.gl; @@ -109,7 +152,7 @@ if(texture.texturePart) { - this.renderer.newTextureManager.bindTexture(texture.texture, 0); + this.renderer.texture.bind(texture.texture, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, @@ -119,7 +162,7 @@ } else { - this.renderer.newTextureManager.bindTexture(texture, 0); + this.renderer.texture.bind(texture, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, @@ -136,9 +179,34 @@ this.drawBufferExtension.drawBuffersWEBGL(activeTextures); } + if(framebuffer.depthTexture) + { + var depthTextureExt = gl.getExtension("WEBKIT_WEBGL_depth_texture"); + + if(depthTextureExt) + { + let depthTexture = framebuffer.depthTexture; + + this.renderer.texture.bind(depthTexture, 0); + + gl.framebufferTexture2D(gl.FRAMEBUFFER, + gl.DEPTH_ATTACHMENT, + gl.TEXTURE_2D, + depthTexture.glTextures[this.CONTEXT_UID].texture, + 0); + } + } + if(framebuffer.stencil || framebuffer.depth) { - fbo.enableStencil(); + fbo.stencil = gl.createRenderbuffer(); + + gl.bindRenderbuffer(gl.RENDERBUFFER, fbo.stencil); + + // TODO.. this is depth AND stencil? + 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/src/core/renderers/webgl/managers/NewTextureManager.js b/src/core/renderers/webgl/managers/NewTextureManager.js index fae0c10..d192842 100644 --- a/src/core/renderers/webgl/managers/NewTextureManager.js +++ b/src/core/renderers/webgl/managers/NewTextureManager.js @@ -26,6 +26,7 @@ null ]; + this.currentLocation = -1; } /** @@ -61,7 +62,11 @@ location = location || 0; - gl.activeTexture(gl.TEXTURE0 + location); + if(this.currentLocation !== location) + { + this.currentLocation = location; + gl.activeTexture(gl.TEXTURE0 + location); + } if(texture && texture.valid) { @@ -92,8 +97,13 @@ if(this.boundTextures[i] === texture) { - gl.activeTexture(gl.TEXTURE0 + i); - gl.bindTexture(gl.TEXTURE_2D, this.emptyGLTexture.texture); + if(this.currentLocation !== i) + { + gl.activeTexture(gl.TEXTURE0 + i); + this.currentLocation = i; + } + + gl.bindTexture(gl.TEXTURE_2D, this.emptyTextures[texture.target].texture); this.boundTextures[i] = null; } } @@ -103,8 +113,8 @@ { const gl = this.gl; - var glTexture = new GLTexture(this.gl); - + var glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -117,12 +127,13 @@ { const glTexture = texture.glTextures[this.CONTEXT_UID]; const gl = this.gl; + //console.log(gl); // TODO there are only 3 textures as far as im aware? // Cube / 2D and later 3d. (the latter is WebGL2, we will get to that soon!) if(texture.target === gl.TEXTURE_CUBE_MAP) { - console.log( gl.UNSIGNED_BYTE) + // console.log( gl.UNSIGNED_BYTE) for (var i = 0; i < texture.sides.length; i++) { // TODO - we should only upload what changed.. @@ -131,12 +142,28 @@ if(texturePart.resource) { - gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + texturePart.side, + if(texturePart.resource.uploadable) + { + + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + texturePart.side, + 0, + texture.format, + texture.format, + texture.type, + texturePart.resource.source); + } + else + { + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + texturePart.side, 0, texture.format, + texture.width, + texture.height, + 0, texture.format, texture.type, texturePart.resource.source); + } } else { @@ -156,7 +183,15 @@ { if(texture.resource) { - glTexture.upload(texture.resource.source); + if(texture.resource.uploadable) + { + glTexture.upload(texture.resource.source); + + } + else + { + glTexture.uploadData(texture.resource.source, texture.width, texture.height); + } } else { diff --git a/src/core/textures/new/FrameBuffer.js b/src/core/textures/new/FrameBuffer.js index f67f458..10e7364 100644 --- a/src/core/textures/new/FrameBuffer.js +++ b/src/core/textures/new/FrameBuffer.js @@ -11,7 +11,9 @@ this.stencil = false; this.depth = false; - this.dirtyId = 0; + this.dirtyId = 0; + this.dirtyFormat = 0; + this.dirtySize = 0; this.depthTexture = null; this.colorTextures = []; @@ -27,18 +29,22 @@ addColorTexture(index, texture) { // TODO add some validation to the texture - same width / height etc? - this.colorTextures[index || 0] = texture || new Texture(this.width, this.height, 'rgba');// || new Texture(); + this.colorTextures[index || 0] = texture || new Texture(this.width, this.height);// || new Texture(); - this.dirtyId++; + this.dirtyId++; + this.dirtyFormat++; return this; } - addDepthTexture() + addDepthTexture(texture) { - this.depthTexture[0] = new Texture(this.width, this.height, 'depth');// || new Texture(); - this.dirtyId++; + this.depthTexture = texture || new Texture(this.width, this.height, 6402, 5123)//UNSIGNED_SHORT; + + + this.dirtyId++; + this.dirtyFormat++; return this; } @@ -46,7 +52,8 @@ { this.depth = true; - this.dirtyId++; + this.dirtyId++; + this.dirtyFormat++; return this; } @@ -55,17 +62,30 @@ { this.stencil = true; - this.dirtyId++; + this.dirtyId++; + this.dirtyFormat++; return this; } resize(width, height) { + if(width === this.width && height === this.height)return; + this.width = width; this.height = height; this.dirtyId++; + this.dirtySize++; + + for (var i = 0; i < this.colorTextures.length; i++) { + this.colorTextures[i].resize(width, height); + } + + if(this.depthTexture) + { + this.depthTexture.resize(width, height) + } } diff --git a/src/core/textures/new/Texture.js b/src/core/textures/new/Texture.js index 8012f80..d88032e 100644 --- a/src/core/textures/new/Texture.js +++ b/src/core/textures/new/Texture.js @@ -1,11 +1,11 @@ -import TextureStyle from './TextureStyle'; import ImageResource from './resources/ImageResource'; +import BufferResource from './resources/BufferResource'; import settings from '../../settings'; export default class Texture { - constructor(width, height, format) + constructor(width, height, format, type) { /** * The width of texture @@ -32,7 +32,7 @@ * * @member {Boolean} */ - this.premultiplyAlpha = false; + this.premultiplyAlpha = true; /** * [wrapMode description] @@ -55,12 +55,10 @@ * @member {Number} */ this.format = format || 6408//gl.RGBA; - this.type = 5121; + this.type = type || 5121; //UNSIGNED_BYTE this.target = 3553; // gl.TEXTURE_2D - this.data = null; - this.glTextures = {}; this._new = true; @@ -84,8 +82,11 @@ if(this.resource === resource) { - this.width = resource.width; - this.height = resource.height; + if(resource.width !== -1 && resource.hight !== -1) + { + this.width = resource.width; + this.height = resource.height; + } this.validate(); @@ -99,6 +100,14 @@ }) } + resize(width, height) + { + this.width = width; + this.height = height; + + this.dirtyId++; + } + validate() { let valid = true; @@ -121,4 +130,27 @@ return texture; } + + static fromFloat32Array(width, height, float32Array) + { + var texture = new Texture(width, height, 6408, 5126); + + float32Array = float32Array || new Float32Array(width*height*4); + + texture.setResource(new BufferResource(float32Array)); + + return texture; + } + + static fromUint8Array(width, height, uint8Array) + { + var texture = new Texture(width, height, 6408, 5121); + + uint8Array = uint8Array || new Uint8Array(width*height*4); + + texture.setResource(new BufferResource(uint8Array)); + + return texture; + } + } \ No newline at end of file diff --git a/src/core/textures/new/resources/BufferResource.js b/src/core/textures/new/resources/BufferResource.js index 4955d45..56ec6dc 100644 --- a/src/core/textures/new/resources/BufferResource.js +++ b/src/core/textures/new/resources/BufferResource.js @@ -5,8 +5,9 @@ { this.source = source; this.loaded = false; // TODO rename to ready? - this.width = 1; - this.height = 1; + this.width = -1; + this.height = -1; + this.uploadable = false; this.load = new Promise((resolve, reject) => { @@ -19,6 +20,4 @@ { return new BufferResource(array); } - - } \ No newline at end of file diff --git a/src/core/const.js b/src/core/const.js index 9cc0879..fffad5b 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -155,8 +155,8 @@ * @property {number} NEAREST Pixelating scaling */ export const SCALE_MODES = { - LINEAR: 0, - NEAREST: 1, + LINEAR: 1, + NEAREST: 0, }; /** diff --git a/src/core/renderers/webgl/managers/FramebufferManager.js b/src/core/renderers/webgl/managers/FramebufferManager.js index 743c39c..1638b70 100644 --- a/src/core/renderers/webgl/managers/FramebufferManager.js +++ b/src/core/renderers/webgl/managers/FramebufferManager.js @@ -1,5 +1,4 @@ import WebGLManager from './WebGLManager'; -import { GLFramebuffer, GLTexture } from 'pixi-gl-core'; /** * @class @@ -29,6 +28,8 @@ this.drawBufferExtension = this.gl.getExtension('WEBGL_draw_buffers'); } + // public API + bind(framebuffer) { const gl = this.gl; @@ -36,6 +37,7 @@ if(framebuffer) { // TODO cacheing layer! + const fbo = framebuffer.glFrameBuffers[this.CONTEXT_UID] || this.initFramebuffer(framebuffer); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.framebuffer); // makesure all textures are unbound.. @@ -45,23 +47,43 @@ { fbo.dirtyId = framebuffer.dirtyId; - this.updateFramebuffer(framebuffer); + if(fbo.dirtyFormat !== framebuffer.dirtyFormat) + { + fbo.dirtyFormat = framebuffer.dirtyFormat; + this.updateFramebuffer(framebuffer); + } + else if(fbo.dirtySize !== framebuffer.dirtySize) + { + fbo.dirtySize = framebuffer.dirtySize; + this.resizeFramebuffer(framebuffer) + } } - if(framebuffer.colorTextures[0].texturePart) - { + for (var i = 0; i < framebuffer.colorTextures.length; i++) + { + if(framebuffer.colorTextures[i].texturePart) + { + this.renderer.texture.unbind(framebuffer.colorTextures[i].texture) + } + else + { + this.renderer.texture.unbind(framebuffer.colorTextures[i]) + } + } - this.renderer.texture.unbind(framebuffer.colorTextures[0].texture) - } - else - { + if(framebuffer.depthTexture) + { + this.renderer.texture.unbind(framebuffer.depthTexture); + } - this.renderer.texture.unbind(framebuffer.colorTextures[0]) - } + gl.viewport(0,0,framebuffer.width, framebuffer.height); + } else { gl.bindFramebuffer(gl.FRAMEBUFFER, null); + + gl.viewport(0,0,this.renderer.width, this.renderer.height); } } @@ -74,17 +96,38 @@ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); } + // private functions... + initFramebuffer(framebuffer) { - var fbo = GLFramebuffer.createRGBA(this.gl, framebuffer.width, framebuffer.height); + const gl = this.gl; + + // TODO - make this a class? + var fbo = { + framebuffer:gl.createFramebuffer(), + stencil:null, + dirtyId:0, + dirtyFormat:0, + dirtySize:0, + } framebuffer.glFrameBuffers[this.CONTEXT_UID] = fbo; - console.log('framebuffer created!', fbo) - return fbo; } + resizeFramebuffer(framebuffer) + { + const gl = this.gl; + const fbo = framebuffer.glFrameBuffers[this.CONTEXT_UID]; + + if(framebuffer.stencil || framebuffer.depth) + { + gl.bindRenderbuffer(gl.RENDERBUFFER, this.stencil); + gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, framebuffer.width, framebuffer.height); + } + } + updateFramebuffer(framebuffer) { const gl = this.gl; @@ -109,7 +152,7 @@ if(texture.texturePart) { - this.renderer.newTextureManager.bindTexture(texture.texture, 0); + this.renderer.texture.bind(texture.texture, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, @@ -119,7 +162,7 @@ } else { - this.renderer.newTextureManager.bindTexture(texture, 0); + this.renderer.texture.bind(texture, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, @@ -136,9 +179,34 @@ this.drawBufferExtension.drawBuffersWEBGL(activeTextures); } + if(framebuffer.depthTexture) + { + var depthTextureExt = gl.getExtension("WEBKIT_WEBGL_depth_texture"); + + if(depthTextureExt) + { + let depthTexture = framebuffer.depthTexture; + + this.renderer.texture.bind(depthTexture, 0); + + gl.framebufferTexture2D(gl.FRAMEBUFFER, + gl.DEPTH_ATTACHMENT, + gl.TEXTURE_2D, + depthTexture.glTextures[this.CONTEXT_UID].texture, + 0); + } + } + if(framebuffer.stencil || framebuffer.depth) { - fbo.enableStencil(); + fbo.stencil = gl.createRenderbuffer(); + + gl.bindRenderbuffer(gl.RENDERBUFFER, fbo.stencil); + + // TODO.. this is depth AND stencil? + 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/src/core/renderers/webgl/managers/NewTextureManager.js b/src/core/renderers/webgl/managers/NewTextureManager.js index fae0c10..d192842 100644 --- a/src/core/renderers/webgl/managers/NewTextureManager.js +++ b/src/core/renderers/webgl/managers/NewTextureManager.js @@ -26,6 +26,7 @@ null ]; + this.currentLocation = -1; } /** @@ -61,7 +62,11 @@ location = location || 0; - gl.activeTexture(gl.TEXTURE0 + location); + if(this.currentLocation !== location) + { + this.currentLocation = location; + gl.activeTexture(gl.TEXTURE0 + location); + } if(texture && texture.valid) { @@ -92,8 +97,13 @@ if(this.boundTextures[i] === texture) { - gl.activeTexture(gl.TEXTURE0 + i); - gl.bindTexture(gl.TEXTURE_2D, this.emptyGLTexture.texture); + if(this.currentLocation !== i) + { + gl.activeTexture(gl.TEXTURE0 + i); + this.currentLocation = i; + } + + gl.bindTexture(gl.TEXTURE_2D, this.emptyTextures[texture.target].texture); this.boundTextures[i] = null; } } @@ -103,8 +113,8 @@ { const gl = this.gl; - var glTexture = new GLTexture(this.gl); - + var glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -117,12 +127,13 @@ { const glTexture = texture.glTextures[this.CONTEXT_UID]; const gl = this.gl; + //console.log(gl); // TODO there are only 3 textures as far as im aware? // Cube / 2D and later 3d. (the latter is WebGL2, we will get to that soon!) if(texture.target === gl.TEXTURE_CUBE_MAP) { - console.log( gl.UNSIGNED_BYTE) + // console.log( gl.UNSIGNED_BYTE) for (var i = 0; i < texture.sides.length; i++) { // TODO - we should only upload what changed.. @@ -131,12 +142,28 @@ if(texturePart.resource) { - gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + texturePart.side, + if(texturePart.resource.uploadable) + { + + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + texturePart.side, + 0, + texture.format, + texture.format, + texture.type, + texturePart.resource.source); + } + else + { + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + texturePart.side, 0, texture.format, + texture.width, + texture.height, + 0, texture.format, texture.type, texturePart.resource.source); + } } else { @@ -156,7 +183,15 @@ { if(texture.resource) { - glTexture.upload(texture.resource.source); + if(texture.resource.uploadable) + { + glTexture.upload(texture.resource.source); + + } + else + { + glTexture.uploadData(texture.resource.source, texture.width, texture.height); + } } else { diff --git a/src/core/textures/new/FrameBuffer.js b/src/core/textures/new/FrameBuffer.js index f67f458..10e7364 100644 --- a/src/core/textures/new/FrameBuffer.js +++ b/src/core/textures/new/FrameBuffer.js @@ -11,7 +11,9 @@ this.stencil = false; this.depth = false; - this.dirtyId = 0; + this.dirtyId = 0; + this.dirtyFormat = 0; + this.dirtySize = 0; this.depthTexture = null; this.colorTextures = []; @@ -27,18 +29,22 @@ addColorTexture(index, texture) { // TODO add some validation to the texture - same width / height etc? - this.colorTextures[index || 0] = texture || new Texture(this.width, this.height, 'rgba');// || new Texture(); + this.colorTextures[index || 0] = texture || new Texture(this.width, this.height);// || new Texture(); - this.dirtyId++; + this.dirtyId++; + this.dirtyFormat++; return this; } - addDepthTexture() + addDepthTexture(texture) { - this.depthTexture[0] = new Texture(this.width, this.height, 'depth');// || new Texture(); - this.dirtyId++; + this.depthTexture = texture || new Texture(this.width, this.height, 6402, 5123)//UNSIGNED_SHORT; + + + this.dirtyId++; + this.dirtyFormat++; return this; } @@ -46,7 +52,8 @@ { this.depth = true; - this.dirtyId++; + this.dirtyId++; + this.dirtyFormat++; return this; } @@ -55,17 +62,30 @@ { this.stencil = true; - this.dirtyId++; + this.dirtyId++; + this.dirtyFormat++; return this; } resize(width, height) { + if(width === this.width && height === this.height)return; + this.width = width; this.height = height; this.dirtyId++; + this.dirtySize++; + + for (var i = 0; i < this.colorTextures.length; i++) { + this.colorTextures[i].resize(width, height); + } + + if(this.depthTexture) + { + this.depthTexture.resize(width, height) + } } diff --git a/src/core/textures/new/Texture.js b/src/core/textures/new/Texture.js index 8012f80..d88032e 100644 --- a/src/core/textures/new/Texture.js +++ b/src/core/textures/new/Texture.js @@ -1,11 +1,11 @@ -import TextureStyle from './TextureStyle'; import ImageResource from './resources/ImageResource'; +import BufferResource from './resources/BufferResource'; import settings from '../../settings'; export default class Texture { - constructor(width, height, format) + constructor(width, height, format, type) { /** * The width of texture @@ -32,7 +32,7 @@ * * @member {Boolean} */ - this.premultiplyAlpha = false; + this.premultiplyAlpha = true; /** * [wrapMode description] @@ -55,12 +55,10 @@ * @member {Number} */ this.format = format || 6408//gl.RGBA; - this.type = 5121; + this.type = type || 5121; //UNSIGNED_BYTE this.target = 3553; // gl.TEXTURE_2D - this.data = null; - this.glTextures = {}; this._new = true; @@ -84,8 +82,11 @@ if(this.resource === resource) { - this.width = resource.width; - this.height = resource.height; + if(resource.width !== -1 && resource.hight !== -1) + { + this.width = resource.width; + this.height = resource.height; + } this.validate(); @@ -99,6 +100,14 @@ }) } + resize(width, height) + { + this.width = width; + this.height = height; + + this.dirtyId++; + } + validate() { let valid = true; @@ -121,4 +130,27 @@ return texture; } + + static fromFloat32Array(width, height, float32Array) + { + var texture = new Texture(width, height, 6408, 5126); + + float32Array = float32Array || new Float32Array(width*height*4); + + texture.setResource(new BufferResource(float32Array)); + + return texture; + } + + static fromUint8Array(width, height, uint8Array) + { + var texture = new Texture(width, height, 6408, 5121); + + uint8Array = uint8Array || new Uint8Array(width*height*4); + + texture.setResource(new BufferResource(uint8Array)); + + return texture; + } + } \ No newline at end of file diff --git a/src/core/textures/new/resources/BufferResource.js b/src/core/textures/new/resources/BufferResource.js index 4955d45..56ec6dc 100644 --- a/src/core/textures/new/resources/BufferResource.js +++ b/src/core/textures/new/resources/BufferResource.js @@ -5,8 +5,9 @@ { this.source = source; this.loaded = false; // TODO rename to ready? - this.width = 1; - this.height = 1; + this.width = -1; + this.height = -1; + this.uploadable = false; this.load = new Promise((resolve, reject) => { @@ -19,6 +20,4 @@ { return new BufferResource(array); } - - } \ No newline at end of file diff --git a/src/core/textures/new/resources/ImageResource.js b/src/core/textures/new/resources/ImageResource.js index 07944b6..9fa1c58 100644 --- a/src/core/textures/new/resources/ImageResource.js +++ b/src/core/textures/new/resources/ImageResource.js @@ -5,8 +5,10 @@ { this.source = source; this.loaded = false; // TODO rename to ready? - this.width = 1; - this.height = 1; + this.width = -1; + this.height = -1; + + this.uploadable = true; this.load = new Promise((resolve, reject) => {