74 lines
2.2 KiB
HTML
74 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - Rainbow Shader</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<div id="container"></div>
|
|
|
|
<script id="vertexShader" type="x-shader/x-vertex">
|
|
void main() {
|
|
gl_Position = vec4(position, 1.0);
|
|
}
|
|
</script>
|
|
<script id="fragmentShader" type="x-shader/x-fragment">
|
|
|
|
#ifdef GL_ES
|
|
precision mediump float;
|
|
#endif
|
|
#define PI 3.14159265359
|
|
|
|
uniform float u_time;
|
|
uniform vec2 u_resolution;
|
|
|
|
float V(float v) {
|
|
return v/255.0;
|
|
}
|
|
|
|
float sharpRainbow(float y, vec2 st, float offset, float width) {
|
|
|
|
float edge = y-(offset*width);
|
|
return step(edge-width, st.y) - step(edge, st.y);
|
|
}
|
|
|
|
void main() {
|
|
|
|
//original 1978 colors
|
|
//https://en.wikipedia.org/wiki/Rainbow_flag_(LGBT)
|
|
vec3 pink = vec3(V(255.0), V(105.0), V(180.0));
|
|
vec3 red = vec3(V(255.0), 0.0, 0.0);
|
|
vec3 orange = vec3(V(255.0), V(142.0), 0.0);
|
|
vec3 yellow = vec3(V(255.0), V(255.0), 0.0);
|
|
vec3 green = vec3(0.0, V(142.0), 0.0);
|
|
vec3 turq = vec3(0.0, V(192.0), V(192.0));
|
|
vec3 indigo = vec3(V(64.0), 0.0, V(152.0));
|
|
vec3 violet = vec3(V(142.0), 0.0, V(142.0));
|
|
|
|
vec2 st = gl_FragCoord.xy / u_resolution;
|
|
|
|
float width = (1.0/20.0);
|
|
float y = 0.5 + (8.0*width/2.0) + sin(u_time+st.x*PI)*sin(u_time*1.5)*0.25;
|
|
|
|
vec3 color = mix(pink, violet, (1.0 + sin(u_time))/2.0);
|
|
color = mix(color, pink, sharpRainbow(y, st, 0.0, width));
|
|
color = mix(color, red, sharpRainbow(y, st, 1.0, width));
|
|
color = mix(color, orange, sharpRainbow(y, st, 2.0, width));
|
|
color = mix(color, yellow, sharpRainbow(y, st, 3.0, width));
|
|
color = mix(color, green, sharpRainbow(y, st, 4.0, width));
|
|
color = mix(color, turq, sharpRainbow(y, st, 5.0, width));
|
|
color = mix(color, indigo, sharpRainbow(y, st, 6.0, width));
|
|
color = mix(color, violet, sharpRainbow(y, st, 7.0, width));
|
|
|
|
gl_FragColor = vec4(color, 1.0);
|
|
}
|
|
</script>
|
|
<!-- partial -->
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'></script><script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|