Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

379
Visualizações
How to make a position-based fragment shader work in PIXI.js?

I'm recreating the classic SPACE INVADERS game, and currently I'm working on writing a shader that will mimic the look of the screen overlay on the retro consoles. (They would put a massive sticker over the entire monitor to simulate color. Similar to what can be seen in this video)

I'm working on getting a very crude version of the shader working at the moment, and this is what I have so far when I noticed a very breaking issue:

varying vec2 vTextureCoord;
uniform sampler2D uSampler;

void main(){
    if(texture2D(uSampler, vTextureCoord).r > 0.0)
        if(vTextureCoord.y < 0.1)
            gl_FragColor = vec4(1.0,0,0,1.0);
        else
            gl_FragColor = vec4(1.0,1.0,1.0,1.0);
        else
            gl_FragColor = texture2D(uSampler, vTextureCoord);
}

Notice that I'm determining the color of the pixels according to their position relative to their parent container, saying all pixels in the top 10% of the container should be red, and the rest should keep their original color. However, as the aliens move down the screen the container constantly re-positions and re-sizes to perfectly contain every alien, and this causes the top row of aliens to always be red because the top 10% of the container moves downwards with them. This can be seen especially clearly if I tell the shader to always output a single color (for example, white). The container becomes a massive white block moving back and forth and downward across the screen.

And, a related issue is that since I'm using nearest-neighbor scaling, the constant resizing of the parent container also causes the pixels to shift around constantly which looks horrible. If I don't apply any shaders at all this issue is not seen, but if I apply any shader, even one that always returns the input color, then suddenly the pixels start to shift around constantly.

How should I go about fixing this? My initial thought was to lock the parent container in place and allow the children to move around inside it without it moving with them, but after reading this thread it seems that the maintainers of PIXI are well aware that locking the position and bounds of a container is a big no-no and never going to be possible without manual overrides (which I'd be willing to do, but worried it would break a ton of other things)

Is there another way to fix this issue? How can I apply this shader (to every element in the game) while guaranteeing that its origin point will never move? Or should I be going about this from a totally different direction?

about 4 years ago · Santiago Trujillo
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda