Sign in to follow this  
elevated420

Need Proper Code To Make a 3D Picture...

Recommended Posts

Sup guys:

Just trying to make a server side 3D image for my website. I want it to look just as good as the 3D images on FaceBook. I know how to make depth maps properly, I just need the code to add it to my own site.

You can see a bad example using Pixi code below. Just scroll down to where it says "demo" near the bottom of the page, and scroll over the picture for the effect. This is what I want, but it has to look good, like the 3D images you see on FaceBook:

Demo

I know Pixi code can help me, I'm just not that smart to know how to use it. Hope someone can help.

Thx.

-el

Share this post


Link to post
Share on other sites

Hello, and welcome to the forums!

DisplacementFilter is one of our selling points for web developers who use WebGL for the first time. However, its also a small lie - to really understand whats going on you have to learn many things.

DisplcamentMap shader works through Red and Green channel, Red is supposed to be offset by X and Green by Y. If you just use grayscale - you get the same offset by X and Y every time, so you have to edit the channels separately. Gray 808080 is the neutral color- nothing is moved at that pixel.

https://github.com/pixijs/pixi.js/blob/22c9cc00adaafbfd3a3f51dc74f3c9b4925686dd/packages/filters/filter-displacement/src/displacement.frag#L17

"map.xy" is actually "map.rg" , red and green channel from displacement map texture.

Share this post


Link to post
Share on other sites

Thanks for the reply, but I am just a lamer / script kiddie compared to you. This is way over my head.

Basically, I found some of your code here:

https://www.arpatech.com/blog/3d-parallax-effect-2d-images-depth-map/

If you load the code below into an html file, it works, but it looks horrible compared to FaceBooks 3D script. If you know how to modify the code below or can point me to a script that can duplicate what FaceBook does, please let me know. Thanks for your time.

Quote
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Displacement mapping with 2d Face</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  
     <style>
body {
    background: black;
    color: #ccee99;
    text-align: center;
    position: fixed;
}
 
#wrap {
    border: 0px solid #333;  
    width:100%;
}
 
#images img {
    width: 100px;
    height: auto;
}
</style>
 
  
</head>
 
<body>
  <div id="wrap">
</div>
<script>
function resize() {
    if (window.innerWidth / window.innerHeight >= ratio) {
        var w = window.innerHeight * ratio;
        var h = window.innerHeight;
    } else {
        var w = window.innerWidth;
        var h = window.innerWidth / ratio;
    }
    renderer.view.style.width = w + 'px';
    renderer.view.style.height = h + 'px';
}
window.onresize = resize;
  </script>
    <script>
     w=window.innerWidth, h = window.innerHeight;
var renderer = new PIXI.WebGLRenderer(w, h);
var cOutput = document.getElementById('wrap');
cOutput.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;
var mousex = w/2, mousey = h/2;
var ploader = new PIXI.loaders.Loader();
 
function init(){
  console.log('dasdsdasd');
 
  ploader.once('complete', startMagic);
  // Begin loading -
  ploader.load();
}
 
function startMagic() {
  fg = new PIXI.Sprite(ploader.resources.fg.texture);
 
  foreground.addChild(fg);
  
  d = new PIXI.Sprite(ploader.resources.depth.texture);
    f = new PIXI.filters.DisplacementFilter(d, 0);
    fg.filters = [f];  
    window.onmousemove = function(e) {
      mousex = e.clientX;
      mousey = e.clientY;
    };
  animate();
}
 
 
function animate() {
console.log('aaaaaaaaaa');
  f.scale.x = (window.innerWidth/2 - mousex) / 79;
  f.scale.y = (window.innerHeight/2 - mousey) / 79;
  fg.addChild(d);
  d.renderable=false;
  
  renderer.render(stage);      
  requestAnimationFrame(animate);
}
 
// Start -
init();
 
    </script>
 
</body>
</html>

-el

Share this post


Link to post
Share on other sites
46 minutes ago, jonforum said:

on photoshop 2020 you have a commande named generate bumpMap depthMap.
its the same way if you want make stereo 3d picture for VR.

you can use the depth Map with  displacement filter and mouse to make a live 3d feeling

https://redstapler.co/3d-photo-from-image-javascript-tutorial/

Thx, I will check out the new feature in PS! I will also have to type out all the code from the video and test it out. Thx for the help.

Edited by elevated420

Share this post


Link to post
Share on other sites
1 hour ago, elevated420 said:

Thx, I will check out the new feature in PS! I will also have to type out all the code from the video and test it out. Thx for the help.

R7xBRbsG_o.png
 

than you can save the depthMap and use dispestion in transform filter for test your result.
UBKa3ZCX_o.png

 

I don't know for the english version sorry. but it should very similar.

Edited by jonforum

Share this post


Link to post
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.

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

Loading...
Sign in to follow this