createShaderPlugin Helper Function

[Taz]

Here's a helper function I made to create each shader plugin with just a simple function call like this:

createShaderPlugin(name, vertShader, fragShader, uniformDefaults);

Then you can create each sprite that you want to be drawn with your custom shader like this:

var sprite = createShaderPluginSprite(name, size, uniforms);

Update: I started a GitHub repo for it here if you want to check it out.

I also made this little CodePen to demonstrate the usage with some comments.

The encapsulated code is based on the plugin example and on the worldTransform/vertices calculations that I boosted from PIXI.Sprite. I've tried to optimize and condense for the use case where the Sprite doesn't have any Texture to be filtered.

[ivan.popelyshev]

That's a good one You can also try to implement some kind of batching later. I advice you to host it on gist.github.com or just in some github repo.

[Taz]

I can start github repo later today Batching, hmm, I hadn't thought of optimizing for when multiple sprites are using same plugin and uniform values... To Be Continued...

Thanks for the feedback:)

 

UPDATE: GitHub repo for createShaderPlugin started here

[Taz]

Just a quick update: createShaderPlugin now works even after the renderer/app has been created, by simply passing renderer as the final parameter. If the renderer/app hasn't been created yet then this parameter can be omitted like before. Also there's now a little helper function to create a sprite and add all 3 plugin-related properties at once (OP and demo updated for this).

[bmd]

Hi,

Wondering if you could give an example of using createShaderPlugin with an added texture.

I tried passing a texture from PIXI loaded resources, but it paints only a black sprite.  I also tried assigning a texture to the sprite and using uSampler, but again only black.  I am absolutely sure the texture I am adding exists, as I can use it in a regular sprite without plugin.

 

Here is the javascript code:

 

createShaderPlugin('dicomImagePlugin',  null, document.getElementById('shaderTest5').text);

let app = new PIXI.Application({width: myGlobalObject.default_app_width, height: myGlobalObject.default_app_height, transparent: true, antialias: false, resolution: myGlobalObject.app_resolution, view: document.getElementById("mainCanvas")});
 

var testSprite = new PIXI.Sprite();
testSprite.pluginUniforms = {dicomTexture: PIXI.loader.resources["25"].texture};
testSprite.pluginSize = new PIXI.Point(512.0, 512.0);
testSprite.pluginName = 'dicomImagePlugin'; 
app.stage.addChild(testSprite);

 

Here is the shader code:

    varying vec2 vTextureCoord;
    uniform sampler2D dicomTexture;

    void main()
    {
      vec2 p = vTextureCoord;

      vec3 col = texture2D(dicomTexture,p).rgb;

     gl_FragColor = vec4(col,1.0);
    }

 

[ivan.popelyshev]

Hi! 

I remember that createShaderPlugin() didnt have necessary bindTextures() in it.

If you cant figure how to add texture there, and you need a working code, i can suggest  https://github.com/gameofbombs/pixi-heaven , but its more complex than createShaderPlugin.

Two-tint renderer,  just extra color: https://github.com/gameofbombs/pixi-heaven/blob/master/src/twotint/sprites/SpriteHeavenRenderer.ts

MAsked renderer : extra texture but extra matrix calculations: https://github.com/gameofbombs/pixi-heaven/blob/master/src/twotint/sprites/SpriteMaskedRenderer.ts

"Why is there no demo with just extra texture and no extra matrix in attributes" - "I'm sorry, i didnt need that case, figure out how to make it simpler"

Its much easier in pixi-v5, you just take a mesh and add a shader there, with any number of textures in uniform.