[ Solved ] Does anyone know how to draw a smooth slope?

[Seiji_Chishiki]

I have successfully drawn a golf course, but does anyone know how to draw the slopes smooth?
The current drawing is lumpy and looks like Minecraft.
I use DEM data for drawing terrain.

[mjurczyk]

The slopes look pretty smooth - the more problematic part seems to be a low resolution of your texture ?

[Seiji_Chishiki]

Thank you.

If the resolution of the texture image were better, would it improve the stair-like forest slope?

[Seiji_Chishiki]

I have found that the DEM data is not good because I could not solve the problem by increasing the resolution of the image.

Thank you for your reply.

[mjurczyk]

This may help tho

[PavelBoytchev]

@Seiji_Chishiki

I use DEM data for drawing terrain

I have never worked with DEM data, but it looks like it it depends on how you convert elevation data into a mesh. The following illustration shows raw DEM data (left), Minecratfish mesh (middle), smoother mesh (right). Maybe your current DEM → mesh converter uses the approach in the middle? This is just a blind guess.

[Seiji_Chishiki]

I’ll try to fix the DEM data because I’ve found some error data in the DEM data…

Thank you.

[Chaser_Code]

Terrain height map banding

It’s the limitation of using an image. The numbers of steps available is very limited (128 -256 max) To go beyond this limit you have to process the data with a smoothing function to average positions, and get billions more. Here is an exemple on how to solve this using single or multi smooth-banding (loading is slow, it’s an extreme case with millions triangles to demonstrate it’s efficacity)

GitHub - jbouny/terrain-generator: A Perlin Noise generator that provide as...

http://ycpcs.github.io/cs470-fall2014/labs/lab13.html

WebGL Terrain Rendering in Trigger Rally - Part 3

[Seiji_Chishiki]

Thank you. I will try it.

[Attila_Schroeder]

The following class is from Simon Dev’s tutorial on terrain generation.

class Heightmap {
  constructor(params, img) {
    this._params = params;
    this._data = graphics.GetImageData(img);
  }

  Get(x, y) {
    const _GetPixelAsFloat = (x, y) => {
      const position = (x + this._data.width * y) * 4;
      const data = this._data.data;
      return data[position] / 255.0;
    }

    // Bilinear filter
    const offset = new THREE.Vector2(-250, -250);
    const dimensions = new THREE.Vector2(500, 500);

    const xf = 1.0 - math.sat((x - offset.x) / dimensions.x);
    const yf = math.sat((y - offset.y) / dimensions.y);
    const w = this._data.width - 1;
    const h = this._data.height - 1;

    const x1 = Math.floor(xf * w);
    const y1 = Math.floor(yf * h);
    const x2 = math.clamp(x1 + 1, 0, w);
    const y2 = math.clamp(y1 + 1, 0, h);

    const xp = xf * w - x1;
    const yp = yf * h - y1;

    const p11 = _GetPixelAsFloat(x1, y1);
    const p21 = _GetPixelAsFloat(x2, y1);
    const p12 = _GetPixelAsFloat(x1, y2);
    const p22 = _GetPixelAsFloat(x2, y2);

    const px1 = math.lerp(xp, p11, p21);
    const px2 = math.lerp(xp, p12, p22);

    return math.lerp(yp, px1, px2) * this._params.height;
  }
}

This means that intermediate points in your wireframe are interpolated. I looked into it in great detail. A good tutorial and a good code.

[Seiji_Chishiki]

Thank you.
The DEM data I have is elevation CSV data downloaded from the Geospatial Information Authority of Japan.
Like this "37.01977051782907,37.198206263461074,37.198206263461074,37.198206263461074,37.34276180422624,37.34276180422624,37.34276180422624,37.34276180422624,37.39019409103981,37.39019409103981,37.39019409103981,37.38793541071535,37.38793541071535,37.38793541071535,37.38793541071535,37.36083124682188,...............".
The mesh size is 384 x 168.

As you can see, this CSV has stair-stepped slopes data as shown in the image above and also has some error data which needs to be replaced.
I have taken everyone’s advice and modified it to be smooth but it still does not work.

[Chaser_Code]

Maybe increase texture size 2-4 times in photoshop (or use online upscaler) and then smooth texture.
In three.js increase plane triangulation like: plane(384,168,1000,1000);

[Seiji_Chishiki]

I was able to turn the stairs into a smooth slope with the help of the following web site.
I scanned the DEM data array from left to right and top to bottom and calculated the smoothness.
Thank you.

GitHub - Oxynt/Three-Smoothing: Smoothing function ported for three.js

[tmozeq]

@Seiji_Chishiki I’ve experienced this problem with DEM tiles. You may want to look at creating a TIN using something like mapbox/delatin: A fast JavaScript terrain mesh generation tool based on Delaunay triangulation (github.com), for 2 reasons:

1. You can bump up the max error to increase the smoothness
2. A TIN (Triangulated irregular network - Wikipedia) mesh will be MUCH more compact and performant than the one in your screenshot. In my experience, a mesh like the one in your last screenshot is prone to crashing lower powered mobile devices due to memory constraints.

[Seiji_Chishiki]

Thank you. I will try it !

[Seiji_Chishiki]

Thanks to everyone’s advice I was able to draw a very smooth and fantastic golf course.
Thank you very much!

[manthrax]

Looks awesome!