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

elevated420 · February 12, 2020

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

ivan.popelyshev · February 12, 2020

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.

elevated420 · February 14, 2020

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 src='https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.0/pixi.min.js'></script>

<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.add('fg', 'https://scontent-msp1-1.xx.fbcdn.net/v/t1.0-9/84623796_1074738232880766_6582658033959043072_o.jpg?_nc_cat=100&_nc_eui2=AeFE6j87IYx3tjc6GtpaYATN3lVp5wMUSZNQ3MG6igUfME3-59-OqHIbOL3vGh-C5bQSpU_kZE7KtQea0e8WWcwIlBWLtMI7pdK5ELO--8_AMA&_nc_oc=AQmGKbxWNQ2w_7y0l_KqnLDIhwDf8g8TMXg8BjJiS2kSvl0BlmSKPz_EDqzRv3UT_JU&_nc_ht=scontent-msp1-1.xx&oh=e0b7020c72c5b550d303fe8db50e20f6&oe=5ECC8D18'); //insert Orignal 2d Image Here

  ploader.add('depth', 'https://scontent-msp1-1.xx.fbcdn.net/v/t1.0-9/85164088_1074738466214076_7938346503683178496_o.jpg?_nc_cat=105&_nc_eui2=AeGbb9hzuOzxSg8oLLlIb411_RFHvIWFVur8Gqiv4qDs_XL-GZpy2YFcI0z0lw_YZwRZYOuxUUC7O8GMNCmGGqVBF3XinyN4qwhMg0yJbhs8pQ&_nc_oc=AQmUaT81D_nabAHGTwwNriXSrrOg_KM0OSYKGGG21uumuQs9cI_gm3aa3vFsuOxpt_c&_nc_ht=scontent-msp1-1.xx&oh=bbab9f984fe82b5e2bee76bb18c39189&oe=5EC2368E'); //insert Depth Map Here

  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

jonforum · February 14, 2020

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/

elevated420 · February 14, 2020

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 February 14, 2020 by elevated420

jonforum · February 14, 2020

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.

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

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

Edited February 14, 2020 by jonforum

elevated420 · February 16, 2020

Thanks I appreciate it!

elevated420 · February 18, 2020

On 2/13/2020 at 10:50 PM, jonforum said:

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

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>

pixi.min.js test1.html

Edited February 18, 2020 by elevated420

jonforum · February 18, 2020

i can take a look, but plz make a zip projet with all stuff.

I am lazy

Edited February 18, 2020 by jonforum

elevated420 · February 18, 2020

Here ya go... Remember, I can only get it to run local side via Edge, but not FireFox or Chrome. Thx for your time.

1 pixi.rar

jonforum · February 18, 2020

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 February 18, 2020 by jonforum

jonforum · February 18, 2020

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 !

jonforum · February 18, 2020

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 February 18, 2020 by jonforum

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

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members