Jump to content

Add raw WebGL texture to Pixi.js


Recommended Posts


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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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()
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

    setTimeout(function() {
    }, 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) {
    }, 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?

Link to comment
Share on other sites

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;

	return texture;

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...