three+webgl实现三维水下视角动画效果代码-html代码-BFW代码库

three+webgl实现三维水下视角动画效果代码

代码语言：html

所属分类：动画

代码描述：three+webgl实现三维水下视角动画效果代码

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

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

<head>

  <meta charset="UTF-8">

  
  
<style>
* {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

body {
  height: 100vh;
  background-color: black;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
</style>


</head>

<body>

<div id="shadercollab"></div>
<script id="vertex" type="x-shader/x-vertex">
        void main() { gl_Position = vec4(position, 1.0); }
</script>

<script id="fragment" type="x-shader/x-fragment">
precision highp float;

uniform vec2 u_resolution;
uniform float u_time;

#define MAX_STEPS 8
#define EPSILON 0.001
#define MAX_DIST 4.

vec4 cosPalette(float t , vec3 brightness, vec3 contrast, vec3 osc, vec3 phase) {
    return vec4(brightness + contrast*cos( 6.28318*(osc*t+phase) ),1);
}

float sphere(vec3 p, float s) {
  return length(p) - s;
}
        
// https://mercury.sexy/hg_sdf/
vec2 modPolar(vec2 p, float repetitions) {
    float angle = 2.*3.14/repetitions;
    float a = atan(p.y, p.x) + angle/2.;
    float r = length(p);
    float c = floor(a/angle);
    a = mod(a,angle) - angle/2.;
    p = vec2(cos(a), sin(a))*r;
    return p;
}

float scene(in vec3 pos) {
        float ground = pos.y + 0.5;
        vec3 c = vec3(2);
        pos.xy = modPolar(floor(pos.yz) , 5.);

        pos = mod(pos, c) - (c*0.5);
        float sphere = sphere(pos + (sin(u_time)-1.2)*0.2, 0.25);

        float ret = min(ground, sphere);
        return ret;
}

// raymarcher
vec4 trace(vec3 rayOrigin, vec3 rayDir) .........完整代码请登录后点击上方下载按钮下载查看