Photorealistic 3D view

Questions
#1

Hi

I want to make one wedding card with photorealistic quality.
Just like that.

As you can see from this, the paper and rose-golden text is very realistic.
I want make this image like that.
This wedding-card will be on one wooden table(also realistic).

base
base.png596×840 29.4 KB

Hope to hear your advice.
Cheers.

1 Like
#2

Your question is way too unspecific and broad… Could you please narrow it down and let us know what level you are at as far as WebGL and three.js goes?

#3

Hi

Thanks for your reply
I am entry level at WebGL and Three.js.

I should make the second image like the first image on the browser.
I chose Three.js.
Currently, I have 2 questions:

  1. Should I use 3D modeling tool like Blender or 3D Max for this purpose?
  2. How to accomplish photorealistic quality for the paper, text and wooden table in Three.js?

The second image is just image.
I think that I can make diffuse, normal, AO, Roughness map from that.

Thanks.

#4

I doubt blender would help you, as I doubt you’d need any complex geometry.
The effects could be composed with MeshStandardMaterial or MeshPhysicalMaterial and the right bump, reflection and texture maps based on the image above. It’s just needs a lot of tweaking to get the look right.

1 Like
#5

And lights.

#6

Kindly, could you please let me know how to do as code or sample?

#7

Hi, you can create multi-material object via scene utils: https://threejs.org/docs/#examples/en/utils/SceneUtils

#8

I recommend checking out examples of using MeshPhysicalMaterial with textures, and seeing if you can make small modifications. You may, for example, apply the image of your card as map (diffuse map) and search for other maps (normals map etc) that give a paper effect. And also play with material roughness etc. The table can be another plane and use a wood texture.

#9

You need 3 things to achieve that kind of effect:

  1. get Blender and familiarize yourself with it to model what you want. You can get that info from youtube quite easily, there are a ton of tutorials.
  2. use new principled material from blender for realism.
  3. export your scene as GLTF

here are a couple of relevant screenshots:

image
image1678×814 95.3 KB

image
image498×557 73.9 KB

you can then just import the result in three.js, for info on how to do that - study three.js examples.

good luck, 3D is a lot of fun, I hope you enjoy your journey. :mermaid:

2 Likes
#10

I had a go at this to see if it was possible.
I found using two layers with different materials was easier, and having an alpha mask in the top layer with the shiny lettering underneath seems to be a good approach.
I think you should use a higher resolution texture, bump and rough map for a better quality result.
Also note I ended up using the rough map as an alpha map instead.
It’s not perfect, but it should give you a starting point:

30
Screenshot 2019-08-30 23.26.30.jpg792×534 134 KB

https://cotterzz.github.io/embossedcard/

5 Likes
#11

Thanks, Cotterzz

Your codebase is very helpful.

Thanks again.

1 Like
#12

No problem, I like experimenting with materials. With something like this you just need to spend time trying out new values and altering the textures.
If you can improve this, please post a screengrab.
Also, check the spelling of Fitzwilliam - i’m pretty sure it has 2 L’s :sunglasses:

2 Likes
#13

add AO Map effect butter

#14

I think I tried that but it didn’t do what I expected - I’m not sure I was using it the right way - it went very dark so I turned it off.