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