将 Pixjs v3 AbstractFilter 转换为 v4 过滤器答案

【问题标题】：Converting Pixijs v3 AbstractFilter to v4 Filter将 Pixjs v3 AbstractFilter 转换为 v4 过滤器
【发布时间】：2017-06-06 17:32:26
【问题描述】：

我正在尝试将 Pixi v3 的自定义着色器转换为 v4。

原文在这里： http://www.awwwards.com/a-gentle-introduction-to-shaders-with-pixi-js.html

此处关联的 CodePen http://codepen.io/omarshe7ta/pen/xVeWWy

到目前为止，我得到了这个：

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 运行良好

Chrome 报错

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 引发错误，然后计算机崩溃。

t.uniforms.data[u] is undefined

有人知道出了什么问题以及如何解决吗？

TIA

【问题讨论】：

标签： javascript fragment-shader pixi.js

【解决方案1】：

变量

uniform float alpha

未使用，因此可能在编译着色器时进行了优化。然而，CustomFilter 似乎忽略了这一事实。

从代码中删除“alpha”可以解决问题，而将其注释掉则不能。据推测，着色器源被“愚蠢地”解析为制服和属性 - cmets 未被考虑在内。

我相信 Pixi 现在使用的是 glsify，所以看起来 glslify 可能有缺点。

【讨论】：