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) {
    float time = u_time;

    vec3 brightness = vec3(0.5);
    vec3 contrast = vec3(0.5,0.21,0.13);
    vec3 osc = vec3(1.,cos(time/20.),cos(time/10.));
    vec3 phase = vec3(1.,0.85,0.91);
	vec4 bg;
      
	vec3 positionOnRay = rayOrigin;
  	float dist = 0.;
  	float totalDist = 0.;
  
  	for(int i = 0; i < MAX_STEPS ; i++) {
    	dist = scene(positionOnRay);
    	positionOnRay +=  rayDir * dist;
      	totalDist += dist;
        bg = cosPalette(totalDist/5., brightness, contrast, osc, phase);
      
      if (dist < EPSILON) {
        vec4 col = vec4(0.8039, 0.5647, 1.0, 1.0);
        vec4 col2 = vec4(1., 1., 0.5, 1.);
        vec4 combo = mix(col, col2, .5 * sin(time) * 0.05);
      	return vec4((totalDist/MAX_DIST + combo) );
      }
      
      if(totalDist > MAX_DIST) {
      	return bg;
      }
    }
	
.........完整代码请登录后点击上方下载按钮下载查看