Javascript 将Pixijs v3 AbstractFilter转换为v4 Filter
我正在尝试将Pixi v3的自定义着色器转换为v4 原文如下: 这里关联的代码笔 到目前为止,我得到了这个:Javascript 将Pixijs v3 AbstractFilter转换为v4 Filter,javascript,fragment-shader,pixi.js,Javascript,Fragment Shader,Pixi.js,我正在尝试将Pixi v3的自定义着色器转换为v4 原文如下: 这里关联的代码笔 到目前为止,我得到了这个: function CustomFilter(fragmentSource) { PIXI.Filter.call(this, null, fragmentSource ); } CustomFilter.prototype = Object.create(PIXI.Filter.prototype); CustomFilter.prototype.co
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变量
uniform float alpha
未使用,因此可能在编译着色器时进行了优化。然而,CustomFilter似乎忽视了这一事实
从代码中删除“alpha”可以解决问题,而注释掉则不行。大概是对着色器源进行了“无声”的制服和属性分析——不考虑注释
我相信Pixi现在使用glsify,所以看起来glsify可能有一个缺点