Jump to content

Pixi custom filter access underlying pixels


Recommended Posts

Hello. I am trying to build a sort of "Line of sight" shader. I have the a tilemap which is just a Sprite sitting inside of a container. Then I am generating another texture dynamically which represents the "light" data.

I want to create a fragment shader to show/hide parts of this tilemap based on the light texture/

I am able to pass this texture into the shader, however I am seeing a problem that I think may be intended behavior, but I'm trying to figure out how to achieve my desired result.

The problem is it seems the fragment shader is operating on the screen rather than the underlying pixels in my Container. The container is scaled/translated so I have no way to know which true (non translated/scaled) pixel I am operating on within the shader (vTextureCoord seems to give me coordinates relative to the screen ?). Whereas the lightmap texture I am passing in does not have this same problem.

This is my first time playing around with pixi.js filters. Any suggestions ?

Link to comment
Share on other sites

Hi Ivan,

First off thanks for your response.

Unfortunately I think I did a poor job of communicating in my original post. Using mapCoord and unmapCoord in combination with the filterArea is a good start. Now I can use actual screen pixels in my fragment shader.

The missing piece then is how do I translate this back to the original pixels of my container ? For example if I have a Sprite within a container. Imagine the sprite is 200x200 pixels, but it sits inside of a container with 2x scale, and the container has some negative x and y position. How can I map the pixels from my filterArea back to the pixels of the original 200x200 image ? Lets say I want to say essentially in my fragment shader "If this pixel is in the upper left quadrant of the original image".

Is there some kind of transformation matrix I should pass in the shader in order to do this calculation ?

Hopefully I am making some sense here. I am pretty new to shaders and filters.


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