Hi Everyone,
I am trying to make the renders in three look more realistic.
Can anyone provide any help, links, examples or suggestions to take a three.js scene created using plane, box and extrude geometries that are textured with MeshPhysicalMaterial’s.. All materials are using SRGColorspace with the following settings
roughness: 0.1,
clearcoat: 1.0,
clearcoatRoughness: 0.1,
reflectivity: 1.0,
antialias and ACESFilmicToneMapping are both active.
Just need to improve from this render in three …….
To look more realistic like this (excluding the tap which I created by passing a screenshot from three though Ai to enhance)..…..
Not after perfection just any improvement or suggestions.
Happy to set up an example if it helps!
Many thanks
Enabling shadows will probably be most helpful in creating those kind of subtle shadows.
If there is a single light source, you can determine the horizontal position of the light source by determining the intersection of the line creating the shadow from the basin and the line creating the shadow from the faucet. You can estimate the vertical position of the light source by comparing the height of the top of the faucet to the height of the faucet shadow. It appears to me that there might be two light sources. (I also just noticed the shadow cast by the back of the sink. That should also give some height information.)
You will also have to fiddle around with the shadow parameters to get the fuzzy gray shadows - rather than sharp black shadows.
You could, of course, add the shadows manually to your textures since they appear pretty clean and the color seems to be constant. If you are using paint program to create the shadows, I would create a separate layer for shadows.
The area on the counter in the front of the sink appears to be a reflection of the sink. So your countertop is not reflective enough. Here I have to defer to others who have more experience working with clearcoat surfaces.
1 Like
Agree with @phil_crowther here.. soft shadows will go a long way..
Adding an environment map to get some detail in the reflections is also good.
https://manthrax.github.io/THREE-CSGMesh/demos/CSGShinyDemo.html
Then, if you can afford a more complex rendering pipeline.. using postprocessing to add bloom and possibly ambient occlusion.
1 Like
@phil_crowther @manthrax Thank you both for your help!!
I found that shadows, environment map etc although active were not rendering correctly as the geometries on screen were created full size to allow the use of bounding boxes to get the size of certain parts for dimensions to be calculated and displayed.
Once dimensions were calculated, I simply scaled down the group and shadows, environment map etc all appear.
Need to make some adjustments to lighting, shadow bias etc but currently looks much improved
2 Likes
