Jump to content

Pixi v3 and custom filter throwing errors


Adbury
 Share

Recommended Posts

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.

Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

@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.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...