Single-channel float data texture with WebGL2 context

Is it possible to create float data textures with PIXI v5? If so, how would I have to configure the BaseTexture?

I’ve tried the following but it doesn’t work:

const dataArray = new Float32Array([
  1.0, 0.1, 0.1,
  0.1, 0.75, 0.1,
  0.1, 0.1, 0.5,
]);

const createDataTexture = (data, width, height) => {
  const resource = new PIXI.resources.BufferResource(dataArray, { width, height });
  return new PIXI.BaseTexture(resource, {
    format: 0x822e, // gl.R32F 
    type: PIXI.FLOAT
  })
}

const dataTexture = createDataTexture(dataArray, 3, 3);

E.g., in this demo nothing is rendered, i.e., I assume the texture didn’t get loaded: https://jsfiddle.net/flek/pct2qugr/136/

However, if I blow-up the data and create a 4-channel float texture it works:

const array = new Float32Array([
  1.0, 0.1, 0.1, 1.0,  0.1, 0.1, 0.1, 1.0,  0.1, 0.1, 0.1, 1.0,
  0.1, 0.1, 0.1, 1.0,  0.75, 0.1, 0.1, 1.0,  0.1, 0.1, 0.1, 1.0,
  0.1, 0.1, 0.1, 1.0,  0.1, 0.1, 0.1, 1.0,  0.5, 0.1, 0.1, 1.0,
]);

const texture = PIXI.Texture.fromBuffer(array, 3, 3);

Notice how the first channel is identical.

Here’s the updated demo, which works as expected: https://jsfiddle.net/flek/pct2qugr/137/

• pixi.js version: 5.1.6
• Browser & Version: Chrome 80
• OS & Version: macOS 10.14.6
• Running Example: _https://jsfiddle.net/flek/pct2qugr/126/_

[blakjak44]

Hi all,

I’m very new at this but I’m trying to use this same strategy to render 16 bit unsigned integer data texture. However, it doesn’t look like Pixi supports the “usampler2d” uniform. Is there a way to support this uniform type so that I don’t need to convert to 32 bit float? If not, are there plans to add support?

[flekschas]

Thanks a lot for the quick reply and detailed response!

I ended up extending BufferResource and adjusted the format and internalFormat in upload(), which did the trick!

This is what I ended up doing:

class CustomBufferResource extends PIXI.resources.Resource {
  constructor(source, options) {
    const { width, height, internalFormat, format, type } = options || {};

    if (!width || !height || !internalFormat || !format || !type) {
      throw new Error(
        'CustomBufferResource width, height, internalFormat, format, or type invalid'
      );
    }

    super(width, height);

    this.data = source;
    this.internalFormat = internalFormat;
    this.format = format;
    this.type = type;
  }
    
  upload(renderer, baseTexture, glTexture) {
    const gl = renderer.gl;

    gl.pixelStorei(
      gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL,
      baseTexture.alphaMode === 1 // PIXI.ALPHA_MODES.UNPACK but `PIXI.ALPHA_MODES` are not exported
    );

    glTexture.width = baseTexture.width;
    glTexture.height = baseTexture.height;

    gl.texImage2D(
      baseTexture.target,
      0,
      gl[this.internalFormat],
      baseTexture.width,
      baseTexture.height,
      0,
      gl[this.format],
      gl[this.type],
      this.data
    );

    return true;
  }
}

const resource = new CustomBufferResource(dataArray, {
  width: 3,
  height: 3,
  internalFormat: 'R32F',
  format: 'RED',
  type: 'FLOAT'
});

Here’s the updated demo: https://jsfiddle.net/flek/pct2qugr/175/

I wonder if you could expose internalFormat as that seems to be the only limitation of BufferResource.