Jump to content

Shader Texture Oddness


RichJ
 Share

Recommended Posts

I'm trying to render a sprite using a shader that takes a texture as a parameter and combines the sprite with that texture, so the desired outcome is the texture being overlaid onto the original sprite texture.  They successfully combine, but the texture passed in appears slightly scaled up and therefore misaligned with the sprite texture.  I'm new to shaders, so I hope I haven't missed something obvious.  Pulling my hair out with this one.  Here's an example fiddle

 

Link to comment
Share on other sites

The easiest way to position second texture is to use  an extra sprite, and then calculate their relative matrices. 

https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters

Look at DisplacementFilter code, its using extra sprite: https://github.com/pixijs/pixi.js/tree/dev/src/filters/displacement . Dont forget that sprite has to be added to stage and made non-renderable, otherwise coordinates wont be calculated properly and coordinates is the thing we need from extra sprite.

If you need to use texture from an atlas for your extra sprite, look at how latest version of SpriteMaskFilter does it: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js#L59

Filters are made to cover containers and store the result in temporary framebuffer, thus there are problems with "mapCoord" and other coordinates-related stuff. Alternatively, you can make a sprite plugin: https://github.com/pixijs/pixi-plugin-example 

Link to comment
Share on other sites

Thanks for the tips, I'll take a look at all that info later today.  What I want to do with the extra texture is use it as masking information for the actual sprite, so this combining is just a test to see if the texture gets into the shaders ok, it's not what I actually want to do.  So when a pixel is transparent on the mask, I set gl_FragColor to 0,0,0,0 on the sprite texture and therefore suppress rendering of that pixel.  The mask texture will be generated dynamically in JS code.  I'm new to PIXI, there may be a better way of doing this.  I've used shaders to do this in the past with a Monogame project.

Link to comment
Share on other sites

Not sure about the number of sprites yet, just trying to get the technique to work, but if performance is a potential issue then I may abandon it.  The sprite mask stuff sounds interesting, I'll try that out shortly.  Thanks for the quick and very concise answers ;)

Link to comment
Share on other sites

Nice. Btw, dont forget that pixi has "tint" on sprites, so you can use it if you just need to fill a mask with single color. Also, there's `PIXI.Texture.WHITE` that has 10x10 size and you can make any rectangle/square sprite of any color with this texture. Those two things are handy in that field you are exploring right now.

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