上一篇: 纯GLSL分步实现电影般画面的湖光山色<Step1>: 艳阳蓝天(WebGL实现)_含影的博客-CSDN博客

这一篇加了水，模拟了水面的反射和折射。

Demo1(水面只有反射和自发光):Rendering & Art

precision highp float;
// u_param.xy: (stageWidth,stageHeight), u_param.z>1.0: mouse_down,u_param.z<1.0: mouse_up
uniform vec4 u_param;
// u_mouse.x: mouse x offset from mouseDown position x,
// u_mouse.y: mouse y offset from mouseDown position y,
// u_mouse.z: mouse x accumulation from mouseDown position x,
// u_mouse.w: mouse y accumulation from mouseDown position y
uniform vec4 u_mouse;
//
mat2 rotY(const in float a) {
	return mat2(cos(a),sin(a),-sin(a),cos(a));	
}
// light direction
vec3 lightDirection = normalize(vec3( 0.3,0.7, 0.6));
// create the sky and a sun
vec3 createSkyAndSun( const in vec3 ray ) {
	float sunDensity = clamp( dot(lightDirection, ray), 0.0, 1.0 );
	// sky color
	vec3 color = vec3(0.2,0.4,0.6) - ray.y*0.3*vec3(0.1,0.5,1.0) + 0.13;
	// sun and sun's halo
	color += vec3(0.8,.7,0.2)*pow( sunDensity, 8.0 ) * 0.4 + vec3(1.0,.7,0.2)*pow( sunDensity, 16.0 ) * 0.6;
	color *= 0.95;
	return color;
}

// Intersection of the ray and the lake plane
bool intersectLakePlane(const in vec3 ro, const in vec3 ray, const in float height, inout float dis)
{
	if (ray.y < 0.0) {
		float d = -(ro.y - height)/ray.y;
		d = min(10000.0, d);
		if( d > 0. && d < dis ) {
			dis = d;
			return true;
    	}
	}
	return false;
}

// create a matrix33 of camera space to world space
mat3 viewMatrix3(vec3 eye, vec3 center, vec3 up) {
    vec3 f = normalize(center - eye);
    vec3 s = normalize(cross(f, up));
    vec3 u = cross(s, f);
    return mat3(s, u, -f);
}

// return gradient noise (in x) and its derivatives (in yz)
vec3 random3(vec3 c) {
	float j = 4096.0*sin(dot(c,vec3(0.1,0.2,0.3)));
	vec3 r;
	r.z = fract(512.0*j);
	j *= .125;
	r.x = fract(512.0*j);
	j *= .125;
	r.y = fract(512.0*j);
	return r-0.5;
}

/* skew constants for 3d simplex functions */
const float F3 =  0.3333333;
const float G3 =  0.1666667;
// thank