wtc-math+webgl实现三维立体空间向前推进摄像机视角效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：wtc-math+webgl实现三维立体空间向前推进摄像机视角效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
body {
  background: #666;
  margin: 0;
  overflow: hidden;
}
canvas {
  height: 100vh;
  width: 100vw; 
  touch-action: none;
  cursor: pointer;
}
.osc {
  left: 0px;
  position: fixed;
  top: 0px;
}

.button {
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
}
.controls {
  position: fixed;
  z-index: 10;
  left: 0;
  bottom: 0;
}
.playpause {
  background: #AAB;
  padding: 10px;
}
.playpause label {
  display: block;
  box-sizing: border-box;

  width: 0;
  height: 20px;

  cursor: pointer;

  border-color: transparent transparent transparent #202020;
  transition: 100ms all ease;
  will-change: border-width;

  border-style: double;
  border-width: 0px 0 0px 20px;
}
.playpause input[type='checkbox'] {
  visibility: hidden;
}
.playpause.checked label {
  border-style: double;
  border-width: 0px 0 0px 20px;
}
.playpause label {
  border-style: solid;
  border-width: 10px 0 10px 20px;
}
/* } */
</style>



</head>

<body  >
  <script id="vertexShader_buffer" type="x-shader/x-vertex">attribute vec4 a_position;  
  uniform mat4 u_modelViewMatrix;
  uniform mat4 u_projectionMatrix;
  
  void main() {
    gl_Position = a_position;
  }
</script>
<script id="fragmentShader_AA" type="x-shader/x-vertex">
 precision highp float;
  #extension GL_EXT_shader_texture_lod : enable
  #extension GL_OES_standard_derivatives : enable
  
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  
  uniform sampler2D b_render;

  #define FXAA_REDUCE_MIN   (1.0/ 128.0)
  #define FXAA_REDUCE_MUL   (1.0 / 8.0)
  #define FXAA_SPAN_MAX     8.0

  void texcoords(vec2 fragCoord, vec2 resolution,
        out vec2 v_rgbNW, out vec2 v_rgbNE,
        out vec2 v_rgbSW, out vec2 v_rgbSE,
        out vec2 v_rgbM) {
    vec2 inverseVP = 1.0 / resolution.xy;
    v_rgbNW = (fragCoord + vec2(-1.0, -1.0)) * inverseVP;
    v_rgbNE = (fragCoord + vec2(1.0, -1.0)) * inverseVP;
    v_rgbSW = (fragCoord + vec2(-1.0, 1.0)) * inverseVP;
    v_rgbSE = (fragCoord + vec2(1.0, 1.0)) * inverseVP;
    v_rgbM = vec2(fragCoord * inverseVP);
  }

  //optimized version for mobile, where dependent 
  //texture reads can be a bottleneck
  vec4 fxaa(sampler2D tex, vec2 fragCoord, vec2 resolution,
              vec2 v_rgbNW, vec2 v_rgbNE, 
              vec2 v_rgbSW, vec2 v_rgbSE, 
              vec2 v_rgbM) {
      vec4 color;
      mediump vec2 inverseVP = vec2(1.0 / resolution.x, 1.0 / resolution.y);
      vec3 rgbNW = texture2D(tex, v_rgbNW).xyz;
      vec3 rgbNE = texture2D(tex, v_rgbNE).xyz;
      vec3 rgbSW = texture2D(tex, v_rgbSW).xyz;
      vec3 rgbSE = texture2D(tex, v_rgbSE).xyz;
      vec4 texColor = texture2D(tex, v_rgbM);
      vec3 rgbM  = texColor.xyz;
      vec3 luma = vec3(0.299, 0.587, 0.114);
      float lumaNW = dot(rgbNW, luma);
      float lumaNE = dot(rgbNE, luma);
      float lumaSW = dot(rgbSW, luma);
      float lumaSE = dot(rgbSE, luma);
      float lumaM  = dot(rgbM,  luma);
      float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));
      float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));

      mediump vec2 dir;
      dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));
      dir.y =  ((lumaNW + lumaSW) - (lumaNE + lumaSE));

      float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) *
                            (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);

      float rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);
      dir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX),
                max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX),
                dir * rcpDirMin)) * inverseVP;

      vec3 rgbA = 0.5 * (
          texture2D(tex, fragCoord * inverseVP + dir * (1.0 / 3.0 - 0.5)).xyz +
          texture2D(tex, fragCoord * inverseVP + dir * (2.0 / 3.0 - 0.5)).xyz);
      vec3 rgbB = rgbA * 0.5 + 0.25 * (
          texture2D(tex, fragCoord * inverseVP + dir * -0.5).xyz +
          texture2D(tex, fragCoord * inverseVP + dir * 0.5).xyz);

      float lumaB = dot(rgbB, luma);
      if ((lumaB < lumaMin) || (lumaB > lumaMax))
          color = vec4(rgbA, texColor.a);
      else
          color = vec4(rgbB, texColor.a);
      return color;
  }

void main() {
  vec2 rcpFrame = 1./u_resolution.xy;
  vec2 uv2 = gl_FragCoord.xy / u_resolution.xy;
    
    vec3 col;
    mediump vec2 v_rgbNW;
        mediump vec2 v_rgbNE;
        mediump vec2 v_rgbSW;
        mediump vec2 v_rgbSE;
        mediump vec2 v_rgbM;
        texcoords(gl_FragCoord.xy, u_resolution.xy, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM);
    col = fxaa( b_render, gl_FragCoord.xy, u_resolution.xy, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM).rgb;  
    
    
    gl_FragColor = vec4( col, 1. );
  
  
  // vec3 colour = FxaaPixelShader( uv, b_render, rcpFrame);
  // gl_FragColor = vec4(colour, 1.);
}
                                             </script>
<script id="fragmentShader_under" type="x-shader/x-vertex">
  precision highp float;
  precision highp int;
  
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D u_noise;
  uniform float u_fov;
  
  uniform sampler2D b_render;
  
  const float vSize = .4; // this is the voxel size
  
  const int maxIterations = 256;
  const int maxIterationsShad = 16;
  const float stopThreshold = 0.001;
  const float stepScale = .7;
  const float eps = 0.005;
  const vec3 clipColour = vec3(1.);
  const vec3 fogColour = vec3(.0,.1,.3);
  
  const vec3 light1_position = vec3(0, 1., 1.);
  const vec3 light1_colour = vec3(.8, .8, .85)*1.5;
  const float light1_strength = .9;
  const float light1_attenuation = 0.15;
  
  const float fogStrength = 0.03;
  
  struct Surface {
    int object_id;
    float distance;
    vec3 position;
    vec3 colour;
    float ambient;
    float spec;
    vec3 norm;
    vec3 vPos;
    vec3 mask;
    vec3 rd;
  };
  
  vec3 path(float z) {
    // return vec3(
      // cos(z*.1 + sin(z*-1.)*.05)*10.+sin(z * .35)*2.,sin(cos(z*.4)*1.5)*2.+cos(z*.143) * 3.,z);
    return vec3(0,0,z);
  }
  
  float opExtrusion( in vec3 p, in float d, in float h ) {
      vec2 w = vec2( d, abs(p.z) - h );
      return min(max(w.x,w.y),0.0) + length(max(w,0.0));
  }
  float sdBox( in vec2 p, in vec2 b ) {
      vec2 d = abs(p)-b;
      return length(max(d,0.0)) + min(max(d.x,d.y),0.0);
  }
  vec3 hash33(vec3 p3) {
    p3 = fract(p3 * vec3(.1031, .1030, .0973));
    p3 += dot(p3, p3.yxz+33.33);
    return fract((p3.xxy + p3.yxx)*p3.zyx);
  }
  
  mat2 rot(float a) {
    float s = sin(a);
    float c = cos(a);
    return mat2(c, -s, s, c);
  }
  
  float world(in vec3 p, inout int object_id) {
    
    p.xy -= path(p.z+.2).xy;
    p.y -= 2.;
    // p.xy *= rot(p.z * .005);
    
    float f = mix(max(p.y, -step(abs(p.x) - 1., 0.)), 100., step(1., float(object_id)));
    float l = abs(p.x);
    
    vec3 id = floor(p/2.);
    vec3 r = hash33(id);
    p = mod(p, 4.) - 2.;
    
    return max(length(p.xz)-r.x*1.*length(p.yz)-r.y*1., -l+.5);
  }
  float world(in vec3 position) {
    int dummy = 0;
    return world(position, dummy);
  }
  float world(in vec3 position, in float voxelSize) {
    int dummy = 1;
    return world(position*voxelSize, dummy);
  }
  
  Surface getSurface(int object_id, float rayDepth, vec3 sp, vec3 norm, vec3 vPos, vec3 mask, vec3 rd) {
    return Surface(
      object_id, 
      rayDepth, 
      sp, 
      vec3(.5, 0.3, 0.), 
      .3, 
      2.,
      norm,
      vPos,
      mask,
      rd);
  }
  
  vec3 voxelTrace(
    vec3 ro, 
    vec3 rd, 
    out bool hit, 
    inout vec3 norm, 
    out float rayDepth, 
    out float steps, 
    out vec2 center,
    out vec3 mask,
    out vec3 vPos) {
    
    ro /= vSize;
    rd /= vSize;

    vec3 vRay = floor(ro) + .5;
    vec3 inRay = 1./abs(rd);
    vec3 signRay = sign(rd);
    rd = signRay;
    vec3 side = (inRay*(rd * (vRay - ro) + 0.5));
    // vec3 mask = vec3(0);

    for (int i = 0; i < maxIterations; i++) {
      if (world(vRa.........完整代码请登录后点击上方下载按钮下载查看