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...
TypeError: texture.baseTexture.on is not a function {stack: (...), message: "texture.baseTexture.on is not a function"}
  1. message: "texture.baseTexture.on is not a function"
  2. stack: (...)
  3. get stack: function () { [native code] }
  4. set stack: function () { [native code] }
  5. __proto__: Error
Link to comment
Share on other sites

  • 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


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...