From 38e2676e8f6564946fba8a5363dbb770dc923b7f Mon Sep 17 00:00:00 2001 From: adroitwhiz Date: Fri, 1 Nov 2019 19:11:01 -0400 Subject: [PATCH] Remove `SvgRenderer._draw` call from setSVG --- src/SVGSkin.js | 67 +++++++++++++++++++++----------------------------- 1 file changed, 28 insertions(+), 39 deletions(-) diff --git a/src/SVGSkin.js b/src/SVGSkin.js index 8b3780b58..dc3cd29d1 100644 --- a/src/SVGSkin.js +++ b/src/SVGSkin.js @@ -22,6 +22,9 @@ class SVGSkin extends Skin { /** @type {SvgRenderer} */ this._svgRenderer = new SvgRenderer(); + /** @type {boolean} */ + this._svgDirty = false; + /** @type {WebGLTexture} */ this._texture = null; @@ -66,7 +69,9 @@ class SVGSkin extends Skin { */ // eslint-disable-next-line no-unused-vars getTexture (scale) { - if (!this._svgRenderer.canvas.width || !this._svgRenderer.canvas.height) { + if (this._svgRenderer.canvas.width === 0 || + this._svgRenderer.canvas.height === 0 || + !this._svgRenderer.loaded) { return super.getTexture(); } @@ -77,20 +82,22 @@ class SVGSkin extends Skin { while ((newScale < this._maxTextureScale) && (requestedScale >= 1.5 * newScale)) { newScale *= 2; } - if (this._textureScale !== newScale) { + if (this._svgDirty || this._textureScale !== newScale) { this._textureScale = newScale; - this._svgRenderer._draw(this._textureScale, () => { - if (this._textureScale === newScale) { - const canvas = this._svgRenderer.canvas; - const context = canvas.getContext('2d'); - const textureData = context.getImageData(0, 0, canvas.width, canvas.height); - - const gl = this._renderer.gl; - gl.bindTexture(gl.TEXTURE_2D, this._texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData); - this._silhouette.update(textureData); - } - }); + this._svgRenderer.draw(this._textureScale); + // Pull out the ImageData from the canvas. ImageData speeds up + // updating Silhouette and is better handled by more browsers in + // regards to memory. + const canvas = this._svgRenderer.canvas; + const context = canvas.getContext('2d'); + const textureData = context.getImageData(0, 0, canvas.width, canvas.height); + + const gl = this._renderer.gl; + gl.bindTexture(gl.TEXTURE_2D, this._texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData); + this._silhouette.update(textureData); + + this._svgDirty = false; } return this._texture; @@ -104,39 +111,19 @@ class SVGSkin extends Skin { * @fires Skin.event:WasAltered */ setSVG (svgData, rotationCenter) { - this._svgRenderer.fromString(svgData, 1, () => { + this._svgRenderer.loadSVG(svgData, false, () => { const gl = this._renderer.gl; - this._textureScale = this._maxTextureScale = 1; - - // Pull out the ImageData from the canvas. ImageData speeds up - // updating Silhouette and is better handled by more browsers in - // regards to memory. - const canvas = this._svgRenderer.canvas; - - if (!canvas.width || !canvas.height) { - super.setEmptyImageData(); - return; - } - const context = canvas.getContext('2d'); - const textureData = context.getImageData(0, 0, canvas.width, canvas.height); - - if (this._texture) { - gl.bindTexture(gl.TEXTURE_2D, this._texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData); - this._silhouette.update(textureData); - } else { + if (this._texture === null) { // TODO: mipmaps? const textureOptions = { - auto: true, - wrap: gl.CLAMP_TO_EDGE, - src: textureData + auto: false, + wrap: gl.CLAMP_TO_EDGE }; - this._texture = twgl.createTexture(gl, textureOptions); - this._silhouette.update(textureData); } + this._maxTextureScale = 1; const maxDimension = Math.max(this._svgRenderer.canvas.width, this._svgRenderer.canvas.height); let testScale = 2; for (testScale; maxDimension * testScale <= MAX_TEXTURE_DIMENSION; testScale *= 2) { @@ -146,6 +133,8 @@ class SVGSkin extends Skin { if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter(); this.setRotationCenter.apply(this, rotationCenter); this.emit(Skin.Events.WasAltered); + + this._svgDirty = true; }); }