Jump to content

createShaderPlugin Helper Function


Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 year later...


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'; 


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


Link to comment
Share on other sites


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.

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.

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.


  • Recently Browsing   0 members

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