将 Pixijs v3 AbstractFilter 转换为 v4 Filter

Question

I'm trying to convert a custom shader for Pixi v3 to v4.

The original article is here: http://www.awwwards.com/a-gentle-introduction-to-shaders-with-pixi-js.html

the associated CodePen here http://codepen.io/omarshe7ta/pen/xVeWWy

So far, I've got this:

function CustomFilter(fragmentSource) {
  PIXI.Filter.call(this,
      null,
      fragmentSource
  );
}
CustomFilter.prototype = Object.create(PIXI.Filter.prototype);
CustomFilter.prototype.constructor = CustomFilter;

// smoke shader
var shaderCode = document.getElementById('fragShader').innerHTML
var smokeShader = new CustomFilter(shaderCode);    
smokeShader.uniforms.resolution[0] = width;
smokeShader.uniforms.resolution[1] = height;
smokeShader.uniforms.alpha = 1.0;
smokeShader.uniforms.shift = 1.6;
smokeShader.uniforms.time = 0;
smokeShader.uniforms.speed[0] = 0.7;
smokeShader.uniforms.speed[1] = 0.4;

var bg = PIXI.Sprite.fromImage("pixi_v3_github-pad.png");
bg.width = width;
bg.height = height;
bg.filters = [smokeShader]
stage.addChild(bg);

var logo = PIXI.Sprite.fromImage("pixi_v3_github-pad.png");
logo.x = width / 2;
logo.y = height / 2;
logo.anchor.set(0.5);
logo.blendMode = PIXI.BLEND_MODES.ADD;
stage.addChild(logo)

var count = 0

animate()

function animate() {
  requestAnimationFrame(animate);

  count += 0.01
  smokeShader.uniforms.time = count;

  renderer.render(stage);
}

Edge runs it fine

Chrome throws an error

pixi.min.js:13 Uncaught TypeError: Cannot read property 'value' of undefined
    at e.syncUniforms (pixi.min.js:13)
    at e.applyFilter (pixi.min.js:13)
    at CustomFilter.t.apply (pixi.min.js:13)
    at e.popFilter (pixi.min.js:13)
    at e.renderAdvancedWebGL (pixi.min.js:10)
    at e.renderWebGL (pixi.min.js:10)
    at e.renderWebGL (pixi.min.js:10)
    at e.render (pixi.min.js:13)
    at animate (shader-v4.html:123)
    at shader-v4.html:113

FireFox throws an error then crashes the computer.

t.uniforms.data[u] is undefined

Anyone have ideas what's wrong and how fix it?

TIA

Answer 1

The variable

uniform float alpha

is not used, so presumably optimised away when the shader is compiled. However, CustomFilter seems oblivious to the fact.

Removing "alpha" from the code solves the problem, commenting it out doesn't. Presumably the shader source is "dumbly" parsed for uniforms and attributes - comments aren't taken into account.

I believe Pixi now uses glsify, so it looks like glslify may have a shortcoming.