<planeGeometry args={[2000, 2000, 2000, 2000]} />
render so slowly, about 6 7 seconds.
How do I optimize it？
One idea is to create a smaller plane (20, 20, 20, 20) and use instance mesh to tile 100 x 100 (or some variation of this).
It depends on what you are trying to achieve with such a big plane
To clarify, the problem is not the dimension of the plane. It’s the segmentation that produces likely over one million vertices.
Using instancing won’t help if the application is vertex shader bound. In this case there is no other way around than reducing the complexity of the geometry. Meaning lower the segmentation until the performance issue goes away.
3 Likes
looks like 4 million to be exact 
4 Likes
4004001, to be more exact 
3 Likes
That’s a huge number of vertices. 2000 segments per side means 2001 vertices per side, that is 2001 x 2001 = 4004001 vertices.
Many try to increase terrain detail by adding lots of vertices, but most of them you never see. That’s why many vertice only make sense for the close range. Quadtrees are therefore used for terrain. For these, the amount of vertices falls quadratically with the distance. That saves a lot. Here is an example where I made a dynamic ocean surface with it.
This runs smoothly on my tablet. The quadtrees change when I move and you don’t see transitions there either.
Simply using a plane geometry with many vertices would be the most convenient and easiest way, but despite the high computing power of new devices, 3D applications are still things where you have to pay very close attention to resource consumption.
Even I can’t do much with my ocean because I’ve maxed out WebGL2. For raytracing e.g. plus depthTexture to be able to see through the water and to recognize objects depending on the depth, I no longer have any reserves. Therefore, I work my way into the 3js node system to be able to use WebGPU, because then I can significantly improve the ocean. Wave cascading (much more detailed waves), foam, raytracing, … a real unlimited water surface.
Since you may be new to the 3D world, I recommend something less painful than highly complex landscapes to start with. LOD (level-of-detail) quadtree terrains are one of the most challenging things you can do and believe me it can get pretty frustrating at times 
1 Like
<group key={key}>
<mesh rotation={[-Math.PI / 2, 0, 0]} scale={scale}>
<planeGeometry args={[width, height, width, height]} />
<shaderMaterial
uniforms={{
bumpTexture: { value: texture },
bumpScale: { value: 1 },
}}
vertexShader={vertexShader}
fragmentShader={fragmentShader(colorRange)}
side={DoubleSide}
wireframe={wireFrame}
wireframeLinewidth={1}
/>
</mesh>
</group>
I want to draw a height map, and I want to achieve each grid corresponding to one pixel 
Is there a local drawing+LOD scheme that can be optimized？
One vertex per pixel is not a practical measure. If you had a vertex density of one vertex per pixel from a vertical top view and then turn the camera so that it looks towards the horizon, then you would suddenly have a multiple vertex density per pixel. This doesn’t add anything to the level of detail, but your computer still has to calculate every vertex. Our ability to perceive detail is non-linear.
So that you can get an approximate impression of the complexity of your project, I recommend the tutorial series by simon dev: