diff --git a/package.json b/package.json index 431f6ca..6459980 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "README.md" ], "dependencies": { - "async": "^1.5.0", "bit-twiddle": "^1.0.2", "earcut": "^2.0.7", "eventemitter3": "^1.1.1", diff --git a/package.json b/package.json index 431f6ca..6459980 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "README.md" ], "dependencies": { - "async": "^1.5.0", "bit-twiddle": "^1.0.2", "earcut": "^2.0.7", "eventemitter3": "^1.1.1", diff --git a/src/core/index.js b/src/core/index.js index 689b18d..c5f3536 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -36,19 +36,20 @@ Texture: require('./textures/Texture'), BaseTexture: require('./textures/BaseTexture'), RenderTexture: require('./textures/RenderTexture'), - BaseRenderTexture: require('./textures/BaseRenderTexture'), + BaseRenderTexture: require('./textures/BaseRenderTexture'), VideoBaseTexture: require('./textures/VideoBaseTexture'), TextureUvs: require('./textures/TextureUvs'), // renderers - canvas CanvasRenderer: require('./renderers/canvas/CanvasRenderer'), - CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), + CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLManager: require('./renderers/webgl/managers/WebGLManager'), + WebGLManager: require('./renderers/webgl/managers/WebGLManager'), ObjectRenderer: require('./renderers/webgl/utils/ObjectRenderer'), RenderTarget: require('./renderers/webgl/utils/RenderTarget'), + Quad: require('./renderers/webgl/utils/Quad'), // filters - webgl SpriteMaskFilter: require('./renderers/webgl/filters/spriteMask/SpriteMaskFilter'), diff --git a/package.json b/package.json index 431f6ca..6459980 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "README.md" ], "dependencies": { - "async": "^1.5.0", "bit-twiddle": "^1.0.2", "earcut": "^2.0.7", "eventemitter3": "^1.1.1", diff --git a/src/core/index.js b/src/core/index.js index 689b18d..c5f3536 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -36,19 +36,20 @@ Texture: require('./textures/Texture'), BaseTexture: require('./textures/BaseTexture'), RenderTexture: require('./textures/RenderTexture'), - BaseRenderTexture: require('./textures/BaseRenderTexture'), + BaseRenderTexture: require('./textures/BaseRenderTexture'), VideoBaseTexture: require('./textures/VideoBaseTexture'), TextureUvs: require('./textures/TextureUvs'), // renderers - canvas CanvasRenderer: require('./renderers/canvas/CanvasRenderer'), - CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), + CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLManager: require('./renderers/webgl/managers/WebGLManager'), + WebGLManager: require('./renderers/webgl/managers/WebGLManager'), ObjectRenderer: require('./renderers/webgl/utils/ObjectRenderer'), RenderTarget: require('./renderers/webgl/utils/RenderTarget'), + Quad: require('./renderers/webgl/utils/Quad'), // filters - webgl SpriteMaskFilter: require('./renderers/webgl/filters/spriteMask/SpriteMaskFilter'), diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 5030080..a30c35b 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * Creates a Canvas element of the given size. * @@ -22,7 +24,7 @@ */ this.context = this.canvas.getContext('2d'); - this.resolution = resolution; + this.resolution = resolution || CONST.RESOLUTION; this.resize(width, height); } diff --git a/package.json b/package.json index 431f6ca..6459980 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "README.md" ], "dependencies": { - "async": "^1.5.0", "bit-twiddle": "^1.0.2", "earcut": "^2.0.7", "eventemitter3": "^1.1.1", diff --git a/src/core/index.js b/src/core/index.js index 689b18d..c5f3536 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -36,19 +36,20 @@ Texture: require('./textures/Texture'), BaseTexture: require('./textures/BaseTexture'), RenderTexture: require('./textures/RenderTexture'), - BaseRenderTexture: require('./textures/BaseRenderTexture'), + BaseRenderTexture: require('./textures/BaseRenderTexture'), VideoBaseTexture: require('./textures/VideoBaseTexture'), TextureUvs: require('./textures/TextureUvs'), // renderers - canvas CanvasRenderer: require('./renderers/canvas/CanvasRenderer'), - CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), + CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLManager: require('./renderers/webgl/managers/WebGLManager'), + WebGLManager: require('./renderers/webgl/managers/WebGLManager'), ObjectRenderer: require('./renderers/webgl/utils/ObjectRenderer'), RenderTarget: require('./renderers/webgl/utils/RenderTarget'), + Quad: require('./renderers/webgl/utils/Quad'), // filters - webgl SpriteMaskFilter: require('./renderers/webgl/filters/spriteMask/SpriteMaskFilter'), diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 5030080..a30c35b 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * Creates a Canvas element of the given size. * @@ -22,7 +24,7 @@ */ this.context = this.canvas.getContext('2d'); - this.resolution = resolution; + this.resolution = resolution || CONST.RESOLUTION; this.resize(width, height); } diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index d0ef80c..3406a62 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -99,7 +99,7 @@ // initialize the context so it is ready for the managers. this.gl = createContext(this.view, this._contextOptions); - this.gl.id = this.CONTEXT_UID = CONTEXT_UID++; + this.CONTEXT_UID = CONTEXT_UID++; this.state = new WebGLState(this.gl); this.renderingToScreen = true; diff --git a/package.json b/package.json index 431f6ca..6459980 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "README.md" ], "dependencies": { - "async": "^1.5.0", "bit-twiddle": "^1.0.2", "earcut": "^2.0.7", "eventemitter3": "^1.1.1", diff --git a/src/core/index.js b/src/core/index.js index 689b18d..c5f3536 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -36,19 +36,20 @@ Texture: require('./textures/Texture'), BaseTexture: require('./textures/BaseTexture'), RenderTexture: require('./textures/RenderTexture'), - BaseRenderTexture: require('./textures/BaseRenderTexture'), + BaseRenderTexture: require('./textures/BaseRenderTexture'), VideoBaseTexture: require('./textures/VideoBaseTexture'), TextureUvs: require('./textures/TextureUvs'), // renderers - canvas CanvasRenderer: require('./renderers/canvas/CanvasRenderer'), - CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), + CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLManager: require('./renderers/webgl/managers/WebGLManager'), + WebGLManager: require('./renderers/webgl/managers/WebGLManager'), ObjectRenderer: require('./renderers/webgl/utils/ObjectRenderer'), RenderTarget: require('./renderers/webgl/utils/RenderTarget'), + Quad: require('./renderers/webgl/utils/Quad'), // filters - webgl SpriteMaskFilter: require('./renderers/webgl/filters/spriteMask/SpriteMaskFilter'), diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 5030080..a30c35b 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * Creates a Canvas element of the given size. * @@ -22,7 +24,7 @@ */ this.context = this.canvas.getContext('2d'); - this.resolution = resolution; + this.resolution = resolution || CONST.RESOLUTION; this.resize(width, height); } diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index d0ef80c..3406a62 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -99,7 +99,7 @@ // initialize the context so it is ready for the managers. this.gl = createContext(this.view, this._contextOptions); - this.gl.id = this.CONTEXT_UID = CONTEXT_UID++; + this.CONTEXT_UID = CONTEXT_UID++; this.state = new WebGLState(this.gl); this.renderingToScreen = true; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8f205e1..4ef28d5 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -32,7 +32,7 @@ for (var i = 0; i < maxTextures; i++) { if(i > 0)src += '\nelse '; - if(i < maxTextures-1)src += 'if(ndx == ' + i + '.0)'; + if(i < maxTextures-1)src += 'if(vTextureId == ' + i + '.0)'; src += '\n{'; src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; src += '\n}'; @@ -54,7 +54,6 @@ 'void main(void){', 'vec4 color;', - 'float ndx = vTextureId;', '%forloop%', 'gl_FragColor = color * vColor;', '}' diff --git a/package.json b/package.json index 431f6ca..6459980 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "README.md" ], "dependencies": { - "async": "^1.5.0", "bit-twiddle": "^1.0.2", "earcut": "^2.0.7", "eventemitter3": "^1.1.1", diff --git a/src/core/index.js b/src/core/index.js index 689b18d..c5f3536 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -36,19 +36,20 @@ Texture: require('./textures/Texture'), BaseTexture: require('./textures/BaseTexture'), RenderTexture: require('./textures/RenderTexture'), - BaseRenderTexture: require('./textures/BaseRenderTexture'), + BaseRenderTexture: require('./textures/BaseRenderTexture'), VideoBaseTexture: require('./textures/VideoBaseTexture'), TextureUvs: require('./textures/TextureUvs'), // renderers - canvas CanvasRenderer: require('./renderers/canvas/CanvasRenderer'), - CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), + CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLManager: require('./renderers/webgl/managers/WebGLManager'), + WebGLManager: require('./renderers/webgl/managers/WebGLManager'), ObjectRenderer: require('./renderers/webgl/utils/ObjectRenderer'), RenderTarget: require('./renderers/webgl/utils/RenderTarget'), + Quad: require('./renderers/webgl/utils/Quad'), // filters - webgl SpriteMaskFilter: require('./renderers/webgl/filters/spriteMask/SpriteMaskFilter'), diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 5030080..a30c35b 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * Creates a Canvas element of the given size. * @@ -22,7 +24,7 @@ */ this.context = this.canvas.getContext('2d'); - this.resolution = resolution; + this.resolution = resolution || CONST.RESOLUTION; this.resize(width, height); } diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index d0ef80c..3406a62 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -99,7 +99,7 @@ // initialize the context so it is ready for the managers. this.gl = createContext(this.view, this._contextOptions); - this.gl.id = this.CONTEXT_UID = CONTEXT_UID++; + this.CONTEXT_UID = CONTEXT_UID++; this.state = new WebGLState(this.gl); this.renderingToScreen = true; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8f205e1..4ef28d5 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -32,7 +32,7 @@ for (var i = 0; i < maxTextures; i++) { if(i > 0)src += '\nelse '; - if(i < maxTextures-1)src += 'if(ndx == ' + i + '.0)'; + if(i < maxTextures-1)src += 'if(vTextureId == ' + i + '.0)'; src += '\n{'; src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; src += '\n}'; @@ -54,7 +54,6 @@ 'void main(void){', 'vec4 color;', - 'float ndx = vTextureId;', '%forloop%', 'gl_FragColor = color * vColor;', '}' diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07d43bb..a2e9893 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -9,7 +9,6 @@ EventEmitter: require('eventemitter3'), pluginTarget: require('./pluginTarget'), - async: require('async'), /** * Gets the next unique identifier diff --git a/package.json b/package.json index 431f6ca..6459980 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "README.md" ], "dependencies": { - "async": "^1.5.0", "bit-twiddle": "^1.0.2", "earcut": "^2.0.7", "eventemitter3": "^1.1.1", diff --git a/src/core/index.js b/src/core/index.js index 689b18d..c5f3536 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -36,19 +36,20 @@ Texture: require('./textures/Texture'), BaseTexture: require('./textures/BaseTexture'), RenderTexture: require('./textures/RenderTexture'), - BaseRenderTexture: require('./textures/BaseRenderTexture'), + BaseRenderTexture: require('./textures/BaseRenderTexture'), VideoBaseTexture: require('./textures/VideoBaseTexture'), TextureUvs: require('./textures/TextureUvs'), // renderers - canvas CanvasRenderer: require('./renderers/canvas/CanvasRenderer'), - CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), + CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLManager: require('./renderers/webgl/managers/WebGLManager'), + WebGLManager: require('./renderers/webgl/managers/WebGLManager'), ObjectRenderer: require('./renderers/webgl/utils/ObjectRenderer'), RenderTarget: require('./renderers/webgl/utils/RenderTarget'), + Quad: require('./renderers/webgl/utils/Quad'), // filters - webgl SpriteMaskFilter: require('./renderers/webgl/filters/spriteMask/SpriteMaskFilter'), diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 5030080..a30c35b 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * Creates a Canvas element of the given size. * @@ -22,7 +24,7 @@ */ this.context = this.canvas.getContext('2d'); - this.resolution = resolution; + this.resolution = resolution || CONST.RESOLUTION; this.resize(width, height); } diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index d0ef80c..3406a62 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -99,7 +99,7 @@ // initialize the context so it is ready for the managers. this.gl = createContext(this.view, this._contextOptions); - this.gl.id = this.CONTEXT_UID = CONTEXT_UID++; + this.CONTEXT_UID = CONTEXT_UID++; this.state = new WebGLState(this.gl); this.renderingToScreen = true; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8f205e1..4ef28d5 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -32,7 +32,7 @@ for (var i = 0; i < maxTextures; i++) { if(i > 0)src += '\nelse '; - if(i < maxTextures-1)src += 'if(ndx == ' + i + '.0)'; + if(i < maxTextures-1)src += 'if(vTextureId == ' + i + '.0)'; src += '\n{'; src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; src += '\n}'; @@ -54,7 +54,6 @@ 'void main(void){', 'vec4 color;', - 'float ndx = vTextureId;', '%forloop%', 'gl_FragColor = color * vColor;', '}' diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07d43bb..a2e9893 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -9,7 +9,6 @@ EventEmitter: require('eventemitter3'), pluginTarget: require('./pluginTarget'), - async: require('async'), /** * Gets the next unique identifier diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 8dbb168..1756381 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,7 +1,8 @@ var core = require('../core'), // a sprite use dfor rendering textures.. tempPoint = new core.Point(), - CanvasTinter = require('../core/sprites/canvas/CanvasTinter'); + CanvasTinter = require('../core/sprites/canvas/CanvasTinter'), + TilingShader = require('./webgl/TilingShader') /** * A tiling sprite is a fast way of rendering a tiling image @@ -60,61 +61,7 @@ this._canvasPattern = null; - //TODO move.. - this.shader = new core.Filter( - - [ - 'precision lowp float;', - 'attribute vec2 aVertexPosition;', - 'attribute vec2 aTextureCoord;', - 'attribute vec4 aColor;', - - 'uniform mat3 projectionMatrix;', - - 'uniform vec4 uFrame;', - 'uniform vec4 uTransform;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'void main(void){', - ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', - - ' vec2 coord = aTextureCoord;', - ' coord -= uTransform.xy;', - ' coord /= uTransform.zw;', - ' vTextureCoord = coord;', - - ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', - '}' - ].join('\n'), - [ - 'precision lowp float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform vec4 uFrame;', - 'uniform vec2 uPixelSize;', - - 'void main(void){', - - ' vec2 coord = mod(vTextureCoord, uFrame.zw);', - ' coord = clamp(coord, uPixelSize, uFrame.zw - uPixelSize);', - ' coord += uFrame.xy;', - - ' gl_FragColor = texture2D(uSampler, coord) * vColor ;', - '}' - ].join('\n'), - - // set the uniforms - { - uFrame: { type: '4fv', value: [0,0,1,1] }, - uTransform: { type: '4fv', value: [0,0,1,1] }, - uPixelSize : { type : '2fv', value: [1, 1]} - } - ); + this._glDatas = []; } TilingSprite.prototype = Object.create(core.Sprite.prototype); @@ -172,6 +119,7 @@ */ TilingSprite.prototype._renderWebGL = function (renderer) { + // tweak our texture temporarily.. var texture = this._texture; @@ -180,35 +128,67 @@ return; } - var tempUvs = texture._uvs, - tempWidth = texture._frame.width, - tempHeight = texture._frame.height, - tw = texture.baseTexture.width, - th = texture.baseTexture.height; + // get rid of any thing that may be batching. + renderer.flush(); - texture._uvs = this._uvs; - texture._frame.width = this.width; - texture._frame.height = this.height; + var gl = renderer.gl; + var glData = this._glDatas[renderer.CONTEXT_UID]; - this.shader.uniforms.uPixelSize.value[0] = 1.0/tw; - this.shader.uniforms.uPixelSize.value[1] = 1.0/th; + if(!glData) + { + glData = { + shader:new TilingShader(gl), + quad:new core.Quad(gl) + } - this.shader.uniforms.uFrame.value[0] = tempUvs.x0; - this.shader.uniforms.uFrame.value[1] = tempUvs.y0; - this.shader.uniforms.uFrame.value[2] = tempUvs.x1 - tempUvs.x0; - this.shader.uniforms.uFrame.value[3] = tempUvs.y2 - tempUvs.y0; + this._glDatas[renderer.CONTEXT_UID] = glData; + + glData.quad.initVao(glData.shader); + } - this.shader.uniforms.uTransform.value[0] = (this.tilePosition.x % (tempWidth * this.tileScale.x)) / this._width; - this.shader.uniforms.uTransform.value[1] = (this.tilePosition.y % (tempHeight * this.tileScale.y)) / this._height; - this.shader.uniforms.uTransform.value[2] = ( tw / this._width ) * this.tileScale.x; - this.shader.uniforms.uTransform.value[3] = ( th / this._height ) * this.tileScale.y; + // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. + var vertices = glData.quad.vertices; - renderer.setObjectRenderer(renderer.plugins.sprite); - renderer.plugins.sprite.render(this); + vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; + vertices[1] = vertices[3] = this._height * -this.anchor.y; - texture._uvs = tempUvs; - texture._frame.width = tempWidth; - texture._frame.height = tempHeight; + vertices[2] = vertices[4] = ( this._width ) * (1-this.anchor.x); + vertices[5] = vertices[7] = this._height * (1-this.anchor.y); + + glData.quad.upload(); + + renderer.bindShader(glData.shader); + + var textureUvs = texture._uvs, + textureWidth = texture._frame.width, + textureHeight = texture._frame.height, + textureBaseWidth = texture.baseTexture.width, + textureBaseHeight = texture.baseTexture.height; + + var uPixelSize = glData.shader.uniforms.uPixelSize; + uPixelSize[0] = 1.0/textureBaseWidth; + uPixelSize[1] = 1.0/textureBaseHeight; + glData.shader.uniforms.uPixelSize = uPixelSize; + + var uFrame = glData.shader.uniforms.uFrame; + uFrame[0] = textureUvs.x0; + uFrame[1] = textureUvs.y0; + uFrame[2] = textureUvs.x1 - textureUvs.x0; + uFrame[3] = textureUvs.y2 - textureUvs.y0; + glData.shader.uniforms.uFrame = uFrame; + + var uTransform = glData.shader.uniforms.uTransform; + uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; + uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; + uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; + uTransform[3] = ( textureBaseHeight / this._height ) * this.tileScale.y; + glData.shader.uniforms.uTransform = uTransform; + + glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); + glData.shader.uniforms.alpha = this.worldAlpha; + + renderer.bindTexture(this._texture, 0); + glData.quad.draw(); }; /** @@ -238,7 +218,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - var tempCanvas = new core.CanvasBuffer(texture._frame.width, texture._frame.height); + var tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) diff --git a/package.json b/package.json index 431f6ca..6459980 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "README.md" ], "dependencies": { - "async": "^1.5.0", "bit-twiddle": "^1.0.2", "earcut": "^2.0.7", "eventemitter3": "^1.1.1", diff --git a/src/core/index.js b/src/core/index.js index 689b18d..c5f3536 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -36,19 +36,20 @@ Texture: require('./textures/Texture'), BaseTexture: require('./textures/BaseTexture'), RenderTexture: require('./textures/RenderTexture'), - BaseRenderTexture: require('./textures/BaseRenderTexture'), + BaseRenderTexture: require('./textures/BaseRenderTexture'), VideoBaseTexture: require('./textures/VideoBaseTexture'), TextureUvs: require('./textures/TextureUvs'), // renderers - canvas CanvasRenderer: require('./renderers/canvas/CanvasRenderer'), - CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), + CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLManager: require('./renderers/webgl/managers/WebGLManager'), + WebGLManager: require('./renderers/webgl/managers/WebGLManager'), ObjectRenderer: require('./renderers/webgl/utils/ObjectRenderer'), RenderTarget: require('./renderers/webgl/utils/RenderTarget'), + Quad: require('./renderers/webgl/utils/Quad'), // filters - webgl SpriteMaskFilter: require('./renderers/webgl/filters/spriteMask/SpriteMaskFilter'), diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 5030080..a30c35b 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * Creates a Canvas element of the given size. * @@ -22,7 +24,7 @@ */ this.context = this.canvas.getContext('2d'); - this.resolution = resolution; + this.resolution = resolution || CONST.RESOLUTION; this.resize(width, height); } diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index d0ef80c..3406a62 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -99,7 +99,7 @@ // initialize the context so it is ready for the managers. this.gl = createContext(this.view, this._contextOptions); - this.gl.id = this.CONTEXT_UID = CONTEXT_UID++; + this.CONTEXT_UID = CONTEXT_UID++; this.state = new WebGLState(this.gl); this.renderingToScreen = true; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8f205e1..4ef28d5 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -32,7 +32,7 @@ for (var i = 0; i < maxTextures; i++) { if(i > 0)src += '\nelse '; - if(i < maxTextures-1)src += 'if(ndx == ' + i + '.0)'; + if(i < maxTextures-1)src += 'if(vTextureId == ' + i + '.0)'; src += '\n{'; src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; src += '\n}'; @@ -54,7 +54,6 @@ 'void main(void){', 'vec4 color;', - 'float ndx = vTextureId;', '%forloop%', 'gl_FragColor = color * vColor;', '}' diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07d43bb..a2e9893 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -9,7 +9,6 @@ EventEmitter: require('eventemitter3'), pluginTarget: require('./pluginTarget'), - async: require('async'), /** * Gets the next unique identifier diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 8dbb168..1756381 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,7 +1,8 @@ var core = require('../core'), // a sprite use dfor rendering textures.. tempPoint = new core.Point(), - CanvasTinter = require('../core/sprites/canvas/CanvasTinter'); + CanvasTinter = require('../core/sprites/canvas/CanvasTinter'), + TilingShader = require('./webgl/TilingShader') /** * A tiling sprite is a fast way of rendering a tiling image @@ -60,61 +61,7 @@ this._canvasPattern = null; - //TODO move.. - this.shader = new core.Filter( - - [ - 'precision lowp float;', - 'attribute vec2 aVertexPosition;', - 'attribute vec2 aTextureCoord;', - 'attribute vec4 aColor;', - - 'uniform mat3 projectionMatrix;', - - 'uniform vec4 uFrame;', - 'uniform vec4 uTransform;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'void main(void){', - ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', - - ' vec2 coord = aTextureCoord;', - ' coord -= uTransform.xy;', - ' coord /= uTransform.zw;', - ' vTextureCoord = coord;', - - ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', - '}' - ].join('\n'), - [ - 'precision lowp float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform vec4 uFrame;', - 'uniform vec2 uPixelSize;', - - 'void main(void){', - - ' vec2 coord = mod(vTextureCoord, uFrame.zw);', - ' coord = clamp(coord, uPixelSize, uFrame.zw - uPixelSize);', - ' coord += uFrame.xy;', - - ' gl_FragColor = texture2D(uSampler, coord) * vColor ;', - '}' - ].join('\n'), - - // set the uniforms - { - uFrame: { type: '4fv', value: [0,0,1,1] }, - uTransform: { type: '4fv', value: [0,0,1,1] }, - uPixelSize : { type : '2fv', value: [1, 1]} - } - ); + this._glDatas = []; } TilingSprite.prototype = Object.create(core.Sprite.prototype); @@ -172,6 +119,7 @@ */ TilingSprite.prototype._renderWebGL = function (renderer) { + // tweak our texture temporarily.. var texture = this._texture; @@ -180,35 +128,67 @@ return; } - var tempUvs = texture._uvs, - tempWidth = texture._frame.width, - tempHeight = texture._frame.height, - tw = texture.baseTexture.width, - th = texture.baseTexture.height; + // get rid of any thing that may be batching. + renderer.flush(); - texture._uvs = this._uvs; - texture._frame.width = this.width; - texture._frame.height = this.height; + var gl = renderer.gl; + var glData = this._glDatas[renderer.CONTEXT_UID]; - this.shader.uniforms.uPixelSize.value[0] = 1.0/tw; - this.shader.uniforms.uPixelSize.value[1] = 1.0/th; + if(!glData) + { + glData = { + shader:new TilingShader(gl), + quad:new core.Quad(gl) + } - this.shader.uniforms.uFrame.value[0] = tempUvs.x0; - this.shader.uniforms.uFrame.value[1] = tempUvs.y0; - this.shader.uniforms.uFrame.value[2] = tempUvs.x1 - tempUvs.x0; - this.shader.uniforms.uFrame.value[3] = tempUvs.y2 - tempUvs.y0; + this._glDatas[renderer.CONTEXT_UID] = glData; + + glData.quad.initVao(glData.shader); + } - this.shader.uniforms.uTransform.value[0] = (this.tilePosition.x % (tempWidth * this.tileScale.x)) / this._width; - this.shader.uniforms.uTransform.value[1] = (this.tilePosition.y % (tempHeight * this.tileScale.y)) / this._height; - this.shader.uniforms.uTransform.value[2] = ( tw / this._width ) * this.tileScale.x; - this.shader.uniforms.uTransform.value[3] = ( th / this._height ) * this.tileScale.y; + // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. + var vertices = glData.quad.vertices; - renderer.setObjectRenderer(renderer.plugins.sprite); - renderer.plugins.sprite.render(this); + vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; + vertices[1] = vertices[3] = this._height * -this.anchor.y; - texture._uvs = tempUvs; - texture._frame.width = tempWidth; - texture._frame.height = tempHeight; + vertices[2] = vertices[4] = ( this._width ) * (1-this.anchor.x); + vertices[5] = vertices[7] = this._height * (1-this.anchor.y); + + glData.quad.upload(); + + renderer.bindShader(glData.shader); + + var textureUvs = texture._uvs, + textureWidth = texture._frame.width, + textureHeight = texture._frame.height, + textureBaseWidth = texture.baseTexture.width, + textureBaseHeight = texture.baseTexture.height; + + var uPixelSize = glData.shader.uniforms.uPixelSize; + uPixelSize[0] = 1.0/textureBaseWidth; + uPixelSize[1] = 1.0/textureBaseHeight; + glData.shader.uniforms.uPixelSize = uPixelSize; + + var uFrame = glData.shader.uniforms.uFrame; + uFrame[0] = textureUvs.x0; + uFrame[1] = textureUvs.y0; + uFrame[2] = textureUvs.x1 - textureUvs.x0; + uFrame[3] = textureUvs.y2 - textureUvs.y0; + glData.shader.uniforms.uFrame = uFrame; + + var uTransform = glData.shader.uniforms.uTransform; + uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; + uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; + uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; + uTransform[3] = ( textureBaseHeight / this._height ) * this.tileScale.y; + glData.shader.uniforms.uTransform = uTransform; + + glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); + glData.shader.uniforms.alpha = this.worldAlpha; + + renderer.bindTexture(this._texture, 0); + glData.quad.draw(); }; /** @@ -238,7 +218,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - var tempCanvas = new core.CanvasBuffer(texture._frame.width, texture._frame.height); + var tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) diff --git a/src/extras/webgl/TilingShader.js b/src/extras/webgl/TilingShader.js new file mode 100644 index 0000000..4be2d40 --- /dev/null +++ b/src/extras/webgl/TilingShader.js @@ -0,0 +1,22 @@ +var Shader = require('pixi-gl-core').GLShader; +var glslify = require('glslify'); + +/** + * @class + * @extends PIXI.Shader + * @memberof PIXI.mesh + * @param shaderManager {PIXI.ShaderManager} The WebGL shader manager this shader works for. + */ +function TilingShader(gl) +{ + Shader.call(this, + gl, + glslify('./tilingSprite.vert'), + glslify('./tilingSprite.frag') + ); +} + +TilingShader.prototype = Object.create(Shader.prototype); +TilingShader.prototype.constructor = TilingShader; +module.exports = TilingShader; + diff --git a/package.json b/package.json index 431f6ca..6459980 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "README.md" ], "dependencies": { - "async": "^1.5.0", "bit-twiddle": "^1.0.2", "earcut": "^2.0.7", "eventemitter3": "^1.1.1", diff --git a/src/core/index.js b/src/core/index.js index 689b18d..c5f3536 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -36,19 +36,20 @@ Texture: require('./textures/Texture'), BaseTexture: require('./textures/BaseTexture'), RenderTexture: require('./textures/RenderTexture'), - BaseRenderTexture: require('./textures/BaseRenderTexture'), + BaseRenderTexture: require('./textures/BaseRenderTexture'), VideoBaseTexture: require('./textures/VideoBaseTexture'), TextureUvs: require('./textures/TextureUvs'), // renderers - canvas CanvasRenderer: require('./renderers/canvas/CanvasRenderer'), - CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), + CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLManager: require('./renderers/webgl/managers/WebGLManager'), + WebGLManager: require('./renderers/webgl/managers/WebGLManager'), ObjectRenderer: require('./renderers/webgl/utils/ObjectRenderer'), RenderTarget: require('./renderers/webgl/utils/RenderTarget'), + Quad: require('./renderers/webgl/utils/Quad'), // filters - webgl SpriteMaskFilter: require('./renderers/webgl/filters/spriteMask/SpriteMaskFilter'), diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 5030080..a30c35b 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * Creates a Canvas element of the given size. * @@ -22,7 +24,7 @@ */ this.context = this.canvas.getContext('2d'); - this.resolution = resolution; + this.resolution = resolution || CONST.RESOLUTION; this.resize(width, height); } diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index d0ef80c..3406a62 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -99,7 +99,7 @@ // initialize the context so it is ready for the managers. this.gl = createContext(this.view, this._contextOptions); - this.gl.id = this.CONTEXT_UID = CONTEXT_UID++; + this.CONTEXT_UID = CONTEXT_UID++; this.state = new WebGLState(this.gl); this.renderingToScreen = true; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8f205e1..4ef28d5 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -32,7 +32,7 @@ for (var i = 0; i < maxTextures; i++) { if(i > 0)src += '\nelse '; - if(i < maxTextures-1)src += 'if(ndx == ' + i + '.0)'; + if(i < maxTextures-1)src += 'if(vTextureId == ' + i + '.0)'; src += '\n{'; src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; src += '\n}'; @@ -54,7 +54,6 @@ 'void main(void){', 'vec4 color;', - 'float ndx = vTextureId;', '%forloop%', 'gl_FragColor = color * vColor;', '}' diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07d43bb..a2e9893 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -9,7 +9,6 @@ EventEmitter: require('eventemitter3'), pluginTarget: require('./pluginTarget'), - async: require('async'), /** * Gets the next unique identifier diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 8dbb168..1756381 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,7 +1,8 @@ var core = require('../core'), // a sprite use dfor rendering textures.. tempPoint = new core.Point(), - CanvasTinter = require('../core/sprites/canvas/CanvasTinter'); + CanvasTinter = require('../core/sprites/canvas/CanvasTinter'), + TilingShader = require('./webgl/TilingShader') /** * A tiling sprite is a fast way of rendering a tiling image @@ -60,61 +61,7 @@ this._canvasPattern = null; - //TODO move.. - this.shader = new core.Filter( - - [ - 'precision lowp float;', - 'attribute vec2 aVertexPosition;', - 'attribute vec2 aTextureCoord;', - 'attribute vec4 aColor;', - - 'uniform mat3 projectionMatrix;', - - 'uniform vec4 uFrame;', - 'uniform vec4 uTransform;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'void main(void){', - ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', - - ' vec2 coord = aTextureCoord;', - ' coord -= uTransform.xy;', - ' coord /= uTransform.zw;', - ' vTextureCoord = coord;', - - ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', - '}' - ].join('\n'), - [ - 'precision lowp float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform vec4 uFrame;', - 'uniform vec2 uPixelSize;', - - 'void main(void){', - - ' vec2 coord = mod(vTextureCoord, uFrame.zw);', - ' coord = clamp(coord, uPixelSize, uFrame.zw - uPixelSize);', - ' coord += uFrame.xy;', - - ' gl_FragColor = texture2D(uSampler, coord) * vColor ;', - '}' - ].join('\n'), - - // set the uniforms - { - uFrame: { type: '4fv', value: [0,0,1,1] }, - uTransform: { type: '4fv', value: [0,0,1,1] }, - uPixelSize : { type : '2fv', value: [1, 1]} - } - ); + this._glDatas = []; } TilingSprite.prototype = Object.create(core.Sprite.prototype); @@ -172,6 +119,7 @@ */ TilingSprite.prototype._renderWebGL = function (renderer) { + // tweak our texture temporarily.. var texture = this._texture; @@ -180,35 +128,67 @@ return; } - var tempUvs = texture._uvs, - tempWidth = texture._frame.width, - tempHeight = texture._frame.height, - tw = texture.baseTexture.width, - th = texture.baseTexture.height; + // get rid of any thing that may be batching. + renderer.flush(); - texture._uvs = this._uvs; - texture._frame.width = this.width; - texture._frame.height = this.height; + var gl = renderer.gl; + var glData = this._glDatas[renderer.CONTEXT_UID]; - this.shader.uniforms.uPixelSize.value[0] = 1.0/tw; - this.shader.uniforms.uPixelSize.value[1] = 1.0/th; + if(!glData) + { + glData = { + shader:new TilingShader(gl), + quad:new core.Quad(gl) + } - this.shader.uniforms.uFrame.value[0] = tempUvs.x0; - this.shader.uniforms.uFrame.value[1] = tempUvs.y0; - this.shader.uniforms.uFrame.value[2] = tempUvs.x1 - tempUvs.x0; - this.shader.uniforms.uFrame.value[3] = tempUvs.y2 - tempUvs.y0; + this._glDatas[renderer.CONTEXT_UID] = glData; + + glData.quad.initVao(glData.shader); + } - this.shader.uniforms.uTransform.value[0] = (this.tilePosition.x % (tempWidth * this.tileScale.x)) / this._width; - this.shader.uniforms.uTransform.value[1] = (this.tilePosition.y % (tempHeight * this.tileScale.y)) / this._height; - this.shader.uniforms.uTransform.value[2] = ( tw / this._width ) * this.tileScale.x; - this.shader.uniforms.uTransform.value[3] = ( th / this._height ) * this.tileScale.y; + // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. + var vertices = glData.quad.vertices; - renderer.setObjectRenderer(renderer.plugins.sprite); - renderer.plugins.sprite.render(this); + vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; + vertices[1] = vertices[3] = this._height * -this.anchor.y; - texture._uvs = tempUvs; - texture._frame.width = tempWidth; - texture._frame.height = tempHeight; + vertices[2] = vertices[4] = ( this._width ) * (1-this.anchor.x); + vertices[5] = vertices[7] = this._height * (1-this.anchor.y); + + glData.quad.upload(); + + renderer.bindShader(glData.shader); + + var textureUvs = texture._uvs, + textureWidth = texture._frame.width, + textureHeight = texture._frame.height, + textureBaseWidth = texture.baseTexture.width, + textureBaseHeight = texture.baseTexture.height; + + var uPixelSize = glData.shader.uniforms.uPixelSize; + uPixelSize[0] = 1.0/textureBaseWidth; + uPixelSize[1] = 1.0/textureBaseHeight; + glData.shader.uniforms.uPixelSize = uPixelSize; + + var uFrame = glData.shader.uniforms.uFrame; + uFrame[0] = textureUvs.x0; + uFrame[1] = textureUvs.y0; + uFrame[2] = textureUvs.x1 - textureUvs.x0; + uFrame[3] = textureUvs.y2 - textureUvs.y0; + glData.shader.uniforms.uFrame = uFrame; + + var uTransform = glData.shader.uniforms.uTransform; + uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; + uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; + uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; + uTransform[3] = ( textureBaseHeight / this._height ) * this.tileScale.y; + glData.shader.uniforms.uTransform = uTransform; + + glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); + glData.shader.uniforms.alpha = this.worldAlpha; + + renderer.bindTexture(this._texture, 0); + glData.quad.draw(); }; /** @@ -238,7 +218,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - var tempCanvas = new core.CanvasBuffer(texture._frame.width, texture._frame.height); + var tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) diff --git a/src/extras/webgl/TilingShader.js b/src/extras/webgl/TilingShader.js new file mode 100644 index 0000000..4be2d40 --- /dev/null +++ b/src/extras/webgl/TilingShader.js @@ -0,0 +1,22 @@ +var Shader = require('pixi-gl-core').GLShader; +var glslify = require('glslify'); + +/** + * @class + * @extends PIXI.Shader + * @memberof PIXI.mesh + * @param shaderManager {PIXI.ShaderManager} The WebGL shader manager this shader works for. + */ +function TilingShader(gl) +{ + Shader.call(this, + gl, + glslify('./tilingSprite.vert'), + glslify('./tilingSprite.frag') + ); +} + +TilingShader.prototype = Object.create(Shader.prototype); +TilingShader.prototype.constructor = TilingShader; +module.exports = TilingShader; + diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag new file mode 100644 index 0000000..21d8ee6 --- /dev/null +++ b/src/extras/webgl/tilingSprite.frag @@ -0,0 +1,18 @@ +precision lowp float; + +varying vec2 vTextureCoord; +varying vec4 vColor; + +uniform sampler2D uSampler; +uniform vec4 uFrame; +uniform vec2 uPixelSize; + +void main(void) +{ + + vec2 coord = mod(vTextureCoord, uFrame.zw); + coord = clamp(coord, uPixelSize, uFrame.zw - uPixelSize); + coord += uFrame.xy; + + gl_FragColor = texture2D(uSampler, coord) ; +} \ No newline at end of file diff --git a/package.json b/package.json index 431f6ca..6459980 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "README.md" ], "dependencies": { - "async": "^1.5.0", "bit-twiddle": "^1.0.2", "earcut": "^2.0.7", "eventemitter3": "^1.1.1", diff --git a/src/core/index.js b/src/core/index.js index 689b18d..c5f3536 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -36,19 +36,20 @@ Texture: require('./textures/Texture'), BaseTexture: require('./textures/BaseTexture'), RenderTexture: require('./textures/RenderTexture'), - BaseRenderTexture: require('./textures/BaseRenderTexture'), + BaseRenderTexture: require('./textures/BaseRenderTexture'), VideoBaseTexture: require('./textures/VideoBaseTexture'), TextureUvs: require('./textures/TextureUvs'), // renderers - canvas CanvasRenderer: require('./renderers/canvas/CanvasRenderer'), - CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), + CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLManager: require('./renderers/webgl/managers/WebGLManager'), + WebGLManager: require('./renderers/webgl/managers/WebGLManager'), ObjectRenderer: require('./renderers/webgl/utils/ObjectRenderer'), RenderTarget: require('./renderers/webgl/utils/RenderTarget'), + Quad: require('./renderers/webgl/utils/Quad'), // filters - webgl SpriteMaskFilter: require('./renderers/webgl/filters/spriteMask/SpriteMaskFilter'), diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 5030080..a30c35b 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * Creates a Canvas element of the given size. * @@ -22,7 +24,7 @@ */ this.context = this.canvas.getContext('2d'); - this.resolution = resolution; + this.resolution = resolution || CONST.RESOLUTION; this.resize(width, height); } diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index d0ef80c..3406a62 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -99,7 +99,7 @@ // initialize the context so it is ready for the managers. this.gl = createContext(this.view, this._contextOptions); - this.gl.id = this.CONTEXT_UID = CONTEXT_UID++; + this.CONTEXT_UID = CONTEXT_UID++; this.state = new WebGLState(this.gl); this.renderingToScreen = true; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8f205e1..4ef28d5 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -32,7 +32,7 @@ for (var i = 0; i < maxTextures; i++) { if(i > 0)src += '\nelse '; - if(i < maxTextures-1)src += 'if(ndx == ' + i + '.0)'; + if(i < maxTextures-1)src += 'if(vTextureId == ' + i + '.0)'; src += '\n{'; src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; src += '\n}'; @@ -54,7 +54,6 @@ 'void main(void){', 'vec4 color;', - 'float ndx = vTextureId;', '%forloop%', 'gl_FragColor = color * vColor;', '}' diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07d43bb..a2e9893 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -9,7 +9,6 @@ EventEmitter: require('eventemitter3'), pluginTarget: require('./pluginTarget'), - async: require('async'), /** * Gets the next unique identifier diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 8dbb168..1756381 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,7 +1,8 @@ var core = require('../core'), // a sprite use dfor rendering textures.. tempPoint = new core.Point(), - CanvasTinter = require('../core/sprites/canvas/CanvasTinter'); + CanvasTinter = require('../core/sprites/canvas/CanvasTinter'), + TilingShader = require('./webgl/TilingShader') /** * A tiling sprite is a fast way of rendering a tiling image @@ -60,61 +61,7 @@ this._canvasPattern = null; - //TODO move.. - this.shader = new core.Filter( - - [ - 'precision lowp float;', - 'attribute vec2 aVertexPosition;', - 'attribute vec2 aTextureCoord;', - 'attribute vec4 aColor;', - - 'uniform mat3 projectionMatrix;', - - 'uniform vec4 uFrame;', - 'uniform vec4 uTransform;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'void main(void){', - ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', - - ' vec2 coord = aTextureCoord;', - ' coord -= uTransform.xy;', - ' coord /= uTransform.zw;', - ' vTextureCoord = coord;', - - ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', - '}' - ].join('\n'), - [ - 'precision lowp float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform vec4 uFrame;', - 'uniform vec2 uPixelSize;', - - 'void main(void){', - - ' vec2 coord = mod(vTextureCoord, uFrame.zw);', - ' coord = clamp(coord, uPixelSize, uFrame.zw - uPixelSize);', - ' coord += uFrame.xy;', - - ' gl_FragColor = texture2D(uSampler, coord) * vColor ;', - '}' - ].join('\n'), - - // set the uniforms - { - uFrame: { type: '4fv', value: [0,0,1,1] }, - uTransform: { type: '4fv', value: [0,0,1,1] }, - uPixelSize : { type : '2fv', value: [1, 1]} - } - ); + this._glDatas = []; } TilingSprite.prototype = Object.create(core.Sprite.prototype); @@ -172,6 +119,7 @@ */ TilingSprite.prototype._renderWebGL = function (renderer) { + // tweak our texture temporarily.. var texture = this._texture; @@ -180,35 +128,67 @@ return; } - var tempUvs = texture._uvs, - tempWidth = texture._frame.width, - tempHeight = texture._frame.height, - tw = texture.baseTexture.width, - th = texture.baseTexture.height; + // get rid of any thing that may be batching. + renderer.flush(); - texture._uvs = this._uvs; - texture._frame.width = this.width; - texture._frame.height = this.height; + var gl = renderer.gl; + var glData = this._glDatas[renderer.CONTEXT_UID]; - this.shader.uniforms.uPixelSize.value[0] = 1.0/tw; - this.shader.uniforms.uPixelSize.value[1] = 1.0/th; + if(!glData) + { + glData = { + shader:new TilingShader(gl), + quad:new core.Quad(gl) + } - this.shader.uniforms.uFrame.value[0] = tempUvs.x0; - this.shader.uniforms.uFrame.value[1] = tempUvs.y0; - this.shader.uniforms.uFrame.value[2] = tempUvs.x1 - tempUvs.x0; - this.shader.uniforms.uFrame.value[3] = tempUvs.y2 - tempUvs.y0; + this._glDatas[renderer.CONTEXT_UID] = glData; + + glData.quad.initVao(glData.shader); + } - this.shader.uniforms.uTransform.value[0] = (this.tilePosition.x % (tempWidth * this.tileScale.x)) / this._width; - this.shader.uniforms.uTransform.value[1] = (this.tilePosition.y % (tempHeight * this.tileScale.y)) / this._height; - this.shader.uniforms.uTransform.value[2] = ( tw / this._width ) * this.tileScale.x; - this.shader.uniforms.uTransform.value[3] = ( th / this._height ) * this.tileScale.y; + // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. + var vertices = glData.quad.vertices; - renderer.setObjectRenderer(renderer.plugins.sprite); - renderer.plugins.sprite.render(this); + vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; + vertices[1] = vertices[3] = this._height * -this.anchor.y; - texture._uvs = tempUvs; - texture._frame.width = tempWidth; - texture._frame.height = tempHeight; + vertices[2] = vertices[4] = ( this._width ) * (1-this.anchor.x); + vertices[5] = vertices[7] = this._height * (1-this.anchor.y); + + glData.quad.upload(); + + renderer.bindShader(glData.shader); + + var textureUvs = texture._uvs, + textureWidth = texture._frame.width, + textureHeight = texture._frame.height, + textureBaseWidth = texture.baseTexture.width, + textureBaseHeight = texture.baseTexture.height; + + var uPixelSize = glData.shader.uniforms.uPixelSize; + uPixelSize[0] = 1.0/textureBaseWidth; + uPixelSize[1] = 1.0/textureBaseHeight; + glData.shader.uniforms.uPixelSize = uPixelSize; + + var uFrame = glData.shader.uniforms.uFrame; + uFrame[0] = textureUvs.x0; + uFrame[1] = textureUvs.y0; + uFrame[2] = textureUvs.x1 - textureUvs.x0; + uFrame[3] = textureUvs.y2 - textureUvs.y0; + glData.shader.uniforms.uFrame = uFrame; + + var uTransform = glData.shader.uniforms.uTransform; + uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; + uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; + uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; + uTransform[3] = ( textureBaseHeight / this._height ) * this.tileScale.y; + glData.shader.uniforms.uTransform = uTransform; + + glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); + glData.shader.uniforms.alpha = this.worldAlpha; + + renderer.bindTexture(this._texture, 0); + glData.quad.draw(); }; /** @@ -238,7 +218,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - var tempCanvas = new core.CanvasBuffer(texture._frame.width, texture._frame.height); + var tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) diff --git a/src/extras/webgl/TilingShader.js b/src/extras/webgl/TilingShader.js new file mode 100644 index 0000000..4be2d40 --- /dev/null +++ b/src/extras/webgl/TilingShader.js @@ -0,0 +1,22 @@ +var Shader = require('pixi-gl-core').GLShader; +var glslify = require('glslify'); + +/** + * @class + * @extends PIXI.Shader + * @memberof PIXI.mesh + * @param shaderManager {PIXI.ShaderManager} The WebGL shader manager this shader works for. + */ +function TilingShader(gl) +{ + Shader.call(this, + gl, + glslify('./tilingSprite.vert'), + glslify('./tilingSprite.frag') + ); +} + +TilingShader.prototype = Object.create(Shader.prototype); +TilingShader.prototype.constructor = TilingShader; +module.exports = TilingShader; + diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag new file mode 100644 index 0000000..21d8ee6 --- /dev/null +++ b/src/extras/webgl/tilingSprite.frag @@ -0,0 +1,18 @@ +precision lowp float; + +varying vec2 vTextureCoord; +varying vec4 vColor; + +uniform sampler2D uSampler; +uniform vec4 uFrame; +uniform vec2 uPixelSize; + +void main(void) +{ + + vec2 coord = mod(vTextureCoord, uFrame.zw); + coord = clamp(coord, uPixelSize, uFrame.zw - uPixelSize); + coord += uFrame.xy; + + gl_FragColor = texture2D(uSampler, coord) ; +} \ No newline at end of file diff --git a/src/extras/webgl/tilingSprite.vert b/src/extras/webgl/tilingSprite.vert new file mode 100644 index 0000000..3f989ea --- /dev/null +++ b/src/extras/webgl/tilingSprite.vert @@ -0,0 +1,26 @@ +precision lowp float; + +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; +attribute vec4 aColor; + +uniform mat3 projectionMatrix; +uniform mat3 translationMatrix; + +uniform vec4 uFrame; +uniform vec4 uTransform; + +varying vec2 vTextureCoord; +varying vec4 vColor; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + + vec2 coord = aTextureCoord; + coord -= uTransform.xy; + coord /= uTransform.zw; + vTextureCoord = coord; + + vColor = vec4(aColor.rgb * aColor.a, aColor.a); +} \ No newline at end of file diff --git a/package.json b/package.json index 431f6ca..6459980 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "README.md" ], "dependencies": { - "async": "^1.5.0", "bit-twiddle": "^1.0.2", "earcut": "^2.0.7", "eventemitter3": "^1.1.1", diff --git a/src/core/index.js b/src/core/index.js index 689b18d..c5f3536 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -36,19 +36,20 @@ Texture: require('./textures/Texture'), BaseTexture: require('./textures/BaseTexture'), RenderTexture: require('./textures/RenderTexture'), - BaseRenderTexture: require('./textures/BaseRenderTexture'), + BaseRenderTexture: require('./textures/BaseRenderTexture'), VideoBaseTexture: require('./textures/VideoBaseTexture'), TextureUvs: require('./textures/TextureUvs'), // renderers - canvas CanvasRenderer: require('./renderers/canvas/CanvasRenderer'), - CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), + CanvasRenderTarget: require('./renderers/canvas/utils/CanvasRenderTarget'), // renderers - webgl WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), - WebGLManager: require('./renderers/webgl/managers/WebGLManager'), + WebGLManager: require('./renderers/webgl/managers/WebGLManager'), ObjectRenderer: require('./renderers/webgl/utils/ObjectRenderer'), RenderTarget: require('./renderers/webgl/utils/RenderTarget'), + Quad: require('./renderers/webgl/utils/Quad'), // filters - webgl SpriteMaskFilter: require('./renderers/webgl/filters/spriteMask/SpriteMaskFilter'), diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 5030080..a30c35b 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * Creates a Canvas element of the given size. * @@ -22,7 +24,7 @@ */ this.context = this.canvas.getContext('2d'); - this.resolution = resolution; + this.resolution = resolution || CONST.RESOLUTION; this.resize(width, height); } diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index d0ef80c..3406a62 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -99,7 +99,7 @@ // initialize the context so it is ready for the managers. this.gl = createContext(this.view, this._contextOptions); - this.gl.id = this.CONTEXT_UID = CONTEXT_UID++; + this.CONTEXT_UID = CONTEXT_UID++; this.state = new WebGLState(this.gl); this.renderingToScreen = true; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8f205e1..4ef28d5 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -32,7 +32,7 @@ for (var i = 0; i < maxTextures; i++) { if(i > 0)src += '\nelse '; - if(i < maxTextures-1)src += 'if(ndx == ' + i + '.0)'; + if(i < maxTextures-1)src += 'if(vTextureId == ' + i + '.0)'; src += '\n{'; src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; src += '\n}'; @@ -54,7 +54,6 @@ 'void main(void){', 'vec4 color;', - 'float ndx = vTextureId;', '%forloop%', 'gl_FragColor = color * vColor;', '}' diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07d43bb..a2e9893 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -9,7 +9,6 @@ EventEmitter: require('eventemitter3'), pluginTarget: require('./pluginTarget'), - async: require('async'), /** * Gets the next unique identifier diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 8dbb168..1756381 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,7 +1,8 @@ var core = require('../core'), // a sprite use dfor rendering textures.. tempPoint = new core.Point(), - CanvasTinter = require('../core/sprites/canvas/CanvasTinter'); + CanvasTinter = require('../core/sprites/canvas/CanvasTinter'), + TilingShader = require('./webgl/TilingShader') /** * A tiling sprite is a fast way of rendering a tiling image @@ -60,61 +61,7 @@ this._canvasPattern = null; - //TODO move.. - this.shader = new core.Filter( - - [ - 'precision lowp float;', - 'attribute vec2 aVertexPosition;', - 'attribute vec2 aTextureCoord;', - 'attribute vec4 aColor;', - - 'uniform mat3 projectionMatrix;', - - 'uniform vec4 uFrame;', - 'uniform vec4 uTransform;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'void main(void){', - ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', - - ' vec2 coord = aTextureCoord;', - ' coord -= uTransform.xy;', - ' coord /= uTransform.zw;', - ' vTextureCoord = coord;', - - ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', - '}' - ].join('\n'), - [ - 'precision lowp float;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform vec4 uFrame;', - 'uniform vec2 uPixelSize;', - - 'void main(void){', - - ' vec2 coord = mod(vTextureCoord, uFrame.zw);', - ' coord = clamp(coord, uPixelSize, uFrame.zw - uPixelSize);', - ' coord += uFrame.xy;', - - ' gl_FragColor = texture2D(uSampler, coord) * vColor ;', - '}' - ].join('\n'), - - // set the uniforms - { - uFrame: { type: '4fv', value: [0,0,1,1] }, - uTransform: { type: '4fv', value: [0,0,1,1] }, - uPixelSize : { type : '2fv', value: [1, 1]} - } - ); + this._glDatas = []; } TilingSprite.prototype = Object.create(core.Sprite.prototype); @@ -172,6 +119,7 @@ */ TilingSprite.prototype._renderWebGL = function (renderer) { + // tweak our texture temporarily.. var texture = this._texture; @@ -180,35 +128,67 @@ return; } - var tempUvs = texture._uvs, - tempWidth = texture._frame.width, - tempHeight = texture._frame.height, - tw = texture.baseTexture.width, - th = texture.baseTexture.height; + // get rid of any thing that may be batching. + renderer.flush(); - texture._uvs = this._uvs; - texture._frame.width = this.width; - texture._frame.height = this.height; + var gl = renderer.gl; + var glData = this._glDatas[renderer.CONTEXT_UID]; - this.shader.uniforms.uPixelSize.value[0] = 1.0/tw; - this.shader.uniforms.uPixelSize.value[1] = 1.0/th; + if(!glData) + { + glData = { + shader:new TilingShader(gl), + quad:new core.Quad(gl) + } - this.shader.uniforms.uFrame.value[0] = tempUvs.x0; - this.shader.uniforms.uFrame.value[1] = tempUvs.y0; - this.shader.uniforms.uFrame.value[2] = tempUvs.x1 - tempUvs.x0; - this.shader.uniforms.uFrame.value[3] = tempUvs.y2 - tempUvs.y0; + this._glDatas[renderer.CONTEXT_UID] = glData; + + glData.quad.initVao(glData.shader); + } - this.shader.uniforms.uTransform.value[0] = (this.tilePosition.x % (tempWidth * this.tileScale.x)) / this._width; - this.shader.uniforms.uTransform.value[1] = (this.tilePosition.y % (tempHeight * this.tileScale.y)) / this._height; - this.shader.uniforms.uTransform.value[2] = ( tw / this._width ) * this.tileScale.x; - this.shader.uniforms.uTransform.value[3] = ( th / this._height ) * this.tileScale.y; + // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. + var vertices = glData.quad.vertices; - renderer.setObjectRenderer(renderer.plugins.sprite); - renderer.plugins.sprite.render(this); + vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; + vertices[1] = vertices[3] = this._height * -this.anchor.y; - texture._uvs = tempUvs; - texture._frame.width = tempWidth; - texture._frame.height = tempHeight; + vertices[2] = vertices[4] = ( this._width ) * (1-this.anchor.x); + vertices[5] = vertices[7] = this._height * (1-this.anchor.y); + + glData.quad.upload(); + + renderer.bindShader(glData.shader); + + var textureUvs = texture._uvs, + textureWidth = texture._frame.width, + textureHeight = texture._frame.height, + textureBaseWidth = texture.baseTexture.width, + textureBaseHeight = texture.baseTexture.height; + + var uPixelSize = glData.shader.uniforms.uPixelSize; + uPixelSize[0] = 1.0/textureBaseWidth; + uPixelSize[1] = 1.0/textureBaseHeight; + glData.shader.uniforms.uPixelSize = uPixelSize; + + var uFrame = glData.shader.uniforms.uFrame; + uFrame[0] = textureUvs.x0; + uFrame[1] = textureUvs.y0; + uFrame[2] = textureUvs.x1 - textureUvs.x0; + uFrame[3] = textureUvs.y2 - textureUvs.y0; + glData.shader.uniforms.uFrame = uFrame; + + var uTransform = glData.shader.uniforms.uTransform; + uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; + uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; + uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; + uTransform[3] = ( textureBaseHeight / this._height ) * this.tileScale.y; + glData.shader.uniforms.uTransform = uTransform; + + glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); + glData.shader.uniforms.alpha = this.worldAlpha; + + renderer.bindTexture(this._texture, 0); + glData.quad.draw(); }; /** @@ -238,7 +218,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - var tempCanvas = new core.CanvasBuffer(texture._frame.width, texture._frame.height); + var tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) diff --git a/src/extras/webgl/TilingShader.js b/src/extras/webgl/TilingShader.js new file mode 100644 index 0000000..4be2d40 --- /dev/null +++ b/src/extras/webgl/TilingShader.js @@ -0,0 +1,22 @@ +var Shader = require('pixi-gl-core').GLShader; +var glslify = require('glslify'); + +/** + * @class + * @extends PIXI.Shader + * @memberof PIXI.mesh + * @param shaderManager {PIXI.ShaderManager} The WebGL shader manager this shader works for. + */ +function TilingShader(gl) +{ + Shader.call(this, + gl, + glslify('./tilingSprite.vert'), + glslify('./tilingSprite.frag') + ); +} + +TilingShader.prototype = Object.create(Shader.prototype); +TilingShader.prototype.constructor = TilingShader; +module.exports = TilingShader; + diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag new file mode 100644 index 0000000..21d8ee6 --- /dev/null +++ b/src/extras/webgl/tilingSprite.frag @@ -0,0 +1,18 @@ +precision lowp float; + +varying vec2 vTextureCoord; +varying vec4 vColor; + +uniform sampler2D uSampler; +uniform vec4 uFrame; +uniform vec2 uPixelSize; + +void main(void) +{ + + vec2 coord = mod(vTextureCoord, uFrame.zw); + coord = clamp(coord, uPixelSize, uFrame.zw - uPixelSize); + coord += uFrame.xy; + + gl_FragColor = texture2D(uSampler, coord) ; +} \ No newline at end of file diff --git a/src/extras/webgl/tilingSprite.vert b/src/extras/webgl/tilingSprite.vert new file mode 100644 index 0000000..3f989ea --- /dev/null +++ b/src/extras/webgl/tilingSprite.vert @@ -0,0 +1,26 @@ +precision lowp float; + +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; +attribute vec4 aColor; + +uniform mat3 projectionMatrix; +uniform mat3 translationMatrix; + +uniform vec4 uFrame; +uniform vec4 uTransform; + +varying vec2 vTextureCoord; +varying vec4 vColor; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + + vec2 coord = aTextureCoord; + coord -= uTransform.xy; + coord /= uTransform.zw; + vTextureCoord = coord; + + vColor = vec4(aColor.rgb * aColor.a, aColor.a); +} \ No newline at end of file diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 6b3638e..56b9945 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -90,7 +90,7 @@ * @member {HTMLElement} * @private */ - this.moveWhenInside = true; + this.moveWhenInside = false; /** * Have events been attached to the dom element?