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
On 2/13/2020 at 10:50 PM, jonforum said:

Alright, I messed around with the code from the video and what I have now works, but it still does not look good...

The code below works, but only on Microsoft Edge, and without the #wrap code. The picture is small, but it takes up the entire background. I am trying to shrink it down to proper size. The 3D effect looks horrible compared to what is seen in the video. Anyways, hope you or someone can help. Below is the code, and I attached all the files as well. Remember, I'm a lamer compared to you guys, so sorry for all the questions. I have put a lot of time into this, so I hope it pays off. Thanks for your time.

Quote

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>3D Photo Effect with Pixi.js</title>
    <style>
      
         
      #wrap {
            border: 0px solid #333;  
            width: 1080px;
            height: 720px;
        }
         
     
    </style>
  </head>
  <body>
   
    <div id="wrap">
   
    <script src="pixi.min.js"></script>
    <script>

    let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight});
    document.body.appendChild(app.view);

    let img = new PIXI.Sprite.from("2.jpg");
    img.width = window.innerWidth;
    img.height = window.innerHeight;
    app.stage.addChild(img);

    depthMap = new PIXI.Sprite.from("2_depth.jpg");
    app.stage.addChild(depthMap);
            
    displacementFilter = new PIXI.filters.DisplacementFilter(depthMap);
    app.stage.filters = [displacementFilter];

    window.onmousemove = function(e) {
      displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) /20;
      displacementFilter.scale.y = (window.innerHeight / 2 - e.clientY) /20;
    };

    </script>
 
    </div>
</body>
</html>

2.jpg

2_depth.jpg

pixi.min.js test1.html

Edited by elevated420

Share this post


Link to post
Share on other sites

A lot of issue with your demo, so i just make a playground for you.
You will also need refactoring your image depth map.
You will need practice and also this is not a very good image for this kind of 3d. 
But your are on the good way! make more experimentation. ex: more black on eyes.

https://www.pixiplayground.com/#/edit/ZiuvxzRpK-EE03nlFJdQy

ps: for the online demo you can use https://www.base64-image.de/

ps: i don't use your demo because you code are inside html and my IDE don't like this.
Logicly you should separate css,js from html.

Edited by jonforum

Share this post


Link to post
Share on other sites

also i can see some strange artefact, am not sure why but try with png high quality image. Jpg are compressed and lossy.
If artefact not fixed with png, create a issue on github for the pixi team.

It can maybe a displacementFilter bug !

Share this post


Link to post
Share on other sites

also here a nice video for PS and AE.
This one helped me a lot to do VR picture.
The depthmap are rendering on AE engine for the result, but its same logic, you replace AE by pixijs and filters.

 

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  

  • Recently Browsing   0 members

    No registered users viewing this page.