diff --git a/src/core/index.js b/src/core/index.js index 93c0129..28b69da 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -38,6 +38,7 @@ export { default as TextureUvs } from './textures/TextureUvs'; export { default as CanvasRenderTarget } from './renderers/canvas/utils/CanvasRenderTarget'; export { default as WebGLManager } from './renderers/webgl/managers/WebGLManager'; +export { default as State } from './renderers/webgl/State'; export { default as ObjectRenderer } from './renderers/webgl/utils/ObjectRenderer'; export { default as RenderTarget } from './renderers/webgl/utils/RenderTarget'; export { default as Quad } from './renderers/webgl/utils/Quad'; diff --git a/src/core/index.js b/src/core/index.js index 93c0129..28b69da 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -38,6 +38,7 @@ export { default as TextureUvs } from './textures/TextureUvs'; export { default as CanvasRenderTarget } from './renderers/canvas/utils/CanvasRenderTarget'; export { default as WebGLManager } from './renderers/webgl/managers/WebGLManager'; +export { default as State } from './renderers/webgl/State'; export { default as ObjectRenderer } from './renderers/webgl/utils/ObjectRenderer'; export { default as RenderTarget } from './renderers/webgl/utils/RenderTarget'; export { default as Quad } from './renderers/webgl/utils/Quad'; diff --git a/src/core/renderers/webgl/StateManager.js b/src/core/renderers/webgl/StateManager.js deleted file mode 100755 index d6c8b59..0000000 --- a/src/core/renderers/webgl/StateManager.js +++ /dev/null @@ -1,273 +0,0 @@ -import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; - -const BLEND = 0; -const OFFSET = 1; -const CULLING = 2; -const DEPTH_TEST = 3; -const WINDING = 4; - -/** - * A WebGL state machines - * - * @memberof PIXI - * @class - */ -export default class StateManager -{ - /** - * @param {WebGLRenderingContext} gl - The current WebGL rendering context - */ - constructor(gl) - { - - /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - - this.attribState = { - tempAttribState: new Array(this.maxAttribs), - attribState: new Array(this.maxAttribs), - }; - - this.blendModes = mapWebGLBlendModesToPixi(gl); - - // check we have vao.. - this.nativeVaoExtension = ( - gl.getExtension('OES_vertex_array_object') - || gl.getExtension('MOZ_OES_vertex_array_object') - || gl.getExtension('WEBKIT_OES_vertex_array_object') - ); - - this.stateId = 0; - this.polygonOffset = 0; - this.blendMode = 0; - - this.map = []; - - // map functions for when we set state.. - this.map[BLEND] = this.setBlend; - this.map[OFFSET] = this.setPolygonOffset; - this.map[CULLING] = this.setCullFace; - this.map[DEPTH_TEST] = this.setDepthTest; - this.map[WINDING] = this.setFrontFace; - - this.checks = []; - -/* - this.p1 = true; - this.p2 = false; - this.p3 = false; - this.p4 = true; - this.p5 = true; - this.p5 = false; - - - // pack into bitfield.. - this.st = (true << 0) | (false << 1) | (true << 2); - this.st2 = (false << 0) | (false << 1) | (true << 2); - - this.st &= ~(1<<2); - - console.log(this.st); - - console.log("0 is " + !!(this.st & (1 << 0)) ); - console.log("1 is " + !!(this.st & (1 << 1)) ); - console.log("2 is " + !!(this.st & (1 << 2)) ); - - //if(this.st !== ) - let diff = this.st ^ this.st2; - let i = 0; - - // order from least to most common - while(diff) - { - if(diff & 1) - { - //skips least common.. - console.log(' diff is ' + i) - } - diff = diff >> 1; - i++; - }*/ - } - - /** - * Sets the current state - * - * @param {*} state - The state to set. - */ - set state(state) - { - // TODO maybe to an object check? ( this.state === state )? - if(this.stateId === state.data)return; - - let diff = this.stateId ^ state.data; - let i = 0; - - // order from least to most common - while(diff) - { - if(diff & 1) - { - // state change! - this.map[i](state.data ^= (1 << i)); - } - - diff = diff >> 1; - i++; - } - - // based on the above settings we check for specific modes.. - // for example if blend is active we check and set the blend modes - // or of polygon offset is active we check the poly depth. - for (let i = 0; i < this.checks.length; i++) - { - this.checks[i](this, state); - }; - } - - - /** - * Enables or disabled blending. - * - * @param {boolean} value - Turn on or off webgl blending. - */ - setBlend(value) - { - this.updateCheck(StateManager.checkBlendMode, value); - - this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); - } - - setPolygonOffset(value) - { - this.gl[value ? 'enable' : 'disable'](this.gl.POLYGON_OFFSET_FILL); - } - - /** - * Sets whether to enable or disable depth test. - * - * @param {boolean} value - Turn on or off webgl depth testing. - */ - setDepthTest(value) - { - this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); - } - - /** - * Sets whether to enable or disable cull face. - * - * @param {boolean} value - Turn on or off webgl cull face. - */ - setCullFace(value) - { - this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); - } - - /** - * Sets the gl front face. - * - * @param {boolean} value - true is clockwise and false is counter-clockwise - */ - setFrontFace(value) - { - this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); - } - - /** - * Sets the blend mode. - * - * @param {number} value - The blend mode to set to. - */ - setBlendMode(value) - { - if (value === this.blendMode) - { - return; - } - - this.gl.blendFunc(this.blendModes[value][0], this.blendModes[value][1]); - } - - /** - * Sets the polygon offset. - * - * @param {number} value - The blend mode to set to. - */ - setPolygonOffset(value, scale) - { - this.gl.polygonOffset(value, scale); - } - - /** - * Disables all the vaos in use - * - */ - resetAttributes() - { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) - { - this.attribState.tempAttribState[i] = 0; - } - - for (let i = 0; i < this.attribState.attribState.length; i++) - { - this.attribState.attribState[i] = 0; - } - - // im going to assume one is always active for performance reasons. - for (let i = 1; i < this.maxAttribs; i++) - { - this.gl.disableVertexAttribArray(i); - } - } - - // used - /** - * Resets all the logic and disables the vaos - */ - resetToDefault() - { - // unbind any VAO if they exist.. - if (this.nativeVaoExtension) - { - this.nativeVaoExtension.bindVertexArrayOES(null); - } - - // reset all attributes.. - this.resetAttributes(); - - this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, false); - - //TO DO? - //this.setState(this.defaultState); - } - - updateCheck(func, value) - { - const index = this.checks.indexOf(func); - - if(value && index === -1) - { - this.checks.push(func); - } - else if(!value && index !== -1) - { - this.checks.splice(index, 1); - } - - } - - //static function maintains scope! - static checkBlendMode(manager, state) - { - manager.setBlendMode(state.blendMode); - } - - // TODO - polygon offset? -} diff --git a/src/core/index.js b/src/core/index.js index 93c0129..28b69da 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -38,6 +38,7 @@ export { default as TextureUvs } from './textures/TextureUvs'; export { default as CanvasRenderTarget } from './renderers/canvas/utils/CanvasRenderTarget'; export { default as WebGLManager } from './renderers/webgl/managers/WebGLManager'; +export { default as State } from './renderers/webgl/State'; export { default as ObjectRenderer } from './renderers/webgl/utils/ObjectRenderer'; export { default as RenderTarget } from './renderers/webgl/utils/RenderTarget'; export { default as Quad } from './renderers/webgl/utils/Quad'; diff --git a/src/core/renderers/webgl/StateManager.js b/src/core/renderers/webgl/StateManager.js deleted file mode 100755 index d6c8b59..0000000 --- a/src/core/renderers/webgl/StateManager.js +++ /dev/null @@ -1,273 +0,0 @@ -import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; - -const BLEND = 0; -const OFFSET = 1; -const CULLING = 2; -const DEPTH_TEST = 3; -const WINDING = 4; - -/** - * A WebGL state machines - * - * @memberof PIXI - * @class - */ -export default class StateManager -{ - /** - * @param {WebGLRenderingContext} gl - The current WebGL rendering context - */ - constructor(gl) - { - - /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - - this.attribState = { - tempAttribState: new Array(this.maxAttribs), - attribState: new Array(this.maxAttribs), - }; - - this.blendModes = mapWebGLBlendModesToPixi(gl); - - // check we have vao.. - this.nativeVaoExtension = ( - gl.getExtension('OES_vertex_array_object') - || gl.getExtension('MOZ_OES_vertex_array_object') - || gl.getExtension('WEBKIT_OES_vertex_array_object') - ); - - this.stateId = 0; - this.polygonOffset = 0; - this.blendMode = 0; - - this.map = []; - - // map functions for when we set state.. - this.map[BLEND] = this.setBlend; - this.map[OFFSET] = this.setPolygonOffset; - this.map[CULLING] = this.setCullFace; - this.map[DEPTH_TEST] = this.setDepthTest; - this.map[WINDING] = this.setFrontFace; - - this.checks = []; - -/* - this.p1 = true; - this.p2 = false; - this.p3 = false; - this.p4 = true; - this.p5 = true; - this.p5 = false; - - - // pack into bitfield.. - this.st = (true << 0) | (false << 1) | (true << 2); - this.st2 = (false << 0) | (false << 1) | (true << 2); - - this.st &= ~(1<<2); - - console.log(this.st); - - console.log("0 is " + !!(this.st & (1 << 0)) ); - console.log("1 is " + !!(this.st & (1 << 1)) ); - console.log("2 is " + !!(this.st & (1 << 2)) ); - - //if(this.st !== ) - let diff = this.st ^ this.st2; - let i = 0; - - // order from least to most common - while(diff) - { - if(diff & 1) - { - //skips least common.. - console.log(' diff is ' + i) - } - diff = diff >> 1; - i++; - }*/ - } - - /** - * Sets the current state - * - * @param {*} state - The state to set. - */ - set state(state) - { - // TODO maybe to an object check? ( this.state === state )? - if(this.stateId === state.data)return; - - let diff = this.stateId ^ state.data; - let i = 0; - - // order from least to most common - while(diff) - { - if(diff & 1) - { - // state change! - this.map[i](state.data ^= (1 << i)); - } - - diff = diff >> 1; - i++; - } - - // based on the above settings we check for specific modes.. - // for example if blend is active we check and set the blend modes - // or of polygon offset is active we check the poly depth. - for (let i = 0; i < this.checks.length; i++) - { - this.checks[i](this, state); - }; - } - - - /** - * Enables or disabled blending. - * - * @param {boolean} value - Turn on or off webgl blending. - */ - setBlend(value) - { - this.updateCheck(StateManager.checkBlendMode, value); - - this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); - } - - setPolygonOffset(value) - { - this.gl[value ? 'enable' : 'disable'](this.gl.POLYGON_OFFSET_FILL); - } - - /** - * Sets whether to enable or disable depth test. - * - * @param {boolean} value - Turn on or off webgl depth testing. - */ - setDepthTest(value) - { - this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); - } - - /** - * Sets whether to enable or disable cull face. - * - * @param {boolean} value - Turn on or off webgl cull face. - */ - setCullFace(value) - { - this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); - } - - /** - * Sets the gl front face. - * - * @param {boolean} value - true is clockwise and false is counter-clockwise - */ - setFrontFace(value) - { - this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); - } - - /** - * Sets the blend mode. - * - * @param {number} value - The blend mode to set to. - */ - setBlendMode(value) - { - if (value === this.blendMode) - { - return; - } - - this.gl.blendFunc(this.blendModes[value][0], this.blendModes[value][1]); - } - - /** - * Sets the polygon offset. - * - * @param {number} value - The blend mode to set to. - */ - setPolygonOffset(value, scale) - { - this.gl.polygonOffset(value, scale); - } - - /** - * Disables all the vaos in use - * - */ - resetAttributes() - { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) - { - this.attribState.tempAttribState[i] = 0; - } - - for (let i = 0; i < this.attribState.attribState.length; i++) - { - this.attribState.attribState[i] = 0; - } - - // im going to assume one is always active for performance reasons. - for (let i = 1; i < this.maxAttribs; i++) - { - this.gl.disableVertexAttribArray(i); - } - } - - // used - /** - * Resets all the logic and disables the vaos - */ - resetToDefault() - { - // unbind any VAO if they exist.. - if (this.nativeVaoExtension) - { - this.nativeVaoExtension.bindVertexArrayOES(null); - } - - // reset all attributes.. - this.resetAttributes(); - - this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, false); - - //TO DO? - //this.setState(this.defaultState); - } - - updateCheck(func, value) - { - const index = this.checks.indexOf(func); - - if(value && index === -1) - { - this.checks.push(func); - } - else if(!value && index !== -1) - { - this.checks.splice(index, 1); - } - - } - - //static function maintains scope! - static checkBlendMode(manager, state) - { - manager.setBlendMode(state.blendMode); - } - - // TODO - polygon offset? -} diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index f552046..6226886 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -5,6 +5,7 @@ import RenderTarget from './utils/RenderTarget'; import ObjectRenderer from './utils/ObjectRenderer'; import TextureManager from './TextureManager'; +import StateManager from './managers/StateManager'; import ShaderManager from './ShaderManager'; import BaseTexture from '../../textures/BaseTexture'; import TextureGarbageCollector from './TextureGarbageCollector'; @@ -138,7 +139,8 @@ * * @member {PIXI.WebGLState} */ - this.state = new WebGLState(this.gl); +// this.state = new WebGLState(this.gl); + this.state = new StateManager(this.gl); this.renderingToScreen = true; diff --git a/src/core/index.js b/src/core/index.js index 93c0129..28b69da 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -38,6 +38,7 @@ export { default as TextureUvs } from './textures/TextureUvs'; export { default as CanvasRenderTarget } from './renderers/canvas/utils/CanvasRenderTarget'; export { default as WebGLManager } from './renderers/webgl/managers/WebGLManager'; +export { default as State } from './renderers/webgl/State'; export { default as ObjectRenderer } from './renderers/webgl/utils/ObjectRenderer'; export { default as RenderTarget } from './renderers/webgl/utils/RenderTarget'; export { default as Quad } from './renderers/webgl/utils/Quad'; diff --git a/src/core/renderers/webgl/StateManager.js b/src/core/renderers/webgl/StateManager.js deleted file mode 100755 index d6c8b59..0000000 --- a/src/core/renderers/webgl/StateManager.js +++ /dev/null @@ -1,273 +0,0 @@ -import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; - -const BLEND = 0; -const OFFSET = 1; -const CULLING = 2; -const DEPTH_TEST = 3; -const WINDING = 4; - -/** - * A WebGL state machines - * - * @memberof PIXI - * @class - */ -export default class StateManager -{ - /** - * @param {WebGLRenderingContext} gl - The current WebGL rendering context - */ - constructor(gl) - { - - /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - - this.attribState = { - tempAttribState: new Array(this.maxAttribs), - attribState: new Array(this.maxAttribs), - }; - - this.blendModes = mapWebGLBlendModesToPixi(gl); - - // check we have vao.. - this.nativeVaoExtension = ( - gl.getExtension('OES_vertex_array_object') - || gl.getExtension('MOZ_OES_vertex_array_object') - || gl.getExtension('WEBKIT_OES_vertex_array_object') - ); - - this.stateId = 0; - this.polygonOffset = 0; - this.blendMode = 0; - - this.map = []; - - // map functions for when we set state.. - this.map[BLEND] = this.setBlend; - this.map[OFFSET] = this.setPolygonOffset; - this.map[CULLING] = this.setCullFace; - this.map[DEPTH_TEST] = this.setDepthTest; - this.map[WINDING] = this.setFrontFace; - - this.checks = []; - -/* - this.p1 = true; - this.p2 = false; - this.p3 = false; - this.p4 = true; - this.p5 = true; - this.p5 = false; - - - // pack into bitfield.. - this.st = (true << 0) | (false << 1) | (true << 2); - this.st2 = (false << 0) | (false << 1) | (true << 2); - - this.st &= ~(1<<2); - - console.log(this.st); - - console.log("0 is " + !!(this.st & (1 << 0)) ); - console.log("1 is " + !!(this.st & (1 << 1)) ); - console.log("2 is " + !!(this.st & (1 << 2)) ); - - //if(this.st !== ) - let diff = this.st ^ this.st2; - let i = 0; - - // order from least to most common - while(diff) - { - if(diff & 1) - { - //skips least common.. - console.log(' diff is ' + i) - } - diff = diff >> 1; - i++; - }*/ - } - - /** - * Sets the current state - * - * @param {*} state - The state to set. - */ - set state(state) - { - // TODO maybe to an object check? ( this.state === state )? - if(this.stateId === state.data)return; - - let diff = this.stateId ^ state.data; - let i = 0; - - // order from least to most common - while(diff) - { - if(diff & 1) - { - // state change! - this.map[i](state.data ^= (1 << i)); - } - - diff = diff >> 1; - i++; - } - - // based on the above settings we check for specific modes.. - // for example if blend is active we check and set the blend modes - // or of polygon offset is active we check the poly depth. - for (let i = 0; i < this.checks.length; i++) - { - this.checks[i](this, state); - }; - } - - - /** - * Enables or disabled blending. - * - * @param {boolean} value - Turn on or off webgl blending. - */ - setBlend(value) - { - this.updateCheck(StateManager.checkBlendMode, value); - - this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); - } - - setPolygonOffset(value) - { - this.gl[value ? 'enable' : 'disable'](this.gl.POLYGON_OFFSET_FILL); - } - - /** - * Sets whether to enable or disable depth test. - * - * @param {boolean} value - Turn on or off webgl depth testing. - */ - setDepthTest(value) - { - this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); - } - - /** - * Sets whether to enable or disable cull face. - * - * @param {boolean} value - Turn on or off webgl cull face. - */ - setCullFace(value) - { - this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); - } - - /** - * Sets the gl front face. - * - * @param {boolean} value - true is clockwise and false is counter-clockwise - */ - setFrontFace(value) - { - this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); - } - - /** - * Sets the blend mode. - * - * @param {number} value - The blend mode to set to. - */ - setBlendMode(value) - { - if (value === this.blendMode) - { - return; - } - - this.gl.blendFunc(this.blendModes[value][0], this.blendModes[value][1]); - } - - /** - * Sets the polygon offset. - * - * @param {number} value - The blend mode to set to. - */ - setPolygonOffset(value, scale) - { - this.gl.polygonOffset(value, scale); - } - - /** - * Disables all the vaos in use - * - */ - resetAttributes() - { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) - { - this.attribState.tempAttribState[i] = 0; - } - - for (let i = 0; i < this.attribState.attribState.length; i++) - { - this.attribState.attribState[i] = 0; - } - - // im going to assume one is always active for performance reasons. - for (let i = 1; i < this.maxAttribs; i++) - { - this.gl.disableVertexAttribArray(i); - } - } - - // used - /** - * Resets all the logic and disables the vaos - */ - resetToDefault() - { - // unbind any VAO if they exist.. - if (this.nativeVaoExtension) - { - this.nativeVaoExtension.bindVertexArrayOES(null); - } - - // reset all attributes.. - this.resetAttributes(); - - this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, false); - - //TO DO? - //this.setState(this.defaultState); - } - - updateCheck(func, value) - { - const index = this.checks.indexOf(func); - - if(value && index === -1) - { - this.checks.push(func); - } - else if(!value && index !== -1) - { - this.checks.splice(index, 1); - } - - } - - //static function maintains scope! - static checkBlendMode(manager, state) - { - manager.setBlendMode(state.blendMode); - } - - // TODO - polygon offset? -} diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index f552046..6226886 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -5,6 +5,7 @@ import RenderTarget from './utils/RenderTarget'; import ObjectRenderer from './utils/ObjectRenderer'; import TextureManager from './TextureManager'; +import StateManager from './managers/StateManager'; import ShaderManager from './ShaderManager'; import BaseTexture from '../../textures/BaseTexture'; import TextureGarbageCollector from './TextureGarbageCollector'; @@ -138,7 +139,8 @@ * * @member {PIXI.WebGLState} */ - this.state = new WebGLState(this.gl); +// this.state = new WebGLState(this.gl); + this.state = new StateManager(this.gl); this.renderingToScreen = true; diff --git a/src/core/renderers/webgl/managers/StateManager.js b/src/core/renderers/webgl/managers/StateManager.js new file mode 100755 index 0000000..36efb3b --- /dev/null +++ b/src/core/renderers/webgl/managers/StateManager.js @@ -0,0 +1,275 @@ +import mapWebGLBlendModesToPixi from '../utils/mapWebGLBlendModesToPixi'; + +const BLEND = 0; +const OFFSET = 1; +const CULLING = 2; +const DEPTH_TEST = 3; +const WINDING = 4; + +/** + * A WebGL state machines + * + * @memberof PIXI + * @class + */ +export default class StateManager +{ + /** + * @param {WebGLRenderingContext} gl - The current WebGL rendering context + */ + constructor(gl) + { + + /** + * The current WebGL rendering context + * + * @member {WebGLRenderingContext} + */ + this.gl = gl; + + this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); + + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs), + }; + + this.blendModes = mapWebGLBlendModesToPixi(gl); + + // check we have vao.. + this.nativeVaoExtension = ( + gl.getExtension('OES_vertex_array_object') + || gl.getExtension('MOZ_OES_vertex_array_object') + || gl.getExtension('WEBKIT_OES_vertex_array_object') + ); + + this.stateId = 0; + this.polygonOffset = 0; + this.blendMode = 0; + + this.map = []; + + // map functions for when we set state.. + this.map[BLEND] = this.setBlend; + this.map[OFFSET] = this.setPolygonOffset; + this.map[CULLING] = this.setCullFace; + this.map[DEPTH_TEST] = this.setDepthTest; + this.map[WINDING] = this.setFrontFace; + + this.checks = []; + +/* + this.p1 = true; + this.p2 = false; + this.p3 = false; + this.p4 = true; + this.p5 = true; + this.p5 = false; + + + // pack into bitfield.. + this.st = (true << 0) | (false << 1) | (true << 2); + this.st2 = (false << 0) | (false << 1) | (true << 2); + + this.st &= ~(1<<2); + + console.log(this.st); + + console.log("0 is " + !!(this.st & (1 << 0)) ); + console.log("1 is " + !!(this.st & (1 << 1)) ); + console.log("2 is " + !!(this.st & (1 << 2)) ); + + //if(this.st !== ) + let diff = this.st ^ this.st2; + let i = 0; + + // order from least to most common + while(diff) + { + if(diff & 1) + { + //skips least common.. + console.log(' diff is ' + i) + } + diff = diff >> 1; + i++; + }*/ + } + + /** + * Sets the current state + * + * @param {*} state - The state to set. + */ + setState(state) + { + // TODO maybe to an object check? ( this.state === state )? + if(this.stateId === state.data)return; + + let diff = this.stateId ^ state.data; + let i = 0; + + // order from least to most common + while(diff) + { + if(diff & 1) + { + // state change! + this.map[i].call(this, !!(state.data & (1 << i)) ); + } + + diff = diff >> 1; + i++; + } + + // based on the above settings we check for specific modes.. + // for example if blend is active we check and set the blend modes + // or of polygon offset is active we check the poly depth. + for (let i = 0; i < this.checks.length; i++) + { + this.checks[i](this, state); + }; + + this.stateId = state.data; + } + + + /** + * Enables or disabled blending. + * + * @param {boolean} value - Turn on or off webgl blending. + */ + setBlend(value) + { + this.updateCheck(StateManager.checkBlendMode, value); + + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); + } + + setPolygonOffset(value) + { + this.gl[value ? 'enable' : 'disable'](this.gl.POLYGON_OFFSET_FILL); + } + + /** + * Sets whether to enable or disable depth test. + * + * @param {boolean} value - Turn on or off webgl depth testing. + */ + setDepthTest(value) + { + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); + } + + /** + * Sets whether to enable or disable cull face. + * + * @param {boolean} value - Turn on or off webgl cull face. + */ + setCullFace(value) + { + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); + } + + /** + * Sets the gl front face. + * + * @param {boolean} value - true is clockwise and false is counter-clockwise + */ + setFrontFace(value) + { + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); + } + + /** + * Sets the blend mode. + * + * @param {number} value - The blend mode to set to. + */ + setBlendMode(value) + { + if (value === this.blendMode) + { + return; + } + + this.gl.blendFunc(this.blendModes[value][0], this.blendModes[value][1]); + } + + /** + * Sets the polygon offset. + * + * @param {number} value - The blend mode to set to. + */ + setPolygonOffset(value, scale) + { + this.gl.polygonOffset(value, scale); + } + + /** + * Disables all the vaos in use + * + */ + resetAttributes() + { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { + this.attribState.tempAttribState[i] = 0; + } + + for (let i = 0; i < this.attribState.attribState.length; i++) + { + this.attribState.attribState[i] = 0; + } + + // im going to assume one is always active for performance reasons. + for (let i = 1; i < this.maxAttribs; i++) + { + this.gl.disableVertexAttribArray(i); + } + } + + // used + /** + * Resets all the logic and disables the vaos + */ + resetToDefault() + { + // unbind any VAO if they exist.. + if (this.nativeVaoExtension) + { + this.nativeVaoExtension.bindVertexArrayOES(null); + } + + // reset all attributes.. + this.resetAttributes(); + + this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, false); + + //TO DO? + //this.setState(this.defaultState); + } + + updateCheck(func, value) + { + const index = this.checks.indexOf(func); + + if(value && index === -1) + { + this.checks.push(func); + } + else if(!value && index !== -1) + { + this.checks.splice(index, 1); + } + + } + + //static function maintains scope! + static checkBlendMode(manager, state) + { + manager.setBlendMode(state.blendMode); + } + + // TODO - polygon offset? +} diff --git a/src/core/index.js b/src/core/index.js index 93c0129..28b69da 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -38,6 +38,7 @@ export { default as TextureUvs } from './textures/TextureUvs'; export { default as CanvasRenderTarget } from './renderers/canvas/utils/CanvasRenderTarget'; export { default as WebGLManager } from './renderers/webgl/managers/WebGLManager'; +export { default as State } from './renderers/webgl/State'; export { default as ObjectRenderer } from './renderers/webgl/utils/ObjectRenderer'; export { default as RenderTarget } from './renderers/webgl/utils/RenderTarget'; export { default as Quad } from './renderers/webgl/utils/Quad'; diff --git a/src/core/renderers/webgl/StateManager.js b/src/core/renderers/webgl/StateManager.js deleted file mode 100755 index d6c8b59..0000000 --- a/src/core/renderers/webgl/StateManager.js +++ /dev/null @@ -1,273 +0,0 @@ -import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; - -const BLEND = 0; -const OFFSET = 1; -const CULLING = 2; -const DEPTH_TEST = 3; -const WINDING = 4; - -/** - * A WebGL state machines - * - * @memberof PIXI - * @class - */ -export default class StateManager -{ - /** - * @param {WebGLRenderingContext} gl - The current WebGL rendering context - */ - constructor(gl) - { - - /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - - this.attribState = { - tempAttribState: new Array(this.maxAttribs), - attribState: new Array(this.maxAttribs), - }; - - this.blendModes = mapWebGLBlendModesToPixi(gl); - - // check we have vao.. - this.nativeVaoExtension = ( - gl.getExtension('OES_vertex_array_object') - || gl.getExtension('MOZ_OES_vertex_array_object') - || gl.getExtension('WEBKIT_OES_vertex_array_object') - ); - - this.stateId = 0; - this.polygonOffset = 0; - this.blendMode = 0; - - this.map = []; - - // map functions for when we set state.. - this.map[BLEND] = this.setBlend; - this.map[OFFSET] = this.setPolygonOffset; - this.map[CULLING] = this.setCullFace; - this.map[DEPTH_TEST] = this.setDepthTest; - this.map[WINDING] = this.setFrontFace; - - this.checks = []; - -/* - this.p1 = true; - this.p2 = false; - this.p3 = false; - this.p4 = true; - this.p5 = true; - this.p5 = false; - - - // pack into bitfield.. - this.st = (true << 0) | (false << 1) | (true << 2); - this.st2 = (false << 0) | (false << 1) | (true << 2); - - this.st &= ~(1<<2); - - console.log(this.st); - - console.log("0 is " + !!(this.st & (1 << 0)) ); - console.log("1 is " + !!(this.st & (1 << 1)) ); - console.log("2 is " + !!(this.st & (1 << 2)) ); - - //if(this.st !== ) - let diff = this.st ^ this.st2; - let i = 0; - - // order from least to most common - while(diff) - { - if(diff & 1) - { - //skips least common.. - console.log(' diff is ' + i) - } - diff = diff >> 1; - i++; - }*/ - } - - /** - * Sets the current state - * - * @param {*} state - The state to set. - */ - set state(state) - { - // TODO maybe to an object check? ( this.state === state )? - if(this.stateId === state.data)return; - - let diff = this.stateId ^ state.data; - let i = 0; - - // order from least to most common - while(diff) - { - if(diff & 1) - { - // state change! - this.map[i](state.data ^= (1 << i)); - } - - diff = diff >> 1; - i++; - } - - // based on the above settings we check for specific modes.. - // for example if blend is active we check and set the blend modes - // or of polygon offset is active we check the poly depth. - for (let i = 0; i < this.checks.length; i++) - { - this.checks[i](this, state); - }; - } - - - /** - * Enables or disabled blending. - * - * @param {boolean} value - Turn on or off webgl blending. - */ - setBlend(value) - { - this.updateCheck(StateManager.checkBlendMode, value); - - this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); - } - - setPolygonOffset(value) - { - this.gl[value ? 'enable' : 'disable'](this.gl.POLYGON_OFFSET_FILL); - } - - /** - * Sets whether to enable or disable depth test. - * - * @param {boolean} value - Turn on or off webgl depth testing. - */ - setDepthTest(value) - { - this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); - } - - /** - * Sets whether to enable or disable cull face. - * - * @param {boolean} value - Turn on or off webgl cull face. - */ - setCullFace(value) - { - this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); - } - - /** - * Sets the gl front face. - * - * @param {boolean} value - true is clockwise and false is counter-clockwise - */ - setFrontFace(value) - { - this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); - } - - /** - * Sets the blend mode. - * - * @param {number} value - The blend mode to set to. - */ - setBlendMode(value) - { - if (value === this.blendMode) - { - return; - } - - this.gl.blendFunc(this.blendModes[value][0], this.blendModes[value][1]); - } - - /** - * Sets the polygon offset. - * - * @param {number} value - The blend mode to set to. - */ - setPolygonOffset(value, scale) - { - this.gl.polygonOffset(value, scale); - } - - /** - * Disables all the vaos in use - * - */ - resetAttributes() - { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) - { - this.attribState.tempAttribState[i] = 0; - } - - for (let i = 0; i < this.attribState.attribState.length; i++) - { - this.attribState.attribState[i] = 0; - } - - // im going to assume one is always active for performance reasons. - for (let i = 1; i < this.maxAttribs; i++) - { - this.gl.disableVertexAttribArray(i); - } - } - - // used - /** - * Resets all the logic and disables the vaos - */ - resetToDefault() - { - // unbind any VAO if they exist.. - if (this.nativeVaoExtension) - { - this.nativeVaoExtension.bindVertexArrayOES(null); - } - - // reset all attributes.. - this.resetAttributes(); - - this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, false); - - //TO DO? - //this.setState(this.defaultState); - } - - updateCheck(func, value) - { - const index = this.checks.indexOf(func); - - if(value && index === -1) - { - this.checks.push(func); - } - else if(!value && index !== -1) - { - this.checks.splice(index, 1); - } - - } - - //static function maintains scope! - static checkBlendMode(manager, state) - { - manager.setBlendMode(state.blendMode); - } - - // TODO - polygon offset? -} diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index f552046..6226886 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -5,6 +5,7 @@ import RenderTarget from './utils/RenderTarget'; import ObjectRenderer from './utils/ObjectRenderer'; import TextureManager from './TextureManager'; +import StateManager from './managers/StateManager'; import ShaderManager from './ShaderManager'; import BaseTexture from '../../textures/BaseTexture'; import TextureGarbageCollector from './TextureGarbageCollector'; @@ -138,7 +139,8 @@ * * @member {PIXI.WebGLState} */ - this.state = new WebGLState(this.gl); +// this.state = new WebGLState(this.gl); + this.state = new StateManager(this.gl); this.renderingToScreen = true; diff --git a/src/core/renderers/webgl/managers/StateManager.js b/src/core/renderers/webgl/managers/StateManager.js new file mode 100755 index 0000000..36efb3b --- /dev/null +++ b/src/core/renderers/webgl/managers/StateManager.js @@ -0,0 +1,275 @@ +import mapWebGLBlendModesToPixi from '../utils/mapWebGLBlendModesToPixi'; + +const BLEND = 0; +const OFFSET = 1; +const CULLING = 2; +const DEPTH_TEST = 3; +const WINDING = 4; + +/** + * A WebGL state machines + * + * @memberof PIXI + * @class + */ +export default class StateManager +{ + /** + * @param {WebGLRenderingContext} gl - The current WebGL rendering context + */ + constructor(gl) + { + + /** + * The current WebGL rendering context + * + * @member {WebGLRenderingContext} + */ + this.gl = gl; + + this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); + + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs), + }; + + this.blendModes = mapWebGLBlendModesToPixi(gl); + + // check we have vao.. + this.nativeVaoExtension = ( + gl.getExtension('OES_vertex_array_object') + || gl.getExtension('MOZ_OES_vertex_array_object') + || gl.getExtension('WEBKIT_OES_vertex_array_object') + ); + + this.stateId = 0; + this.polygonOffset = 0; + this.blendMode = 0; + + this.map = []; + + // map functions for when we set state.. + this.map[BLEND] = this.setBlend; + this.map[OFFSET] = this.setPolygonOffset; + this.map[CULLING] = this.setCullFace; + this.map[DEPTH_TEST] = this.setDepthTest; + this.map[WINDING] = this.setFrontFace; + + this.checks = []; + +/* + this.p1 = true; + this.p2 = false; + this.p3 = false; + this.p4 = true; + this.p5 = true; + this.p5 = false; + + + // pack into bitfield.. + this.st = (true << 0) | (false << 1) | (true << 2); + this.st2 = (false << 0) | (false << 1) | (true << 2); + + this.st &= ~(1<<2); + + console.log(this.st); + + console.log("0 is " + !!(this.st & (1 << 0)) ); + console.log("1 is " + !!(this.st & (1 << 1)) ); + console.log("2 is " + !!(this.st & (1 << 2)) ); + + //if(this.st !== ) + let diff = this.st ^ this.st2; + let i = 0; + + // order from least to most common + while(diff) + { + if(diff & 1) + { + //skips least common.. + console.log(' diff is ' + i) + } + diff = diff >> 1; + i++; + }*/ + } + + /** + * Sets the current state + * + * @param {*} state - The state to set. + */ + setState(state) + { + // TODO maybe to an object check? ( this.state === state )? + if(this.stateId === state.data)return; + + let diff = this.stateId ^ state.data; + let i = 0; + + // order from least to most common + while(diff) + { + if(diff & 1) + { + // state change! + this.map[i].call(this, !!(state.data & (1 << i)) ); + } + + diff = diff >> 1; + i++; + } + + // based on the above settings we check for specific modes.. + // for example if blend is active we check and set the blend modes + // or of polygon offset is active we check the poly depth. + for (let i = 0; i < this.checks.length; i++) + { + this.checks[i](this, state); + }; + + this.stateId = state.data; + } + + + /** + * Enables or disabled blending. + * + * @param {boolean} value - Turn on or off webgl blending. + */ + setBlend(value) + { + this.updateCheck(StateManager.checkBlendMode, value); + + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); + } + + setPolygonOffset(value) + { + this.gl[value ? 'enable' : 'disable'](this.gl.POLYGON_OFFSET_FILL); + } + + /** + * Sets whether to enable or disable depth test. + * + * @param {boolean} value - Turn on or off webgl depth testing. + */ + setDepthTest(value) + { + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); + } + + /** + * Sets whether to enable or disable cull face. + * + * @param {boolean} value - Turn on or off webgl cull face. + */ + setCullFace(value) + { + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); + } + + /** + * Sets the gl front face. + * + * @param {boolean} value - true is clockwise and false is counter-clockwise + */ + setFrontFace(value) + { + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); + } + + /** + * Sets the blend mode. + * + * @param {number} value - The blend mode to set to. + */ + setBlendMode(value) + { + if (value === this.blendMode) + { + return; + } + + this.gl.blendFunc(this.blendModes[value][0], this.blendModes[value][1]); + } + + /** + * Sets the polygon offset. + * + * @param {number} value - The blend mode to set to. + */ + setPolygonOffset(value, scale) + { + this.gl.polygonOffset(value, scale); + } + + /** + * Disables all the vaos in use + * + */ + resetAttributes() + { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { + this.attribState.tempAttribState[i] = 0; + } + + for (let i = 0; i < this.attribState.attribState.length; i++) + { + this.attribState.attribState[i] = 0; + } + + // im going to assume one is always active for performance reasons. + for (let i = 1; i < this.maxAttribs; i++) + { + this.gl.disableVertexAttribArray(i); + } + } + + // used + /** + * Resets all the logic and disables the vaos + */ + resetToDefault() + { + // unbind any VAO if they exist.. + if (this.nativeVaoExtension) + { + this.nativeVaoExtension.bindVertexArrayOES(null); + } + + // reset all attributes.. + this.resetAttributes(); + + this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, false); + + //TO DO? + //this.setState(this.defaultState); + } + + updateCheck(func, value) + { + const index = this.checks.indexOf(func); + + if(value && index === -1) + { + this.checks.push(func); + } + else if(!value && index !== -1) + { + this.checks.splice(index, 1); + } + + } + + //static function maintains scope! + static checkBlendMode(manager, state) + { + manager.setBlendMode(state.blendMode); + } + + // TODO - polygon offset? +} diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 01a308f..8d8c31c 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -13,9 +13,11 @@ * @param {PIXI.Shader} shader the shader the mesh will use * @param {number} drawMode the drawMode, can be any of the PIXI.DRAW_MODES consts */ - constructor(geometry, shader, drawMode = core.DRAW_MODES.TRIANGLES, uniforms = {}) + constructor(geometry, shader, uniforms, state, drawMode = core.DRAW_MODES.TRIANGLES) { + //drawMode = core.DRAW_MODES.TRIANGLES, uniforms = {}) super(); + /** * the geometry the mesh will use * @type {PIXI.mesh.Geometry} @@ -24,6 +26,8 @@ this.shader = shader; + this.state = state || new core.State(); + /** * The blend mode to be applied to the sprite. Set to `PIXI.BLEND_MODES.NORMAL` to remove any blend mode. * @@ -39,7 +43,7 @@ * @member {number} * @see PIXI.mesh.Mesh.DRAW_MODES */ - this.drawMode = drawMode; + this.drawMode = 4//drawMode; this.uniforms = uniforms; diff --git a/src/core/index.js b/src/core/index.js index 93c0129..28b69da 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -38,6 +38,7 @@ export { default as TextureUvs } from './textures/TextureUvs'; export { default as CanvasRenderTarget } from './renderers/canvas/utils/CanvasRenderTarget'; export { default as WebGLManager } from './renderers/webgl/managers/WebGLManager'; +export { default as State } from './renderers/webgl/State'; export { default as ObjectRenderer } from './renderers/webgl/utils/ObjectRenderer'; export { default as RenderTarget } from './renderers/webgl/utils/RenderTarget'; export { default as Quad } from './renderers/webgl/utils/Quad'; diff --git a/src/core/renderers/webgl/StateManager.js b/src/core/renderers/webgl/StateManager.js deleted file mode 100755 index d6c8b59..0000000 --- a/src/core/renderers/webgl/StateManager.js +++ /dev/null @@ -1,273 +0,0 @@ -import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; - -const BLEND = 0; -const OFFSET = 1; -const CULLING = 2; -const DEPTH_TEST = 3; -const WINDING = 4; - -/** - * A WebGL state machines - * - * @memberof PIXI - * @class - */ -export default class StateManager -{ - /** - * @param {WebGLRenderingContext} gl - The current WebGL rendering context - */ - constructor(gl) - { - - /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - - this.attribState = { - tempAttribState: new Array(this.maxAttribs), - attribState: new Array(this.maxAttribs), - }; - - this.blendModes = mapWebGLBlendModesToPixi(gl); - - // check we have vao.. - this.nativeVaoExtension = ( - gl.getExtension('OES_vertex_array_object') - || gl.getExtension('MOZ_OES_vertex_array_object') - || gl.getExtension('WEBKIT_OES_vertex_array_object') - ); - - this.stateId = 0; - this.polygonOffset = 0; - this.blendMode = 0; - - this.map = []; - - // map functions for when we set state.. - this.map[BLEND] = this.setBlend; - this.map[OFFSET] = this.setPolygonOffset; - this.map[CULLING] = this.setCullFace; - this.map[DEPTH_TEST] = this.setDepthTest; - this.map[WINDING] = this.setFrontFace; - - this.checks = []; - -/* - this.p1 = true; - this.p2 = false; - this.p3 = false; - this.p4 = true; - this.p5 = true; - this.p5 = false; - - - // pack into bitfield.. - this.st = (true << 0) | (false << 1) | (true << 2); - this.st2 = (false << 0) | (false << 1) | (true << 2); - - this.st &= ~(1<<2); - - console.log(this.st); - - console.log("0 is " + !!(this.st & (1 << 0)) ); - console.log("1 is " + !!(this.st & (1 << 1)) ); - console.log("2 is " + !!(this.st & (1 << 2)) ); - - //if(this.st !== ) - let diff = this.st ^ this.st2; - let i = 0; - - // order from least to most common - while(diff) - { - if(diff & 1) - { - //skips least common.. - console.log(' diff is ' + i) - } - diff = diff >> 1; - i++; - }*/ - } - - /** - * Sets the current state - * - * @param {*} state - The state to set. - */ - set state(state) - { - // TODO maybe to an object check? ( this.state === state )? - if(this.stateId === state.data)return; - - let diff = this.stateId ^ state.data; - let i = 0; - - // order from least to most common - while(diff) - { - if(diff & 1) - { - // state change! - this.map[i](state.data ^= (1 << i)); - } - - diff = diff >> 1; - i++; - } - - // based on the above settings we check for specific modes.. - // for example if blend is active we check and set the blend modes - // or of polygon offset is active we check the poly depth. - for (let i = 0; i < this.checks.length; i++) - { - this.checks[i](this, state); - }; - } - - - /** - * Enables or disabled blending. - * - * @param {boolean} value - Turn on or off webgl blending. - */ - setBlend(value) - { - this.updateCheck(StateManager.checkBlendMode, value); - - this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); - } - - setPolygonOffset(value) - { - this.gl[value ? 'enable' : 'disable'](this.gl.POLYGON_OFFSET_FILL); - } - - /** - * Sets whether to enable or disable depth test. - * - * @param {boolean} value - Turn on or off webgl depth testing. - */ - setDepthTest(value) - { - this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); - } - - /** - * Sets whether to enable or disable cull face. - * - * @param {boolean} value - Turn on or off webgl cull face. - */ - setCullFace(value) - { - this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); - } - - /** - * Sets the gl front face. - * - * @param {boolean} value - true is clockwise and false is counter-clockwise - */ - setFrontFace(value) - { - this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); - } - - /** - * Sets the blend mode. - * - * @param {number} value - The blend mode to set to. - */ - setBlendMode(value) - { - if (value === this.blendMode) - { - return; - } - - this.gl.blendFunc(this.blendModes[value][0], this.blendModes[value][1]); - } - - /** - * Sets the polygon offset. - * - * @param {number} value - The blend mode to set to. - */ - setPolygonOffset(value, scale) - { - this.gl.polygonOffset(value, scale); - } - - /** - * Disables all the vaos in use - * - */ - resetAttributes() - { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) - { - this.attribState.tempAttribState[i] = 0; - } - - for (let i = 0; i < this.attribState.attribState.length; i++) - { - this.attribState.attribState[i] = 0; - } - - // im going to assume one is always active for performance reasons. - for (let i = 1; i < this.maxAttribs; i++) - { - this.gl.disableVertexAttribArray(i); - } - } - - // used - /** - * Resets all the logic and disables the vaos - */ - resetToDefault() - { - // unbind any VAO if they exist.. - if (this.nativeVaoExtension) - { - this.nativeVaoExtension.bindVertexArrayOES(null); - } - - // reset all attributes.. - this.resetAttributes(); - - this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, false); - - //TO DO? - //this.setState(this.defaultState); - } - - updateCheck(func, value) - { - const index = this.checks.indexOf(func); - - if(value && index === -1) - { - this.checks.push(func); - } - else if(!value && index !== -1) - { - this.checks.splice(index, 1); - } - - } - - //static function maintains scope! - static checkBlendMode(manager, state) - { - manager.setBlendMode(state.blendMode); - } - - // TODO - polygon offset? -} diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index f552046..6226886 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -5,6 +5,7 @@ import RenderTarget from './utils/RenderTarget'; import ObjectRenderer from './utils/ObjectRenderer'; import TextureManager from './TextureManager'; +import StateManager from './managers/StateManager'; import ShaderManager from './ShaderManager'; import BaseTexture from '../../textures/BaseTexture'; import TextureGarbageCollector from './TextureGarbageCollector'; @@ -138,7 +139,8 @@ * * @member {PIXI.WebGLState} */ - this.state = new WebGLState(this.gl); +// this.state = new WebGLState(this.gl); + this.state = new StateManager(this.gl); this.renderingToScreen = true; diff --git a/src/core/renderers/webgl/managers/StateManager.js b/src/core/renderers/webgl/managers/StateManager.js new file mode 100755 index 0000000..36efb3b --- /dev/null +++ b/src/core/renderers/webgl/managers/StateManager.js @@ -0,0 +1,275 @@ +import mapWebGLBlendModesToPixi from '../utils/mapWebGLBlendModesToPixi'; + +const BLEND = 0; +const OFFSET = 1; +const CULLING = 2; +const DEPTH_TEST = 3; +const WINDING = 4; + +/** + * A WebGL state machines + * + * @memberof PIXI + * @class + */ +export default class StateManager +{ + /** + * @param {WebGLRenderingContext} gl - The current WebGL rendering context + */ + constructor(gl) + { + + /** + * The current WebGL rendering context + * + * @member {WebGLRenderingContext} + */ + this.gl = gl; + + this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); + + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs), + }; + + this.blendModes = mapWebGLBlendModesToPixi(gl); + + // check we have vao.. + this.nativeVaoExtension = ( + gl.getExtension('OES_vertex_array_object') + || gl.getExtension('MOZ_OES_vertex_array_object') + || gl.getExtension('WEBKIT_OES_vertex_array_object') + ); + + this.stateId = 0; + this.polygonOffset = 0; + this.blendMode = 0; + + this.map = []; + + // map functions for when we set state.. + this.map[BLEND] = this.setBlend; + this.map[OFFSET] = this.setPolygonOffset; + this.map[CULLING] = this.setCullFace; + this.map[DEPTH_TEST] = this.setDepthTest; + this.map[WINDING] = this.setFrontFace; + + this.checks = []; + +/* + this.p1 = true; + this.p2 = false; + this.p3 = false; + this.p4 = true; + this.p5 = true; + this.p5 = false; + + + // pack into bitfield.. + this.st = (true << 0) | (false << 1) | (true << 2); + this.st2 = (false << 0) | (false << 1) | (true << 2); + + this.st &= ~(1<<2); + + console.log(this.st); + + console.log("0 is " + !!(this.st & (1 << 0)) ); + console.log("1 is " + !!(this.st & (1 << 1)) ); + console.log("2 is " + !!(this.st & (1 << 2)) ); + + //if(this.st !== ) + let diff = this.st ^ this.st2; + let i = 0; + + // order from least to most common + while(diff) + { + if(diff & 1) + { + //skips least common.. + console.log(' diff is ' + i) + } + diff = diff >> 1; + i++; + }*/ + } + + /** + * Sets the current state + * + * @param {*} state - The state to set. + */ + setState(state) + { + // TODO maybe to an object check? ( this.state === state )? + if(this.stateId === state.data)return; + + let diff = this.stateId ^ state.data; + let i = 0; + + // order from least to most common + while(diff) + { + if(diff & 1) + { + // state change! + this.map[i].call(this, !!(state.data & (1 << i)) ); + } + + diff = diff >> 1; + i++; + } + + // based on the above settings we check for specific modes.. + // for example if blend is active we check and set the blend modes + // or of polygon offset is active we check the poly depth. + for (let i = 0; i < this.checks.length; i++) + { + this.checks[i](this, state); + }; + + this.stateId = state.data; + } + + + /** + * Enables or disabled blending. + * + * @param {boolean} value - Turn on or off webgl blending. + */ + setBlend(value) + { + this.updateCheck(StateManager.checkBlendMode, value); + + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); + } + + setPolygonOffset(value) + { + this.gl[value ? 'enable' : 'disable'](this.gl.POLYGON_OFFSET_FILL); + } + + /** + * Sets whether to enable or disable depth test. + * + * @param {boolean} value - Turn on or off webgl depth testing. + */ + setDepthTest(value) + { + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); + } + + /** + * Sets whether to enable or disable cull face. + * + * @param {boolean} value - Turn on or off webgl cull face. + */ + setCullFace(value) + { + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); + } + + /** + * Sets the gl front face. + * + * @param {boolean} value - true is clockwise and false is counter-clockwise + */ + setFrontFace(value) + { + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); + } + + /** + * Sets the blend mode. + * + * @param {number} value - The blend mode to set to. + */ + setBlendMode(value) + { + if (value === this.blendMode) + { + return; + } + + this.gl.blendFunc(this.blendModes[value][0], this.blendModes[value][1]); + } + + /** + * Sets the polygon offset. + * + * @param {number} value - The blend mode to set to. + */ + setPolygonOffset(value, scale) + { + this.gl.polygonOffset(value, scale); + } + + /** + * Disables all the vaos in use + * + */ + resetAttributes() + { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { + this.attribState.tempAttribState[i] = 0; + } + + for (let i = 0; i < this.attribState.attribState.length; i++) + { + this.attribState.attribState[i] = 0; + } + + // im going to assume one is always active for performance reasons. + for (let i = 1; i < this.maxAttribs; i++) + { + this.gl.disableVertexAttribArray(i); + } + } + + // used + /** + * Resets all the logic and disables the vaos + */ + resetToDefault() + { + // unbind any VAO if they exist.. + if (this.nativeVaoExtension) + { + this.nativeVaoExtension.bindVertexArrayOES(null); + } + + // reset all attributes.. + this.resetAttributes(); + + this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, false); + + //TO DO? + //this.setState(this.defaultState); + } + + updateCheck(func, value) + { + const index = this.checks.indexOf(func); + + if(value && index === -1) + { + this.checks.push(func); + } + else if(!value && index !== -1) + { + this.checks.splice(index, 1); + } + + } + + //static function maintains scope! + static checkBlendMode(manager, state) + { + manager.setBlendMode(state.blendMode); + } + + // TODO - polygon offset? +} diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 01a308f..8d8c31c 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -13,9 +13,11 @@ * @param {PIXI.Shader} shader the shader the mesh will use * @param {number} drawMode the drawMode, can be any of the PIXI.DRAW_MODES consts */ - constructor(geometry, shader, drawMode = core.DRAW_MODES.TRIANGLES, uniforms = {}) + constructor(geometry, shader, uniforms, state, drawMode = core.DRAW_MODES.TRIANGLES) { + //drawMode = core.DRAW_MODES.TRIANGLES, uniforms = {}) super(); + /** * the geometry the mesh will use * @type {PIXI.mesh.Geometry} @@ -24,6 +26,8 @@ this.shader = shader; + this.state = state || new core.State(); + /** * The blend mode to be applied to the sprite. Set to `PIXI.BLEND_MODES.NORMAL` to remove any blend mode. * @@ -39,7 +43,7 @@ * @member {number} * @see PIXI.mesh.Mesh.DRAW_MODES */ - this.drawMode = drawMode; + this.drawMode = 4//drawMode; this.uniforms = uniforms; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index db1db74..0e68959 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -49,13 +49,14 @@ } // set the correct blend mode - this.renderer.state.setBlendMode(mesh.blendMode); +// this.renderer.state.setBlendMode(mesh.blendMode); // bind the shader.. // TODO rename filter to shader this.renderer.bindShader(mesh.shader); // sync uniforms.. + this.renderer.state.setState(mesh.state); // now time for geometry..