diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index a24030e..967ca78 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -1,4 +1,6 @@ import glCore from 'pixi-gl-core'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; /** * An object containing WebGL specific properties to be used by the WebGL renderer @@ -45,13 +47,13 @@ * The main buffer * @member {WebGLBuffer} */ - this.buffer = glCore.GLBuffer.createVertexBuffer(gl); + this.buffer = new Buffer(); /** * The index buffer * @member {WebGLBuffer} */ - this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl); + this.indexBuffer = new Buffer(); /** * Whether this graphics is dirty or not @@ -59,8 +61,6 @@ */ this.dirty = true; - this.glPoints = null; - this.glIndices = null; /** * @@ -68,10 +68,9 @@ */ this.shader = shader; - this.vao = new glCore.VertexArrayObject(gl, attribsState) - .addIndex(this.indexBuffer) - .addAttribute(this.buffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 6, 0) - .addAttribute(this.buffer, shader.attributes.aColor, gl.FLOAT, false, 4 * 6, 2 * 4); + this.geometry = new Geometry() + .addAttribute('aVertexPosition|aColor', this.buffer) + .addIndex(this.indexBuffer); } /** @@ -79,6 +78,7 @@ */ reset() { + this.points.length = 0; this.indices.length = 0; } @@ -89,11 +89,12 @@ upload() { this.glPoints = new Float32Array(this.points); - this.buffer.upload(this.glPoints); + this.buffer.update(this.glPoints); this.glIndices = new Uint16Array(this.indices); - this.indexBuffer.upload(this.glIndices); + this.indexBuffer.update(this.glIndices); + // console.log("UPKOADING,.",this.glPoints,this.glIndices) this.dirty = false; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index a24030e..967ca78 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -1,4 +1,6 @@ import glCore from 'pixi-gl-core'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; /** * An object containing WebGL specific properties to be used by the WebGL renderer @@ -45,13 +47,13 @@ * The main buffer * @member {WebGLBuffer} */ - this.buffer = glCore.GLBuffer.createVertexBuffer(gl); + this.buffer = new Buffer(); /** * The index buffer * @member {WebGLBuffer} */ - this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl); + this.indexBuffer = new Buffer(); /** * Whether this graphics is dirty or not @@ -59,8 +61,6 @@ */ this.dirty = true; - this.glPoints = null; - this.glIndices = null; /** * @@ -68,10 +68,9 @@ */ this.shader = shader; - this.vao = new glCore.VertexArrayObject(gl, attribsState) - .addIndex(this.indexBuffer) - .addAttribute(this.buffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 6, 0) - .addAttribute(this.buffer, shader.attributes.aColor, gl.FLOAT, false, 4 * 6, 2 * 4); + this.geometry = new Geometry() + .addAttribute('aVertexPosition|aColor', this.buffer) + .addIndex(this.indexBuffer); } /** @@ -79,6 +78,7 @@ */ reset() { + this.points.length = 0; this.indices.length = 0; } @@ -89,11 +89,12 @@ upload() { this.glPoints = new Float32Array(this.points); - this.buffer.upload(this.glPoints); + this.buffer.update(this.glPoints); this.glIndices = new Uint16Array(this.indices); - this.indexBuffer.upload(this.glIndices); + this.indexBuffer.update(this.glIndices); + // console.log("UPKOADING,.",this.glPoints,this.glIndices) this.dirty = false; } diff --git a/src/core/graphics/webgl/shaders/PrimitiveShader.js b/src/core/graphics/webgl/shaders/PrimitiveShader.js index 5ba9799..d2c4156 100644 --- a/src/core/graphics/webgl/shaders/PrimitiveShader.js +++ b/src/core/graphics/webgl/shaders/PrimitiveShader.js @@ -1,4 +1,5 @@ -import { GLShader } from 'pixi-gl-core'; +import Shader from '../../../shader/Shader'; +import Program from '../../../shader/Program'; import { PRECISION } from '../../../const'; /** @@ -8,16 +9,14 @@ * @memberof PIXI * @extends PIXI.Shader */ -export default class PrimitiveShader extends GLShader +export default class PrimitiveShader extends Shader { /** * @param {WebGLRenderingContext} gl - The webgl shader manager this shader works for. */ - constructor(gl) + constructor() { - super(gl, - // vertex shader - [ + const program = Program.from([ 'attribute vec2 aVertexPosition;', 'attribute vec4 aColor;', @@ -41,8 +40,8 @@ 'void main(void){', ' gl_FragColor = vColor;', '}', - ].join('\n'), - PRECISION.DEFAULT - ); + ].join('\n')); + + super(program, {}) } } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index a24030e..967ca78 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -1,4 +1,6 @@ import glCore from 'pixi-gl-core'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; /** * An object containing WebGL specific properties to be used by the WebGL renderer @@ -45,13 +47,13 @@ * The main buffer * @member {WebGLBuffer} */ - this.buffer = glCore.GLBuffer.createVertexBuffer(gl); + this.buffer = new Buffer(); /** * The index buffer * @member {WebGLBuffer} */ - this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl); + this.indexBuffer = new Buffer(); /** * Whether this graphics is dirty or not @@ -59,8 +61,6 @@ */ this.dirty = true; - this.glPoints = null; - this.glIndices = null; /** * @@ -68,10 +68,9 @@ */ this.shader = shader; - this.vao = new glCore.VertexArrayObject(gl, attribsState) - .addIndex(this.indexBuffer) - .addAttribute(this.buffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 6, 0) - .addAttribute(this.buffer, shader.attributes.aColor, gl.FLOAT, false, 4 * 6, 2 * 4); + this.geometry = new Geometry() + .addAttribute('aVertexPosition|aColor', this.buffer) + .addIndex(this.indexBuffer); } /** @@ -79,6 +78,7 @@ */ reset() { + this.points.length = 0; this.indices.length = 0; } @@ -89,11 +89,12 @@ upload() { this.glPoints = new Float32Array(this.points); - this.buffer.upload(this.glPoints); + this.buffer.update(this.glPoints); this.glIndices = new Uint16Array(this.indices); - this.indexBuffer.upload(this.glIndices); + this.indexBuffer.update(this.glIndices); + // console.log("UPKOADING,.",this.glPoints,this.glIndices) this.dirty = false; } diff --git a/src/core/graphics/webgl/shaders/PrimitiveShader.js b/src/core/graphics/webgl/shaders/PrimitiveShader.js index 5ba9799..d2c4156 100644 --- a/src/core/graphics/webgl/shaders/PrimitiveShader.js +++ b/src/core/graphics/webgl/shaders/PrimitiveShader.js @@ -1,4 +1,5 @@ -import { GLShader } from 'pixi-gl-core'; +import Shader from '../../../shader/Shader'; +import Program from '../../../shader/Program'; import { PRECISION } from '../../../const'; /** @@ -8,16 +9,14 @@ * @memberof PIXI * @extends PIXI.Shader */ -export default class PrimitiveShader extends GLShader +export default class PrimitiveShader extends Shader { /** * @param {WebGLRenderingContext} gl - The webgl shader manager this shader works for. */ - constructor(gl) + constructor() { - super(gl, - // vertex shader - [ + const program = Program.from([ 'attribute vec2 aVertexPosition;', 'attribute vec4 aColor;', @@ -41,8 +40,8 @@ 'void main(void){', ' gl_FragColor = vColor;', '}', - ].join('\n'), - PRECISION.DEFAULT - ); + ].join('\n')); + + super(program, {}) } } diff --git a/src/core/renderers/webgl/State.js b/src/core/renderers/webgl/State.js index 4ee6b56..11d431a 100644 --- a/src/core/renderers/webgl/State.js +++ b/src/core/renderers/webgl/State.js @@ -26,6 +26,7 @@ this.polygonOffset = 0; this.blend = true; + this.depthTest = true; } /** diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index a24030e..967ca78 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -1,4 +1,6 @@ import glCore from 'pixi-gl-core'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; /** * An object containing WebGL specific properties to be used by the WebGL renderer @@ -45,13 +47,13 @@ * The main buffer * @member {WebGLBuffer} */ - this.buffer = glCore.GLBuffer.createVertexBuffer(gl); + this.buffer = new Buffer(); /** * The index buffer * @member {WebGLBuffer} */ - this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl); + this.indexBuffer = new Buffer(); /** * Whether this graphics is dirty or not @@ -59,8 +61,6 @@ */ this.dirty = true; - this.glPoints = null; - this.glIndices = null; /** * @@ -68,10 +68,9 @@ */ this.shader = shader; - this.vao = new glCore.VertexArrayObject(gl, attribsState) - .addIndex(this.indexBuffer) - .addAttribute(this.buffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 6, 0) - .addAttribute(this.buffer, shader.attributes.aColor, gl.FLOAT, false, 4 * 6, 2 * 4); + this.geometry = new Geometry() + .addAttribute('aVertexPosition|aColor', this.buffer) + .addIndex(this.indexBuffer); } /** @@ -79,6 +78,7 @@ */ reset() { + this.points.length = 0; this.indices.length = 0; } @@ -89,11 +89,12 @@ upload() { this.glPoints = new Float32Array(this.points); - this.buffer.upload(this.glPoints); + this.buffer.update(this.glPoints); this.glIndices = new Uint16Array(this.indices); - this.indexBuffer.upload(this.glIndices); + this.indexBuffer.update(this.glIndices); + // console.log("UPKOADING,.",this.glPoints,this.glIndices) this.dirty = false; } diff --git a/src/core/graphics/webgl/shaders/PrimitiveShader.js b/src/core/graphics/webgl/shaders/PrimitiveShader.js index 5ba9799..d2c4156 100644 --- a/src/core/graphics/webgl/shaders/PrimitiveShader.js +++ b/src/core/graphics/webgl/shaders/PrimitiveShader.js @@ -1,4 +1,5 @@ -import { GLShader } from 'pixi-gl-core'; +import Shader from '../../../shader/Shader'; +import Program from '../../../shader/Program'; import { PRECISION } from '../../../const'; /** @@ -8,16 +9,14 @@ * @memberof PIXI * @extends PIXI.Shader */ -export default class PrimitiveShader extends GLShader +export default class PrimitiveShader extends Shader { /** * @param {WebGLRenderingContext} gl - The webgl shader manager this shader works for. */ - constructor(gl) + constructor() { - super(gl, - // vertex shader - [ + const program = Program.from([ 'attribute vec2 aVertexPosition;', 'attribute vec4 aColor;', @@ -41,8 +40,8 @@ 'void main(void){', ' gl_FragColor = vColor;', '}', - ].join('\n'), - PRECISION.DEFAULT - ); + ].join('\n')); + + super(program, {}) } } diff --git a/src/core/renderers/webgl/State.js b/src/core/renderers/webgl/State.js index 4ee6b56..11d431a 100644 --- a/src/core/renderers/webgl/State.js +++ b/src/core/renderers/webgl/State.js @@ -26,6 +26,7 @@ this.polygonOffset = 0; this.blend = true; + this.depthTest = true; } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 22f78e0..92cbab2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -111,7 +111,7 @@ .addSystem(FramebufferSystem) .addSystem(StencilSystem) .addSystem(ProjectionSystem) - .addSystem(TextureGCSystem) + //.addSystem(TextureGCSystem) .addSystem(FilterSystem) .addSystem(RenderTextureSystem) .addSystem(BatchSystem) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index a24030e..967ca78 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -1,4 +1,6 @@ import glCore from 'pixi-gl-core'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; /** * An object containing WebGL specific properties to be used by the WebGL renderer @@ -45,13 +47,13 @@ * The main buffer * @member {WebGLBuffer} */ - this.buffer = glCore.GLBuffer.createVertexBuffer(gl); + this.buffer = new Buffer(); /** * The index buffer * @member {WebGLBuffer} */ - this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl); + this.indexBuffer = new Buffer(); /** * Whether this graphics is dirty or not @@ -59,8 +61,6 @@ */ this.dirty = true; - this.glPoints = null; - this.glIndices = null; /** * @@ -68,10 +68,9 @@ */ this.shader = shader; - this.vao = new glCore.VertexArrayObject(gl, attribsState) - .addIndex(this.indexBuffer) - .addAttribute(this.buffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 6, 0) - .addAttribute(this.buffer, shader.attributes.aColor, gl.FLOAT, false, 4 * 6, 2 * 4); + this.geometry = new Geometry() + .addAttribute('aVertexPosition|aColor', this.buffer) + .addIndex(this.indexBuffer); } /** @@ -79,6 +78,7 @@ */ reset() { + this.points.length = 0; this.indices.length = 0; } @@ -89,11 +89,12 @@ upload() { this.glPoints = new Float32Array(this.points); - this.buffer.upload(this.glPoints); + this.buffer.update(this.glPoints); this.glIndices = new Uint16Array(this.indices); - this.indexBuffer.upload(this.glIndices); + this.indexBuffer.update(this.glIndices); + // console.log("UPKOADING,.",this.glPoints,this.glIndices) this.dirty = false; } diff --git a/src/core/graphics/webgl/shaders/PrimitiveShader.js b/src/core/graphics/webgl/shaders/PrimitiveShader.js index 5ba9799..d2c4156 100644 --- a/src/core/graphics/webgl/shaders/PrimitiveShader.js +++ b/src/core/graphics/webgl/shaders/PrimitiveShader.js @@ -1,4 +1,5 @@ -import { GLShader } from 'pixi-gl-core'; +import Shader from '../../../shader/Shader'; +import Program from '../../../shader/Program'; import { PRECISION } from '../../../const'; /** @@ -8,16 +9,14 @@ * @memberof PIXI * @extends PIXI.Shader */ -export default class PrimitiveShader extends GLShader +export default class PrimitiveShader extends Shader { /** * @param {WebGLRenderingContext} gl - The webgl shader manager this shader works for. */ - constructor(gl) + constructor() { - super(gl, - // vertex shader - [ + const program = Program.from([ 'attribute vec2 aVertexPosition;', 'attribute vec4 aColor;', @@ -41,8 +40,8 @@ 'void main(void){', ' gl_FragColor = vColor;', '}', - ].join('\n'), - PRECISION.DEFAULT - ); + ].join('\n')); + + super(program, {}) } } diff --git a/src/core/renderers/webgl/State.js b/src/core/renderers/webgl/State.js index 4ee6b56..11d431a 100644 --- a/src/core/renderers/webgl/State.js +++ b/src/core/renderers/webgl/State.js @@ -26,6 +26,7 @@ this.polygonOffset = 0; this.blend = true; + this.depthTest = true; } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 22f78e0..92cbab2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -111,7 +111,7 @@ .addSystem(FramebufferSystem) .addSystem(StencilSystem) .addSystem(ProjectionSystem) - .addSystem(TextureGCSystem) + //.addSystem(TextureGCSystem) .addSystem(FilterSystem) .addSystem(RenderTextureSystem) .addSystem(BatchSystem) diff --git a/src/core/renderers/webgl/systems/ContextSystem.js b/src/core/renderers/webgl/systems/ContextSystem.js index fa26c42..eb6f498 100644 --- a/src/core/renderers/webgl/systems/ContextSystem.js +++ b/src/core/renderers/webgl/systems/ContextSystem.js @@ -1,7 +1,6 @@ import WebGLSystem from './WebGLSystem'; import { Rectangle, Matrix } from '../../../math'; import glCore from 'pixi-gl-core'; -import validateContext from '../utils/validateContext'; let CONTEXT_UID = 0; @@ -59,7 +58,7 @@ initFromContext(gl) { this.gl = gl; - validateContext(gl); + this.validateContext(gl); this.renderer.gl = gl; this.renderer.CONTEXT_UID = CONTEXT_UID++; this.renderer.runners.contextChange.run(gl); @@ -67,7 +66,7 @@ initFromOptions(options) { - const gl = glCore.createContext(this.renderer.view, this.options); + const gl = glCore.createContext(this.renderer.view, options); this.initFromContext(gl); } @@ -116,4 +115,17 @@ { this.gl.flush(); } + + validateContext(gl) + { + const attributes = gl.getContextAttributes(); + + // this is going to be fairly simple for now.. but at least we have room to grow! + if (!attributes.stencil) + { + /* eslint-disable no-console */ + console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); + /* eslint-enable no-console */ + } + } } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index a24030e..967ca78 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -1,4 +1,6 @@ import glCore from 'pixi-gl-core'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; /** * An object containing WebGL specific properties to be used by the WebGL renderer @@ -45,13 +47,13 @@ * The main buffer * @member {WebGLBuffer} */ - this.buffer = glCore.GLBuffer.createVertexBuffer(gl); + this.buffer = new Buffer(); /** * The index buffer * @member {WebGLBuffer} */ - this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl); + this.indexBuffer = new Buffer(); /** * Whether this graphics is dirty or not @@ -59,8 +61,6 @@ */ this.dirty = true; - this.glPoints = null; - this.glIndices = null; /** * @@ -68,10 +68,9 @@ */ this.shader = shader; - this.vao = new glCore.VertexArrayObject(gl, attribsState) - .addIndex(this.indexBuffer) - .addAttribute(this.buffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 6, 0) - .addAttribute(this.buffer, shader.attributes.aColor, gl.FLOAT, false, 4 * 6, 2 * 4); + this.geometry = new Geometry() + .addAttribute('aVertexPosition|aColor', this.buffer) + .addIndex(this.indexBuffer); } /** @@ -79,6 +78,7 @@ */ reset() { + this.points.length = 0; this.indices.length = 0; } @@ -89,11 +89,12 @@ upload() { this.glPoints = new Float32Array(this.points); - this.buffer.upload(this.glPoints); + this.buffer.update(this.glPoints); this.glIndices = new Uint16Array(this.indices); - this.indexBuffer.upload(this.glIndices); + this.indexBuffer.update(this.glIndices); + // console.log("UPKOADING,.",this.glPoints,this.glIndices) this.dirty = false; } diff --git a/src/core/graphics/webgl/shaders/PrimitiveShader.js b/src/core/graphics/webgl/shaders/PrimitiveShader.js index 5ba9799..d2c4156 100644 --- a/src/core/graphics/webgl/shaders/PrimitiveShader.js +++ b/src/core/graphics/webgl/shaders/PrimitiveShader.js @@ -1,4 +1,5 @@ -import { GLShader } from 'pixi-gl-core'; +import Shader from '../../../shader/Shader'; +import Program from '../../../shader/Program'; import { PRECISION } from '../../../const'; /** @@ -8,16 +9,14 @@ * @memberof PIXI * @extends PIXI.Shader */ -export default class PrimitiveShader extends GLShader +export default class PrimitiveShader extends Shader { /** * @param {WebGLRenderingContext} gl - The webgl shader manager this shader works for. */ - constructor(gl) + constructor() { - super(gl, - // vertex shader - [ + const program = Program.from([ 'attribute vec2 aVertexPosition;', 'attribute vec4 aColor;', @@ -41,8 +40,8 @@ 'void main(void){', ' gl_FragColor = vColor;', '}', - ].join('\n'), - PRECISION.DEFAULT - ); + ].join('\n')); + + super(program, {}) } } diff --git a/src/core/renderers/webgl/State.js b/src/core/renderers/webgl/State.js index 4ee6b56..11d431a 100644 --- a/src/core/renderers/webgl/State.js +++ b/src/core/renderers/webgl/State.js @@ -26,6 +26,7 @@ this.polygonOffset = 0; this.blend = true; + this.depthTest = true; } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 22f78e0..92cbab2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -111,7 +111,7 @@ .addSystem(FramebufferSystem) .addSystem(StencilSystem) .addSystem(ProjectionSystem) - .addSystem(TextureGCSystem) + //.addSystem(TextureGCSystem) .addSystem(FilterSystem) .addSystem(RenderTextureSystem) .addSystem(BatchSystem) diff --git a/src/core/renderers/webgl/systems/ContextSystem.js b/src/core/renderers/webgl/systems/ContextSystem.js index fa26c42..eb6f498 100644 --- a/src/core/renderers/webgl/systems/ContextSystem.js +++ b/src/core/renderers/webgl/systems/ContextSystem.js @@ -1,7 +1,6 @@ import WebGLSystem from './WebGLSystem'; import { Rectangle, Matrix } from '../../../math'; import glCore from 'pixi-gl-core'; -import validateContext from '../utils/validateContext'; let CONTEXT_UID = 0; @@ -59,7 +58,7 @@ initFromContext(gl) { this.gl = gl; - validateContext(gl); + this.validateContext(gl); this.renderer.gl = gl; this.renderer.CONTEXT_UID = CONTEXT_UID++; this.renderer.runners.contextChange.run(gl); @@ -67,7 +66,7 @@ initFromOptions(options) { - const gl = glCore.createContext(this.renderer.view, this.options); + const gl = glCore.createContext(this.renderer.view, options); this.initFromContext(gl); } @@ -116,4 +115,17 @@ { this.gl.flush(); } + + validateContext(gl) + { + const attributes = gl.getContextAttributes(); + + // this is going to be fairly simple for now.. but at least we have room to grow! + if (!attributes.stencil) + { + /* eslint-disable no-console */ + console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); + /* eslint-enable no-console */ + } + } } diff --git a/src/core/renderers/webgl/systems/GeometrySystem.js b/src/core/renderers/webgl/systems/GeometrySystem.js index 984e3bb..c934aa6 100644 --- a/src/core/renderers/webgl/systems/GeometrySystem.js +++ b/src/core/renderers/webgl/systems/GeometrySystem.js @@ -59,7 +59,6 @@ { glBuffer._updateID = buffer._updateID; // TODO - partial upload?? - glBuffer.upload(buffer.data, 0); } } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index a24030e..967ca78 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -1,4 +1,6 @@ import glCore from 'pixi-gl-core'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; /** * An object containing WebGL specific properties to be used by the WebGL renderer @@ -45,13 +47,13 @@ * The main buffer * @member {WebGLBuffer} */ - this.buffer = glCore.GLBuffer.createVertexBuffer(gl); + this.buffer = new Buffer(); /** * The index buffer * @member {WebGLBuffer} */ - this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl); + this.indexBuffer = new Buffer(); /** * Whether this graphics is dirty or not @@ -59,8 +61,6 @@ */ this.dirty = true; - this.glPoints = null; - this.glIndices = null; /** * @@ -68,10 +68,9 @@ */ this.shader = shader; - this.vao = new glCore.VertexArrayObject(gl, attribsState) - .addIndex(this.indexBuffer) - .addAttribute(this.buffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 6, 0) - .addAttribute(this.buffer, shader.attributes.aColor, gl.FLOAT, false, 4 * 6, 2 * 4); + this.geometry = new Geometry() + .addAttribute('aVertexPosition|aColor', this.buffer) + .addIndex(this.indexBuffer); } /** @@ -79,6 +78,7 @@ */ reset() { + this.points.length = 0; this.indices.length = 0; } @@ -89,11 +89,12 @@ upload() { this.glPoints = new Float32Array(this.points); - this.buffer.upload(this.glPoints); + this.buffer.update(this.glPoints); this.glIndices = new Uint16Array(this.indices); - this.indexBuffer.upload(this.glIndices); + this.indexBuffer.update(this.glIndices); + // console.log("UPKOADING,.",this.glPoints,this.glIndices) this.dirty = false; } diff --git a/src/core/graphics/webgl/shaders/PrimitiveShader.js b/src/core/graphics/webgl/shaders/PrimitiveShader.js index 5ba9799..d2c4156 100644 --- a/src/core/graphics/webgl/shaders/PrimitiveShader.js +++ b/src/core/graphics/webgl/shaders/PrimitiveShader.js @@ -1,4 +1,5 @@ -import { GLShader } from 'pixi-gl-core'; +import Shader from '../../../shader/Shader'; +import Program from '../../../shader/Program'; import { PRECISION } from '../../../const'; /** @@ -8,16 +9,14 @@ * @memberof PIXI * @extends PIXI.Shader */ -export default class PrimitiveShader extends GLShader +export default class PrimitiveShader extends Shader { /** * @param {WebGLRenderingContext} gl - The webgl shader manager this shader works for. */ - constructor(gl) + constructor() { - super(gl, - // vertex shader - [ + const program = Program.from([ 'attribute vec2 aVertexPosition;', 'attribute vec4 aColor;', @@ -41,8 +40,8 @@ 'void main(void){', ' gl_FragColor = vColor;', '}', - ].join('\n'), - PRECISION.DEFAULT - ); + ].join('\n')); + + super(program, {}) } } diff --git a/src/core/renderers/webgl/State.js b/src/core/renderers/webgl/State.js index 4ee6b56..11d431a 100644 --- a/src/core/renderers/webgl/State.js +++ b/src/core/renderers/webgl/State.js @@ -26,6 +26,7 @@ this.polygonOffset = 0; this.blend = true; + this.depthTest = true; } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 22f78e0..92cbab2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -111,7 +111,7 @@ .addSystem(FramebufferSystem) .addSystem(StencilSystem) .addSystem(ProjectionSystem) - .addSystem(TextureGCSystem) + //.addSystem(TextureGCSystem) .addSystem(FilterSystem) .addSystem(RenderTextureSystem) .addSystem(BatchSystem) diff --git a/src/core/renderers/webgl/systems/ContextSystem.js b/src/core/renderers/webgl/systems/ContextSystem.js index fa26c42..eb6f498 100644 --- a/src/core/renderers/webgl/systems/ContextSystem.js +++ b/src/core/renderers/webgl/systems/ContextSystem.js @@ -1,7 +1,6 @@ import WebGLSystem from './WebGLSystem'; import { Rectangle, Matrix } from '../../../math'; import glCore from 'pixi-gl-core'; -import validateContext from '../utils/validateContext'; let CONTEXT_UID = 0; @@ -59,7 +58,7 @@ initFromContext(gl) { this.gl = gl; - validateContext(gl); + this.validateContext(gl); this.renderer.gl = gl; this.renderer.CONTEXT_UID = CONTEXT_UID++; this.renderer.runners.contextChange.run(gl); @@ -67,7 +66,7 @@ initFromOptions(options) { - const gl = glCore.createContext(this.renderer.view, this.options); + const gl = glCore.createContext(this.renderer.view, options); this.initFromContext(gl); } @@ -116,4 +115,17 @@ { this.gl.flush(); } + + validateContext(gl) + { + const attributes = gl.getContextAttributes(); + + // this is going to be fairly simple for now.. but at least we have room to grow! + if (!attributes.stencil) + { + /* eslint-disable no-console */ + console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); + /* eslint-enable no-console */ + } + } } diff --git a/src/core/renderers/webgl/systems/GeometrySystem.js b/src/core/renderers/webgl/systems/GeometrySystem.js index 984e3bb..c934aa6 100644 --- a/src/core/renderers/webgl/systems/GeometrySystem.js +++ b/src/core/renderers/webgl/systems/GeometrySystem.js @@ -59,7 +59,6 @@ { glBuffer._updateID = buffer._updateID; // TODO - partial upload?? - glBuffer.upload(buffer.data, 0); } } diff --git a/src/core/renderers/webgl/systems/MaskSystem.js b/src/core/renderers/webgl/systems/MaskSystem.js index d83ddd9..528c0b8 100644 --- a/src/core/renderers/webgl/systems/MaskSystem.js +++ b/src/core/renderers/webgl/systems/MaskSystem.js @@ -32,7 +32,7 @@ * @param {PIXI.DisplayObject} target - Display Object to push the mask to * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - pushMask(target, maskData) + push(target, maskData) { // TODO the root check means scissor rect will not // be used on render textures more info here: @@ -76,7 +76,7 @@ * @param {PIXI.DisplayObject} target - Display Object to pop the mask from * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - popMask(target, maskData) + pop(target, maskData) { if (maskData.texture) { @@ -145,7 +145,7 @@ */ popStencilMask() { - this.renderer.batch.flush(); + // this.renderer.currentRenderer.stop(); this.renderer.stencil.popStencil(); } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index a24030e..967ca78 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -1,4 +1,6 @@ import glCore from 'pixi-gl-core'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; /** * An object containing WebGL specific properties to be used by the WebGL renderer @@ -45,13 +47,13 @@ * The main buffer * @member {WebGLBuffer} */ - this.buffer = glCore.GLBuffer.createVertexBuffer(gl); + this.buffer = new Buffer(); /** * The index buffer * @member {WebGLBuffer} */ - this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl); + this.indexBuffer = new Buffer(); /** * Whether this graphics is dirty or not @@ -59,8 +61,6 @@ */ this.dirty = true; - this.glPoints = null; - this.glIndices = null; /** * @@ -68,10 +68,9 @@ */ this.shader = shader; - this.vao = new glCore.VertexArrayObject(gl, attribsState) - .addIndex(this.indexBuffer) - .addAttribute(this.buffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 6, 0) - .addAttribute(this.buffer, shader.attributes.aColor, gl.FLOAT, false, 4 * 6, 2 * 4); + this.geometry = new Geometry() + .addAttribute('aVertexPosition|aColor', this.buffer) + .addIndex(this.indexBuffer); } /** @@ -79,6 +78,7 @@ */ reset() { + this.points.length = 0; this.indices.length = 0; } @@ -89,11 +89,12 @@ upload() { this.glPoints = new Float32Array(this.points); - this.buffer.upload(this.glPoints); + this.buffer.update(this.glPoints); this.glIndices = new Uint16Array(this.indices); - this.indexBuffer.upload(this.glIndices); + this.indexBuffer.update(this.glIndices); + // console.log("UPKOADING,.",this.glPoints,this.glIndices) this.dirty = false; } diff --git a/src/core/graphics/webgl/shaders/PrimitiveShader.js b/src/core/graphics/webgl/shaders/PrimitiveShader.js index 5ba9799..d2c4156 100644 --- a/src/core/graphics/webgl/shaders/PrimitiveShader.js +++ b/src/core/graphics/webgl/shaders/PrimitiveShader.js @@ -1,4 +1,5 @@ -import { GLShader } from 'pixi-gl-core'; +import Shader from '../../../shader/Shader'; +import Program from '../../../shader/Program'; import { PRECISION } from '../../../const'; /** @@ -8,16 +9,14 @@ * @memberof PIXI * @extends PIXI.Shader */ -export default class PrimitiveShader extends GLShader +export default class PrimitiveShader extends Shader { /** * @param {WebGLRenderingContext} gl - The webgl shader manager this shader works for. */ - constructor(gl) + constructor() { - super(gl, - // vertex shader - [ + const program = Program.from([ 'attribute vec2 aVertexPosition;', 'attribute vec4 aColor;', @@ -41,8 +40,8 @@ 'void main(void){', ' gl_FragColor = vColor;', '}', - ].join('\n'), - PRECISION.DEFAULT - ); + ].join('\n')); + + super(program, {}) } } diff --git a/src/core/renderers/webgl/State.js b/src/core/renderers/webgl/State.js index 4ee6b56..11d431a 100644 --- a/src/core/renderers/webgl/State.js +++ b/src/core/renderers/webgl/State.js @@ -26,6 +26,7 @@ this.polygonOffset = 0; this.blend = true; + this.depthTest = true; } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 22f78e0..92cbab2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -111,7 +111,7 @@ .addSystem(FramebufferSystem) .addSystem(StencilSystem) .addSystem(ProjectionSystem) - .addSystem(TextureGCSystem) + //.addSystem(TextureGCSystem) .addSystem(FilterSystem) .addSystem(RenderTextureSystem) .addSystem(BatchSystem) diff --git a/src/core/renderers/webgl/systems/ContextSystem.js b/src/core/renderers/webgl/systems/ContextSystem.js index fa26c42..eb6f498 100644 --- a/src/core/renderers/webgl/systems/ContextSystem.js +++ b/src/core/renderers/webgl/systems/ContextSystem.js @@ -1,7 +1,6 @@ import WebGLSystem from './WebGLSystem'; import { Rectangle, Matrix } from '../../../math'; import glCore from 'pixi-gl-core'; -import validateContext from '../utils/validateContext'; let CONTEXT_UID = 0; @@ -59,7 +58,7 @@ initFromContext(gl) { this.gl = gl; - validateContext(gl); + this.validateContext(gl); this.renderer.gl = gl; this.renderer.CONTEXT_UID = CONTEXT_UID++; this.renderer.runners.contextChange.run(gl); @@ -67,7 +66,7 @@ initFromOptions(options) { - const gl = glCore.createContext(this.renderer.view, this.options); + const gl = glCore.createContext(this.renderer.view, options); this.initFromContext(gl); } @@ -116,4 +115,17 @@ { this.gl.flush(); } + + validateContext(gl) + { + const attributes = gl.getContextAttributes(); + + // this is going to be fairly simple for now.. but at least we have room to grow! + if (!attributes.stencil) + { + /* eslint-disable no-console */ + console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); + /* eslint-enable no-console */ + } + } } diff --git a/src/core/renderers/webgl/systems/GeometrySystem.js b/src/core/renderers/webgl/systems/GeometrySystem.js index 984e3bb..c934aa6 100644 --- a/src/core/renderers/webgl/systems/GeometrySystem.js +++ b/src/core/renderers/webgl/systems/GeometrySystem.js @@ -59,7 +59,6 @@ { glBuffer._updateID = buffer._updateID; // TODO - partial upload?? - glBuffer.upload(buffer.data, 0); } } diff --git a/src/core/renderers/webgl/systems/MaskSystem.js b/src/core/renderers/webgl/systems/MaskSystem.js index d83ddd9..528c0b8 100644 --- a/src/core/renderers/webgl/systems/MaskSystem.js +++ b/src/core/renderers/webgl/systems/MaskSystem.js @@ -32,7 +32,7 @@ * @param {PIXI.DisplayObject} target - Display Object to push the mask to * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - pushMask(target, maskData) + push(target, maskData) { // TODO the root check means scissor rect will not // be used on render textures more info here: @@ -76,7 +76,7 @@ * @param {PIXI.DisplayObject} target - Display Object to pop the mask from * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - popMask(target, maskData) + pop(target, maskData) { if (maskData.texture) { @@ -145,7 +145,7 @@ */ popStencilMask() { - this.renderer.batch.flush(); + // this.renderer.currentRenderer.stop(); this.renderer.stencil.popStencil(); } diff --git a/src/core/renderers/webgl/systems/RenderTextureSystem.js b/src/core/renderers/webgl/systems/RenderTextureSystem.js index a670a5b..d27802b 100644 --- a/src/core/renderers/webgl/systems/RenderTextureSystem.js +++ b/src/core/renderers/webgl/systems/RenderTextureSystem.js @@ -19,35 +19,36 @@ super(renderer); this.clearColor = renderer._backgroundColorRgba; + + // TODO moe this property somewhere else! + this.defaultMaskStack = []; } bind(renderTexture) { // TODO - do we want this?? if(this.renderTexture === renderTexture)return; - this.renderTexture = renderTexture; - const renderer = this.renderer; + this.renderTexture = renderTexture; if(renderTexture) { - renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); - renderer.projection.update(renderTexture.frame, renderTexture.frame, false); - - renderer.stencil.stencilMaskStack = renderTexture.stencilMaskStack; + this.renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); + this.renderer.projection.update(renderTexture.frame, renderTexture.frame, false); + this.renderer.stencil.setMaskStack(renderTexture.baseTexture.stencilMaskStack); } else { - renderer.framebuffer.bind(null); + this.renderer.framebuffer.bind(null); - tempRect.width = renderer.width; - tempRect.height = renderer.height; + tempRect.width = this.renderer.width; + tempRect.height = this.renderer.height; // TODO store this.. - renderer.projection.update(tempRect, tempRect, true); - renderer.stencil.stencilMaskStack = renderer.stencil.defaultStencilStack; + this.renderer.projection.update(tempRect, tempRect, true); + this.renderer.stencil.setMaskStack(this.defaultMaskStack); } - const glShader = renderer.shader.getGLShader() + const glShader = this.renderer.shader.getGLShader() if (glShader) { diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index a24030e..967ca78 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -1,4 +1,6 @@ import glCore from 'pixi-gl-core'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; /** * An object containing WebGL specific properties to be used by the WebGL renderer @@ -45,13 +47,13 @@ * The main buffer * @member {WebGLBuffer} */ - this.buffer = glCore.GLBuffer.createVertexBuffer(gl); + this.buffer = new Buffer(); /** * The index buffer * @member {WebGLBuffer} */ - this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl); + this.indexBuffer = new Buffer(); /** * Whether this graphics is dirty or not @@ -59,8 +61,6 @@ */ this.dirty = true; - this.glPoints = null; - this.glIndices = null; /** * @@ -68,10 +68,9 @@ */ this.shader = shader; - this.vao = new glCore.VertexArrayObject(gl, attribsState) - .addIndex(this.indexBuffer) - .addAttribute(this.buffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 6, 0) - .addAttribute(this.buffer, shader.attributes.aColor, gl.FLOAT, false, 4 * 6, 2 * 4); + this.geometry = new Geometry() + .addAttribute('aVertexPosition|aColor', this.buffer) + .addIndex(this.indexBuffer); } /** @@ -79,6 +78,7 @@ */ reset() { + this.points.length = 0; this.indices.length = 0; } @@ -89,11 +89,12 @@ upload() { this.glPoints = new Float32Array(this.points); - this.buffer.upload(this.glPoints); + this.buffer.update(this.glPoints); this.glIndices = new Uint16Array(this.indices); - this.indexBuffer.upload(this.glIndices); + this.indexBuffer.update(this.glIndices); + // console.log("UPKOADING,.",this.glPoints,this.glIndices) this.dirty = false; } diff --git a/src/core/graphics/webgl/shaders/PrimitiveShader.js b/src/core/graphics/webgl/shaders/PrimitiveShader.js index 5ba9799..d2c4156 100644 --- a/src/core/graphics/webgl/shaders/PrimitiveShader.js +++ b/src/core/graphics/webgl/shaders/PrimitiveShader.js @@ -1,4 +1,5 @@ -import { GLShader } from 'pixi-gl-core'; +import Shader from '../../../shader/Shader'; +import Program from '../../../shader/Program'; import { PRECISION } from '../../../const'; /** @@ -8,16 +9,14 @@ * @memberof PIXI * @extends PIXI.Shader */ -export default class PrimitiveShader extends GLShader +export default class PrimitiveShader extends Shader { /** * @param {WebGLRenderingContext} gl - The webgl shader manager this shader works for. */ - constructor(gl) + constructor() { - super(gl, - // vertex shader - [ + const program = Program.from([ 'attribute vec2 aVertexPosition;', 'attribute vec4 aColor;', @@ -41,8 +40,8 @@ 'void main(void){', ' gl_FragColor = vColor;', '}', - ].join('\n'), - PRECISION.DEFAULT - ); + ].join('\n')); + + super(program, {}) } } diff --git a/src/core/renderers/webgl/State.js b/src/core/renderers/webgl/State.js index 4ee6b56..11d431a 100644 --- a/src/core/renderers/webgl/State.js +++ b/src/core/renderers/webgl/State.js @@ -26,6 +26,7 @@ this.polygonOffset = 0; this.blend = true; + this.depthTest = true; } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 22f78e0..92cbab2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -111,7 +111,7 @@ .addSystem(FramebufferSystem) .addSystem(StencilSystem) .addSystem(ProjectionSystem) - .addSystem(TextureGCSystem) + //.addSystem(TextureGCSystem) .addSystem(FilterSystem) .addSystem(RenderTextureSystem) .addSystem(BatchSystem) diff --git a/src/core/renderers/webgl/systems/ContextSystem.js b/src/core/renderers/webgl/systems/ContextSystem.js index fa26c42..eb6f498 100644 --- a/src/core/renderers/webgl/systems/ContextSystem.js +++ b/src/core/renderers/webgl/systems/ContextSystem.js @@ -1,7 +1,6 @@ import WebGLSystem from './WebGLSystem'; import { Rectangle, Matrix } from '../../../math'; import glCore from 'pixi-gl-core'; -import validateContext from '../utils/validateContext'; let CONTEXT_UID = 0; @@ -59,7 +58,7 @@ initFromContext(gl) { this.gl = gl; - validateContext(gl); + this.validateContext(gl); this.renderer.gl = gl; this.renderer.CONTEXT_UID = CONTEXT_UID++; this.renderer.runners.contextChange.run(gl); @@ -67,7 +66,7 @@ initFromOptions(options) { - const gl = glCore.createContext(this.renderer.view, this.options); + const gl = glCore.createContext(this.renderer.view, options); this.initFromContext(gl); } @@ -116,4 +115,17 @@ { this.gl.flush(); } + + validateContext(gl) + { + const attributes = gl.getContextAttributes(); + + // this is going to be fairly simple for now.. but at least we have room to grow! + if (!attributes.stencil) + { + /* eslint-disable no-console */ + console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); + /* eslint-enable no-console */ + } + } } diff --git a/src/core/renderers/webgl/systems/GeometrySystem.js b/src/core/renderers/webgl/systems/GeometrySystem.js index 984e3bb..c934aa6 100644 --- a/src/core/renderers/webgl/systems/GeometrySystem.js +++ b/src/core/renderers/webgl/systems/GeometrySystem.js @@ -59,7 +59,6 @@ { glBuffer._updateID = buffer._updateID; // TODO - partial upload?? - glBuffer.upload(buffer.data, 0); } } diff --git a/src/core/renderers/webgl/systems/MaskSystem.js b/src/core/renderers/webgl/systems/MaskSystem.js index d83ddd9..528c0b8 100644 --- a/src/core/renderers/webgl/systems/MaskSystem.js +++ b/src/core/renderers/webgl/systems/MaskSystem.js @@ -32,7 +32,7 @@ * @param {PIXI.DisplayObject} target - Display Object to push the mask to * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - pushMask(target, maskData) + push(target, maskData) { // TODO the root check means scissor rect will not // be used on render textures more info here: @@ -76,7 +76,7 @@ * @param {PIXI.DisplayObject} target - Display Object to pop the mask from * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - popMask(target, maskData) + pop(target, maskData) { if (maskData.texture) { @@ -145,7 +145,7 @@ */ popStencilMask() { - this.renderer.batch.flush(); + // this.renderer.currentRenderer.stop(); this.renderer.stencil.popStencil(); } diff --git a/src/core/renderers/webgl/systems/RenderTextureSystem.js b/src/core/renderers/webgl/systems/RenderTextureSystem.js index a670a5b..d27802b 100644 --- a/src/core/renderers/webgl/systems/RenderTextureSystem.js +++ b/src/core/renderers/webgl/systems/RenderTextureSystem.js @@ -19,35 +19,36 @@ super(renderer); this.clearColor = renderer._backgroundColorRgba; + + // TODO moe this property somewhere else! + this.defaultMaskStack = []; } bind(renderTexture) { // TODO - do we want this?? if(this.renderTexture === renderTexture)return; - this.renderTexture = renderTexture; - const renderer = this.renderer; + this.renderTexture = renderTexture; if(renderTexture) { - renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); - renderer.projection.update(renderTexture.frame, renderTexture.frame, false); - - renderer.stencil.stencilMaskStack = renderTexture.stencilMaskStack; + this.renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); + this.renderer.projection.update(renderTexture.frame, renderTexture.frame, false); + this.renderer.stencil.setMaskStack(renderTexture.baseTexture.stencilMaskStack); } else { - renderer.framebuffer.bind(null); + this.renderer.framebuffer.bind(null); - tempRect.width = renderer.width; - tempRect.height = renderer.height; + tempRect.width = this.renderer.width; + tempRect.height = this.renderer.height; // TODO store this.. - renderer.projection.update(tempRect, tempRect, true); - renderer.stencil.stencilMaskStack = renderer.stencil.defaultStencilStack; + this.renderer.projection.update(tempRect, tempRect, true); + this.renderer.stencil.setMaskStack(this.defaultMaskStack); } - const glShader = renderer.shader.getGLShader() + const glShader = this.renderer.shader.getGLShader() if (glShader) { diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index ac5ed0f..b04d71b 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -14,7 +14,6 @@ { super(renderer); this.stencilMaskStack = null; - this.defaultStencilStack = []; } /** @@ -22,7 +21,7 @@ * * @param {PIXI.Graphics[]} stencilMaskStack - The mask stack */ - setMaskStack(stencilMaskStack) + setMaskStack(stencilMaskStack) { this.stencilMaskStack = stencilMaskStack; @@ -47,7 +46,7 @@ { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); - //this.renderer._activeRenderTarget.attachStencilBuffer(); +// this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; const sms = this.stencilMaskStack; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index a24030e..967ca78 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -1,4 +1,6 @@ import glCore from 'pixi-gl-core'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; /** * An object containing WebGL specific properties to be used by the WebGL renderer @@ -45,13 +47,13 @@ * The main buffer * @member {WebGLBuffer} */ - this.buffer = glCore.GLBuffer.createVertexBuffer(gl); + this.buffer = new Buffer(); /** * The index buffer * @member {WebGLBuffer} */ - this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl); + this.indexBuffer = new Buffer(); /** * Whether this graphics is dirty or not @@ -59,8 +61,6 @@ */ this.dirty = true; - this.glPoints = null; - this.glIndices = null; /** * @@ -68,10 +68,9 @@ */ this.shader = shader; - this.vao = new glCore.VertexArrayObject(gl, attribsState) - .addIndex(this.indexBuffer) - .addAttribute(this.buffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 6, 0) - .addAttribute(this.buffer, shader.attributes.aColor, gl.FLOAT, false, 4 * 6, 2 * 4); + this.geometry = new Geometry() + .addAttribute('aVertexPosition|aColor', this.buffer) + .addIndex(this.indexBuffer); } /** @@ -79,6 +78,7 @@ */ reset() { + this.points.length = 0; this.indices.length = 0; } @@ -89,11 +89,12 @@ upload() { this.glPoints = new Float32Array(this.points); - this.buffer.upload(this.glPoints); + this.buffer.update(this.glPoints); this.glIndices = new Uint16Array(this.indices); - this.indexBuffer.upload(this.glIndices); + this.indexBuffer.update(this.glIndices); + // console.log("UPKOADING,.",this.glPoints,this.glIndices) this.dirty = false; } diff --git a/src/core/graphics/webgl/shaders/PrimitiveShader.js b/src/core/graphics/webgl/shaders/PrimitiveShader.js index 5ba9799..d2c4156 100644 --- a/src/core/graphics/webgl/shaders/PrimitiveShader.js +++ b/src/core/graphics/webgl/shaders/PrimitiveShader.js @@ -1,4 +1,5 @@ -import { GLShader } from 'pixi-gl-core'; +import Shader from '../../../shader/Shader'; +import Program from '../../../shader/Program'; import { PRECISION } from '../../../const'; /** @@ -8,16 +9,14 @@ * @memberof PIXI * @extends PIXI.Shader */ -export default class PrimitiveShader extends GLShader +export default class PrimitiveShader extends Shader { /** * @param {WebGLRenderingContext} gl - The webgl shader manager this shader works for. */ - constructor(gl) + constructor() { - super(gl, - // vertex shader - [ + const program = Program.from([ 'attribute vec2 aVertexPosition;', 'attribute vec4 aColor;', @@ -41,8 +40,8 @@ 'void main(void){', ' gl_FragColor = vColor;', '}', - ].join('\n'), - PRECISION.DEFAULT - ); + ].join('\n')); + + super(program, {}) } } diff --git a/src/core/renderers/webgl/State.js b/src/core/renderers/webgl/State.js index 4ee6b56..11d431a 100644 --- a/src/core/renderers/webgl/State.js +++ b/src/core/renderers/webgl/State.js @@ -26,6 +26,7 @@ this.polygonOffset = 0; this.blend = true; + this.depthTest = true; } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 22f78e0..92cbab2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -111,7 +111,7 @@ .addSystem(FramebufferSystem) .addSystem(StencilSystem) .addSystem(ProjectionSystem) - .addSystem(TextureGCSystem) + //.addSystem(TextureGCSystem) .addSystem(FilterSystem) .addSystem(RenderTextureSystem) .addSystem(BatchSystem) diff --git a/src/core/renderers/webgl/systems/ContextSystem.js b/src/core/renderers/webgl/systems/ContextSystem.js index fa26c42..eb6f498 100644 --- a/src/core/renderers/webgl/systems/ContextSystem.js +++ b/src/core/renderers/webgl/systems/ContextSystem.js @@ -1,7 +1,6 @@ import WebGLSystem from './WebGLSystem'; import { Rectangle, Matrix } from '../../../math'; import glCore from 'pixi-gl-core'; -import validateContext from '../utils/validateContext'; let CONTEXT_UID = 0; @@ -59,7 +58,7 @@ initFromContext(gl) { this.gl = gl; - validateContext(gl); + this.validateContext(gl); this.renderer.gl = gl; this.renderer.CONTEXT_UID = CONTEXT_UID++; this.renderer.runners.contextChange.run(gl); @@ -67,7 +66,7 @@ initFromOptions(options) { - const gl = glCore.createContext(this.renderer.view, this.options); + const gl = glCore.createContext(this.renderer.view, options); this.initFromContext(gl); } @@ -116,4 +115,17 @@ { this.gl.flush(); } + + validateContext(gl) + { + const attributes = gl.getContextAttributes(); + + // this is going to be fairly simple for now.. but at least we have room to grow! + if (!attributes.stencil) + { + /* eslint-disable no-console */ + console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); + /* eslint-enable no-console */ + } + } } diff --git a/src/core/renderers/webgl/systems/GeometrySystem.js b/src/core/renderers/webgl/systems/GeometrySystem.js index 984e3bb..c934aa6 100644 --- a/src/core/renderers/webgl/systems/GeometrySystem.js +++ b/src/core/renderers/webgl/systems/GeometrySystem.js @@ -59,7 +59,6 @@ { glBuffer._updateID = buffer._updateID; // TODO - partial upload?? - glBuffer.upload(buffer.data, 0); } } diff --git a/src/core/renderers/webgl/systems/MaskSystem.js b/src/core/renderers/webgl/systems/MaskSystem.js index d83ddd9..528c0b8 100644 --- a/src/core/renderers/webgl/systems/MaskSystem.js +++ b/src/core/renderers/webgl/systems/MaskSystem.js @@ -32,7 +32,7 @@ * @param {PIXI.DisplayObject} target - Display Object to push the mask to * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - pushMask(target, maskData) + push(target, maskData) { // TODO the root check means scissor rect will not // be used on render textures more info here: @@ -76,7 +76,7 @@ * @param {PIXI.DisplayObject} target - Display Object to pop the mask from * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - popMask(target, maskData) + pop(target, maskData) { if (maskData.texture) { @@ -145,7 +145,7 @@ */ popStencilMask() { - this.renderer.batch.flush(); + // this.renderer.currentRenderer.stop(); this.renderer.stencil.popStencil(); } diff --git a/src/core/renderers/webgl/systems/RenderTextureSystem.js b/src/core/renderers/webgl/systems/RenderTextureSystem.js index a670a5b..d27802b 100644 --- a/src/core/renderers/webgl/systems/RenderTextureSystem.js +++ b/src/core/renderers/webgl/systems/RenderTextureSystem.js @@ -19,35 +19,36 @@ super(renderer); this.clearColor = renderer._backgroundColorRgba; + + // TODO moe this property somewhere else! + this.defaultMaskStack = []; } bind(renderTexture) { // TODO - do we want this?? if(this.renderTexture === renderTexture)return; - this.renderTexture = renderTexture; - const renderer = this.renderer; + this.renderTexture = renderTexture; if(renderTexture) { - renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); - renderer.projection.update(renderTexture.frame, renderTexture.frame, false); - - renderer.stencil.stencilMaskStack = renderTexture.stencilMaskStack; + this.renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); + this.renderer.projection.update(renderTexture.frame, renderTexture.frame, false); + this.renderer.stencil.setMaskStack(renderTexture.baseTexture.stencilMaskStack); } else { - renderer.framebuffer.bind(null); + this.renderer.framebuffer.bind(null); - tempRect.width = renderer.width; - tempRect.height = renderer.height; + tempRect.width = this.renderer.width; + tempRect.height = this.renderer.height; // TODO store this.. - renderer.projection.update(tempRect, tempRect, true); - renderer.stencil.stencilMaskStack = renderer.stencil.defaultStencilStack; + this.renderer.projection.update(tempRect, tempRect, true); + this.renderer.stencil.setMaskStack(this.defaultMaskStack); } - const glShader = renderer.shader.getGLShader() + const glShader = this.renderer.shader.getGLShader() if (glShader) { diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index ac5ed0f..b04d71b 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -14,7 +14,6 @@ { super(renderer); this.stencilMaskStack = null; - this.defaultStencilStack = []; } /** @@ -22,7 +21,7 @@ * * @param {PIXI.Graphics[]} stencilMaskStack - The mask stack */ - setMaskStack(stencilMaskStack) + setMaskStack(stencilMaskStack) { this.stencilMaskStack = stencilMaskStack; @@ -47,7 +46,7 @@ { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); - //this.renderer._activeRenderTarget.attachStencilBuffer(); +// this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; const sms = this.stencilMaskStack; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js deleted file mode 100644 index 6d878a1..0000000 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ /dev/null @@ -1,24 +0,0 @@ -import { DRAW_MODES } from '../../../const'; - -/** - * Generic Mask Stack data structure. - * - * @memberof PIXI - * @function mapWebGLDrawModesToPixi - * @private - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {object} [object={}] - The object to map into - * @return {object} The mapped draw modes. - */ -export default function mapWebGLDrawModesToPixi(gl, object = {}) -{ - object[DRAW_MODES.POINTS] = gl.POINTS; - object[DRAW_MODES.LINES] = gl.LINES; - object[DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; - object[DRAW_MODES.LINE_STRIP] = gl.LINE_STRIP; - object[DRAW_MODES.TRIANGLES] = gl.TRIANGLES; - object[DRAW_MODES.TRIANGLE_STRIP] = gl.TRIANGLE_STRIP; - object[DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; - - return object; -} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index a24030e..967ca78 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -1,4 +1,6 @@ import glCore from 'pixi-gl-core'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; /** * An object containing WebGL specific properties to be used by the WebGL renderer @@ -45,13 +47,13 @@ * The main buffer * @member {WebGLBuffer} */ - this.buffer = glCore.GLBuffer.createVertexBuffer(gl); + this.buffer = new Buffer(); /** * The index buffer * @member {WebGLBuffer} */ - this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl); + this.indexBuffer = new Buffer(); /** * Whether this graphics is dirty or not @@ -59,8 +61,6 @@ */ this.dirty = true; - this.glPoints = null; - this.glIndices = null; /** * @@ -68,10 +68,9 @@ */ this.shader = shader; - this.vao = new glCore.VertexArrayObject(gl, attribsState) - .addIndex(this.indexBuffer) - .addAttribute(this.buffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 6, 0) - .addAttribute(this.buffer, shader.attributes.aColor, gl.FLOAT, false, 4 * 6, 2 * 4); + this.geometry = new Geometry() + .addAttribute('aVertexPosition|aColor', this.buffer) + .addIndex(this.indexBuffer); } /** @@ -79,6 +78,7 @@ */ reset() { + this.points.length = 0; this.indices.length = 0; } @@ -89,11 +89,12 @@ upload() { this.glPoints = new Float32Array(this.points); - this.buffer.upload(this.glPoints); + this.buffer.update(this.glPoints); this.glIndices = new Uint16Array(this.indices); - this.indexBuffer.upload(this.glIndices); + this.indexBuffer.update(this.glIndices); + // console.log("UPKOADING,.",this.glPoints,this.glIndices) this.dirty = false; } diff --git a/src/core/graphics/webgl/shaders/PrimitiveShader.js b/src/core/graphics/webgl/shaders/PrimitiveShader.js index 5ba9799..d2c4156 100644 --- a/src/core/graphics/webgl/shaders/PrimitiveShader.js +++ b/src/core/graphics/webgl/shaders/PrimitiveShader.js @@ -1,4 +1,5 @@ -import { GLShader } from 'pixi-gl-core'; +import Shader from '../../../shader/Shader'; +import Program from '../../../shader/Program'; import { PRECISION } from '../../../const'; /** @@ -8,16 +9,14 @@ * @memberof PIXI * @extends PIXI.Shader */ -export default class PrimitiveShader extends GLShader +export default class PrimitiveShader extends Shader { /** * @param {WebGLRenderingContext} gl - The webgl shader manager this shader works for. */ - constructor(gl) + constructor() { - super(gl, - // vertex shader - [ + const program = Program.from([ 'attribute vec2 aVertexPosition;', 'attribute vec4 aColor;', @@ -41,8 +40,8 @@ 'void main(void){', ' gl_FragColor = vColor;', '}', - ].join('\n'), - PRECISION.DEFAULT - ); + ].join('\n')); + + super(program, {}) } } diff --git a/src/core/renderers/webgl/State.js b/src/core/renderers/webgl/State.js index 4ee6b56..11d431a 100644 --- a/src/core/renderers/webgl/State.js +++ b/src/core/renderers/webgl/State.js @@ -26,6 +26,7 @@ this.polygonOffset = 0; this.blend = true; + this.depthTest = true; } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 22f78e0..92cbab2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -111,7 +111,7 @@ .addSystem(FramebufferSystem) .addSystem(StencilSystem) .addSystem(ProjectionSystem) - .addSystem(TextureGCSystem) + //.addSystem(TextureGCSystem) .addSystem(FilterSystem) .addSystem(RenderTextureSystem) .addSystem(BatchSystem) diff --git a/src/core/renderers/webgl/systems/ContextSystem.js b/src/core/renderers/webgl/systems/ContextSystem.js index fa26c42..eb6f498 100644 --- a/src/core/renderers/webgl/systems/ContextSystem.js +++ b/src/core/renderers/webgl/systems/ContextSystem.js @@ -1,7 +1,6 @@ import WebGLSystem from './WebGLSystem'; import { Rectangle, Matrix } from '../../../math'; import glCore from 'pixi-gl-core'; -import validateContext from '../utils/validateContext'; let CONTEXT_UID = 0; @@ -59,7 +58,7 @@ initFromContext(gl) { this.gl = gl; - validateContext(gl); + this.validateContext(gl); this.renderer.gl = gl; this.renderer.CONTEXT_UID = CONTEXT_UID++; this.renderer.runners.contextChange.run(gl); @@ -67,7 +66,7 @@ initFromOptions(options) { - const gl = glCore.createContext(this.renderer.view, this.options); + const gl = glCore.createContext(this.renderer.view, options); this.initFromContext(gl); } @@ -116,4 +115,17 @@ { this.gl.flush(); } + + validateContext(gl) + { + const attributes = gl.getContextAttributes(); + + // this is going to be fairly simple for now.. but at least we have room to grow! + if (!attributes.stencil) + { + /* eslint-disable no-console */ + console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); + /* eslint-enable no-console */ + } + } } diff --git a/src/core/renderers/webgl/systems/GeometrySystem.js b/src/core/renderers/webgl/systems/GeometrySystem.js index 984e3bb..c934aa6 100644 --- a/src/core/renderers/webgl/systems/GeometrySystem.js +++ b/src/core/renderers/webgl/systems/GeometrySystem.js @@ -59,7 +59,6 @@ { glBuffer._updateID = buffer._updateID; // TODO - partial upload?? - glBuffer.upload(buffer.data, 0); } } diff --git a/src/core/renderers/webgl/systems/MaskSystem.js b/src/core/renderers/webgl/systems/MaskSystem.js index d83ddd9..528c0b8 100644 --- a/src/core/renderers/webgl/systems/MaskSystem.js +++ b/src/core/renderers/webgl/systems/MaskSystem.js @@ -32,7 +32,7 @@ * @param {PIXI.DisplayObject} target - Display Object to push the mask to * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - pushMask(target, maskData) + push(target, maskData) { // TODO the root check means scissor rect will not // be used on render textures more info here: @@ -76,7 +76,7 @@ * @param {PIXI.DisplayObject} target - Display Object to pop the mask from * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - popMask(target, maskData) + pop(target, maskData) { if (maskData.texture) { @@ -145,7 +145,7 @@ */ popStencilMask() { - this.renderer.batch.flush(); + // this.renderer.currentRenderer.stop(); this.renderer.stencil.popStencil(); } diff --git a/src/core/renderers/webgl/systems/RenderTextureSystem.js b/src/core/renderers/webgl/systems/RenderTextureSystem.js index a670a5b..d27802b 100644 --- a/src/core/renderers/webgl/systems/RenderTextureSystem.js +++ b/src/core/renderers/webgl/systems/RenderTextureSystem.js @@ -19,35 +19,36 @@ super(renderer); this.clearColor = renderer._backgroundColorRgba; + + // TODO moe this property somewhere else! + this.defaultMaskStack = []; } bind(renderTexture) { // TODO - do we want this?? if(this.renderTexture === renderTexture)return; - this.renderTexture = renderTexture; - const renderer = this.renderer; + this.renderTexture = renderTexture; if(renderTexture) { - renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); - renderer.projection.update(renderTexture.frame, renderTexture.frame, false); - - renderer.stencil.stencilMaskStack = renderTexture.stencilMaskStack; + this.renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); + this.renderer.projection.update(renderTexture.frame, renderTexture.frame, false); + this.renderer.stencil.setMaskStack(renderTexture.baseTexture.stencilMaskStack); } else { - renderer.framebuffer.bind(null); + this.renderer.framebuffer.bind(null); - tempRect.width = renderer.width; - tempRect.height = renderer.height; + tempRect.width = this.renderer.width; + tempRect.height = this.renderer.height; // TODO store this.. - renderer.projection.update(tempRect, tempRect, true); - renderer.stencil.stencilMaskStack = renderer.stencil.defaultStencilStack; + this.renderer.projection.update(tempRect, tempRect, true); + this.renderer.stencil.setMaskStack(this.defaultMaskStack); } - const glShader = renderer.shader.getGLShader() + const glShader = this.renderer.shader.getGLShader() if (glShader) { diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index ac5ed0f..b04d71b 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -14,7 +14,6 @@ { super(renderer); this.stencilMaskStack = null; - this.defaultStencilStack = []; } /** @@ -22,7 +21,7 @@ * * @param {PIXI.Graphics[]} stencilMaskStack - The mask stack */ - setMaskStack(stencilMaskStack) + setMaskStack(stencilMaskStack) { this.stencilMaskStack = stencilMaskStack; @@ -47,7 +46,7 @@ { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); - //this.renderer._activeRenderTarget.attachStencilBuffer(); +// this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; const sms = this.stencilMaskStack; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js deleted file mode 100644 index 6d878a1..0000000 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ /dev/null @@ -1,24 +0,0 @@ -import { DRAW_MODES } from '../../../const'; - -/** - * Generic Mask Stack data structure. - * - * @memberof PIXI - * @function mapWebGLDrawModesToPixi - * @private - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {object} [object={}] - The object to map into - * @return {object} The mapped draw modes. - */ -export default function mapWebGLDrawModesToPixi(gl, object = {}) -{ - object[DRAW_MODES.POINTS] = gl.POINTS; - object[DRAW_MODES.LINES] = gl.LINES; - object[DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; - object[DRAW_MODES.LINE_STRIP] = gl.LINE_STRIP; - object[DRAW_MODES.TRIANGLES] = gl.TRIANGLES; - object[DRAW_MODES.TRIANGLE_STRIP] = gl.TRIANGLE_STRIP; - object[DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; - - return object; -} diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js deleted file mode 100644 index 1566a06..0000000 --- a/src/core/renderers/webgl/utils/validateContext.js +++ /dev/null @@ -1,12 +0,0 @@ -export default function validateContext(gl) -{ - const attributes = gl.getContextAttributes(); - - // this is going to be fairly simple for now.. but at least we have room to grow! - if (!attributes.stencil) - { - /* eslint-disable no-console */ - console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); - /* eslint-enable no-console */ - } -} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index a24030e..967ca78 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -1,4 +1,6 @@ import glCore from 'pixi-gl-core'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; /** * An object containing WebGL specific properties to be used by the WebGL renderer @@ -45,13 +47,13 @@ * The main buffer * @member {WebGLBuffer} */ - this.buffer = glCore.GLBuffer.createVertexBuffer(gl); + this.buffer = new Buffer(); /** * The index buffer * @member {WebGLBuffer} */ - this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl); + this.indexBuffer = new Buffer(); /** * Whether this graphics is dirty or not @@ -59,8 +61,6 @@ */ this.dirty = true; - this.glPoints = null; - this.glIndices = null; /** * @@ -68,10 +68,9 @@ */ this.shader = shader; - this.vao = new glCore.VertexArrayObject(gl, attribsState) - .addIndex(this.indexBuffer) - .addAttribute(this.buffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 6, 0) - .addAttribute(this.buffer, shader.attributes.aColor, gl.FLOAT, false, 4 * 6, 2 * 4); + this.geometry = new Geometry() + .addAttribute('aVertexPosition|aColor', this.buffer) + .addIndex(this.indexBuffer); } /** @@ -79,6 +78,7 @@ */ reset() { + this.points.length = 0; this.indices.length = 0; } @@ -89,11 +89,12 @@ upload() { this.glPoints = new Float32Array(this.points); - this.buffer.upload(this.glPoints); + this.buffer.update(this.glPoints); this.glIndices = new Uint16Array(this.indices); - this.indexBuffer.upload(this.glIndices); + this.indexBuffer.update(this.glIndices); + // console.log("UPKOADING,.",this.glPoints,this.glIndices) this.dirty = false; } diff --git a/src/core/graphics/webgl/shaders/PrimitiveShader.js b/src/core/graphics/webgl/shaders/PrimitiveShader.js index 5ba9799..d2c4156 100644 --- a/src/core/graphics/webgl/shaders/PrimitiveShader.js +++ b/src/core/graphics/webgl/shaders/PrimitiveShader.js @@ -1,4 +1,5 @@ -import { GLShader } from 'pixi-gl-core'; +import Shader from '../../../shader/Shader'; +import Program from '../../../shader/Program'; import { PRECISION } from '../../../const'; /** @@ -8,16 +9,14 @@ * @memberof PIXI * @extends PIXI.Shader */ -export default class PrimitiveShader extends GLShader +export default class PrimitiveShader extends Shader { /** * @param {WebGLRenderingContext} gl - The webgl shader manager this shader works for. */ - constructor(gl) + constructor() { - super(gl, - // vertex shader - [ + const program = Program.from([ 'attribute vec2 aVertexPosition;', 'attribute vec4 aColor;', @@ -41,8 +40,8 @@ 'void main(void){', ' gl_FragColor = vColor;', '}', - ].join('\n'), - PRECISION.DEFAULT - ); + ].join('\n')); + + super(program, {}) } } diff --git a/src/core/renderers/webgl/State.js b/src/core/renderers/webgl/State.js index 4ee6b56..11d431a 100644 --- a/src/core/renderers/webgl/State.js +++ b/src/core/renderers/webgl/State.js @@ -26,6 +26,7 @@ this.polygonOffset = 0; this.blend = true; + this.depthTest = true; } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 22f78e0..92cbab2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -111,7 +111,7 @@ .addSystem(FramebufferSystem) .addSystem(StencilSystem) .addSystem(ProjectionSystem) - .addSystem(TextureGCSystem) + //.addSystem(TextureGCSystem) .addSystem(FilterSystem) .addSystem(RenderTextureSystem) .addSystem(BatchSystem) diff --git a/src/core/renderers/webgl/systems/ContextSystem.js b/src/core/renderers/webgl/systems/ContextSystem.js index fa26c42..eb6f498 100644 --- a/src/core/renderers/webgl/systems/ContextSystem.js +++ b/src/core/renderers/webgl/systems/ContextSystem.js @@ -1,7 +1,6 @@ import WebGLSystem from './WebGLSystem'; import { Rectangle, Matrix } from '../../../math'; import glCore from 'pixi-gl-core'; -import validateContext from '../utils/validateContext'; let CONTEXT_UID = 0; @@ -59,7 +58,7 @@ initFromContext(gl) { this.gl = gl; - validateContext(gl); + this.validateContext(gl); this.renderer.gl = gl; this.renderer.CONTEXT_UID = CONTEXT_UID++; this.renderer.runners.contextChange.run(gl); @@ -67,7 +66,7 @@ initFromOptions(options) { - const gl = glCore.createContext(this.renderer.view, this.options); + const gl = glCore.createContext(this.renderer.view, options); this.initFromContext(gl); } @@ -116,4 +115,17 @@ { this.gl.flush(); } + + validateContext(gl) + { + const attributes = gl.getContextAttributes(); + + // this is going to be fairly simple for now.. but at least we have room to grow! + if (!attributes.stencil) + { + /* eslint-disable no-console */ + console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); + /* eslint-enable no-console */ + } + } } diff --git a/src/core/renderers/webgl/systems/GeometrySystem.js b/src/core/renderers/webgl/systems/GeometrySystem.js index 984e3bb..c934aa6 100644 --- a/src/core/renderers/webgl/systems/GeometrySystem.js +++ b/src/core/renderers/webgl/systems/GeometrySystem.js @@ -59,7 +59,6 @@ { glBuffer._updateID = buffer._updateID; // TODO - partial upload?? - glBuffer.upload(buffer.data, 0); } } diff --git a/src/core/renderers/webgl/systems/MaskSystem.js b/src/core/renderers/webgl/systems/MaskSystem.js index d83ddd9..528c0b8 100644 --- a/src/core/renderers/webgl/systems/MaskSystem.js +++ b/src/core/renderers/webgl/systems/MaskSystem.js @@ -32,7 +32,7 @@ * @param {PIXI.DisplayObject} target - Display Object to push the mask to * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - pushMask(target, maskData) + push(target, maskData) { // TODO the root check means scissor rect will not // be used on render textures more info here: @@ -76,7 +76,7 @@ * @param {PIXI.DisplayObject} target - Display Object to pop the mask from * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - popMask(target, maskData) + pop(target, maskData) { if (maskData.texture) { @@ -145,7 +145,7 @@ */ popStencilMask() { - this.renderer.batch.flush(); + // this.renderer.currentRenderer.stop(); this.renderer.stencil.popStencil(); } diff --git a/src/core/renderers/webgl/systems/RenderTextureSystem.js b/src/core/renderers/webgl/systems/RenderTextureSystem.js index a670a5b..d27802b 100644 --- a/src/core/renderers/webgl/systems/RenderTextureSystem.js +++ b/src/core/renderers/webgl/systems/RenderTextureSystem.js @@ -19,35 +19,36 @@ super(renderer); this.clearColor = renderer._backgroundColorRgba; + + // TODO moe this property somewhere else! + this.defaultMaskStack = []; } bind(renderTexture) { // TODO - do we want this?? if(this.renderTexture === renderTexture)return; - this.renderTexture = renderTexture; - const renderer = this.renderer; + this.renderTexture = renderTexture; if(renderTexture) { - renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); - renderer.projection.update(renderTexture.frame, renderTexture.frame, false); - - renderer.stencil.stencilMaskStack = renderTexture.stencilMaskStack; + this.renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); + this.renderer.projection.update(renderTexture.frame, renderTexture.frame, false); + this.renderer.stencil.setMaskStack(renderTexture.baseTexture.stencilMaskStack); } else { - renderer.framebuffer.bind(null); + this.renderer.framebuffer.bind(null); - tempRect.width = renderer.width; - tempRect.height = renderer.height; + tempRect.width = this.renderer.width; + tempRect.height = this.renderer.height; // TODO store this.. - renderer.projection.update(tempRect, tempRect, true); - renderer.stencil.stencilMaskStack = renderer.stencil.defaultStencilStack; + this.renderer.projection.update(tempRect, tempRect, true); + this.renderer.stencil.setMaskStack(this.defaultMaskStack); } - const glShader = renderer.shader.getGLShader() + const glShader = this.renderer.shader.getGLShader() if (glShader) { diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index ac5ed0f..b04d71b 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -14,7 +14,6 @@ { super(renderer); this.stencilMaskStack = null; - this.defaultStencilStack = []; } /** @@ -22,7 +21,7 @@ * * @param {PIXI.Graphics[]} stencilMaskStack - The mask stack */ - setMaskStack(stencilMaskStack) + setMaskStack(stencilMaskStack) { this.stencilMaskStack = stencilMaskStack; @@ -47,7 +46,7 @@ { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); - //this.renderer._activeRenderTarget.attachStencilBuffer(); +// this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; const sms = this.stencilMaskStack; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js deleted file mode 100644 index 6d878a1..0000000 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ /dev/null @@ -1,24 +0,0 @@ -import { DRAW_MODES } from '../../../const'; - -/** - * Generic Mask Stack data structure. - * - * @memberof PIXI - * @function mapWebGLDrawModesToPixi - * @private - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {object} [object={}] - The object to map into - * @return {object} The mapped draw modes. - */ -export default function mapWebGLDrawModesToPixi(gl, object = {}) -{ - object[DRAW_MODES.POINTS] = gl.POINTS; - object[DRAW_MODES.LINES] = gl.LINES; - object[DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; - object[DRAW_MODES.LINE_STRIP] = gl.LINE_STRIP; - object[DRAW_MODES.TRIANGLES] = gl.TRIANGLES; - object[DRAW_MODES.TRIANGLE_STRIP] = gl.TRIANGLE_STRIP; - object[DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; - - return object; -} diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js deleted file mode 100644 index 1566a06..0000000 --- a/src/core/renderers/webgl/utils/validateContext.js +++ /dev/null @@ -1,12 +0,0 @@ -export default function validateContext(gl) -{ - const attributes = gl.getContextAttributes(); - - // this is going to be fairly simple for now.. but at least we have room to grow! - if (!attributes.stencil) - { - /* eslint-disable no-console */ - console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); - /* eslint-enable no-console */ - } -} diff --git a/src/core/shader/Program.js b/src/core/shader/Program.js index bf93ef5..5fe92ad 100644 --- a/src/core/shader/Program.js +++ b/src/core/shader/Program.js @@ -53,7 +53,6 @@ */ extractData(vertexSrc, fragmentSrc) { - console.log(glCore._testingContext) const gl = glCore._testingContext || Program.getTestingContext(); if (!gl) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index a24030e..967ca78 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -1,4 +1,6 @@ import glCore from 'pixi-gl-core'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; /** * An object containing WebGL specific properties to be used by the WebGL renderer @@ -45,13 +47,13 @@ * The main buffer * @member {WebGLBuffer} */ - this.buffer = glCore.GLBuffer.createVertexBuffer(gl); + this.buffer = new Buffer(); /** * The index buffer * @member {WebGLBuffer} */ - this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl); + this.indexBuffer = new Buffer(); /** * Whether this graphics is dirty or not @@ -59,8 +61,6 @@ */ this.dirty = true; - this.glPoints = null; - this.glIndices = null; /** * @@ -68,10 +68,9 @@ */ this.shader = shader; - this.vao = new glCore.VertexArrayObject(gl, attribsState) - .addIndex(this.indexBuffer) - .addAttribute(this.buffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 6, 0) - .addAttribute(this.buffer, shader.attributes.aColor, gl.FLOAT, false, 4 * 6, 2 * 4); + this.geometry = new Geometry() + .addAttribute('aVertexPosition|aColor', this.buffer) + .addIndex(this.indexBuffer); } /** @@ -79,6 +78,7 @@ */ reset() { + this.points.length = 0; this.indices.length = 0; } @@ -89,11 +89,12 @@ upload() { this.glPoints = new Float32Array(this.points); - this.buffer.upload(this.glPoints); + this.buffer.update(this.glPoints); this.glIndices = new Uint16Array(this.indices); - this.indexBuffer.upload(this.glIndices); + this.indexBuffer.update(this.glIndices); + // console.log("UPKOADING,.",this.glPoints,this.glIndices) this.dirty = false; } diff --git a/src/core/graphics/webgl/shaders/PrimitiveShader.js b/src/core/graphics/webgl/shaders/PrimitiveShader.js index 5ba9799..d2c4156 100644 --- a/src/core/graphics/webgl/shaders/PrimitiveShader.js +++ b/src/core/graphics/webgl/shaders/PrimitiveShader.js @@ -1,4 +1,5 @@ -import { GLShader } from 'pixi-gl-core'; +import Shader from '../../../shader/Shader'; +import Program from '../../../shader/Program'; import { PRECISION } from '../../../const'; /** @@ -8,16 +9,14 @@ * @memberof PIXI * @extends PIXI.Shader */ -export default class PrimitiveShader extends GLShader +export default class PrimitiveShader extends Shader { /** * @param {WebGLRenderingContext} gl - The webgl shader manager this shader works for. */ - constructor(gl) + constructor() { - super(gl, - // vertex shader - [ + const program = Program.from([ 'attribute vec2 aVertexPosition;', 'attribute vec4 aColor;', @@ -41,8 +40,8 @@ 'void main(void){', ' gl_FragColor = vColor;', '}', - ].join('\n'), - PRECISION.DEFAULT - ); + ].join('\n')); + + super(program, {}) } } diff --git a/src/core/renderers/webgl/State.js b/src/core/renderers/webgl/State.js index 4ee6b56..11d431a 100644 --- a/src/core/renderers/webgl/State.js +++ b/src/core/renderers/webgl/State.js @@ -26,6 +26,7 @@ this.polygonOffset = 0; this.blend = true; + this.depthTest = true; } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 22f78e0..92cbab2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -111,7 +111,7 @@ .addSystem(FramebufferSystem) .addSystem(StencilSystem) .addSystem(ProjectionSystem) - .addSystem(TextureGCSystem) + //.addSystem(TextureGCSystem) .addSystem(FilterSystem) .addSystem(RenderTextureSystem) .addSystem(BatchSystem) diff --git a/src/core/renderers/webgl/systems/ContextSystem.js b/src/core/renderers/webgl/systems/ContextSystem.js index fa26c42..eb6f498 100644 --- a/src/core/renderers/webgl/systems/ContextSystem.js +++ b/src/core/renderers/webgl/systems/ContextSystem.js @@ -1,7 +1,6 @@ import WebGLSystem from './WebGLSystem'; import { Rectangle, Matrix } from '../../../math'; import glCore from 'pixi-gl-core'; -import validateContext from '../utils/validateContext'; let CONTEXT_UID = 0; @@ -59,7 +58,7 @@ initFromContext(gl) { this.gl = gl; - validateContext(gl); + this.validateContext(gl); this.renderer.gl = gl; this.renderer.CONTEXT_UID = CONTEXT_UID++; this.renderer.runners.contextChange.run(gl); @@ -67,7 +66,7 @@ initFromOptions(options) { - const gl = glCore.createContext(this.renderer.view, this.options); + const gl = glCore.createContext(this.renderer.view, options); this.initFromContext(gl); } @@ -116,4 +115,17 @@ { this.gl.flush(); } + + validateContext(gl) + { + const attributes = gl.getContextAttributes(); + + // this is going to be fairly simple for now.. but at least we have room to grow! + if (!attributes.stencil) + { + /* eslint-disable no-console */ + console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); + /* eslint-enable no-console */ + } + } } diff --git a/src/core/renderers/webgl/systems/GeometrySystem.js b/src/core/renderers/webgl/systems/GeometrySystem.js index 984e3bb..c934aa6 100644 --- a/src/core/renderers/webgl/systems/GeometrySystem.js +++ b/src/core/renderers/webgl/systems/GeometrySystem.js @@ -59,7 +59,6 @@ { glBuffer._updateID = buffer._updateID; // TODO - partial upload?? - glBuffer.upload(buffer.data, 0); } } diff --git a/src/core/renderers/webgl/systems/MaskSystem.js b/src/core/renderers/webgl/systems/MaskSystem.js index d83ddd9..528c0b8 100644 --- a/src/core/renderers/webgl/systems/MaskSystem.js +++ b/src/core/renderers/webgl/systems/MaskSystem.js @@ -32,7 +32,7 @@ * @param {PIXI.DisplayObject} target - Display Object to push the mask to * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - pushMask(target, maskData) + push(target, maskData) { // TODO the root check means scissor rect will not // be used on render textures more info here: @@ -76,7 +76,7 @@ * @param {PIXI.DisplayObject} target - Display Object to pop the mask from * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - popMask(target, maskData) + pop(target, maskData) { if (maskData.texture) { @@ -145,7 +145,7 @@ */ popStencilMask() { - this.renderer.batch.flush(); + // this.renderer.currentRenderer.stop(); this.renderer.stencil.popStencil(); } diff --git a/src/core/renderers/webgl/systems/RenderTextureSystem.js b/src/core/renderers/webgl/systems/RenderTextureSystem.js index a670a5b..d27802b 100644 --- a/src/core/renderers/webgl/systems/RenderTextureSystem.js +++ b/src/core/renderers/webgl/systems/RenderTextureSystem.js @@ -19,35 +19,36 @@ super(renderer); this.clearColor = renderer._backgroundColorRgba; + + // TODO moe this property somewhere else! + this.defaultMaskStack = []; } bind(renderTexture) { // TODO - do we want this?? if(this.renderTexture === renderTexture)return; - this.renderTexture = renderTexture; - const renderer = this.renderer; + this.renderTexture = renderTexture; if(renderTexture) { - renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); - renderer.projection.update(renderTexture.frame, renderTexture.frame, false); - - renderer.stencil.stencilMaskStack = renderTexture.stencilMaskStack; + this.renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); + this.renderer.projection.update(renderTexture.frame, renderTexture.frame, false); + this.renderer.stencil.setMaskStack(renderTexture.baseTexture.stencilMaskStack); } else { - renderer.framebuffer.bind(null); + this.renderer.framebuffer.bind(null); - tempRect.width = renderer.width; - tempRect.height = renderer.height; + tempRect.width = this.renderer.width; + tempRect.height = this.renderer.height; // TODO store this.. - renderer.projection.update(tempRect, tempRect, true); - renderer.stencil.stencilMaskStack = renderer.stencil.defaultStencilStack; + this.renderer.projection.update(tempRect, tempRect, true); + this.renderer.stencil.setMaskStack(this.defaultMaskStack); } - const glShader = renderer.shader.getGLShader() + const glShader = this.renderer.shader.getGLShader() if (glShader) { diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index ac5ed0f..b04d71b 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -14,7 +14,6 @@ { super(renderer); this.stencilMaskStack = null; - this.defaultStencilStack = []; } /** @@ -22,7 +21,7 @@ * * @param {PIXI.Graphics[]} stencilMaskStack - The mask stack */ - setMaskStack(stencilMaskStack) + setMaskStack(stencilMaskStack) { this.stencilMaskStack = stencilMaskStack; @@ -47,7 +46,7 @@ { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); - //this.renderer._activeRenderTarget.attachStencilBuffer(); +// this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; const sms = this.stencilMaskStack; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js deleted file mode 100644 index 6d878a1..0000000 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ /dev/null @@ -1,24 +0,0 @@ -import { DRAW_MODES } from '../../../const'; - -/** - * Generic Mask Stack data structure. - * - * @memberof PIXI - * @function mapWebGLDrawModesToPixi - * @private - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {object} [object={}] - The object to map into - * @return {object} The mapped draw modes. - */ -export default function mapWebGLDrawModesToPixi(gl, object = {}) -{ - object[DRAW_MODES.POINTS] = gl.POINTS; - object[DRAW_MODES.LINES] = gl.LINES; - object[DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; - object[DRAW_MODES.LINE_STRIP] = gl.LINE_STRIP; - object[DRAW_MODES.TRIANGLES] = gl.TRIANGLES; - object[DRAW_MODES.TRIANGLE_STRIP] = gl.TRIANGLE_STRIP; - object[DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; - - return object; -} diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js deleted file mode 100644 index 1566a06..0000000 --- a/src/core/renderers/webgl/utils/validateContext.js +++ /dev/null @@ -1,12 +0,0 @@ -export default function validateContext(gl) -{ - const attributes = gl.getContextAttributes(); - - // this is going to be fairly simple for now.. but at least we have room to grow! - if (!attributes.stencil) - { - /* eslint-disable no-console */ - console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); - /* eslint-enable no-console */ - } -} diff --git a/src/core/shader/Program.js b/src/core/shader/Program.js index bf93ef5..5fe92ad 100644 --- a/src/core/shader/Program.js +++ b/src/core/shader/Program.js @@ -53,7 +53,6 @@ */ extractData(vertexSrc, fragmentSrc) { - console.log(glCore._testingContext) const gl = glCore._testingContext || Program.getTestingContext(); if (!gl) diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index fe7f597..309da9c 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -224,7 +224,7 @@ const boundTextures = this.boundTextures; const rendererBoundTextures = this.renderer.boundTextures; - const touch = this.renderer.textureGC.count; + const touch = 0//this.renderer.textureGC.count; let index = 0; let nextTexture; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index a24030e..967ca78 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -1,4 +1,6 @@ import glCore from 'pixi-gl-core'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; /** * An object containing WebGL specific properties to be used by the WebGL renderer @@ -45,13 +47,13 @@ * The main buffer * @member {WebGLBuffer} */ - this.buffer = glCore.GLBuffer.createVertexBuffer(gl); + this.buffer = new Buffer(); /** * The index buffer * @member {WebGLBuffer} */ - this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl); + this.indexBuffer = new Buffer(); /** * Whether this graphics is dirty or not @@ -59,8 +61,6 @@ */ this.dirty = true; - this.glPoints = null; - this.glIndices = null; /** * @@ -68,10 +68,9 @@ */ this.shader = shader; - this.vao = new glCore.VertexArrayObject(gl, attribsState) - .addIndex(this.indexBuffer) - .addAttribute(this.buffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 6, 0) - .addAttribute(this.buffer, shader.attributes.aColor, gl.FLOAT, false, 4 * 6, 2 * 4); + this.geometry = new Geometry() + .addAttribute('aVertexPosition|aColor', this.buffer) + .addIndex(this.indexBuffer); } /** @@ -79,6 +78,7 @@ */ reset() { + this.points.length = 0; this.indices.length = 0; } @@ -89,11 +89,12 @@ upload() { this.glPoints = new Float32Array(this.points); - this.buffer.upload(this.glPoints); + this.buffer.update(this.glPoints); this.glIndices = new Uint16Array(this.indices); - this.indexBuffer.upload(this.glIndices); + this.indexBuffer.update(this.glIndices); + // console.log("UPKOADING,.",this.glPoints,this.glIndices) this.dirty = false; } diff --git a/src/core/graphics/webgl/shaders/PrimitiveShader.js b/src/core/graphics/webgl/shaders/PrimitiveShader.js index 5ba9799..d2c4156 100644 --- a/src/core/graphics/webgl/shaders/PrimitiveShader.js +++ b/src/core/graphics/webgl/shaders/PrimitiveShader.js @@ -1,4 +1,5 @@ -import { GLShader } from 'pixi-gl-core'; +import Shader from '../../../shader/Shader'; +import Program from '../../../shader/Program'; import { PRECISION } from '../../../const'; /** @@ -8,16 +9,14 @@ * @memberof PIXI * @extends PIXI.Shader */ -export default class PrimitiveShader extends GLShader +export default class PrimitiveShader extends Shader { /** * @param {WebGLRenderingContext} gl - The webgl shader manager this shader works for. */ - constructor(gl) + constructor() { - super(gl, - // vertex shader - [ + const program = Program.from([ 'attribute vec2 aVertexPosition;', 'attribute vec4 aColor;', @@ -41,8 +40,8 @@ 'void main(void){', ' gl_FragColor = vColor;', '}', - ].join('\n'), - PRECISION.DEFAULT - ); + ].join('\n')); + + super(program, {}) } } diff --git a/src/core/renderers/webgl/State.js b/src/core/renderers/webgl/State.js index 4ee6b56..11d431a 100644 --- a/src/core/renderers/webgl/State.js +++ b/src/core/renderers/webgl/State.js @@ -26,6 +26,7 @@ this.polygonOffset = 0; this.blend = true; + this.depthTest = true; } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 22f78e0..92cbab2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -111,7 +111,7 @@ .addSystem(FramebufferSystem) .addSystem(StencilSystem) .addSystem(ProjectionSystem) - .addSystem(TextureGCSystem) + //.addSystem(TextureGCSystem) .addSystem(FilterSystem) .addSystem(RenderTextureSystem) .addSystem(BatchSystem) diff --git a/src/core/renderers/webgl/systems/ContextSystem.js b/src/core/renderers/webgl/systems/ContextSystem.js index fa26c42..eb6f498 100644 --- a/src/core/renderers/webgl/systems/ContextSystem.js +++ b/src/core/renderers/webgl/systems/ContextSystem.js @@ -1,7 +1,6 @@ import WebGLSystem from './WebGLSystem'; import { Rectangle, Matrix } from '../../../math'; import glCore from 'pixi-gl-core'; -import validateContext from '../utils/validateContext'; let CONTEXT_UID = 0; @@ -59,7 +58,7 @@ initFromContext(gl) { this.gl = gl; - validateContext(gl); + this.validateContext(gl); this.renderer.gl = gl; this.renderer.CONTEXT_UID = CONTEXT_UID++; this.renderer.runners.contextChange.run(gl); @@ -67,7 +66,7 @@ initFromOptions(options) { - const gl = glCore.createContext(this.renderer.view, this.options); + const gl = glCore.createContext(this.renderer.view, options); this.initFromContext(gl); } @@ -116,4 +115,17 @@ { this.gl.flush(); } + + validateContext(gl) + { + const attributes = gl.getContextAttributes(); + + // this is going to be fairly simple for now.. but at least we have room to grow! + if (!attributes.stencil) + { + /* eslint-disable no-console */ + console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); + /* eslint-enable no-console */ + } + } } diff --git a/src/core/renderers/webgl/systems/GeometrySystem.js b/src/core/renderers/webgl/systems/GeometrySystem.js index 984e3bb..c934aa6 100644 --- a/src/core/renderers/webgl/systems/GeometrySystem.js +++ b/src/core/renderers/webgl/systems/GeometrySystem.js @@ -59,7 +59,6 @@ { glBuffer._updateID = buffer._updateID; // TODO - partial upload?? - glBuffer.upload(buffer.data, 0); } } diff --git a/src/core/renderers/webgl/systems/MaskSystem.js b/src/core/renderers/webgl/systems/MaskSystem.js index d83ddd9..528c0b8 100644 --- a/src/core/renderers/webgl/systems/MaskSystem.js +++ b/src/core/renderers/webgl/systems/MaskSystem.js @@ -32,7 +32,7 @@ * @param {PIXI.DisplayObject} target - Display Object to push the mask to * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - pushMask(target, maskData) + push(target, maskData) { // TODO the root check means scissor rect will not // be used on render textures more info here: @@ -76,7 +76,7 @@ * @param {PIXI.DisplayObject} target - Display Object to pop the mask from * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - popMask(target, maskData) + pop(target, maskData) { if (maskData.texture) { @@ -145,7 +145,7 @@ */ popStencilMask() { - this.renderer.batch.flush(); + // this.renderer.currentRenderer.stop(); this.renderer.stencil.popStencil(); } diff --git a/src/core/renderers/webgl/systems/RenderTextureSystem.js b/src/core/renderers/webgl/systems/RenderTextureSystem.js index a670a5b..d27802b 100644 --- a/src/core/renderers/webgl/systems/RenderTextureSystem.js +++ b/src/core/renderers/webgl/systems/RenderTextureSystem.js @@ -19,35 +19,36 @@ super(renderer); this.clearColor = renderer._backgroundColorRgba; + + // TODO moe this property somewhere else! + this.defaultMaskStack = []; } bind(renderTexture) { // TODO - do we want this?? if(this.renderTexture === renderTexture)return; - this.renderTexture = renderTexture; - const renderer = this.renderer; + this.renderTexture = renderTexture; if(renderTexture) { - renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); - renderer.projection.update(renderTexture.frame, renderTexture.frame, false); - - renderer.stencil.stencilMaskStack = renderTexture.stencilMaskStack; + this.renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); + this.renderer.projection.update(renderTexture.frame, renderTexture.frame, false); + this.renderer.stencil.setMaskStack(renderTexture.baseTexture.stencilMaskStack); } else { - renderer.framebuffer.bind(null); + this.renderer.framebuffer.bind(null); - tempRect.width = renderer.width; - tempRect.height = renderer.height; + tempRect.width = this.renderer.width; + tempRect.height = this.renderer.height; // TODO store this.. - renderer.projection.update(tempRect, tempRect, true); - renderer.stencil.stencilMaskStack = renderer.stencil.defaultStencilStack; + this.renderer.projection.update(tempRect, tempRect, true); + this.renderer.stencil.setMaskStack(this.defaultMaskStack); } - const glShader = renderer.shader.getGLShader() + const glShader = this.renderer.shader.getGLShader() if (glShader) { diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index ac5ed0f..b04d71b 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -14,7 +14,6 @@ { super(renderer); this.stencilMaskStack = null; - this.defaultStencilStack = []; } /** @@ -22,7 +21,7 @@ * * @param {PIXI.Graphics[]} stencilMaskStack - The mask stack */ - setMaskStack(stencilMaskStack) + setMaskStack(stencilMaskStack) { this.stencilMaskStack = stencilMaskStack; @@ -47,7 +46,7 @@ { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); - //this.renderer._activeRenderTarget.attachStencilBuffer(); +// this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; const sms = this.stencilMaskStack; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js deleted file mode 100644 index 6d878a1..0000000 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ /dev/null @@ -1,24 +0,0 @@ -import { DRAW_MODES } from '../../../const'; - -/** - * Generic Mask Stack data structure. - * - * @memberof PIXI - * @function mapWebGLDrawModesToPixi - * @private - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {object} [object={}] - The object to map into - * @return {object} The mapped draw modes. - */ -export default function mapWebGLDrawModesToPixi(gl, object = {}) -{ - object[DRAW_MODES.POINTS] = gl.POINTS; - object[DRAW_MODES.LINES] = gl.LINES; - object[DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; - object[DRAW_MODES.LINE_STRIP] = gl.LINE_STRIP; - object[DRAW_MODES.TRIANGLES] = gl.TRIANGLES; - object[DRAW_MODES.TRIANGLE_STRIP] = gl.TRIANGLE_STRIP; - object[DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; - - return object; -} diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js deleted file mode 100644 index 1566a06..0000000 --- a/src/core/renderers/webgl/utils/validateContext.js +++ /dev/null @@ -1,12 +0,0 @@ -export default function validateContext(gl) -{ - const attributes = gl.getContextAttributes(); - - // this is going to be fairly simple for now.. but at least we have room to grow! - if (!attributes.stencil) - { - /* eslint-disable no-console */ - console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); - /* eslint-enable no-console */ - } -} diff --git a/src/core/shader/Program.js b/src/core/shader/Program.js index bf93ef5..5fe92ad 100644 --- a/src/core/shader/Program.js +++ b/src/core/shader/Program.js @@ -53,7 +53,6 @@ */ extractData(vertexSrc, fragmentSrc) { - console.log(glCore._testingContext) const gl = glCore._testingContext || Program.getTestingContext(); if (!gl) diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index fe7f597..309da9c 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -224,7 +224,7 @@ const boundTextures = this.boundTextures; const rendererBoundTextures = this.renderer.boundTextures; - const touch = this.renderer.textureGC.count; + const touch = 0//this.renderer.textureGC.count; let index = 0; let nextTexture; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 87838f3..3e4e0cb 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -75,6 +75,13 @@ this.frameBuffer = new FrameBuffer(width, height) .addColorTexture(0, this); + + /** + * The data structure for the stencil masks + * + * @member {PIXI.Graphics[]} + */ + this.stencilMaskStack = []; } /** diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 0021c76..f99168d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -455,7 +455,7 @@ if (mask) { - renderer.mask.pushMask(this, this._mask); + renderer.mask.push(this, this._mask); } // add this object to the batch, only rendered if it has a texture. @@ -471,7 +471,7 @@ if (mask) { - renderer.mask.popMask(this, this._mask); + renderer.mask.pop(this, this._mask); } if (filters && this._enabledFilters && this._enabledFilters.length) diff --git a/src/core/geometry/Buffer.js b/src/core/geometry/Buffer.js index 43d49bf..782d2c2 100644 --- a/src/core/geometry/Buffer.js +++ b/src/core/geometry/Buffer.js @@ -19,7 +19,7 @@ * * @type {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} data the array / typedArray */ - this.data = data; + this.data = data || new Float32Array(1); /** * A map of renderer IDs to webgl buffer @@ -27,7 +27,7 @@ * @private * @member {object} */ - this._glBuffers = []; + this._glBuffers = {}; this._updateID = 0; @@ -42,8 +42,9 @@ /** * flags this buffer as requiring an upload to the GPU */ - update() + update(data) { + this.data = data || this.data; this._updateID++; } diff --git a/src/core/geometry/Geometry.js b/src/core/geometry/Geometry.js index 297a86b..83f0118 100644 --- a/src/core/geometry/Geometry.js +++ b/src/core/geometry/Geometry.js @@ -56,7 +56,7 @@ * @private * @type {Array} */ - this.glVertexArrayObjects = []; + this.glVertexArrayObjects = {}; this.id = UID++; } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index be4c4fb..aafdfe2 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -748,7 +748,7 @@ } else { - renderer.setObjectRenderer(renderer.plugins.graphics); + renderer.batch.setObjectRenderer(renderer.plugins.graphics); renderer.plugins.graphics.render(this); } } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 67f5e92..4de266d 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -2,6 +2,8 @@ import { SHAPES } from '../../const'; import ObjectRenderer from '../../renderers/webgl/utils/ObjectRenderer'; import WebGLRenderer from '../../renderers/webgl/WebGLRenderer'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; import WebGLGraphicsData from './WebGLGraphicsData'; import PrimitiveShader from './shaders/PrimitiveShader'; @@ -28,8 +30,8 @@ this.graphicsDataPool = []; - this.primitiveShader = null; - + this.primitiveShader = new PrimitiveShader(); + this.primitiveShader.uniforms.globals = renderer.globalUniforms this.gl = renderer.gl; // easy access! @@ -46,7 +48,6 @@ { this.gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; - this.primitiveShader = new PrimitiveShader(this.gl); } /** @@ -88,28 +89,26 @@ // This could be speeded up for sure! const shader = this.primitiveShader; - renderer._bindGLShader(shader); renderer.state.setBlendMode(graphics.blendMode); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - const shaderTemp = webGLData.shader; - renderer._bindGLShader(shaderTemp); - shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); - shaderTemp.uniforms.tint = hex2rgb(graphics.tint); - shaderTemp.uniforms.alpha = graphics.worldAlpha; + shader.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); + shader.uniforms.tint = hex2rgb(graphics.tint); + shader.uniforms.alpha = graphics.worldAlpha; - renderer.bindVao(webGLData.vao); + renderer.shader.bind(shader); + renderer.geometry.bind(webGLData.geometry, renderer.shader.getGLShader()); if (graphics.nativeLines) { - gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + renderer.geometry.draw(gl.LINES, webGLData.indices.length/6); } else { - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + renderer.geometry.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); } } } @@ -184,7 +183,7 @@ webGL.lastIndex++; } - this.renderer.bindVao(null); + //this.renderer.geometry.bindVao(null); // upload all the dirty data... for (let i = 0; i < webGL.data.length; i++) @@ -211,9 +210,7 @@ if (!webGLData || webGLData.points.length > 320000) { - webGLData = this.graphicsDataPool.pop() - || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); - + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index a24030e..967ca78 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -1,4 +1,6 @@ import glCore from 'pixi-gl-core'; +import Geometry from '../../geometry/Geometry'; +import Buffer from '../../geometry/Buffer'; /** * An object containing WebGL specific properties to be used by the WebGL renderer @@ -45,13 +47,13 @@ * The main buffer * @member {WebGLBuffer} */ - this.buffer = glCore.GLBuffer.createVertexBuffer(gl); + this.buffer = new Buffer(); /** * The index buffer * @member {WebGLBuffer} */ - this.indexBuffer = glCore.GLBuffer.createIndexBuffer(gl); + this.indexBuffer = new Buffer(); /** * Whether this graphics is dirty or not @@ -59,8 +61,6 @@ */ this.dirty = true; - this.glPoints = null; - this.glIndices = null; /** * @@ -68,10 +68,9 @@ */ this.shader = shader; - this.vao = new glCore.VertexArrayObject(gl, attribsState) - .addIndex(this.indexBuffer) - .addAttribute(this.buffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 6, 0) - .addAttribute(this.buffer, shader.attributes.aColor, gl.FLOAT, false, 4 * 6, 2 * 4); + this.geometry = new Geometry() + .addAttribute('aVertexPosition|aColor', this.buffer) + .addIndex(this.indexBuffer); } /** @@ -79,6 +78,7 @@ */ reset() { + this.points.length = 0; this.indices.length = 0; } @@ -89,11 +89,12 @@ upload() { this.glPoints = new Float32Array(this.points); - this.buffer.upload(this.glPoints); + this.buffer.update(this.glPoints); this.glIndices = new Uint16Array(this.indices); - this.indexBuffer.upload(this.glIndices); + this.indexBuffer.update(this.glIndices); + // console.log("UPKOADING,.",this.glPoints,this.glIndices) this.dirty = false; } diff --git a/src/core/graphics/webgl/shaders/PrimitiveShader.js b/src/core/graphics/webgl/shaders/PrimitiveShader.js index 5ba9799..d2c4156 100644 --- a/src/core/graphics/webgl/shaders/PrimitiveShader.js +++ b/src/core/graphics/webgl/shaders/PrimitiveShader.js @@ -1,4 +1,5 @@ -import { GLShader } from 'pixi-gl-core'; +import Shader from '../../../shader/Shader'; +import Program from '../../../shader/Program'; import { PRECISION } from '../../../const'; /** @@ -8,16 +9,14 @@ * @memberof PIXI * @extends PIXI.Shader */ -export default class PrimitiveShader extends GLShader +export default class PrimitiveShader extends Shader { /** * @param {WebGLRenderingContext} gl - The webgl shader manager this shader works for. */ - constructor(gl) + constructor() { - super(gl, - // vertex shader - [ + const program = Program.from([ 'attribute vec2 aVertexPosition;', 'attribute vec4 aColor;', @@ -41,8 +40,8 @@ 'void main(void){', ' gl_FragColor = vColor;', '}', - ].join('\n'), - PRECISION.DEFAULT - ); + ].join('\n')); + + super(program, {}) } } diff --git a/src/core/renderers/webgl/State.js b/src/core/renderers/webgl/State.js index 4ee6b56..11d431a 100644 --- a/src/core/renderers/webgl/State.js +++ b/src/core/renderers/webgl/State.js @@ -26,6 +26,7 @@ this.polygonOffset = 0; this.blend = true; + this.depthTest = true; } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 22f78e0..92cbab2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -111,7 +111,7 @@ .addSystem(FramebufferSystem) .addSystem(StencilSystem) .addSystem(ProjectionSystem) - .addSystem(TextureGCSystem) + //.addSystem(TextureGCSystem) .addSystem(FilterSystem) .addSystem(RenderTextureSystem) .addSystem(BatchSystem) diff --git a/src/core/renderers/webgl/systems/ContextSystem.js b/src/core/renderers/webgl/systems/ContextSystem.js index fa26c42..eb6f498 100644 --- a/src/core/renderers/webgl/systems/ContextSystem.js +++ b/src/core/renderers/webgl/systems/ContextSystem.js @@ -1,7 +1,6 @@ import WebGLSystem from './WebGLSystem'; import { Rectangle, Matrix } from '../../../math'; import glCore from 'pixi-gl-core'; -import validateContext from '../utils/validateContext'; let CONTEXT_UID = 0; @@ -59,7 +58,7 @@ initFromContext(gl) { this.gl = gl; - validateContext(gl); + this.validateContext(gl); this.renderer.gl = gl; this.renderer.CONTEXT_UID = CONTEXT_UID++; this.renderer.runners.contextChange.run(gl); @@ -67,7 +66,7 @@ initFromOptions(options) { - const gl = glCore.createContext(this.renderer.view, this.options); + const gl = glCore.createContext(this.renderer.view, options); this.initFromContext(gl); } @@ -116,4 +115,17 @@ { this.gl.flush(); } + + validateContext(gl) + { + const attributes = gl.getContextAttributes(); + + // this is going to be fairly simple for now.. but at least we have room to grow! + if (!attributes.stencil) + { + /* eslint-disable no-console */ + console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); + /* eslint-enable no-console */ + } + } } diff --git a/src/core/renderers/webgl/systems/GeometrySystem.js b/src/core/renderers/webgl/systems/GeometrySystem.js index 984e3bb..c934aa6 100644 --- a/src/core/renderers/webgl/systems/GeometrySystem.js +++ b/src/core/renderers/webgl/systems/GeometrySystem.js @@ -59,7 +59,6 @@ { glBuffer._updateID = buffer._updateID; // TODO - partial upload?? - glBuffer.upload(buffer.data, 0); } } diff --git a/src/core/renderers/webgl/systems/MaskSystem.js b/src/core/renderers/webgl/systems/MaskSystem.js index d83ddd9..528c0b8 100644 --- a/src/core/renderers/webgl/systems/MaskSystem.js +++ b/src/core/renderers/webgl/systems/MaskSystem.js @@ -32,7 +32,7 @@ * @param {PIXI.DisplayObject} target - Display Object to push the mask to * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - pushMask(target, maskData) + push(target, maskData) { // TODO the root check means scissor rect will not // be used on render textures more info here: @@ -76,7 +76,7 @@ * @param {PIXI.DisplayObject} target - Display Object to pop the mask from * @param {PIXI.Sprite|PIXI.Graphics} maskData - The masking data. */ - popMask(target, maskData) + pop(target, maskData) { if (maskData.texture) { @@ -145,7 +145,7 @@ */ popStencilMask() { - this.renderer.batch.flush(); + // this.renderer.currentRenderer.stop(); this.renderer.stencil.popStencil(); } diff --git a/src/core/renderers/webgl/systems/RenderTextureSystem.js b/src/core/renderers/webgl/systems/RenderTextureSystem.js index a670a5b..d27802b 100644 --- a/src/core/renderers/webgl/systems/RenderTextureSystem.js +++ b/src/core/renderers/webgl/systems/RenderTextureSystem.js @@ -19,35 +19,36 @@ super(renderer); this.clearColor = renderer._backgroundColorRgba; + + // TODO moe this property somewhere else! + this.defaultMaskStack = []; } bind(renderTexture) { // TODO - do we want this?? if(this.renderTexture === renderTexture)return; - this.renderTexture = renderTexture; - const renderer = this.renderer; + this.renderTexture = renderTexture; if(renderTexture) { - renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); - renderer.projection.update(renderTexture.frame, renderTexture.frame, false); - - renderer.stencil.stencilMaskStack = renderTexture.stencilMaskStack; + this.renderer.framebuffer.bind(renderTexture.baseTexture.frameBuffer); + this.renderer.projection.update(renderTexture.frame, renderTexture.frame, false); + this.renderer.stencil.setMaskStack(renderTexture.baseTexture.stencilMaskStack); } else { - renderer.framebuffer.bind(null); + this.renderer.framebuffer.bind(null); - tempRect.width = renderer.width; - tempRect.height = renderer.height; + tempRect.width = this.renderer.width; + tempRect.height = this.renderer.height; // TODO store this.. - renderer.projection.update(tempRect, tempRect, true); - renderer.stencil.stencilMaskStack = renderer.stencil.defaultStencilStack; + this.renderer.projection.update(tempRect, tempRect, true); + this.renderer.stencil.setMaskStack(this.defaultMaskStack); } - const glShader = renderer.shader.getGLShader() + const glShader = this.renderer.shader.getGLShader() if (glShader) { diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index ac5ed0f..b04d71b 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -14,7 +14,6 @@ { super(renderer); this.stencilMaskStack = null; - this.defaultStencilStack = []; } /** @@ -22,7 +21,7 @@ * * @param {PIXI.Graphics[]} stencilMaskStack - The mask stack */ - setMaskStack(stencilMaskStack) + setMaskStack(stencilMaskStack) { this.stencilMaskStack = stencilMaskStack; @@ -47,7 +46,7 @@ { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); - //this.renderer._activeRenderTarget.attachStencilBuffer(); +// this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; const sms = this.stencilMaskStack; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js deleted file mode 100644 index 6d878a1..0000000 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ /dev/null @@ -1,24 +0,0 @@ -import { DRAW_MODES } from '../../../const'; - -/** - * Generic Mask Stack data structure. - * - * @memberof PIXI - * @function mapWebGLDrawModesToPixi - * @private - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {object} [object={}] - The object to map into - * @return {object} The mapped draw modes. - */ -export default function mapWebGLDrawModesToPixi(gl, object = {}) -{ - object[DRAW_MODES.POINTS] = gl.POINTS; - object[DRAW_MODES.LINES] = gl.LINES; - object[DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; - object[DRAW_MODES.LINE_STRIP] = gl.LINE_STRIP; - object[DRAW_MODES.TRIANGLES] = gl.TRIANGLES; - object[DRAW_MODES.TRIANGLE_STRIP] = gl.TRIANGLE_STRIP; - object[DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; - - return object; -} diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js deleted file mode 100644 index 1566a06..0000000 --- a/src/core/renderers/webgl/utils/validateContext.js +++ /dev/null @@ -1,12 +0,0 @@ -export default function validateContext(gl) -{ - const attributes = gl.getContextAttributes(); - - // this is going to be fairly simple for now.. but at least we have room to grow! - if (!attributes.stencil) - { - /* eslint-disable no-console */ - console.warn('Provided WebGL context does not have a stencil buffer, masks may not render correctly'); - /* eslint-enable no-console */ - } -} diff --git a/src/core/shader/Program.js b/src/core/shader/Program.js index bf93ef5..5fe92ad 100644 --- a/src/core/shader/Program.js +++ b/src/core/shader/Program.js @@ -53,7 +53,6 @@ */ extractData(vertexSrc, fragmentSrc) { - console.log(glCore._testingContext) const gl = glCore._testingContext || Program.getTestingContext(); if (!gl) diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index fe7f597..309da9c 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -224,7 +224,7 @@ const boundTextures = this.boundTextures; const rendererBoundTextures = this.renderer.boundTextures; - const touch = this.renderer.textureGC.count; + const touch = 0//this.renderer.textureGC.count; let index = 0; let nextTexture; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 87838f3..3e4e0cb 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -75,6 +75,13 @@ this.frameBuffer = new FrameBuffer(width, height) .addColorTexture(0, this); + + /** + * The data structure for the stencil masks + * + * @member {PIXI.Graphics[]} + */ + this.stencilMaskStack = []; } /** diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index d792dd3..aeec172 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -38,28 +38,6 @@ readFileSync(join(__dirname, './tilingSprite_simple.frag'), 'utf8'), uniforms); - this.quad = null; - } - - /** - * Sets up the renderer context and necessary buffers. - * - * @private - */ - contextChange() - { - const gl = this.renderer.gl; -/* - this.shader = new GLShader(gl, - readFileSync(join(__dirname, './tilingSprite.vert'), 'utf8'), - readFileSync(join(__dirname, './tilingSprite.frag'), 'utf8'), - core.PRECISION.DEFAULT); - this.simpleShader = new GLShader(gl, - readFileSync(join(__dirname, './tilingSprite.vert'), 'utf8'), - readFileSync(join(__dirname, './tilingSprite_simple.frag'), 'utf8'), - core.PRECISION.DEFAULT); -*/ - this.renderer.geometry.bindVao(null); this.quad = new core.Quad(); } @@ -72,7 +50,6 @@ const renderer = this.renderer; const quad = this.quad; - let vertices = quad.vertices; vertices[0] = vertices[6] = (ts._width) * -ts.anchor.x;