-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (153 loc) · 5.26 KB
/
index.html
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html>
<head>
<title>shaders</title>
<script src="node_modules/three/three.js"></script>
<script src="node_modules/three/examples/js/controls/OrbitControls.js"></script>
<script src="bower_components/threestrap/build/threestrap.min.js"></script>
<script src="js/Lut.js"></script>
<script src="js/rStats.js"></script>
<script src="js/threestrap-rstats.js"></script>
<style>
canvas {
background: radial-gradient(ellipse at center, #7d7e7d 0%, #0e0e0e 100%);
}
</style>
</head>
<body>
<div style="color: lightgray; background-color: black; position: absolute; top: 0px">
Drag to rotate, mousewheel to zoom, rightclick-drag to pan.
</div>
<div style="color: lightgray; background-color: black; position: absolute; bottom: 0px">
<a href="build/blackcube.html">blackcube</a> -
<a href="build/sinecube.html">sinecube</a> -
<a href="build/gradient.html">gradient</a> -
<a href="build/beach.html">noisyball</a>
</div>
<script id="vertexShader" type="x-shader/x-vertex">
// high precision floats
#ifdef GL_ES
precision highp float;
#endif
attribute vec3 vertColor; // custom color for this vertex
uniform float time;
varying vec2 vUv;
varying vec3 vNormal; // the normal of the VERTEX
varying vec3 vCamera;
//--------------------------------
// https://github.com/ashima/webgl-noise
vec3 mod289(vec3 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec2 mod289(vec2 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec3 permute(vec3 x) {
return mod289(((x*34.0)+1.0)*x);
}
float snoise(vec2 v) {
const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0
0.366025403784439, // 0.5*(sqrt(3.0)-1.0)
-0.577350269189626, // -1.0 + 2.0 * C.x
0.024390243902439); // 1.0 / 41.0
// First corner
vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);
// Other corners
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;
// Permutations
i = mod289(i); // Avoid truncation effects in permutation
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;
// Gradients: 41 points uniformly over a line, mapped onto a diamond.
// The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)
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;
// Normalise gradients implicitly by scaling m
// Approximation of: m *= inversesqrt( a0*a0 + h*h );
m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
// Compute final noise value at P
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);
}
//--------------------------------
// Variables from THREE: https://github.com/mrdoob/three.js/blob/master/src/renderers/webgl/WebGLProgram.js#L153
void main()
{
// passthroughs
vNormal = normal;
vUv = uv;
vCamera = cameraPosition;
vec3 newPosition = position;
// get a continuously varying effect per vertex, and increment it through the noise space
float noise = snoise(vec2(vNormal.x + time, vNormal.y + time));
// scale the effect
newPosition *= (1.0 + (noise / 8.0));
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(newPosition, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
// high precision floats
#ifdef GL_ES
precision highp float;
#endif
varying vec3 vColor;
varying vec2 vUv;
varying vec3 vNormal; // the normal of the PIXEL
varying vec3 vCamera;
bool near(float var, float target)
{
return (abs(target - var) < 0.0005) ? true : false;
}
void main()
{
vec3 red = vec3(1.0, 0.3, 0.3);
vec3 green = vec3(0.3, 1.0, 0.3);
vec3 blue = vec3(0.3, 0.3, 1.0);
vec3 brown = vec3(0.7, 0.4, 0.2);
vec3 white = vec3(1.0, 1.0, 1.0);
vec3 black = vec3(0.0, 0.0, 0.0);
vec3 rgb;
if (vUv.y > 0.95)
{
rgb = white;
}
else if (vUv.y < 0.05)
{
rgb = white;
}
else if (vUv.x < 0.17) { rgb = red; }
else if (vUv.x < 0.33) { rgb = white; }
else if (vUv.x < 0.49) { rgb = green; }
else if (vUv.x < 0.65) { rgb = white; }
else if (vUv.x < 0.81) { rgb = blue; }
else { rgb = vec3(1.0, 1.0, 1.0); }
if (near(vUv.y, 0.95) || near(vUv.y, 0.05)) { rgb = black; }
else if (near(vUv.y, 0.36) || near(vUv.y, 0.64)) { rgb = black; }
else if (near(vUv.x, 0.17) || near(vUv.x, 0.33) || near(vUv.x, 0.49)
|| near (vUv.x, 0.65) || near(vUv.x, 0.81) || near(vUv.x, 0.0)) { rgb = black; }
vec3 cameraNormal = normalize(vCamera);
float alignmentToCamera = dot(vNormal, cameraNormal);
// lighting: range from facing the camera = 120% brightness, to facing away = 20%.
rgb *= 0.2 + alignmentToCamera;
// hacky specular highlight
float alignmentToSpotlight = dot(vNormal, normalize(vec3(1.0 ,1.0 ,1.0)));
if (alignmentToSpotlight > 0.95) { rgb = mix(rgb, white, (alignmentToSpotlight / 3.0)); }
gl_FragColor = vec4(rgb, 1.0); // last value is alpha
}
</script>
<script src="js/main.js"></script>
</body>
</html>