這篇介紹 Texture / BaseTexture：
好像常看到他們，可是有不是很好理解

可以想像 Texture 是 Sprite 使用的材質，那 BaseTexture 是...?

從讀入 Sprite 的過程來理解 Texture

使用 Sprite 物件的時候，會把讀入的圖片變成 Texture / BaseTexture 使用

以 SPRITE - Basic 例子舉例：

const bunny = PIXI.Sprite.from('assets/basics/bunny.png');
app.stage.addChild(bunny);

可透過 PIXI.utils.TextureCache 與 PIXI.utils.BaseTextureCache 觀察 PIXI 裡 Texture 與 BaseTextureCache 的 快取狀態

雖然 key值 相同，但 Texture 與 BaseTexture 是不同的東西

放入很多兔子：

在一開始讀入後，便會有兔子的 Texture / BaseTexture 快取
因此再次使用的時候不會再存到快取內

[ Demo ]：

function createBunny(){
	const bunny = PIXI.Sprite.from('assets/basics/bunny.png');

	bunny.x = Math.random() * app.screen.width;
	bunny.y = Math.random() * app.screen.height;
	app.stage.addChild(bunny);
};

for(let i = 0; i<50; i++){
	createBunny();
};

檢查快取：

PIXI.utils.TextureCache：一個，assets/basics/bunny.png
PIXI.utils.BaseTextureCache：一個，assets/basics/bunny.png

不會再發 Request

Sprite.from() 的補充：

範例裡 PIXI.Sprite.from() 與 new PIXI.Sprite() 方法看起來很類似，
實際上也是相同的 - PIXI.Sprite.from()：

static from(source, options) {
    const texture = (source instanceof Texture)
        ? source
        : Texture.from(source, options);
    return new Sprite(texture);
}

從建構式來看 Texture 與 BaseTexture：

PIXI.Texture：

PIXI.Texture 的建構式會傳入 BaseTexture

並可從 Texture 實體取得相對應的 BaseTexture

由於有這樣的關係，因此 不同的 Texture 可以有 相同的 BaseTexture

各種測試：

1. 不同方式讀入同一張圖片：

讀入時會檢查快取，由於路徑相同 - Texture 與 BaseTexture 相同。

const bunny = PIXI.Sprite.from('assets/basics/bunny.png');
const texture1 = PIXI.Texture.from('assets/basics/bunny.png');

console.log(bunny.texture === texture1);
// true

console.log(bunny.texture.baseTexture === texture1.baseTexture);
// true

2. 讀入的網址不同時：

網址不同，快取位置不同 - Texture 與 BaseTexture 皆不相同。

const texture1 = PIXI.Texture.from('assets/basics/bunny.png');
const texture2 = PIXI.Texture.from('assets/basics/bunny.png?v=2');

console.log(texture2 === texture1);
// false

console.log(texture2.baseTexture === texture1.baseTexture);
// false

3. 使用 new Texture() 建立 Texture，放的是同一個 BaseTexture：

Texture 不同，BaseTexture 相同

const testBaseTexture = new PIXI.BaseTexture('assets/basics/bunny.png?v=3');
const texture3 = new PIXI.Texture(testBaseTexture);
const texture4 = new PIXI.Texture(testBaseTexture);
console.log(texture4 === texture3);
// false

console.log(texture4.baseTexture === texture3.baseTexture);
// true

[ Demo ]

另一個 texture 與 baseTexture 不同的情形：

使用 spriteSheet 時，
PixiJS 會依據 JSON 裡面的物件，將每個部分的圖檔生成一個 Texture，但 BaseTexture 是 同一個。

[ Demo] ：

參考討論：

Difference between texture and baseTexture?