Jump to content

Pixi.js Depthmap Help with Duplicate Image


Recommended Posts

Hi, I'm new to pixi.js, hopefully this is the right place where I can ask for some help.

Basically, as I drag my mouse, the depthmap works very well, but there's a copy in the background of the displaced image which I can't seem to get rid off.

My problem is best shown here (drag your mouse around):  http://wduwant.com/3d/hologram5.html

As you can see the depth map works nicely on the stormtrooper, but there is a copy of him floating in the background.

<script src="pixi.min.js"></script>
body {  margin: 0;  padding: 0;}
canvas {  width: 100%;  height: 100%}

w = 1920, h = 1080;
var renderer = new PIXI.WebGLRenderer(w, h);


var stage = new PIXI.Container();
var container = new PIXI.Container();
var foreground = new PIXI.Container();

var f;
var fg;

PIXI.loader.add('fg', 'test3d_files/stormtrooper4.png').load(function (loader, resources) {
  fg = new PIXI.Sprite(resources.fg.texture);

var mousex = w/2, mousey = h/2;

PIXI.loader.add('depth', 'test3d_files/alphastorm.jpg').load(function (loader, resources) {
  d = new PIXI.Sprite(resources.depth.texture);
  f = new PIXI.filters.DisplacementFilter(d, 0);
  fg.filters = [f];  

  window.onmousemove = function(e) {
    mousex = e.clientX;
    mousey = e.clientY;

function animate() {

  f.scale.x = (window.innerWidth/2 - mousex) / 20;
  f.scale.y = (window.innerHeight/2 - mousey) / 20;

PIXI.loader.once('complete', animate);

</script><canvas style="cursor: inherit;" height="1080" width="1920"></canvas>

I'm not sure how to delete or hide that stormtrooper since if I tamper with the png the depthmap disappears as well.



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