three生成一个视觉差异的老鹰效果代码-html代码-BFW代码库

代码语言：html

代码描述：three生成一个视觉差异的老鹰效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en"><head>

  <meta charset="UTF-8">
  

  
  
<style>
canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  cursor: -webkit-grab;
  cursor: grab;
}
</style>


</head>

<body>
  
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>

      <script >



// ----
// canvas and context
// ----

const canvas = document.createElement('canvas');
document.body.append(canvas);

const gl = canvas.getContext('webgl2');
if (!gl) throw alert('webgl2 is required, bye');

// ----
// webgl program
// ----

const vsrc = `#version 300 es 
layout(location=0)in vec3 aPosition;
layout(location=1)in vec2 aTexcoord;
layout(location=2)in vec3 aTangent;
layout(location=3)in vec3 aNormal;
uniform mat4 uProj;
uniform mat4 uView;
uniform mat4 uModel;
uniform vec3 uViewPos;
out vec2 vTexcoord;
out vec3 vFragPos;
out vec3 vTsViewPos;
out vec3 vTsFragPos;
void main() {
  gl_Position = uProj * uView * uModel * vec4(aPosition, 1.);
  vFragPos = vec3(uModel * vec4(aPosition, 1.));
  vTexcoord = aTexcoord;
  // TBN 
  vec3 T = normalize(aTangent - dot(aNormal, aTangent) * aNormal);
  vec3 B = normalize(cross(aNormal, T)); // right-handed tangent space
  mat3 TBNinv = transpose(mat3(T, B, aNormal));
  // into TBN space 
  vTsViewPos = TBNinv * uViewPos;
  vTsFragPos = TBNinv * vFragPos;
}
`;

const fsrc = `#version 300 es
precision highp float;
out vec4 fColor;
in vec3 vFragPos;
in vec2 vTexcoord;
in vec3 vTsViewPos;
in vec3 vTsFragPos;
uniform sampler2D uHeightMap;

float depth(in vec2 st) {
  return 1. - texture(uHeightMap, st).r;
}

#define scale (.5)
#define minLayer (10.) // 0d
#define maxLayer (50.) // 90d 
vec2 f(vec2 texcoord, vec3 tsEyeToFrag) {
  float n = mix(maxLayer, minLayer, abs(dot(vec3(0.,0.,1.), tsEyeToFrag))); // n layers
  vec2 offsetPerLayer = tsEyeToFrag.xy * scale / n;
  float depthPerLayer = 1. / n;
  vec2 uv0 = texcoord;  // prev uv
  vec2 uv1 = texcoord;  // curr uv
  float d = 2.;
  float D = 0.;
  while (d > D) {
    uv0 = uv1;
    uv1 += offsetPerLayer;
    d = depth(uv1);
    D += depthPerLayer;
  }

  float d1 = abs(D-d); // dist from curr depth value to curr layer depth
  float d0 = abs((D-depthPerLayer) - depth(uv0)); // ditto, for prev  
  return mix(uv0, uv1, d0 / (d0 + d1)); // lerp
}

void main() {
  vec3 eye2frag = normalize(vTsFragPos - vTsViewPos);
  vec2 texcoord = f(vTexcoord, eye2frag);
  if(texcoord.x > 1. || texcoord.y > 1. || texcoord.x < 0. || texcoord.y < 0.)
    discard;
  fColor = texture(uHeightMap, texcoord);
}
`;

const prog = (() => {

  const vs = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vs, vsrc);
  gl.compileShader(vs);
  if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
    throw new Error('VS: ' + gl.getShaderInfoLog(vs));
  }

  const fs = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fs, fsrc);
  gl.compileShader(fs);
  if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
    throw new Error('FS: ' + gl.getShaderInfoLog(fs));
  }

  const prog = gl.createProgram();
  gl.attachShader(prog, vs);
  gl.attachShader(prog, fs);
  gl.linkProgram(prog);
  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
    throw new Error('Prog: ' + gl.getProgramInfoLog(prog));
  }

  gl.deleteShader(vs);
  gl.detachShader(prog, vs);
  gl.deleteShader(fs);
  gl.detachShader(prog, fs);

  return prog;
})();

// ----
// locations
// ----

const loc = {
  aPosition: 0,
  aTexcoord: 1,
  aTangent: 2,
  aNormal: 3,
  uProj: gl.getUniformLocation(prog, 'uProj'),
  uView: gl.getUniformLocation(prog, 'uView'),
  uModel: gl.getUniformLocation(prog, 'uModel'),
  uViewPos: gl.getUniformLocation(prog, 'uVie.........完整代码请登录后点击上方下载按钮下载查看