Pixi v3 and custom filter throwing errors

[Adbury]

hi,

 

I am new to this forum. I have been trying to use a glow filter it found at  http://codepen.io/mishaa/pen/raKzrm.

 

but it seems that it's been made for v2. 

 

This is how I am trying to set filter to the text.

function setFilter() {                bigtxt.filters = [            new GlowFilter(                bigtxt.width,                bigtxt.height,                parseFloat(15),                parseFloat(2),                parseFloat(0),                parseInt(2, 16),                parseFloat(15)            )        ];    };

this is the glow filter code form codepen

var GlowFilter = function (textureWidth, textureHeight, distance, outerStrength, innerStrength, color, quality) {    PIXI.AbstractFilter.call(this);    quality = Math.pow(quality, 1/3);    this.quality = quality;    distance *= quality;    textureWidth *= quality;    textureHeight *= quality;    this.uniforms = {        distance: {type: '1f', value: distance},        outerStrength: {type: '1f', value: null},        innerStrength: {type: '1f', value: null},        glowColor: {type: '4f', value: null},        pixelWidth: {type: '1f', value: null},        pixelHeight: {type: '1f', value: null},    };    this.color = color;    this.outerStrength = outerStrength;    this.innerStrength = innerStrength;    this.textureWidth = textureWidth;    this.textureHeight = textureHeight;    this.passes = [this];    this.fragmentSrc = [        'precision mediump float;',        'varying vec2 vTextureCoord;',        'uniform sampler2D texture;',        'uniform float distance;',        'uniform float outerStrength;',        'uniform float innerStrength;',        'uniform vec4 glowColor;',        'uniform float pixelWidth;',        'uniform float pixelHeight;',        'vec2 px = vec2(pixelWidth, pixelHeight);',        'void main(void) {',        '    const float PI = 3.14159265358979323846264;',        '    vec4 ownColor = texture2D(texture, vTextureCoord);',        '    vec4 curColor;',        '    float totalAlpha = 0.;',        '    float maxTotalAlpha = 0.;',        '    float cosAngle;',        '    float sinAngle;',        '    for (float angle = 0.; angle <= PI * 2.; angle += ' + (1 / quality / distance).toFixed(7) + ') {',        '       cosAngle = cos(angle);',        '       sinAngle = sin(angle);',        '       for (float curDistance = 1.; curDistance <= ' + distance.toFixed(7) + '; curDistance++) {',        '           curColor = texture2D(texture, vec2(vTextureCoord.x + cosAngle * curDistance * px.x, vTextureCoord.y + sinAngle * curDistance * px.y));',        '           totalAlpha += (distance - curDistance) * curColor.a;',        '           maxTotalAlpha += (distance - curDistance);',        '       }',        '    }',        '    maxTotalAlpha = max(maxTotalAlpha, 0.0001);',        '    ownColor.a = max(ownColor.a, 0.0001);',        '    ownColor.rgb = ownColor.rgb / ownColor.a;',        '    float outerGlowAlpha = (totalAlpha / maxTotalAlpha)  * outerStrength * (1. - ownColor.a);',        '    float innerGlowAlpha = ((maxTotalAlpha - totalAlpha) / maxTotalAlpha) * innerStrength * ownColor.a;',        '    float resultAlpha = (ownColor.a + outerGlowAlpha);',        '    gl_FragColor = vec4(mix(mix(ownColor.rgb, glowColor.rgb, innerGlowAlpha / ownColor.a), glowColor.rgb, outerGlowAlpha / resultAlpha) * resultAlpha, resultAlpha);',        '}'    ];};GlowFilter.prototype = Object.create(PIXI.AbstractFilter.prototype);GlowFilter.prototype.constructor = GlowFilter;

I get these errors

 

 

ERROR: 0:1: ',' : syntax error 

 

Quad.js:122WebGL: INVALID_VALUE: attachShader: no object or object deleted

Quad.js:129Pixi.js Error: Could not initialize shader.Shader.compile @ Quad.js:129Shader.init @ Quad.js:63Shader @ Quad.js:51TextureShader @ Sprite.js:92AbstractFilter.getShader @ MaskManager.js:7AbstractFilter.applyFilter @ MaskManager.js:29FilterManager.popFilter @ StencilManager.js:156Container.renderWebGL @ Graphics.js:119Text.renderWebGL @ RenderTexture.js:42Container.renderWebGL @ Graphics.js:131WebGLRenderer.renderDisplayObject @ FilterManager.js:132WebGLRenderer.render @ FilterManager.js:107update @ glow.js:126init @ glow.js:115

Quad.js:130gl.VALIDATE_STATUS falseShader.compile @ Quad.js:130Shader.init @ Quad.js:63Shader @ Quad.js:51TextureShader @ Sprite.js:92AbstractFilter.getShader @ MaskManager.js:7AbstractFilter.applyFilter @ MaskManager.js:29FilterManager.popFilter @ StencilManager.js:156Container.renderWebGL @ Graphics.js:119Text.renderWebGL @ RenderTexture.js:42Container.renderWebGL @ Graphics.js:131WebGLRenderer.renderDisplayObject @ FilterManager.js:132WebGLRenderer.render @ FilterManager.js:107update @ glow.js:126init @ glow.js:115

Quad.js:131gl.getError() 1281Shader.compile @ Quad.js:131Shader.init @ Quad.js:63Shader @ Quad.js:51TextureShader @ Sprite.js:92AbstractFilter.getShader @ MaskManager.js:7AbstractFilter.applyFilter @ MaskManager.js:29FilterManager.popFilter @ StencilManager.js:156Container.renderWebGL @ Graphics.js:119Text.renderWebGL @ RenderTexture.js:42Container.renderWebGL @ Graphics.js:131WebGLRenderer.renderDisplayObject @ FilterManager.js:132WebGLRenderer.render @ FilterManager.js:107update @ glow.js:126init @ glow.js:115

Quad.js:136Pixi.js Warning: gl.getProgramInfoLog() missing shaders

 

Am absolutely not sure how to fix this.

 

If any of you guys could help me with this it would be great.

 

Thanka in advance.

[xerver]

It says there is a syntax error in your shader, a rogue ',' it looks like. You are also not initializing the shader properly, you are using the v2 method of setting up custom uniforms and shaders.

 

In any event I already converted this shader for v3:

 

https://github.com/pixijs/pixi-extra-filters

[Gorgi Kakasevski]

I have the same problem, the filter which I found here http://codepen.io/mishaa/pen/raKzrm give me an error (Cannot read property 'prototype' of undefined) when I try to use with v3 and v4. I found pixi-extra-filters but I can't include in my project (or I don't know how).

If anyone could provide us 'hello world' example with glow filter will be great. Cheers

[ivan.popelyshev]

Can you provide codepen with pixi v4 and how did you convert it?

[Gorgi Kakasevski]

I didn't convert it. I just try to replace pixi.js library with the new one.

[Madmicra]

@xerver I was looking to use a glowfilter in V3 also recently and tried to use the ones you mentioned, but they didn't work, it wasn't converted right. It wasn't able to apply the parameters to the Frag code correctly.  I've not tried it since so don't know if it has been fixed since.

I amended it myself in the end that worked on the setup I created. I added markers in the frag code for string replace as it's was still trying to run javascript in it to get values.

quality / distance).toFixed(7) replaced with %ANGLE%

distance.toFixed(7) replaced with %DISTANCE%

I then loaded modified vert and frag as resources to be passed. And next extracted the filter itself and put it in it's own class, where I applied the string replace on the frag/vert.

Modified Vert/Frag: http://www.ele-web.co.uk/src/lib/glow.vert http://www.ele-web.co.uk/src/lib/glow.frag

Modified Filter:  http://www.ele-web.co.uk/src/lib/PixiGlowFilter.js Please be aware this is setup to use requireJS as I use that for my script loading. 

I was gonna do a bug report/pullrequest and fix it on the original (but obviously in the way that version is setup) but haven't had time.