Javascript 如何在WebGL中导入高度贴图

我知道理论上你必须首先在高度图上找到坐标，比如（x=

width-HM/width-Terrain*x-Terrain

）和y坐标（

y=height-HM/height-Terrain*y-Terrain

），然后在高度图上得到位置，我们通过

min\u height+（colorVal/（max\u color-min\u color）得到实际高度**最大高度-最小高度

），从而返回特定段的Z值

但我如何才能真正导入高度贴图并获取其参数呢？我用javascript编写，没有额外的库（三个，巴比伦）

编辑

目前，我正在基于x和y范围对z值进行硬编码：

    Plane.prototype.modifyGeometry=function(x,y){
    if((x>=0&&x<100)&&(y>=0&&y<100)){
        return 25;
    }
    else if((x>=100&&x<150)&&(y>=100&&y<150)){
        return 20;
    }
    else if((x>=150&&x<200)&&(y>=150&&y<200)){
        return 15;
    }
    else if((x>=200&&x<250)&&(y>=200&&y<250)){
        return 10;
    }
    else if((x>=250&&x<300)&&(y>=250&&y<300)){
        return 5;
    }
    else{
        return 0;
    }

Plane.prototype.modifyGeometry=函数（x，y）{
如果（（x>=0&&x=0&&y=100&&x=100&&y=150&&x=150&&y=200&&x=200&&y=250&&x=250&&y，基本上只需制作点网格并更改Z值即可

首先是平面网格


const gl=document.querySelector（'canvas'）.getContext（'webgl'）；
常数vs=`
属性向量4位置；
一致mat4矩阵；
void main（）{
gl_位置=矩阵*位置；
}
`;
常数fs=`
高精度浮点；
void main（）{
gl_FragColor=vec4（0,1,0,1）；
}
`;
const program=twgl.createProgram（gl[vs，fs]）；
const positionLoc=gl.getAttriblLocation（程序“位置”）；
常量matrixLoc=gl.getUniformLocation（程序“矩阵”）；
常数gridWidth=40；
常数gridDepth=40；
常量网格点=[]；
对于（设z=0；z“导入高度图”是什么意思）。高度图没有标准格式，因此“导入高度图”没有答案。可能您的意思是读取CSV文件、PNG文件、JPEG文件、JSON文件？在尝试使用它之前，您不会这样做。@gman i Figure window.onload等待所有内容（包括图像）当我只在img.onload上使用run函数时，我在这里得到一个TypeError（无法读取null属性）：
gl=WebGLUtils.setupWebGL（canvas）；
，但当我第一次使用run时，然后是window.onload init（）…我仍然只得到一个空白屏幕您发布的代码在使用图像时没有等待window.onload。它在onload上调用
init
，但图像本身立即被使用。进一步，您可以计算
rowStride
out初始化
gridWidth
。我建议您。注意：我已经超过8年没有使用windon.onload了。它是不常见，也不是2019年的推荐方式。非常感谢，先生，我得到一个运行heighmap图像的空白屏幕，如果你能看一下我在编辑器中的代码，基于什么确定纹理坐标，如果我想从图像中获取纹理坐标，你是什么意思“从图像获取纹理坐标”。通常不会从图像获取纹理坐标。示例中的纹理坐标没有使用。它们只是以正常方式分布在网格上，因此如果使用它们，它们会将图像平面映射到网格上。
var gl;
var canvas;

var img = new Image();
// img.onload = run;
img.crossOrigin = 'anonymous';
img.src = 'https://threejsfundamentals.org/threejs/resources/images/heightmap-96x64.png';


var gridWidth;
var gridDepth;
var gridPoints = [];
var gridIndices = [];
var rowOff = 0;
var rowStride = gridWidth + 1;
var numVertices = (gridWidth * 2 * (gridDepth + 1)) + (gridDepth * 2 * (gridWidth + 1));


//creating plane
function generateHeightPoints() {

    var ctx = document.createElement("canvas").getContext("2d"); //using 2d canvas to read image
    ctx.canvas.width = img.width;
    ctx.canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);

    gridWidth = imgData.width - 1;
    gridDepth = imgData.height - 1;

    for (var z = 0; z <= gridDepth; ++z) {
        for (var x = 0; x <= gridWidth; ++x) {
            var offset = (z * imgData.width + x) * 4;
            var height = imgData.data[offset] * 10 / 255;
            gridPoints.push(x, height, z);
        }
    }
}

function generateIndices() {
for (var z = 0; z<=gridDepth; ++z) {
    rowOff = z*rowStride;
    for(var x = 0; x<gridWidth; ++x) {
        gridIndices.push(rowOff+x,rowOff+x+1);
    }
}

for (var x = 0; x<=gridWidth; ++x) {
    for(var z = 0; z<gridDepth; ++z) {
        rowOff = z * rowStride;
        gridIndices.push(rowOff+x,rowOff+x+rowStride);
    }
}
}
//init

//program init
window.onload = function init()
{ 
canvas = document.getElementById( "gl-canvas" );


gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );




generateHeightPoints();
generateIndices();


var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(gridPoints), 
gl.STATIC_DRAW);

    var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(gridIndices), 
 gl.STATIC_DRAW);

var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );

var matrixLoc = gl.getUniformLocation(program, 'matrix');

var m4 = twgl.m4;
var projection = m4.perspective(60 * Math.PI / 180, gl.canvas.clientWidth / 
gl.canvas.clientHeight, 0.1, 100);
var cameraPosition = [-18, 15, -10];
var target = [gridWidth / 2, -10, gridDepth / 2];
var up = [0, 1, 0];
var camera = m4.lookAt(cameraPosition, target, up);
var view = m4.inverse(camera);
var mat = m4.multiply(projection, view);

gl.uniformMatrix4fv(matrixLoc, false, mat);




 render();




}



function render() {


gl.drawElements(gl.LINES, numVertices, gl.UNSIGNED_SHORT, 0);



gl.drawElements(gl.LINES,numVertices,gl.UNSIGNED_SHORT,0);
requestAnimFrame(render);
}