more math
This commit is contained in:
parent
ea4210526d
commit
76c007f5b1
3 changed files with 34 additions and 15 deletions
|
@ -26,17 +26,38 @@ const shader = new Shader(app)
|
||||||
.attach(
|
.attach(
|
||||||
gl.FRAGMENT_SHADER,
|
gl.FRAGMENT_SHADER,
|
||||||
`
|
`
|
||||||
uniform lowp float uTime;
|
precision highp float;
|
||||||
uniform lowp float uSinTime;
|
|
||||||
uniform lowp float uCosTime;
|
uniform float uTime;
|
||||||
|
uniform float uSinTime;
|
||||||
|
uniform float uCosTime;
|
||||||
|
|
||||||
varying highp vec2 vTextureCoord;
|
varying highp vec2 vTextureCoord;
|
||||||
|
|
||||||
void main() {
|
vec3 rgb2hsv(vec3 c) {
|
||||||
lowp float slowedSinTime = sin(uTime*0.001)*0.5+0.5;
|
vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
|
||||||
lowp float slowedCosTime = cos(uTime*0.005)*0.5+0.5;
|
vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
|
||||||
|
vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
|
||||||
|
|
||||||
gl_FragColor = vec4(vTextureCoord.x * 0.5 - slowedSinTime, vTextureCoord.y, vTextureCoord.y * 0.5 + slowedSinTime, 1.0);
|
float d = q.x - min(q.w, q.y);
|
||||||
|
float e = 1.0e-10;
|
||||||
|
return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
|
||||||
|
}
|
||||||
|
|
||||||
|
vec3 hsv2rgb(vec3 c) {
|
||||||
|
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
|
||||||
|
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
|
||||||
|
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
|
||||||
|
}
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
vec3 hsv = rgb2hsv(vec3(vTextureCoord, 1.0));
|
||||||
|
hsv.x += uTime * 0.0001;
|
||||||
|
hsv.y = vTextureCoord.x;
|
||||||
|
hsv.z = vTextureCoord.y;
|
||||||
|
vec3 rgb = hsv2rgb(hsv);
|
||||||
|
|
||||||
|
gl_FragColor = vec4(rgb, 1.0);
|
||||||
gl_FragColor = clamp(gl_FragColor, 0.0, 1.0);
|
gl_FragColor = clamp(gl_FragColor, 0.0, 1.0);
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
|
@ -12,12 +12,12 @@ export class Shader {
|
||||||
this.gl.shaderSource(shader, source);
|
this.gl.shaderSource(shader, source);
|
||||||
this.gl.compileShader(shader);
|
this.gl.compileShader(shader);
|
||||||
|
|
||||||
// if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
|
if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
|
||||||
// throw new Error(
|
throw new Error(
|
||||||
// "An error occurred compiling the shaders: " +
|
"An error occurred compiling the shaders: " +
|
||||||
// this.gl.getShaderInfoLog(shader)
|
this.gl.getShaderInfoLog(shader)
|
||||||
// );
|
);
|
||||||
// }
|
}
|
||||||
|
|
||||||
this.gl.attachShader(this.program, shader);
|
this.gl.attachShader(this.program, shader);
|
||||||
|
|
||||||
|
|
|
@ -2,8 +2,6 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
color: white;
|
color: white;
|
||||||
font: monospace;
|
font: monospace;
|
||||||
|
|
Loading…
Add table
Reference in a new issue