Search the Community
Showing results for tags 'depthmap'.
Found 2 results
-
Hi guys ! I just spotted what I think is a bug (or rather a compatibility issue). Here is a *very* simple PG : http://www.babylonjs-playground.com/#27DV4V#6 It only prints the depth map on a plane. Here is a screenshot of the PG with Chrome 52 on Windows 7 : Here is a screenshot of the PG with Safari on an Ipad (iOS 9.2.1) : As you can see, no depth map with Apple, the plane is totally black (or gray with the light here). Maybe are you aware of this issue ? (do I hope too much ? ) Is there a WebGL restriction I don't know with Apple ? I had the chance to run the PG on different Macs and iPhones (different versions also), and the issue appears on every Apple device. I don't own any Apple devices but I can make tests at work if you need them. I would be glad to help if I can. PS: I make some tests and it looks like a simple render target texture with a shader material which computes the depth could work. And it seems like the RTT of the depthRenderer has a lot of different properties than the basic RTT I made.
-
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.
