Add raw WebGL texture to Pixi.js

[Siddi]

Hi,

I want to create a PIXI.Texture from a WebGL texture. Unfortunately, I have not managed this yet. My WebGL texture is created in the same WebGL renderer context as Pixi with "app.renderer.gl.createTexture()", this works. Then I tried to hang the texture on an existing PIXI.Texture:

sprite.texture.baseTexture._glTextures[app.renderer.CONTEXT_UID].texture = myWebglTexture

Even without the above line of code, my WebGL texture is inserted into the canvas element and always swaps the texture of the last sprite loaded in Pixi (Change-Texture.mp4).

Unfortunately I cannot swap my WebGL Texture with a texture of a specific sprite :-(

 This approach has unfortunately not worked:

Does anyone have an idea?

Thank you for your support!

[ivan.popelyshev]

I'm sure your case is valid. Do you want ot generate texture?

"PIXI.glCore.GLTexture" is the type you have to look up: https://github.com/pixijs/pixi-gl-core/blob/master/src/GLTexture.js .  If you create that thing, then you'll be able to put it anywhere. I recommend to look up. May be you'll have to override "upload" or some other functions there.

Good news! There'll be special API for those kind of things in v5, PR just got merged and it was very heavy fight. https://github.com/pixijs/pixi.js/pull/4507 No examples yet, but its possible to configure custom texture uploading process, or even generate it manually by creating your own TextureResource.

[Siddi]

Thanks for your answer!

Interesting new features in version 5. I can not wait for it to be released ;-)

I tried to use PIXI.glCore.GLTexture.fromSource(). First, three sprites are loaded and added to the Stage:

const loader = new PIXI.loaders.Loader()
loader.add(`../../var/textures/tiles/20/301520/354150.png`)
loader.add(`../../var/textures/tiles/20/301521/354150.png`)
loader.add(`../../var/textures/tiles/20/301522/354150.png`)
let x = 100
loader.load(function(loader, resources) {
    let sprites = []
    for (let id in resources) {
        let sprite = new PIXI.Sprite(resources[id].texture)
        sprite.width = sprite.height = 100
        sprite.x = x
        sprite.y = 100
        x += 100
        sprites.push(sprite)
    }

    app.stage.addChild(...sprites)
    
    setTimeout(function() {
        loadWebGlTexture()
    }, 1000)
})

After one second, loadWebGlTexture() is called:

function loadWebGlTexture() {

    const url = `../../var/textures/tiles/20/301436/354176.png`

    let image = new Image()
    image.addEventListener('load', function () {
        let texture = PIXI.glCore.GLTexture.fromSource(app.renderer.gl, image, false)
    }, false)
    image.addEventListener('error', function(error) {
        console.error(error)
    }, false)
    image.src = url
}

Inside this function, as soon as the line "PIXI.glCore.GLTexture.fromSource" is called, the last added Sprite turns black:

 

I still don't know why the texture is automatically exchanged? Do you have any idea?

[ivan.popelyshev]

Can you debug it, when exactly "upload" method of GLTexture is called?

[Siddi]

It is called only once, just inside the fromSource-method:

Texture.fromSource = function(gl, source, premultiplyAlpha)
{
	var texture = new Texture(gl);
	texture.premultiplyAlpha = premultiplyAlpha || false;
	texture.upload(source);

	return texture;
};

After this call, the third Sprite turns black...

[Siddi]

I just found out, that if I add the line 

sprites.forEach(sprite => app.renderer.unbindTexture(sprite.texture))

before calling

sprite._texture.baseTexture._glTextures[app.renderer.CONTEXT_UID].texture = tex.data

it works, but I don't know why?

[ivan.popelyshev]

Oh , right. Renderer holds "boundTextures" variable which you have to reset somehow, or set to texture if you used particular location. I hate cache variables for that

[Siddi]

So, is it best to call

app.renderer.reset()

?

[ivan.popelyshev]

Unbind works just fine.

[Siddi]

Thank you for your support!!