three打造三维能量球效果代码-html代码-BFW代码库

three打造三维能量球效果代码

代码语言：html

所属分类：三维

代码描述：three打造三维能量球效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  margin:0;
}

canvas {
  position: fixed;
}
</style>



</head>

<body >
  <canvas id="webgl" width="500" height="1758"></canvas>

<script id="vertexShader" 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" type="x-shader/x-fragment">
 precision highp float;
  precision highp int;
  
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D u_noise;
  
  // movement variables
  vec3 movement = vec3(.0);
  
  uniform int u_maxIterations;
  uniform float u_stopThreshold;
  uniform float u_stepScale;
  uniform float u_eps;
  uniform int u_octaves;
  uniform vec3 u_clipBGColour;
  uniform vec3 u_blobColour;
  uniform vec3 u_light_position;
  uniform vec3 u_lightColour;
  uniform float u_lightStrength;
  uniform float u_sceneWeight;
  uniform float u_internalStep;
  
  const int maxIterations = 1024;
  
  const vec3 light1_position = vec3(0, 1., -1.);
  const vec3 light1_colour = vec3(.5, .8, 1.85);
  
  const int octaves = 3;
  const int max_octaves = 16;
  
  struct Surface {
    int object_id;
    float distance;
    vec3 position;
    vec3 colour;
    float ambient;
    float spec;
  };
  
  float bumps(in vec3 p, float phase, float size, vec3 frequency) {
    return size * sin(p.x * frequency.x + phase) * cos(p.y * frequency.y + phase) * cos(p.z * frequency.z + phase);
  }
  
  float fractalBumps(in vec3 p, float phase, float size, vec3 frequency, float multiplier) {
    // const float octaves = 2.;
    float _bumps = 0.;
    for(int i = 1; i < max_octaves; i++) {
      if(i > u_octaves) break;
      float f = float(i);
      _bumps += bumps(p, phase + f * 10., size * multiplier * 1./f, frequency * f);
    }
    
    return _bumps;
  }
  
  // This function describes the world in distances from any given 3 dimensional point in space
  float world(in vec3 position, inout int object_id) {
    vec3 pos = floor(position * .5);
    object_id = int(floor(pos.x + pos.y + pos.z));
    // position = mod(position, 1.) - .5;
    float gradient = max(0., (position.y + .3));
    float bumps = fractalBumps(position, u_time * 2., .5 * gradient, vec3(10. + sin(u_time) * 5.), 2.8);
    
    float world = length(position) - .4 + bumps * .15;
    
    // world = max(world, -position.y);
    
    return world;
  }
  float world(in vec3 position) {
    int dummy = 0;
    return world(position, dummy);
  }
  
  Surface getSurface(int object_id, float rayDepth, vec3 sp) {
    return Surface(
      object_id, 
      rayDepth, 
      sp, 
      vec3(1.), 
      .5, 
      200.);
  }
  
  // The raymarch loop
  Surface rayMarch(vec3 ro, vec3 rd, float start, float end, inout vec3 col) {
    float sceneDist = 1e4;
    float rayDepth = start;
    int object_id = 0;
    
    // Light position
    vec3 lp = ro + vec3(2, 2, -5.);
    
    bool hit = false;
    
    for(int i = 0; i < maxIterations; i++) {
      if(i > u_maxIterations) break;
      vec3 r = ro + rd * rayDepth;
      scen.........完整代码请登录后点击上方下载按钮下载查看