Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

depth map for FB post #2605

Closed
mustafaGFX opened this issue Nov 12, 2020 · 28 comments
Closed

depth map for FB post #2605

mustafaGFX opened this issue Nov 12, 2020 · 28 comments

Comments

@mustafaGFX
Copy link

Sometimes I design a 3D facebook post like this:

Facebook-3D-Photos
.
.
.
.
First I put the image itself as a layer, then draw a depth map like this:

Facebook-3D-Photos (1)
.
.
.

then I put the 2 images on Facebook and Facebook do it like this:

3d-post-upload
.
.
.
The problem is that it does not work the first time, there is always something wrong with the depth map, so I return to photopea to fix this wrong, then save the image, then delete the old depth map, and then upload the image again to see if the image is perfect or not and Then I do this many times

so I ask you if you can make photopea do it, here is my idea:

Screenshot (34)

Screenshot (35) (2)

.
.
.
.
.
the user can use the depth map from layers, the depth map layer should have the same name as the main layer which ends by _depth
example :
main layer: dog
depth layer: dog_depth
-or the user can use the raster mask as a depth map :

Screenshot (35) (2)
.
.
.
.
.
.
the filter has 3 controllers :

1. camera position/ zooming
2. spacing
3. expanding

these gifs will make you understand what do these options do :

1. camera position/ zooming : Camera distance to the image

Screenshot (35) (3)
.
.
.
2. spacing: The spacing of objects from each other

Screenshot (35) (3) (1)
.
.
.
3. expanding: expand the white color in the depth map

video could help you: https://www.youtube.com/watch?v=DInWVvfPQm8
FB 3d photos: https://www.facebook.com/groups/1005731289499173/permalink/4618336061571993/

@mustafaGFX
Copy link
Author

the best place for this effect

Screenshot (34)

@mustafaGFX
Copy link
Author

this tool should solve these problems and save time and effort

The problem is that it does not work the first time, there is always something wrong with the depth map, so I return to photopea to fix this wrong, then save the image, then delete the old depth map, and then upload the image again to see if the image is perfect or not and Then I do this many times

@photopea
Copy link
Owner

" there is always something wrong with the depth map, so I return to photopea to fix this wrong,"

Do you mean there is an error in a PNG file and Facebook can not process the PNG from Photopea? Or do you mean that you painted the depth map the wrong way, and the part of image is too far / too near (too dark or too bright)?

I agree, a built-in depth map viewer is a neat idea.

@MichalSZZ
Copy link

It can to be a nice new feature. I like 3D photos on FB.
I think that the biggest problem can be to create 1:1 script that render 3D like Facebook. I saw few sites with they own preview of 3D and, all was a little bit different than FB in app rendering.

@mustafaGFX did You saw that issue? #1576

@mustafaGFX
Copy link
Author

@photopea I mean that I painted the depth map in the wrong way, it can't be perfect from the first time, every time I have to return to photopea to adjust the brightness of white or the darkness of black (The spacing of objects from each other)

@MichalSZZ
Copy link

@photopea
Or do you mean that you painted the depth map the wrong way, and the part of image is too far / too near (too dark or too bright)?

I have same problem. It wolud be great to test in app without sending it to Facebook

@mustafaGFX
Copy link
Author

mustafaGFX commented Nov 12, 2020

@MichalSZZ I fully agree with you, but at least we will be able to adjust the depth map in realtime, it will be a little bit different than FB app rendering but it will save the time and effort

@mustafaGFX
Copy link
Author

@MichalSZZ

did You saw that issue? #1576

no, I didn't but I will

@mustafaGFX
Copy link
Author

mustafaGFX commented Nov 12, 2020

extra options but aren't as important as the previous ones :

  • custom depth map
  • create a depth map

Screenshot (35) (2) (1)
.
.
.
.

custom depth map: means to upload a png depth map from the device
create a depth map means this :

Screenshot (37) (1)

depth map creator tool is a little bit similar to the magic cut tool
you draw with black color on the far parts from the camera and draw with white on the near part of the camera and you know where you should draw with gray color : )

@photopea
Copy link
Owner

Hi guys, I made a 3D viewer similar to a Facebook 3D viewer. Press Window - More - 3D Viewer. Then, you can load your current document state as a Depth Map, or a Color Image.

It is a very simple implementation at the moment, but it should correspond geometrically to what you see on Facebook.

@mustafaGFX
Copy link
Author

wow
that is soooooo wonderful
it was very fast, I didn't expect that it would be that fast
thanks, Ivan :)

@mustafaGFX
Copy link
Author

mustafaGFX commented Nov 14, 2020

hi Ivan
I took a very long time to understand how to view the 3d image but did, some photos work well but some others look like this :

Screenshot (38)

@photopea
Copy link
Owner

@mustafaGFX Could you send me that image to support@photopea.com ?

@mustafaGFX
Copy link
Author

I did
BTW I answered you a long time ago about ABR files but you didn't answer me back, open photopea inbox :)

@photopea
Copy link
Owner

@mustafaGFX You just sent me a screenshot of Photopea. Could you send me the colored image with its depth map?

@mustafaGFX
Copy link
Author

I did
take a look here: https://www.photopea.com/#ipzK7Poar

@mustafaGFX
Copy link
Author

mustafaGFX commented Nov 15, 2020

hi
I have just noticed that when I resize the image to high resolution the problem be solved,
also, the size makes different changes in the 3d image

this is a (311x390) image

Screenshot (38) (1)

this is a (350x439) image and it's unsaturated

Screenshot (39)

and this is a(400x502) image in which the problem is resolved

Screenshot (40)

@MichalSZZ
Copy link

That files works good on Facebook https://youtu.be/4O74H_aVCaY

bitdeffender45_depth
bitdeffender45
fb-bit-3dpost.zip

But in Photopea I see that:
obraz

@mustafaGFX
Copy link
Author

mustafaGFX commented Nov 15, 2020

@MichalSZZ its because you didn't run the depth map in the right way, follow these steps

  • put the colored image up and the depth map down
  • press the 3d button
  • press load color
  • hide the colored layer
  • press load depth

you load your current document state as a Depth Map, or a Color Image, I hope you got it :)

@MichalSZZ
Copy link

@mustafaGFX Can you download my ZIP file with source?
I did your steps and got that:
obraz

@mustafaGFX
Copy link
Author

also, image size makes some bugs.

this is your original image (widhth= 1619)

Screenshot (44) (1)
.
.
.
.

width= 1600 (its perfect)

Screenshot (44)
.
.
.
.

width = 1601 ( We only increased one pixel and it has been unsaturated)

Screenshot (44) (2)
.
.
.
.
when you increase the size up to 1601 pixel it becomes like this
Screenshot (44) (1)

@mustafaGFX
Copy link
Author

@MichalSZZ put the size of your image (1600x1999)

@photopea
Copy link
Owner

Guys, there is a bug and I need to fix it. It will take me 10 minutes to fix it, but I am busy now, I will do it tomorrow :)

@mustafaGFX
Copy link
Author

@photopea take your time :)

@MichalSZZ
Copy link

Guys, there is a bug and I need to fix it. It will take me 10 minutes to fix it, but I am busy now, I will do it tomorrow :)

No problem :)
With bigger resolution (as Mustafa said) it works.

@photopea
Copy link
Owner

These problems should be fixed now. It should work with any resolution :)

@mustafaGFX
Copy link
Author

great
it works well, thanks :)

@photopea
Copy link
Owner

photopea commented Dec 3, 2020

So I think we can close it for now.

@photopea photopea closed this as completed Dec 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants