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>
<!-- orinal from https://www.shadertoy.com/view/Ms2SD1 -->
<script id="fragment-shader" type="no-js">
	uniform float iGlobalTime;
	uniform vec2 iResolution;
	uniform vec4 iMouse;
	
const int NUM_STEPS = 8;
const float PI	 	= 3.1415;
const float EPSILON	= 1e-3;
float EPSILON_NRM	= 0.1 / iResolution.x;

// sea
const int ITER_GEOMETRY = 3;
const int ITER_FRAGMENT = 5;
const float SEA_HEIGHT = 0.6;
const float SEA_CHOPPY = 4.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);
float SEA_TIME = iGlobalTime * SEA_SPEED;
mat2 octave_m = mat2(1.6,1.2,-1.2,1.6);

// math
mat3 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));
    mat3 m;
    m[0] = vec3(a1.y*a3.y+a1.x*a2.x*a3.x,a1.y*a2.x*a3.x+a3.y*a1.x,-a2.y*a3.x);
	m[1] = vec3(-a2.y*a1.x,a1.y*a2.y,a2.x);
	m[2].........完整代码请登录后点击上方下载按钮下载查看

网友评论0