three+webgl模拟大海海水波动动画效果代码
代码语言:html
所属分类:动画
代码描述:three+webgl模拟大海海水波动动画效果代码
代码标签: three webgl 模拟 大海 海水 波动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { overflow: hidden; margin: 0; height: 100%; } </style> </head> <body> <script id="vertex-shader" type="no-js"> void main() { gl_Position = vec4( position, 1.0 ); } </script> <script id="fragment-shader" type="no-js"> #ifdef GL_ES precision mediump float; #endif uniform float time; uniform vec2 mouse; uniform vec2 resolution; varying vec2 surfacePosition; const int NUM_STEPS = 8; const float PI = 3.1415; const float EPSILON = 1e-3; float EPSILON_NRM = 0.1 / resolution.x; // sea const int ITER_GEOMETRY = 3; const int ITER_FRAGMENT = 5; const float SEA_HEIGHT = 0.6; const float SEA_CHOPPY = 2.0; const float SEA_SPEED = 0.8; const float SEA_FREQ = 0.16; const vec3 SEA_BASE = vec3(0.1,0.19,0.22); const vec3 SEA_WATER_COLOR = vec3(0.8,0.9,0.6); const float SKY_INTENSITY = 1.0; #define SEA_TIME time * SEA_SPEED // math mat4 fromEuler(vec3 ang) { vec2 a1 = vec2(sin(ang.x),cos(ang.x)); vec2 a2 = vec2(sin(ang.y),cos(ang.y)); vec2 a3 = vec2(sin(ang.z),cos(ang.z)); mat4 m; m[0] = vec4(a1.y*a3.y+a1.x*a2.x*a3.x,a1.y*a2.x*a3.x+a3.y*a1.x,-a2.y*a3.x,0.0); m[1] =.........完整代码请登录后点击上方下载按钮下载查看
网友评论0