Pixijs v3 추상 필터를 v4 필터로 변환

Question

Pixi v3에서 v4로 사용자 정의 셰이더를 변환하려고합니다.

원래 문서는 여기에 있습니다 :

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); 
} 

가장자리가 잘

을 실행 : 여기에 지금까지 http://codepen.io/omarshe7ta/pen/xVeWWy

http://www.awwwards.com/a-gentle-introduction-to-shaders-with-pixi-js.html

관련 CodePen,이있어 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

Answer 1

가변

uniform float alpha 

는 쉐이더 컴파일 할 때 아마도 너무 멀리 최적화 사용되지 않는다. 그러나 CustomFilter는 사실을 알지 못합니다.

코드에서 "alpha"를 제거하면 문제가 해결되지만 해결되지는 않습니다. 아마 쉐이더 소스는 유니폼과 속성에 대해 "멍청하게"파싱됩니다. 주석은 고려되지 않았습니다.

저는 Pixi가 glsify를 사용한다고 생각합니다. 따라서 glslify에는 단점이있을 수 있습니다.