Pixi.js: Texture: Using different wrapMode's with the same source

[mudcube]

Expected Behavior

When calling Texture.from(source, options) would expend the the options would be obeyed.

Current Behavior

Obeys the options when creating the initial baseTexture, but does not for future calls.

Possible Solution

Move wrapMode up to the Texture (from BaseTexture) so the same source can support multiple wrapModes

Steps to Reproduce

var canvas = document.createElement('canvas')
var a = PIXI.Texture.from(canvas, {wrapMode: PIXI.WRAP_MODES.CLAMP})
var b = PIXI.Texture.from(canvas, {wrapMode: PIXI.WRAP_MODES.REPEAT})

console.log(
    a.baseTexture.wrapMode === PIXI.WRAP_MODES.CLAMP, 
    b.baseTexture.wrapMode === PIXI.WRAP_MODES.REPEAT
)

Environment

• pixi.js version: 5.3.3
• Browser & Version: Chrome 85
• OS & Version: _e.g. Mac 10.15.3
• Running Example: https://www.pixiplayground.com/#/edit/-WP9vXHbw2ajyRVvsxID-

[ivanpopelyshev]

webgl2 + texture samplers can solve that, but nobody tried to add it in pixi yet.

Its strange that we obey that option if baseTexture is already created.

[SukantPal]

This is because of the TextureCache:

https://github.com/pixijs/pixi.js/blob/9ff49a23670bdb0ed864d4e53fb91d524eab59f2/packages/core/src/textures/Texture.ts#L383

For now, the better option would not to use the factory method and create the base-texture yourself:

const baseTexture = new BaseTexture(canvas as HTMLCanvasElement, { wrapMode: WRAP_MODES.REPEAT });
const texture = new Texture(baseTexture);

This will create two separate, independent textures. I don't know if there is a better solution that can use the same WebGL texture, although I doubt it.

[SukantPal]

@bigtimebuddy I don't think we need to fix this, because the normative usage of Texture.from assumes you want to use the texture cache. Documenting this behavior should be fine.

[bigtimebuddy]

I agree @SukantPal.

Also, it's important to note that wrapMode is a _BaseTexture property_ not a Texture property. The Texture.from options are a pass-thru to BaseTexture (this is already noted in the docs for Texture.from), so what @mudcube wants here isn't actually possible without having two BaseTexture objects.

PR is welcome if someone would like add more context about how Texture.from automatically adds things to the TextureCache. The caching behavior is already mentioned in BaseTexture.from.

@mudcube: I would suggest the above and not use Texture.from and manually create a new BaseTexture OR clone your canvas and pass each canvas into Texture.from and that should also work.

[mudcube]

Thank you for these great recommendations, works like a charm :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.