Pixi_fun Posted February 20, 2016 Share Posted February 20, 2016 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. <html><head> <script src="pixi.min.js"></script> <style> body { margin: 0; padding: 0;} canvas { width: 100%; height: 100%} </style> </head> <body> <script> w = 1920, h = 1080; var renderer = new PIXI.WebGLRenderer(w, h); document.body.appendChild(renderer.view); var stage = new PIXI.Container(); var container = new PIXI.Container(); var foreground = new PIXI.Container(); stage.addChild(container); stage.addChild(foreground); var f; var fg; PIXI.loader.add('fg', 'test3d_files/stormtrooper4.png').load(function (loader, resources) { fg = new PIXI.Sprite(resources.fg.texture); foreground.addChild(fg); }); 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; renderer.render(stage); requestAnimationFrame(animate); } PIXI.loader.once('complete', animate); </script><canvas style="cursor: inherit;" height="1080" width="1920"></canvas> </body></html> I'm not sure how to delete or hide that stormtrooper since if I tamper with the png the depthmap disappears as well. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 20, 2016 Share Posted February 20, 2016 "d" must be child of "fg" so any changes to "fg" scale will affect "d"'s matrix which will be used by displacement filter. Try that: fg.addChild(d); d.renderable = false; Quote Link to comment Share on other sites More sharing options...
Pixi_fun Posted February 21, 2016 Author Share Posted February 21, 2016 That didn't seem to work. Where do I put that part?I tried sticking it into three different parts with no success. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 21, 2016 Share Posted February 21, 2016 11 hours ago, Pixi_fun said: That didn't seem to work. Where do I put that part?I tried sticking it into three different parts with no success. After you initialize "f" and "d". Try foreground.addChild(d); d.renderable = false; Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 21, 2016 Share Posted February 21, 2016 Ok, now that page is loaded, I'll try to debug what's wrong with it Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 22, 2016 Share Posted February 22, 2016 Ok, im looking at your issue Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 22, 2016 Share Posted February 22, 2016 Are you sure its possible to do with displacament? I think you need other shader. I tried to make background #808080 in your displacement texture, try it Its better, a bit. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.