如何将这个不光滑的表面固定在地形网格上？ WebGL

Question

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9hMmdxZy5qcGcifQ==” alt =“基于加伯噪声的地形”>“>

我创建了具有多层Gabor噪声的地形网格，但是在网格上出现了垂直曲线。 （以上链接中显示的图像）我尝试更改为另一种噪声，但是仍然存在类似的问题。我认为这可能是由html文件中的着色器代码或我如何布置面部引起的。有人可以帮我找出这里的问题吗？谢谢！！

function setupBuffers() {
    myTerrain = new Terrain(600,-8,8,-8,8);
    //constructor(div,minX,maxX,minY,maxY)

    myTerrain.loadBuffers();
}



generateTriangles()
{
    //Your code here
    var  deltaX = (this.maxX - this.minX) / this.div;
    var deltaY = (this.maxY - this.minY)  /this.div;

    for ( var i=0; i <= this.div; i++)
    {
        for (var j =0; j<= this.div; j++)
        { 
            this.vBuffer.push(this.minX + deltaX * j); //x 

            var ramVal = (this.dem[i][j]);

            this.vBuffer.push(1.7*ramVal);// Y 

            this.vBuffer.push(this.minY + deltaY * i); //z

            this.nBuffer.push(0);
            this.nBuffer.push(0);
            this.nBuffer.push(0);

            this.cBuffer.push(0);
            this.cBuffer.push(0);
            this.cBuffer.push(0);
        }

    }
    for ( var i =0; i< this.div; i++)
    {
        for (var j =0; j< this.div;j++)
        {
            var c = (i ) * (this.div +1  ) + j;

            this.fBuffer.push(c);
            this.fBuffer.push(c + 1);
            this.fBuffer.push(c + this.div + 1);


            this.fBuffer.push(c+1);
            this.fBuffer.push(c + 1 + this.div + 1);
            this.fBuffer.push(c+this.div + 1);

            //every vertex signify a cube
        }
    }

    this.numVertices = this.vBuffer.length/3;
    this.numFaces = this.fBuffer.length/3;
}
我创建了具有多层Gabor噪声的地形网格，但是在网格上出现了垂直曲线。 （以上链接中显示的图像）我尝试更改为另一种噪声，但仍然...

Answer 1

我使用jsfiddle添加了一个HTML和两个JS文件。这两个JS文件合并在一起。https://jsfiddle.net/zro3kbn4/1/

function setupBuffers() {
  myTerrain = new Terrain(600, -8, 8, -8, 8);
  myTerrain.loadBuffers();
}
....