根据纹理亮度通过位移映射的Webgl高图

Question

我是webgl和opengl的新手，在顶点着色器下面显示的错误仅会产生一个计划。片段着色器是典型的，未提供。

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);
}  

上面的顶点着色器无法通过使用纹理图像亮度的位移映射来显示高贴图，而仅用纹理移动平面请根据纹理像素的亮度，帮助顶点如何从球体（原始形状）的表面移到更高的位置。（显示像球体表面上的山丘，山丘的高度成比例到纹理像素的亮度）

Answer 1

您不能只移动位置

想象您有一个2x2四边形平面

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

E点有一个垂直于平面的法线，但是如果将E点本身垂直于垂直于平面的方向移动，则每个使用它的三角形都需要一个不同的法线，即上图中的6个三角形。当然，其他顶点的法线也需要更改。

您需要通过查看置换图上的多个点来在片段着色器中计算新的法线

function main() {
  const gl = document.querySelector('canvas').getContext('webgl');
  const ext = gl.getExtension('OES_standard_derivatives');
  if (!ext) {
    return alert('need OES_standard_derivatives');
  }

  const m4 = twgl.m4;
  const vs = `
  attribute vec4 position;
  attribute vec2 texcoord;

  uniform sampler2D displacementMap;
  uniform mat4 projection;
  uniform mat4 view;
  uniform mat4 model;

  varying vec3 v_worldPosition;

  void main() {
    float displacementScale = 10.0;
    float displacement = texture2D(displacementMap, texcoord).r * displacementScale;
    vec4 displacedPosition = position + vec4(0, displacement, 0, 0);
    gl_Position = projection * view * model * displacedPosition;
    v_worldPosition = (model * displacedPosition).xyz;
  }  
  `;

  const fs = `
  #extension GL_OES_standard_derivatives : enable

  precision highp float;

  varying vec3 v_worldPosition;

  void main() {
    vec3 dx = dFdx(v_worldPosition);
    vec3 dy = dFdy(v_worldPosition);
    vec3 normal = normalize(cross(dx, dy));
    
    // just hard code lightDir and color
    // to make it easy
    vec3 lightDir = normalize(vec3(1, 2, 3));
    float light = dot(lightDir, normal);
    vec3 color = vec3(0.3, 1, 0.1);
    
    gl_FragColor = vec4(color * light, 1);
  }
  `;

  // compile shader, link, look up locations
  const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

  // make some vertex data
  // calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
  const bufferInfo = twgl.primitives.createPlaneBufferInfo(
      gl,
      96,  // width
      64,  // height
      96,  // quads across
      64,  // quads down
  );

  const tex = twgl.createTexture(gl, {
    src: 'https://threejsfundamentals.org/threejs/resources/images/heightmap-96x64.png',
    minMag: gl.NEAREST,
    wrap: gl.CLAMP_TO_EDGE,
  });

  function render(time) {
    time *= 0.001;  // seconds

    twgl.resizeCanvasToDisplaySize(gl.canvas);

    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.CULL_FACE);

    const fov = 60 * Math.PI / 180;
    const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
    const near = 0.1;
    const far = 200;
    const projection = m4.perspective(fov, aspect, near, far);

    const eye = [Math.cos(time) * 30, 10, Math.sin(time) * 30];
    const target = [0, 0, 0];
    const up = [0, 1, 0];
    const camera = m4.lookAt(eye, target, up);
    const view = m4.inverse(camera);
    const model = m4.identity();

    gl.useProgram(programInfo.program);

    // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
    twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);

    // calls gl.activeTexture, gl.bindTexture, gl.uniformXXX
    twgl.setUniformsAndBindTextures(programInfo, {
      projection,
      view,
      model,
      displacementMap: tex,
    });

    // calls gl.drawArrays or gl.drawElements
    twgl.drawBufferInfo(gl, bufferInfo);

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}
main();

<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas id="canvas"></canvas>

或通过查看置换图上的多个点或

function main() {
  const gl = document.querySelector('canvas').getContext('webgl');
  const ext = gl.getExtension('OES_standard_derivatives');
  if (!ext) {
    return alert('need OES_standard_derivatives');
  }

  const m4 = twgl.m4;
  const vs = `
  attribute vec4 position;
  attribute vec2 texcoord;

  uniform sampler2D displacementMap;
  uniform mat4 projection;
  uniform mat4 view;
  uniform mat4 model;

  varying vec2 v_texcoord;

  void main() {
    float displacementScale = 10.0;
    float displacement = texture2D(displacementMap, texcoord).r * displacementScale;
    vec4 displacedPosition = position + vec4(0, displacement, 0, 0);
    gl_Position = projection * view * model * displacedPosition;
    v_texcoord = texcoord;
  }  
  `;

  const fs = `
  #extension GL_OES_standard_derivatives : enable

  precision highp float;

  varying vec2 v_texcoord;

  uniform sampler2D displacementMap;

  void main() {
    // should make this a uniform so it's shared
    float displacementScale = 10.0;
    
    // I'm sure there is a better way to compute
    // what this offset should be
    float offset = 0.01;
    
    vec2 uv0 = v_texcoord;
    vec2 uv1 = v_texcoord + vec2(offset, 0);
    vec2 uv2 = v_texcoord + vec2(0, offset);
    
    float h0 = texture2D(displacementMap, uv0).r;
    float h1 = texture2D(displacementMap, uv1).r;
    float h2 = texture2D(displacementMap, uv2).r;
    
    vec3 p0 = vec3(uv0, h0 * displacementScale);
    vec3 p1 = vec3(uv1, h1 * displacementScale);
    vec3 p2 = vec3(uv2, h2 * displacementScale);
    
    vec3 v0 = p1 - p0;
    vec3 v1 = p2 - p0;
    
    vec3 normal = normalize(cross(v0, v1));
    
    // just hard code lightDir and color
    // to make it easy
    vec3 lightDir = normalize(vec3(1, 3, -2));
    float light = dot(lightDir, normal);
    vec3 color = vec3(0.3, 1, 0.1);
    
    gl_FragColor = vec4(color * (light * 0.5 + 0.5), 1);
  }
  `;

  // compile shader, link, look up locations
  const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

  // make some vertex data
  // calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
  const bufferInfo = twgl.primitives.createPlaneBufferInfo(
      gl,
      96,  // width
      64,  // height
      96,  // quads across
      64,  // quads down
  );

  const tex = twgl.createTexture(gl, {
    src: 'https://threejsfundamentals.org/threejs/resources/images/heightmap-96x64.png',
    minMag: gl.LINEAR,
    wrap: gl.CLAMP_TO_EDGE,
  });

  function render(time) {
    time *= 0.001;  // seconds

    twgl.resizeCanvasToDisplaySize(gl.canvas);

    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.CULL_FACE);

    const fov = 60 * Math.PI / 180;
    const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
    const near = 0.1;
    const far = 200;
    const projection = m4.perspective(fov, aspect, near, far);

    const eye = [Math.cos(time) * 30, 10, Math.sin(time) * 30];
    const target = [0, 0, 0];
    const up = [0, 1, 0];
    const camera = m4.lookAt(eye, target, up);
    const view = m4.inverse(camera);
    const model = m4.identity();

    gl.useProgram(programInfo.program);

    // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
    twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);

    // calls gl.activeTexture, gl.bindTexture, gl.uniformXXX
    twgl.setUniformsAndBindTextures(programInfo, {
      projection,
      view,
      model,
      displacementMap: tex,
    });

    // calls gl.drawArrays or gl.drawElements
    twgl.drawBufferInfo(gl, bufferInfo);

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}
main();

<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas id="canvas"></canvas>