diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index 33e276f..5957709 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -29,6 +29,7 @@ * Works with TilingSprite and Mesh * Change to 1.5 if you tex ture has repeated right and bottom lines, that leads to smoother borders * IN REAL PIXELS + * * @default 0 * @member {number} */ @@ -39,6 +40,7 @@ * Works with TilingSprite and Mesh * Change to 0 to add a pixel to the edge, recommended for transparent trimmed textures in atlas * IN REAL PIXELS + * * @default 0.5 * @member {number} */ diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index 33e276f..5957709 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -29,6 +29,7 @@ * Works with TilingSprite and Mesh * Change to 1.5 if you tex ture has repeated right and bottom lines, that leads to smoother borders * IN REAL PIXELS + * * @default 0 * @member {number} */ @@ -39,6 +40,7 @@ * Works with TilingSprite and Mesh * Change to 0 to add a pixel to the edge, recommended for transparent trimmed textures in atlas * IN REAL PIXELS + * * @default 0.5 * @member {number} */ diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 47c66d5..c1aba40 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -47,12 +47,17 @@ */ this._height = height; + /** + * Canvas pattern + * + * @type {CanvasPattern} + * @private + */ this._canvasPattern = null; - this._glDatas = []; - /** * transform that is applied to UV to get the texture coords + * * @member {PIXI.extras.TextureTransform} */ this.uvTransform = texture.transform || new TextureTransform(texture); @@ -60,6 +65,7 @@ /** * setter for clampEdge + * * @param {number} value assigned value */ set clampEdge(value) @@ -141,7 +147,7 @@ this.uvTransform.update(); renderer.setObjectRenderer(renderer.plugins.tiling); - renderer.plugins.tiling.render(this); + renderer.plugins.tilingSprite.render(this); } /** @@ -366,10 +372,7 @@ super.destroy(); this.tileScale = null; - this._tileScaleOffset = null; this.tilePosition = null; - - this._uvs = null; } /** diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index 33e276f..5957709 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -29,6 +29,7 @@ * Works with TilingSprite and Mesh * Change to 1.5 if you tex ture has repeated right and bottom lines, that leads to smoother borders * IN REAL PIXELS + * * @default 0 * @member {number} */ @@ -39,6 +40,7 @@ * Works with TilingSprite and Mesh * Change to 0 to add a pixel to the edge, recommended for transparent trimmed textures in atlas * IN REAL PIXELS + * * @default 0.5 * @member {number} */ diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 47c66d5..c1aba40 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -47,12 +47,17 @@ */ this._height = height; + /** + * Canvas pattern + * + * @type {CanvasPattern} + * @private + */ this._canvasPattern = null; - this._glDatas = []; - /** * transform that is applied to UV to get the texture coords + * * @member {PIXI.extras.TextureTransform} */ this.uvTransform = texture.transform || new TextureTransform(texture); @@ -60,6 +65,7 @@ /** * setter for clampEdge + * * @param {number} value assigned value */ set clampEdge(value) @@ -141,7 +147,7 @@ this.uvTransform.update(); renderer.setObjectRenderer(renderer.plugins.tiling); - renderer.plugins.tiling.render(this); + renderer.plugins.tilingSprite.render(this); } /** @@ -366,10 +372,7 @@ super.destroy(); this.tileScale = null; - this._tileScaleOffset = null; this.tilePosition = null; - - this._uvs = null; } /** diff --git a/src/extras/index.js b/src/extras/index.js index fc9da64..7fe38b3 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -4,7 +4,7 @@ export { default as TextureTransform } from './TextureTransform'; export { default as MovieClip } from './MovieClip'; export { default as TilingSprite } from './TilingSprite'; -export { default as TilingRenderer } from './webgl/TilingRenderer'; +export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; export { default as cacheAsBitmap } from './cacheAsBitmap'; diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index 33e276f..5957709 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -29,6 +29,7 @@ * Works with TilingSprite and Mesh * Change to 1.5 if you tex ture has repeated right and bottom lines, that leads to smoother borders * IN REAL PIXELS + * * @default 0 * @member {number} */ @@ -39,6 +40,7 @@ * Works with TilingSprite and Mesh * Change to 0 to add a pixel to the edge, recommended for transparent trimmed textures in atlas * IN REAL PIXELS + * * @default 0.5 * @member {number} */ diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 47c66d5..c1aba40 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -47,12 +47,17 @@ */ this._height = height; + /** + * Canvas pattern + * + * @type {CanvasPattern} + * @private + */ this._canvasPattern = null; - this._glDatas = []; - /** * transform that is applied to UV to get the texture coords + * * @member {PIXI.extras.TextureTransform} */ this.uvTransform = texture.transform || new TextureTransform(texture); @@ -60,6 +65,7 @@ /** * setter for clampEdge + * * @param {number} value assigned value */ set clampEdge(value) @@ -141,7 +147,7 @@ this.uvTransform.update(); renderer.setObjectRenderer(renderer.plugins.tiling); - renderer.plugins.tiling.render(this); + renderer.plugins.tilingSprite.render(this); } /** @@ -366,10 +372,7 @@ super.destroy(); this.tileScale = null; - this._tileScaleOffset = null; this.tilePosition = null; - - this._uvs = null; } /** diff --git a/src/extras/index.js b/src/extras/index.js index fc9da64..7fe38b3 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -4,7 +4,7 @@ export { default as TextureTransform } from './TextureTransform'; export { default as MovieClip } from './MovieClip'; export { default as TilingSprite } from './TilingSprite'; -export { default as TilingRenderer } from './webgl/TilingRenderer'; +export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; export { default as cacheAsBitmap } from './cacheAsBitmap'; diff --git a/src/extras/webgl/TilingRenderer.js b/src/extras/webgl/TilingRenderer.js deleted file mode 100644 index 0ff3c5c..0000000 --- a/src/extras/webgl/TilingRenderer.js +++ /dev/null @@ -1,145 +0,0 @@ -import * as core from '../../core'; -import { WRAP_MODES } from '../../core/const'; - -const glslify = require('glslify'); // eslint-disable-line no-undef - -const tempMat = new core.Matrix(); -const tempArray = new Float32Array(4); - -/** - * WebGL renderer plugin for tiling sprites - */ -export class TilingRenderer extends core.ObjectRenderer { - - /** - * constructor for renderer - * @param {WebGLRenderer} renderer The renderer this tiling awesomeness works for. - */ - constructor(renderer) - { - super(renderer); - - this.shader = null; - this.simpleShader = null; - this.quad = null; - } - - /** - * Sets up the renderer context and necessary buffers. - * - * @private - */ - onContextChange() - { - const gl = this.renderer.gl; - - this.shader = new core.Shader(gl, - glslify('./tilingSprite.vert'), - glslify('./tilingSprite.frag')); - this.simpleShader = new core.Shader(gl, - glslify('./tilingSprite.vert'), - glslify('./tilingSprite_simple.frag')); - - this.quad = new core.Quad(gl); - this.quad.initVao(this.shader); - } - - /** - * - * @param {PIXI.extras.TilingSprite} ts tilingSprite to be rendered - */ - render(ts) - { - const quad = this.quad; - let vertices = quad.vertices; - - vertices[0] = vertices[6] = (ts._width) * -ts.anchor.x; - vertices[1] = vertices[3] = ts._height * -ts.anchor.y; - - vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); - vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - - vertices = quad.uvs; - - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; - - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; - - quad.upload(); - - const renderer = this.renderer; - const tex = ts._texture; - const baseTex = tex.baseTexture; - const lt = ts.tileTransform.localTransform; - const uv = ts.uvTransform; - let isSimple = baseTex.isPowerOfTwo - && tex.frame.width === baseTex.width && tex.frame.height === baseTex.height; - - // auto, force repeat wrapMode for big tiling textures - if (isSimple) - { - if (!baseTex._glTextures[renderer.CONTEXT_UID]) - { - if (baseTex.wrapMode === WRAP_MODES.CLAMP) - { - baseTex.wrapMode = WRAP_MODES.REPEAT; - } - } - else - { - isSimple = baseTex.wrapMode !== WRAP_MODES.CLAMP; - } - } - - const shader = isSimple ? this.simpleShader : this.shader; - - renderer.bindShader(shader); - - const w = tex.width; - const h = tex.height; - const W = ts._width; - const H = ts._height; - - tempMat.set(lt.a * w / W, - lt.b * w / H, - lt.c * h / W, - lt.d * h / H, - lt.tx / W, - lt.ty / H); - - // that part is the same as above: - // tempMat.identity(); - // tempMat.scale(tex.width, tex.height); - // tempMat.prepend(lt); - // tempMat.scale(1.0 / ts._width, 1.0 / ts._height); - - tempMat.invert(); - if (isSimple) - { - tempMat.append(uv.mapCoord); - } - else - { - shader.uniforms.uMapCoord = uv.mapCoord.toArray(true); - shader.uniforms.uClampFrame = uv.uClampFrame; - shader.uniforms.uClampOffset = uv.uClampOffset; - } - shader.uniforms.uTransform = tempMat.toArray(true); - - const color = tempArray; - - core.utils.hex2rgb(ts.tint, color); - color[3] = ts.worldAlpha; - shader.uniforms.uColor = color; - shader.uniforms.translationMatrix = ts.transform.worldTransform.toArray(true); - - renderer.bindTexture(tex); - renderer.setBlendMode(ts.blendMode); - - quad.draw(); - } -} - -core.WebGLRenderer.registerPlugin('tiling', TilingRenderer); diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index 33e276f..5957709 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -29,6 +29,7 @@ * Works with TilingSprite and Mesh * Change to 1.5 if you tex ture has repeated right and bottom lines, that leads to smoother borders * IN REAL PIXELS + * * @default 0 * @member {number} */ @@ -39,6 +40,7 @@ * Works with TilingSprite and Mesh * Change to 0 to add a pixel to the edge, recommended for transparent trimmed textures in atlas * IN REAL PIXELS + * * @default 0.5 * @member {number} */ diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 47c66d5..c1aba40 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -47,12 +47,17 @@ */ this._height = height; + /** + * Canvas pattern + * + * @type {CanvasPattern} + * @private + */ this._canvasPattern = null; - this._glDatas = []; - /** * transform that is applied to UV to get the texture coords + * * @member {PIXI.extras.TextureTransform} */ this.uvTransform = texture.transform || new TextureTransform(texture); @@ -60,6 +65,7 @@ /** * setter for clampEdge + * * @param {number} value assigned value */ set clampEdge(value) @@ -141,7 +147,7 @@ this.uvTransform.update(); renderer.setObjectRenderer(renderer.plugins.tiling); - renderer.plugins.tiling.render(this); + renderer.plugins.tilingSprite.render(this); } /** @@ -366,10 +372,7 @@ super.destroy(); this.tileScale = null; - this._tileScaleOffset = null; this.tilePosition = null; - - this._uvs = null; } /** diff --git a/src/extras/index.js b/src/extras/index.js index fc9da64..7fe38b3 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -4,7 +4,7 @@ export { default as TextureTransform } from './TextureTransform'; export { default as MovieClip } from './MovieClip'; export { default as TilingSprite } from './TilingSprite'; -export { default as TilingRenderer } from './webgl/TilingRenderer'; +export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; export { default as cacheAsBitmap } from './cacheAsBitmap'; diff --git a/src/extras/webgl/TilingRenderer.js b/src/extras/webgl/TilingRenderer.js deleted file mode 100644 index 0ff3c5c..0000000 --- a/src/extras/webgl/TilingRenderer.js +++ /dev/null @@ -1,145 +0,0 @@ -import * as core from '../../core'; -import { WRAP_MODES } from '../../core/const'; - -const glslify = require('glslify'); // eslint-disable-line no-undef - -const tempMat = new core.Matrix(); -const tempArray = new Float32Array(4); - -/** - * WebGL renderer plugin for tiling sprites - */ -export class TilingRenderer extends core.ObjectRenderer { - - /** - * constructor for renderer - * @param {WebGLRenderer} renderer The renderer this tiling awesomeness works for. - */ - constructor(renderer) - { - super(renderer); - - this.shader = null; - this.simpleShader = null; - this.quad = null; - } - - /** - * Sets up the renderer context and necessary buffers. - * - * @private - */ - onContextChange() - { - const gl = this.renderer.gl; - - this.shader = new core.Shader(gl, - glslify('./tilingSprite.vert'), - glslify('./tilingSprite.frag')); - this.simpleShader = new core.Shader(gl, - glslify('./tilingSprite.vert'), - glslify('./tilingSprite_simple.frag')); - - this.quad = new core.Quad(gl); - this.quad.initVao(this.shader); - } - - /** - * - * @param {PIXI.extras.TilingSprite} ts tilingSprite to be rendered - */ - render(ts) - { - const quad = this.quad; - let vertices = quad.vertices; - - vertices[0] = vertices[6] = (ts._width) * -ts.anchor.x; - vertices[1] = vertices[3] = ts._height * -ts.anchor.y; - - vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); - vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - - vertices = quad.uvs; - - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; - - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; - - quad.upload(); - - const renderer = this.renderer; - const tex = ts._texture; - const baseTex = tex.baseTexture; - const lt = ts.tileTransform.localTransform; - const uv = ts.uvTransform; - let isSimple = baseTex.isPowerOfTwo - && tex.frame.width === baseTex.width && tex.frame.height === baseTex.height; - - // auto, force repeat wrapMode for big tiling textures - if (isSimple) - { - if (!baseTex._glTextures[renderer.CONTEXT_UID]) - { - if (baseTex.wrapMode === WRAP_MODES.CLAMP) - { - baseTex.wrapMode = WRAP_MODES.REPEAT; - } - } - else - { - isSimple = baseTex.wrapMode !== WRAP_MODES.CLAMP; - } - } - - const shader = isSimple ? this.simpleShader : this.shader; - - renderer.bindShader(shader); - - const w = tex.width; - const h = tex.height; - const W = ts._width; - const H = ts._height; - - tempMat.set(lt.a * w / W, - lt.b * w / H, - lt.c * h / W, - lt.d * h / H, - lt.tx / W, - lt.ty / H); - - // that part is the same as above: - // tempMat.identity(); - // tempMat.scale(tex.width, tex.height); - // tempMat.prepend(lt); - // tempMat.scale(1.0 / ts._width, 1.0 / ts._height); - - tempMat.invert(); - if (isSimple) - { - tempMat.append(uv.mapCoord); - } - else - { - shader.uniforms.uMapCoord = uv.mapCoord.toArray(true); - shader.uniforms.uClampFrame = uv.uClampFrame; - shader.uniforms.uClampOffset = uv.uClampOffset; - } - shader.uniforms.uTransform = tempMat.toArray(true); - - const color = tempArray; - - core.utils.hex2rgb(ts.tint, color); - color[3] = ts.worldAlpha; - shader.uniforms.uColor = color; - shader.uniforms.translationMatrix = ts.transform.worldTransform.toArray(true); - - renderer.bindTexture(tex); - renderer.setBlendMode(ts.blendMode); - - quad.draw(); - } -} - -core.WebGLRenderer.registerPlugin('tiling', TilingRenderer); diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js new file mode 100644 index 0000000..3fadc8f --- /dev/null +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -0,0 +1,146 @@ +import * as core from '../../core'; +import { WRAP_MODES } from '../../core/const'; + +const glslify = require('glslify'); // eslint-disable-line no-undef + +const tempMat = new core.Matrix(); +const tempArray = new Float32Array(4); + +/** + * WebGL renderer plugin for tiling sprites + */ +export class TilingRenderer extends core.ObjectRenderer { + + /** + * constructor for renderer + * + * @param {WebGLRenderer} renderer The renderer this tiling awesomeness works for. + */ + constructor(renderer) + { + super(renderer); + + this.shader = null; + this.simpleShader = null; + this.quad = null; + } + + /** + * Sets up the renderer context and necessary buffers. + * + * @private + */ + onContextChange() + { + const gl = this.renderer.gl; + + this.shader = new core.Shader(gl, + glslify('./tilingSprite.vert'), + glslify('./tilingSprite.frag')); + this.simpleShader = new core.Shader(gl, + glslify('./tilingSprite.vert'), + glslify('./tilingSprite_simple.frag')); + + this.quad = new core.Quad(gl); + this.quad.initVao(this.shader); + } + + /** + * + * @param {PIXI.extras.TilingSprite} ts tilingSprite to be rendered + */ + render(ts) + { + const quad = this.quad; + let vertices = quad.vertices; + + vertices[0] = vertices[6] = (ts._width) * -ts.anchor.x; + vertices[1] = vertices[3] = ts._height * -ts.anchor.y; + + vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); + vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); + + vertices = quad.uvs; + + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; + + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + + quad.upload(); + + const renderer = this.renderer; + const tex = ts._texture; + const baseTex = tex.baseTexture; + const lt = ts.tileTransform.localTransform; + const uv = ts.uvTransform; + let isSimple = baseTex.isPowerOfTwo + && tex.frame.width === baseTex.width && tex.frame.height === baseTex.height; + + // auto, force repeat wrapMode for big tiling textures + if (isSimple) + { + if (!baseTex._glTextures[renderer.CONTEXT_UID]) + { + if (baseTex.wrapMode === WRAP_MODES.CLAMP) + { + baseTex.wrapMode = WRAP_MODES.REPEAT; + } + } + else + { + isSimple = baseTex.wrapMode !== WRAP_MODES.CLAMP; + } + } + + const shader = isSimple ? this.simpleShader : this.shader; + + renderer.bindShader(shader); + + const w = tex.width; + const h = tex.height; + const W = ts._width; + const H = ts._height; + + tempMat.set(lt.a * w / W, + lt.b * w / H, + lt.c * h / W, + lt.d * h / H, + lt.tx / W, + lt.ty / H); + + // that part is the same as above: + // tempMat.identity(); + // tempMat.scale(tex.width, tex.height); + // tempMat.prepend(lt); + // tempMat.scale(1.0 / ts._width, 1.0 / ts._height); + + tempMat.invert(); + if (isSimple) + { + tempMat.append(uv.mapCoord); + } + else + { + shader.uniforms.uMapCoord = uv.mapCoord.toArray(true); + shader.uniforms.uClampFrame = uv.uClampFrame; + shader.uniforms.uClampOffset = uv.uClampOffset; + } + shader.uniforms.uTransform = tempMat.toArray(true); + + const color = tempArray; + + core.utils.hex2rgb(ts.tint, color); + color[3] = ts.worldAlpha; + shader.uniforms.uColor = color; + shader.uniforms.translationMatrix = ts.transform.worldTransform.toArray(true); + + renderer.bindTexture(tex); + renderer.setBlendMode(ts.blendMode); + + quad.draw(); + } +} + +core.WebGLRenderer.registerPlugin('tilingSprite', TilingRenderer);