Need guidance on how to do some low level GL operations

[JoakimCh]

Hello,

My goal is to update a small part of a texture the fastest way possible with WebGL2, preferably using Pixi.js v5 (RC 3 is out).

Am I right that a RenderTexture is going to re-upload the whole texture whenever there is a change? (this would not be good for a big texture, hence why I am looking for another method)

I'm a complete noob when it comes to OpenGL, but I've googled a bit and figured that I can use gl.texSubImage2D() to upload just the part of the texture that I need to change. I didn't find a way to get the WebGLTexture object of a PIXI.Texture, so to be able to use that command I did something like this (not the complete code):

renderer.addSystem(PIXI.systems.TextureSystem)
renderer.TextureSystem.contextChange() // needed to do this
loader.load(main) // and could not use gl.texSubImage2D() on tex before the loader called main
function main() {
  let tex = resources['test'].texture
  let imgData = new Uint8Array(32*32*4)
  renderer.TextureSystem.bind(tex)
    renderer.gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData)
  renderer.TextureSystem.unbind(tex)
}

But I wish that I had the WebGLTexture available so I could avoid messing around with PIXI.systems.TextureSystem, because I don't really know much about it or when and how it should be used.

I also want to read the previous data and change it, I figured it can be done with:

gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData)

But that needs the frameBuffer to be binded first...
Hence I tried to also use the PIXI.systems.FramebufferSystem, lol:

renderer.framebufferSystem.bind(fb) //fb = new PIXI.Framebuffer(tex.width, tex.height).addColorTexture(0,tex)
gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData)

But it was not that easy, I didn't even find a way to unbind it. But I guess it is not supposed to be used for my little problem...?

Maybe there should be some Pixi.js functions to do this?
Maybe something similar to this:

texture.getPixels(x, y, width, height, ArrayBuffer)
texture.setPixels(x, y, width, height, ArrayBuffer)

I'm new here btw, this is my first post  I don't have much Pixi.js experience yet, but I really like it.

[ivan.popelyshev]

That's exactly why a year ago we've added this awesome API into v5. Right now v5 is almost there, and you can experiment with v5-rc3. I really hope that you like that system because I made it exactly for cases like yours, it was VERY difficult to explain to everyone in the team and get an approval. People need access to textures, authors of PixiJS cant possibly know everything that user wants.

This is how you get GLTexture: https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js

if you call "baseTexture.update()" somewhere before the frame, it will notify TextureSystem that texture needs updating , and then when one of pixi renderers asks to bind that texture, it will call "TextureResource.upload" method. That's how it happens: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/TextureSystem.js#L139

According to our main image resource, https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/BaseImageResource.js#L64, you can track the state not only by dirtyId, but also by "glTexture.width/height" . Basically, if width and height are wrong you upload whole texture, otherwise you go for subImage. 

As for previous data, readPixels is tricky thing, its the only synchronous operation there. When I use it, I call it only after whole render(), only one time.

I suggest to maintain your copy of teture independently from glTexture: in an array or in canvas in your TextureResource, that way you wont need to call readPixels().

SUMMARY: If glTexture width and height are wrong, upload whole array. Otherwise modify part of array you need, put that part into temporary array and call subImage. Dont forget to set width and height to correct values.

and HAPPY DEBUGGING!