diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 95a0b61..8c8b75d 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -146,22 +146,23 @@ * Experimental! * Changes frame clamping * Works with TilingSprite and Mesh - * By default, clamps bottom and right edge of texture. - * Change to 0 if you texture has repeated right and bottom lines, that leads to smoother borders - * @default 1 + * 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} */ - this.smoothEdge1 = 1; + this.clampOffset = 0; /** * Experimental! * Changes frame clamping * Works with TilingSprite and Mesh * Change to 0 to add a pixel to the edge, recommended for transparent trimmed textures in atlas - * @default 0 + * IN REAL PIXELS + * @default 0.5 * @member {number} */ - this.smoothEdge2 = 0; + this.clampMargin = 0.5; } /** diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 95a0b61..8c8b75d 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -146,22 +146,23 @@ * Experimental! * Changes frame clamping * Works with TilingSprite and Mesh - * By default, clamps bottom and right edge of texture. - * Change to 0 if you texture has repeated right and bottom lines, that leads to smoother borders - * @default 1 + * 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} */ - this.smoothEdge1 = 1; + this.clampOffset = 0; /** * Experimental! * Changes frame clamping * Works with TilingSprite and Mesh * Change to 0 to add a pixel to the edge, recommended for transparent trimmed textures in atlas - * @default 0 + * IN REAL PIXELS + * @default 0.5 * @member {number} */ - this.smoothEdge2 = 0; + this.clampMargin = 0.5; } /** diff --git a/src/core/textures/TextureTransform.js b/src/core/textures/TextureTransform.js index 6dfa2d9..f914c18 100644 --- a/src/core/textures/TextureTransform.js +++ b/src/core/textures/TextureTransform.js @@ -17,7 +17,9 @@ this.mapCoord = new Matrix(); - this.frameClamp = new Float32Array(4); + this.clampFrame = new Float32Array(4); + + this.clampOffset = new Float32Array(2); this._lastTextureID = -1; @@ -80,11 +82,14 @@ } const texBase = tex.baseTexture; - const frame = this.frameClamp; + const frame = this.clampFrame; + const margin = tex.clampMargin / texBase.resolution; - frame[0] = (tex._frame.x + tex.smoothEdge2) / texBase.width; - frame[1] = (tex._frame.y + tex.smoothEdge2) / texBase.height; - frame[2] = (tex._frame.x + tex._frame.width - tex.smoothEdge1 + tex.smoothEdge2) / texBase.width; - frame[3] = (tex._frame.y + tex._frame.height - tex.smoothEdge1 + tex.smoothEdge2) / texBase.height; + frame[0] = (tex._frame.x + margin) / texBase.width; + frame[1] = (tex._frame.y + margin) / texBase.height; + frame[2] = (tex._frame.x + tex._frame.width - margin) / texBase.width; + frame[3] = (tex._frame.y + tex._frame.height - margin) / texBase.height; + this.clampOffset[0] = tex.clampOffset / texBase.realWidth; + this.clampOffset[1] = tex.clampOffset / texBase.realHeight; } } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 95a0b61..8c8b75d 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -146,22 +146,23 @@ * Experimental! * Changes frame clamping * Works with TilingSprite and Mesh - * By default, clamps bottom and right edge of texture. - * Change to 0 if you texture has repeated right and bottom lines, that leads to smoother borders - * @default 1 + * 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} */ - this.smoothEdge1 = 1; + this.clampOffset = 0; /** * Experimental! * Changes frame clamping * Works with TilingSprite and Mesh * Change to 0 to add a pixel to the edge, recommended for transparent trimmed textures in atlas - * @default 0 + * IN REAL PIXELS + * @default 0.5 * @member {number} */ - this.smoothEdge2 = 0; + this.clampMargin = 0.5; } /** diff --git a/src/core/textures/TextureTransform.js b/src/core/textures/TextureTransform.js index 6dfa2d9..f914c18 100644 --- a/src/core/textures/TextureTransform.js +++ b/src/core/textures/TextureTransform.js @@ -17,7 +17,9 @@ this.mapCoord = new Matrix(); - this.frameClamp = new Float32Array(4); + this.clampFrame = new Float32Array(4); + + this.clampOffset = new Float32Array(2); this._lastTextureID = -1; @@ -80,11 +82,14 @@ } const texBase = tex.baseTexture; - const frame = this.frameClamp; + const frame = this.clampFrame; + const margin = tex.clampMargin / texBase.resolution; - frame[0] = (tex._frame.x + tex.smoothEdge2) / texBase.width; - frame[1] = (tex._frame.y + tex.smoothEdge2) / texBase.height; - frame[2] = (tex._frame.x + tex._frame.width - tex.smoothEdge1 + tex.smoothEdge2) / texBase.width; - frame[3] = (tex._frame.y + tex._frame.height - tex.smoothEdge1 + tex.smoothEdge2) / texBase.height; + frame[0] = (tex._frame.x + margin) / texBase.width; + frame[1] = (tex._frame.y + margin) / texBase.height; + frame[2] = (tex._frame.x + tex._frame.width - margin) / texBase.width; + frame[3] = (tex._frame.y + tex._frame.height - margin) / texBase.height; + this.clampOffset[0] = tex.clampOffset / texBase.realWidth; + this.clampOffset[1] = tex.clampOffset / texBase.realHeight; } } diff --git a/src/extras/webgl/TilingRenderer.js b/src/extras/webgl/TilingRenderer.js index c6634ed..32e6ea3 100644 --- a/src/extras/webgl/TilingRenderer.js +++ b/src/extras/webgl/TilingRenderer.js @@ -74,7 +74,8 @@ const baseTex = tex.baseTexture; const lt = ts.tileTransform.localTransform; const uv = ts.uvTransform; - let isSimple = tex.frame.width === baseTex.width && tex.frame.height === baseTex.height; + let isSimple = baseTex.isPowerOfTwo + && tex.frame.width === baseTex.width && tex.frame.height === baseTex.height; // auto, force repeat wrapMode for big tiling textures if (isSimple) @@ -123,6 +124,7 @@ { shader.uniforms.uMapCoord = uv.mapCoord.toArray(true); shader.uniforms.uFrame = uv.frameClamp; + shader.uniforms.uClampOffset = tex.uClampOffset; } shader.uniforms.uTransform = tempMat.toArray(true); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 95a0b61..8c8b75d 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -146,22 +146,23 @@ * Experimental! * Changes frame clamping * Works with TilingSprite and Mesh - * By default, clamps bottom and right edge of texture. - * Change to 0 if you texture has repeated right and bottom lines, that leads to smoother borders - * @default 1 + * 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} */ - this.smoothEdge1 = 1; + this.clampOffset = 0; /** * Experimental! * Changes frame clamping * Works with TilingSprite and Mesh * Change to 0 to add a pixel to the edge, recommended for transparent trimmed textures in atlas - * @default 0 + * IN REAL PIXELS + * @default 0.5 * @member {number} */ - this.smoothEdge2 = 0; + this.clampMargin = 0.5; } /** diff --git a/src/core/textures/TextureTransform.js b/src/core/textures/TextureTransform.js index 6dfa2d9..f914c18 100644 --- a/src/core/textures/TextureTransform.js +++ b/src/core/textures/TextureTransform.js @@ -17,7 +17,9 @@ this.mapCoord = new Matrix(); - this.frameClamp = new Float32Array(4); + this.clampFrame = new Float32Array(4); + + this.clampOffset = new Float32Array(2); this._lastTextureID = -1; @@ -80,11 +82,14 @@ } const texBase = tex.baseTexture; - const frame = this.frameClamp; + const frame = this.clampFrame; + const margin = tex.clampMargin / texBase.resolution; - frame[0] = (tex._frame.x + tex.smoothEdge2) / texBase.width; - frame[1] = (tex._frame.y + tex.smoothEdge2) / texBase.height; - frame[2] = (tex._frame.x + tex._frame.width - tex.smoothEdge1 + tex.smoothEdge2) / texBase.width; - frame[3] = (tex._frame.y + tex._frame.height - tex.smoothEdge1 + tex.smoothEdge2) / texBase.height; + frame[0] = (tex._frame.x + margin) / texBase.width; + frame[1] = (tex._frame.y + margin) / texBase.height; + frame[2] = (tex._frame.x + tex._frame.width - margin) / texBase.width; + frame[3] = (tex._frame.y + tex._frame.height - margin) / texBase.height; + this.clampOffset[0] = tex.clampOffset / texBase.realWidth; + this.clampOffset[1] = tex.clampOffset / texBase.realHeight; } } diff --git a/src/extras/webgl/TilingRenderer.js b/src/extras/webgl/TilingRenderer.js index c6634ed..32e6ea3 100644 --- a/src/extras/webgl/TilingRenderer.js +++ b/src/extras/webgl/TilingRenderer.js @@ -74,7 +74,8 @@ const baseTex = tex.baseTexture; const lt = ts.tileTransform.localTransform; const uv = ts.uvTransform; - let isSimple = tex.frame.width === baseTex.width && tex.frame.height === baseTex.height; + let isSimple = baseTex.isPowerOfTwo + && tex.frame.width === baseTex.width && tex.frame.height === baseTex.height; // auto, force repeat wrapMode for big tiling textures if (isSimple) @@ -123,6 +124,7 @@ { shader.uniforms.uMapCoord = uv.mapCoord.toArray(true); shader.uniforms.uFrame = uv.frameClamp; + shader.uniforms.uClampOffset = tex.uClampOffset; } shader.uniforms.uTransform = tempMat.toArray(true); diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 1e70b07..13fb147 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -4,11 +4,11 @@ uniform vec4 uColor; uniform mat3 uMapCoord; uniform vec4 uFrame; -uniform vec2 uPixelSize; +uniform vec2 uClampOffset; void main(void) { - vec2 coord = mod(vTextureCoord, vec2(1.0, 1.0)); + vec2 coord = mod(vTextureCoord - uClampOffset, vec2(1.0, 1.0)) + uClampOffset; coord = (uMapCoord * vec3(coord, 1.0)).xy; coord = clamp(coord, uFrame.xy, uFrame.zw);