fragmentShader = {
const shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(
shader,
`
#extension GL_OES_standard_derivatives : enable
precision highp float;
// const float pi = 3.14159265359;
const float width = ${canvas.width.toFixed(1)};
const float height = ${canvas.height.toFixed(1)};
const vec2 center = vec2(${padding - bottomLeft.x / scale}, ${padding -
bottomLeft.y / scale}); // vec2(width, height) / 2.0;
uniform float t, contourSpacing, scale;
float value(float x, float y) {
return (${value});
}
float value_(float x, float y) {
return (${value_});
}
float contourFunction (float f, float width, float feather) {
float w1 = width - feather * 0.5;
// Two slightly different options for the gradient magnitude. The first is a
// little faster, the second is a little more accurate. We use this to compute
// the required line width
//float d = fwidth(f);
float d = length(vec2(dFdx(f), dFdy(f)));
// Repeat the contour level every 1.0 units:
f = 0.5 - abs(mod(f, 1.0) - 0.5);
return smoothstep(d * w1, d * (w1 + feather), f);
}
void main(void) {
vec2 z = (gl_FragCoord.xy - center) * scale;
float f = value(z.x, z.y);
float contour = contourFunction(f / contourSpacing, 0.5, 0.75);
float f_ = value_(z.x, z.y);
float contour_ = contourFunction(f_ / contourSpacing, 0.5, 0.75);
gl_FragColor = vec4(vec3(contour * contour_), 1.0);
}
`
);
gl.compileShader(shader);
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;
throw new Error(gl.getShaderInfoLog(shader));
}