Jump to content

Pixi.js and Phaser Displacement Filter


Recommended Posts

Having trouble implimenting Pixi in Phaser.

However i run into this problem below.  Files are located all correctly including core and abstractfilter and displacement filter.

Uncaught ReferenceError: require is not defined(anonymous function) @ VM10606:1c.Loader.fileComplete @ phaser.js:74078c.Loader.xhrLoad.f.onload @ phaser.js:73590

Any Clues?

I am using this forum for reference: 


Link to comment
Share on other sites

The console points me to this code but everything is in the correct places:

var core = require('../../core');
// @see https://github.com/substack/brfs/issues/25
var fs = require('fs');

 * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object.
 * You can use this filter to apply all manor of crazy warping effects
 * Currently the r property of the texture is used to offset the x and the g property of the texture is used to offset the y.
 * @class
 * @extends PIXI.AbstractFilter
 * @memberof PIXI.filters
 * @param sprite {PIXI.Sprite} the sprite used for the displacement map. (make sure its added to the scene!)
function DisplacementFilter(sprite, scale)
    var maskMatrix = new core.Matrix();
    sprite.renderable = false;

        // vertex shader
        fs.readFileSync(__dirname + '/displacement.vert', 'utf8'),
        // fragment shader
        fs.readFileSync(__dirname + '/displacement.frag', 'utf8'),
        // uniforms
            mapSampler:     { type: 'sampler2D', value: sprite.texture },
            otherMatrix:    { type: 'mat3', value: maskMatrix.toArray(true) },
            scale:          { type: 'v2', value: { x: 1, y: 1 } }

    this.maskSprite = sprite;
    this.maskMatrix = maskMatrix;

    if (scale === null || scale === undefined)
        scale = 20;

    this.scale = new core.Point(scale, scale);


Link to comment
Share on other sites

Here is my CODE

        this.load.script('abstracFilter', 'lib/filter/AbstractFilter.js');
        this.load.script('displacementFilter', 'lib/filter/pixi/DisplacementFilter.js');

var displacementTexture = PIXI.Texture.fromImage("assets/img/displacement_map.jpg");    
        displacementFilter = new PIXI.DisplacementFilter(displacementTexture);

countDisplace = 60;
        displacementFilter.offset.x = countDisplace * 10;
        displacementFilter.offset.y = countDisplace * 10;
        this.filter = [displacementFilter];


Link to comment
Share on other sites

  • 2 weeks later...
  • 1 year later...

Hello, Is there any update about this problems? I'm getting same problems texture.baseTexture.on is not a function

Also can anyone provide me an example how to using this displacement function? with mouse move event will be great.


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