基于纹理亮度的位移贴图Webgl highmap

我不熟悉webgl和opengl es，下面的顶点着色器显示仅生成平面的错误。片段着色器是一个典型的着色器，未提供

uniform mat4 modelview;
uniform mat4 transform;
uniform mat3 normalMatrix;
uniform mat4 texMatrix;
uniform sampler2D texture;
attribute vec4 vertex;
attribute vec4 color;
attribute vec3 normal;
attribute vec2 texCoord;
varying vec4 vertColor;
varying vec4 vertTexCoord;
const float zero_float = 0.0;
const float one_float = 1.0;
const vec3 zero_vec3 = vec3(0);
varying highp float height;


uniform float brightness;

void main() {
  //height =texture2D(texture,vec2(vertex.xz));
  //height =texture2D(texture,vec2(vertex.xz)).r;
  //gl_Position = transform * vertex;
    gl_Position = transform *vec4(vertex.x,vertex.y,brightness,1.0);
  vec3 ecVertex = vec3(modelview * vertex);
  vec3 ecNormal = normalize(normalMatrix * normal);
  vertTexCoord = texMatrix * vec4(texCoord, 1.0, 1.0);
}  

通过使用纹理图像亮度的置换贴图，上述顶点着色器无法显示highmap，并且仅置换具有纹理的平面

---

请帮助了解顶点如何根据纹理像素的亮度从球体表面（原始形状）移动到更高的位置。（在球体表面上显示丘陵，丘陵的高度与纹理像素的亮度成比例）

您不能只移动位置

你有一个2x2的四平面

A--B--C
| /| /|
|/ |/ |
D--E--F
| /| /|
|/ |/ |
G--H--I

点E有一条垂直于平面的单一法线，但如果突然将点E自身沿直线移动到平面，则使用它的每个三角形都需要一条不同的法线，上图中有6个三角形。当然，其他顶点的法线也需要改变

您需要使用标准导数计算片段着色器中的新法线

函数main（）{
const gl=document.querySelector（'canvas'）.getContext（'webgl'）；
常量ext=gl.getExtension（'OES_标准_导数'）；
如果（！ext）{
返回警报（“需要OES_标准_衍生品”）；
}
常数m4=twgl.m4；
常数vs=`
属性向量4位置；
属性向量2 texcoord；
均匀采样二维位移图；
均匀mat4投影；
统一mat4视图；
统一mat4模型；
可变的vec3 v_世界位置；
void main（）{
浮动位移标度=10.0；
浮动位移=纹理2D（位移贴图，texcoord）.r*位移比例；
vec4位移位置=位置+vec4（0，位移，0，0）；
gl_位置=投影*视图*模型*位移位置；
v_worldPosition=（模型*置换位置）.xyz；
}  
`;
常数fs=`
#扩展GL_OES_标准_衍生工具：启用
高精度浮点；
可变的vec3 v_世界位置；
void main（）{
vec3 dx=dFdx（v_世界位置）；
vec3-dy=dFdy（v_-worldPosition）；
vec3法线=归一化（交叉（dy，dx））；
//只需硬编码lightDir和颜色
//使之容易
vec3-lightDir=normalize（vec3（1，-2,3））；
浮动灯光=点（lightDir，正常）；
vec3颜色=vec3（0.3,1,0.1）；
gl_FragColor=vec4（颜色*（光*0.5+0.5），1）；
}
`;
//编译着色器、链接、查找位置
const programInfo=twgl.createProgramInfo（gl[vs，fs]）；
//制作一些顶点数据
//为每个数组调用gl.createBuffer、gl.bindBuffer、gl.bufferData
const bufferInfo=twgl.primitives.createPlaneBufferInfo(
德国劳埃德船级社，
96，//宽度
64，//高度
96，//四通
64，//四分体向下
);
常量tex=twgl.createTexture（gl{
src:'https://threejsfundamentals.org/threejs/resources/images/heightmap-96x64.png',
minMag:gl，
包裹：总包夹至边缘，
});
函数渲染（时间）{
时间*=0.001；//秒
twgl.resizeCanvasToDisplaySize（总图画布）；
总图视口（0，0，总图画布宽度，总图画布高度）；
总帐启用（总帐深度测试）；
总账启用（总账消隐面）；
常数fov=60*Math.PI/180；
const aspect=gl.canvas.clientWidth/gl.canvas.clientHeight；
常数近=0.1；
常数far=200；
常量投影=m4.透视图（视野、纵横比、近距离、远距离）；
常数眼=[Math.cos（时间）*30,10，Math.sin（时间）*30]；
常量目标=[0,0,0]；
const up=[0,1,0]；
常量摄影机=m4。注视（眼睛、目标、向上）；
常量视图=m4。反向（摄像头）；
const model=m4.identity（）；
总账使用程序（programInfo.program）；
//调用gl.bindBuffer、gl.enableVertexAttributeArray、gl.VertexAttributePointer
twgl.setBuffersAndAttributes（总帐、程序信息、缓冲信息）；
//调用gl.activeTexture、gl.bindTexture、gl.uniformXXX
twgl.setUniformsAndBindTextures（programInfo{
投影，
看法
模型
位移图：特克斯，
});
//调用gl.DrawArray或gl.drawElements
twgl.drawBufferInfo（总账，bufferInfo）；
请求动画帧（渲染）；
}
请求动画帧（渲染）；
}
main（）
您不能只移动位置

你有一个2x2的四平面

A--B--C
| /| /|
|/ |/ |
D--E--F
| /| /|
|/ |/ |
G--H--I

点E有一条垂直于平面的单一法线，但如果突然将点E自身沿直线移动到平面，则使用它的每个三角形都需要一条不同的法线，上图中有6个三角形。当然，其他顶点的法线也需要改变

您需要使用标准导数计算片段着色器中的新法线


函数main（）{
const gl=document.querySelector（'canvas'）.getContext（'webgl'）；
常量ext=gl.getExtension（'OES_标准_导数'）；
如果（！ext）{
返回警报（“需要OES_标准_衍生品”）；
}
常数m4=twgl.m4；
常数vs=`
属性向量4位置；
属性向量2 texcoord；
均匀采样二维位移图；
均匀mat4投影；
统一mat4视图；
统一mat4模型；
可变的vec3 v_世界位置；
void main（）{
浮动位移标度=10.0；
浮动位移=纹理2D（位移贴图，texcoord）.r*位移比例；
vec4位移位置=位置+vec4（0，位移，0，0）；
gl_位置=投影*视图*模型*位移位置；
v_worldPosition=（模型*置换位置）.xyz；
}  
`;
常数fs=`
#扩展GL_OES_标准_衍生工具：启用
高精度浮点；
可变的vec3 v_世界位置；
void main（）{
vec3 dx=dFdx（v_世界位置）；
vec3-dy=dFdy（v_-worldPosition）；
vec3法线=归一化（交叉（dy，dx））；
//只需硬编码lightDir和颜色
//使之容易
vec3-lightDir=normalize（vec3（1，-2,3））；
浮动灯光=点（lightDir，正常）；
vec3颜色=vec3（0.3,1,0.1）；
格拉夫拉格色罗