question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PIXI.filters.DisplacementFilter Texture Not Repeating - Even with PIXI.WRAP_MODES.REPEAT

See original GitHub issue

I came across a couple of example posts that had suggested that setting a texture’s baseTexture wrapMode to PIXI.WRAP_MODES.REPEAT but this does not seem to work for me using Pixi 4.5.4. What I’ve tried:

Couple of things:

  1. splat is a splat image that will have the displacement filter
  2. splatDisplacement is the displacement image used to warp the splat image
// 'sprites' is an array of images that were successfully loaded
sprites.splat.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;  // nope
sprites.splatDisplacement.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;  // nope

splatDisplacementSprite =
            new PIXI.Sprite(sprites.splatDisplacement.texture);
splatDisplacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; // nope
splatSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; // nope

splatDisplacementFilter =
            new PIXI.filters.DisplacementFilter(splatDisplacementSprite);
splatDisplacementFilter.map.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT // nope

I’ve tried all of these individually, and then uncommented all of them to see if any combination has an affect.

Animation loop has this in it:

        if(splatDisplacementSprite) {
            splatDisplacementSprite.x += 2;
            splatDisplacementSprite.y += 2;
        }

The example for v4.x of Pixi doesn’t show an example where the texture has to repeat and unfortunately I cannot find any other docs or bugs reports that might suggest what, if anything, that I am doing wrong.

Any help, greatly appreciated.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:10

github_iconTop GitHub Comments

2reactions
ivanpopelyshevcommented, Aug 23, 2017

Yeah, I forgot to say in https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters#extra-texture-mapped-matrix , that texture has to be power-of-two size. Because OpenGL, WebGL and all that computer graphics stuff. WebGL cant repeat textures that are not power-of-two.

1reaction
ivanpopelyshevcommented, Aug 24, 2017

@majman You can describe what do you want to do in separate issue, and I’ll help you to use different things for it 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

PIXI.filters.DisplacementFilter Texture Not Repeating - Even ...
I came across a couple of example posts that had suggested that setting a texture's baseTexture wrapMode to PIXI.WRAP_MODES.REPEAT but this ...
Read more >
DisplacementFilter not repeating when moving displacement ...
When you load texture for displacement sprite, before you use it, do the following: "texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT".
Read more >
fancy screen effects by pixi (MZ version released!) | Page 4
Good to hear it worked again. Yes, I think it is just looping the map horizontal and vertical, I set a parameter wrapMode...
Read more >
PIXI.TilingSprite - PixiJS API Documentation
A tiling sprite is a fast way of rendering a tiling image. new PIXI.TilingSprite (texture, width, height) overrides.
Read more >
How to increase quality on a PixiJS canvas? - Stack Overflow
Try creating renderer using this code const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resolution: 1 ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found