Rendering Style

Hello everyone,
I was wondering if you can help me figuring our how I can obtain this 2 rendering effects:

1- Carttonish with outlines with stronger strokes

and

2- Semi photo realistic

( i see there is some gaussian noise on top, some good use of shadows to give depth.

Any advise?
Thank you

What do you have?

There is a example for using outlines. For a toon shading effect, there would be this.

If you wanna do realistic renderings, its a bit more tricky. Threejs does not yet support path/ray tracing. Stuff as Ambient Occlusion or Global Illumination is only possible via fake shaders.
If your objs do not move, you can bake lightmaps and ambientocclusionmaps (all kinds of maps) in for example blender.

Perfect, that answer my questions!

On #1 with the two links I have what I need.

On #2. Do you think would be possible to reach the level of ‘realism’ of the picture I posted ? The ambient occlusion example that you linked seems to get close enough, and the realism of the picture I posted, is not of photographic quality (and I’m happy with that style). Unfortunately I need the composition to move.

If you want to permantently render outlines in context of toon shading, it’s actually better to use OutlineEffect like in this example:

https://threejs.org/examples/webgl_materials_variations_toon

The post-processing example is more intended to highlight objects in context of user interaction.

2 Likes

It strongly depends on how you set it up. Even though objs are moving, you can stil bake a fake shadowmap which will be static, but can give a nice look. Like here, I think the car has a shadowmap for the shadow directly below the car on the street.
The main problems are the soft shadows thoughout the house model. They are very soft and nicely blended. Light sources in threejs will cast a rather hard shadow.

There are a lot of threads about getting realism done. Here are some startings