Honest Coder

  • Content count

  • Joined

  • Last visited

  1. I would very much like to implement this using a shader or filters, not interested in canvas implementation so this will all be WebGL. I am specifically interested in making use of a vertex alpha channel for blending mesh grid vertices in overlays (is that even possible?) as well as applying tints that change across the grid, but I need to walk first before I can run and want to see. I found this as a starting point, though it doesn't seem to work with an alpha channel yet: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL But, this being my first experience with shaders, am struggling so far just to get this working. At the moment I am getting an error that property "location" is undefined, which seems to be an issue with uniforms. I also understand I may need to include some variables in the shader, but documentation is very week and most of the examples are fragment shaders. Having spent a whole day on this I'm seriously pulling my hair out, but I imagine this is a walk in the park for many familiar with shaders and the v4 filter system. var Lcolors=new Float32Array(16); for(var n=0;n<Lcolors.length;n++){Lcolors[n]=Math.random()} var vertexShader=[ "attribute vec3 aVertexPosition;", "attribute vec4 aVertexColor;", "", "uniform mat4 uMVMatrix;", "uniform mat4 uPMatrix;", "", "varying lowp vec4 vColor;", "", "void main(void) {", " gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);", " vColor = aVertexColor;", "}" ].join("\n"); var fragmentShader=[ "varying lowp vec4 vColor;", "", "void main(void) {", " gl_FragColor = vColor;", "}" ].join("\n"); var uniforms = { aVertexColor: { type: '4fv', value: Lcolors } }; var Lfilter=new PIXI.Filter(vertexShader,fragmentShader,uniforms);