Working example with v3v?

[dmko]

I'm trying to pass an array of vec3's for use in a palette lookup... I tried the following but no dice:

 

  //SHADER CODE:

  precision mediump float;

  uniform vec3 palette[1];
  varying vec2 vTextureCoord;

  void main() {

    vec3 pColor = palette[0];
    gl_FragColor.r = pColor.r;
    gl_FragColor.g = pColor.g;
    gl_FragColor.b = pColor.b;
    gl_FragColor.a = 1.0;


  }

//FILTER:

var PaletteFilter = function(initPalettes) {
      var vertexShader = $("#default-vertex-shader").text();
      var fragmentShader = $("#palette-fragment-shader").text();
      PIXI.Filter.call(this, vertexShader, fragmentShader, {
          palette: {
            type: 'v3v',
            value: initPalettes
          }
      });

  }

  PaletteFilter.prototype = Object.create(PIXI.Filter.prototype);
  PaletteFilter.prototype.constructor = PaletteFilter;
  Object.defineProperties(PaletteFilter.prototype, {

      lPalettes: {
          get: function() {
              return this.uniforms.palette;
          },
          set: function(value) {
              this.uniforms.palette = value;
          }
      },
  });

//Called like:

graphics.filters = [new RGBA_LETTERS.LettersPaletteFilter([
        {x: 0xFF, y: 0xFF, z: 0xFF}
        //tried other stuff like PIXI.utils.hex2rgb(0x00FFFF)
      ])];

 

[ivan.popelyshev]

You didnt post complete example that I can just paste at http://pixijs.github.io/pixi-examples-v2/#/basics/basic.js and look how it works

OK, lets look at https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/managers/FilterManager.js#L231 and https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/filters/Filter.js#L36

It seems that pixiv4 ignores type you assign to that thing in uniformData. Also, it doesn't know {x:0,y:0,z:0} format, so you have to pass Float32Array(3) as a value

[dmko]

Thanks! Using an array of floats did the trick: https://jsfiddle.net/jaab3wr6/1/

Followup questions: how to get from a float to int in shader? see line 19 in the HTML... seems like this is not so simple, e.g. http://www.john-smith.me/hassles-with-array-access-in-webgl--and-a-couple-of-workarounds

Also, to use a shader for creating textures rather than modifying existing ones - is a sane/good way, i.e. a new graphics.drawRect() ?

Gotta run, much appreciated!!

Edited August 19, 2016 by dmko
added pIndex default