Project5-WebGL/part1/simplex.html at d8d76ee718237a3f1394e7f710f0753ef50bca68 · CIS565-Fall-2013/Project5-WebGL · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html>

<head>
<title>Vertex Wave</title>
<meta charset ="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">  <!-- Use Chrome Frame in IE -->
</head>

<body>
<div id="message" style="position:absolute;top:100px"></div> <!-- Pixel offset to avoid FPS counter -->
<canvas id="canvas" style="border: none;" width="1024" height="768" tabindex="1"></canvas>

<script id="vs" type="x-shader/x-vertex">
    attribute vec2 position;
    varying vec3 color;

    uniform mat4 u_modelViewPerspective;
    uniform float u_time;

	vec3 permute(vec3 x);
	float simplexNoise(vec2 v);

    void main(void)
    {
		vec2 simplexVec = vec2(u_time, position);
		float s_contrib = simplexNoise(simplexVec);
		float t_contrib = simplexNoise(vec2(s_contrib,u_time));
		float height = s_contrib*t_contrib;
		color = mix(vec3(1.0, 0.0, 0.0), vec3(0.0, 0.0, 1.0), height);
		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
    }

	vec3 permute(vec3 x) {
		x = ((x*34.0)+1.0)*x;
		return x - floor(x * (1.0 / 289.0)) * 289.0;
	}

	float simplexNoise(vec2 v)
	{
		const vec4 C = vec4(0.211324865405187, 0.366025403784439,  -0.577350269189626, 0.024390243902439);

		vec2 i  = floor(v + dot(v, C.yy) );
		vec2 x0 = v -   i + dot(i, C.xx);

		vec2 i1;
		i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);

		vec4 x12 = x0.xyxy + C.xxzz;
		x12.xy -= i1;

		i = i - floor(i * (1.0 / 289.0)) * 289.0;

		vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
			+ i.x + vec3(0.0, i1.x, 1.0 ));

		vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
		m = m*m ;
		m = m*m ;

		vec3 x = 2.0 * fract(p * C.www) - 1.0;
		vec3 h = abs(x) - 0.5;
		vec3 ox = floor(x + 0.5);
		vec3 a0 = x - ox;

		m *= inversesqrt( a0*a0 + h*h );

		vec3 g;
		g.x  = a0.x  * x0.x  + h.x  * x0.y;
		g.yz = a0.yz * x12.xz + h.yz * x12.yw;
		return 130.0 * dot(m, g);
	}
</script>

<script id="fs" type="x-shader/x-fragment">
    precision mediump float;
	varying vec3 color;

    void main(void)
    {
		gl_FragColor = vec4(color, 1.0);
    }
</script>

<script src ="gl-matrix.js" type ="text/javascript"></script>
<script src ="webGLUtility.js" type ="text/javascript"></script>
<script src ="vert_wave.js" type ="text/javascript"></script>
</body>

</html>