MeshPhysicalMaterial and shadow look weird in a small scene rendering

[yuzhou2013]

Hello everyone, I just start a itowns environment , and put a whole city gltf model on the map. For the large scale scene, the materials and shadows looks good. Then I place another independent building on the map corresponding with a spotlight on it. When the camera zoom in, the MeshPhysicalMaterials on the building is blured and the shadows is distored, everything look weird. When I enlarge the model to 500x times, the MeshPhysicalMaterials and shadows looks good again.

I think may be the large scene is the reason, but I don't know how to fix this. Can anyone offer some suggestions? Thanks a lot!

[gchoqueux]

Hello, Could you share an code example ?

what do you mean by I enlarge the model to 500x times ?

[yuzhou2013]

Thank you for reply. Here are the screenshot: this is a small model, and the shadow looks wierd

then I enlarge the model, things looks better.

In the end, I enlarge the model 500x times, the model become sharpe, and materials looks good.

In order to express this question more clearly, I upload a whole building in the scene. From the screenshot, we can see the distored shadow and bured shining shadow

I refer to the writing of react-fiber, and try to make the effects ` const bottleMaterial = new THREE.MeshPhysicalMaterial({ color: '#ffffff', transmission: 1, roughness: 0.1, thickness: 100, envMapIntensity: 20, clearcoat: , ior: 1 })

return new Promise((resovle,reject) => {
    itowns.glTFLoader.load(`/summodel2.glb`,(glb) => {
        const {nodes,materials} = convertNodeMaterial(glb)
        resovle(
            <group position={[-2839591.5155920475, 4664200.675698617,3284803.339808643]}>
                <spotLight useHelper={SpotLightHelper} position={[10, 10, 50]} castShadow intensity={1}/>
                <ambientLight intensity={0.2} />
                <pointLight position={[-10, 50, -10]} color="white" intensity={0} />
                <pointLight position={[0, 60, 5]} intensity={0} />
                <directionalLight position={[0, 40, 0]} color="grey" intensity={0} />
                <group rotation={[Math.PI/2,0,0]}>
                <mesh receiveShadow castShadow material={material} geometry={nodes.Cube.geometry} position={[10, 10, -50]} scale={[500, 500, 500]} rotation={[0, 0, 0]}/>
                <mesh receiveShadow castShadow material={material} geometry={nodes.Cube1.geometry} position={[10, 10, -50]} scale={[500, 500, 500]} rotation={[0, 0, 0]}/>
                <mesh receiveShadow castShadow material={material} geometry={nodes.Cube2.geometry} position={[10, 10, -50]} scale={[500, 500, 500]} rotation={[0, 0, 0]}/>
                <mesh receiveShadow castShadow material={material} geometry={nodes.Plane.geometry} position={[10, 10, -50]} scale={[500, 500, 500]} rotation={[0, 0, 0]}/>
            </group>
            </group>
        )
    })
})`

In react-fiber, the rendering effect is as follows:

I think it is very meaningful to combine the big city scene and the small architectural scene to show. Thanks a lot

[yuzhou2013]

Hello, I made another test as follows: This is the original effect in gltf-viewer:

Then I load it in itowns: Enlarge the dragon 20x times, we can see a lot of noise in the refraction

Enlarge the dragon 2000x times， the refraction is much better now

Enlarge the dragon 50000x times,

Anyone knows how to fix this?

[GGBond-GIS]

How do tiles receive shadows

[gchoqueux]

@yuzhou2013 I have you try in THREE.js scene without itowns?

https://discourse.threejs.org/t/should-i-use-a-light-for-every-object-to-cast-high-quality-shadow/2154/2

https://stackoverflow.com/questions/49332256/how-to-improve-shadow-quality-in-three-js

[gchoqueux]

How do tiles receive shadows

For the moment it isn't possible

[GGBond-GIS]

瓷砖如何接收阴影

暂时不可能

I can only try to modify the ground mesh object to achieve the effect, but it's a little contrary

[GGBond-GIS]

瓷砖如何接收抱

暂时可能

Can I add a layer of ground mesh objects to the whole earth

[GGBond-GIS]

How do tiles receive shadows

For the moment it isn't possible

Can I use tilemesh and change the material to three Shadowmaterial to receive shadows, but I found that tilemesh is not a constructor

[gchoqueux]

but I found that tilemesh is not a constructor

TileMesh isn't exported in itowns