pixijs: PIXI fails to create a Filter from custom shader code

I am struggling to get a custom Filter with my own shader code working with this error message:

VertexArrayObject.js:171 Uncaught TypeError: Cannot read property 'location' of undefined
    at VertexArrayObject.addAttribute (VM1006 pixi.js:2348)
    at Quad.initVao (VM1006 pixi.js:19874)
    at FilterManager.applyFilter (VM1006 pixi.js:18947)
    at Filter.apply (VM1006 pixi.js:18420)
    at FilterManager.popFilter (VM1006 pixi.js:18877)
    at Container.renderAdvancedWebGL (VM1006 pixi.js:9423)
    at Container.renderWebGL (VM1006 pixi.js:9360)
    at Container.renderWebGL (VM1006 pixi.js:9366)
    at WebGLRenderer.render (VM1006 pixi.js:17563)
    at Application.render (VM1006 pixi.js:8043)

Even the official example is failing with this bug: http://pixijs.io/examples/#/filters/filter-mouse.js

This error message has been related to some compiler optimizations where glslify removed some unused uniforms, which pixi still tried to access. But this even occurs with a completely static fragShader without any uniforms. gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0)

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 3
Comments: 30 (1 by maintainers)

Most upvoted comments

This is getting very strange. This code works fine:

varying vec2 vTextureCoord;
varying vec4 vColor;

uniform sampler2D uSampler;
uniform vec4 uTextureClamp;
uniform vec4 uColor;

void main(void)
{
    gl_FragColor = texture2D(uSampler, vTextureCoord);
    gl_FragColor.r = 0.0;
    gl_FragColor.g = 0.0;
    gl_FragColor.b = 0.0;
}

But if I add gl_FragColor.a = 0.0; to the end then it says Cannot read property 'location' of undefined. It seems as though I can only change 3 coords out of 4 at most. What is this? What is wrong?

germansokolov13 on Feb 16, 2018

You say it need texture coords and “sampler”. Was sample or sampler? A typo? I managed to make it working with the help of example. Thank you but. Why doesn’t this page mention these details? http://pixijs.io/examples/#/basics/custom-filter.js

germansokolov13 on Feb 15, 2018

@ivanpopelyshev Following your tutorial, i ran into the same issue. I applied a really hacky patch to pixi.js to make it work for me.

diff --git a/js/pixi.js b/js/pixi.js
index 363f09c..d0a321b 100644
--- a/js/pixi.js
+++ b/js/pixi.js
@@ -2344,6 +2344,9 @@ VertexArrayObject.prototype.activate = function()
  */
 VertexArrayObject.prototype.addAttribute = function(buffer, attribute, type, normalized, stride, start)
 {
+  if (!attribute) {
+    return this;
+  }
     this.attributes.push({
         buffer:     buffer,
         attribute:  attribute,

I know this is not a solution, but it enables me to play with shader codes in v4 until v5 is out. (with possibly a better fix) 😃

doebi on Nov 24, 2017