How can I get this result in three.js?

I rendered the scene with three.js WebGL renderer and get result below [1]

But there are harsh conturs.

What lights and shadow settings should I use for getting result like this [2]?

Creating the renderer like so will at least mitigate the aliasing artifacts:

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );

By using setPixelRatio() you can ensure to render at the highest possible resolution and thus get a more sharp image quality.

In any event, using a small blur effect via post-processing might also help to achieve the desired effect. Check out the basic post-processing example and the shader files VerticalBlurShader and HorizontalBlurShader. You can use these shader files to create two instances of ShaderPass for your post-processing pass chain.

https://threejs.org/examples/webgl_postprocessing

You might also just try supersampling, by using a higher resolution but scaling it down via CSS for example.

2 Likes