question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PIXI fails to create a Filter from custom shader code

See original GitHub issue

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)

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:3
  • Comments:30 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
germansokolov13commented, Feb 16, 2018

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?

1reaction
germansokolov13commented, Feb 15, 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

Read more comments on GitHub >

github_iconTop Results From Across the Web

PIXI fails to create a Filter from custom shader code #4476
I am struggling to get a custom Filter with my own shader code working with this error message: VertexArrayObject.js:171 Uncaught TypeError: ...
Read more >
beginner question: using shaders in pixi v4 (custom filter)
Hi, this is my first time using shaders and the new filters in ... My goal is to create custom button hovers with...
Read more >
ShaderToy to PIXI js Filter - Stack Overflow
This project is very important to me. I'm still beginner with WebGl, but willing to learn. javascript · canvas · shader · webgl...
Read more >
PixiJS Filters - cjgammon
The real power of filters comes when you discover they are simply GLSL shaders and you can create your own custom filters. GLSL...
Read more >
PixiJS Part 7: Filters - YouTube
PixiJS is a 2D Graphics Rendering library for the web. In this episode I discuss Filters and how you can use them to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found