viewof gl = {
const canvas = DOM.canvas(width, height);
canvas.value = canvas.getContext("webgl");
return canvas;
}
width = rawImage.width
height = rawImage.height //~~(width * 9) / 16
program = {
const program = gl.createProgram();
var shader;
if (selectFilter === "SNN") shader = fragmentShaderSNN;
if (selectFilter === "Outline") shader = fragmentShaderOutline;
gl.attachShader(program, vertexShader);
gl.attachShader(program, shader);
gl.linkProgram(program);
if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program;
throw new Error(gl.getProgramInfoLog(program));
}
draw = {
const u_size = gl.getUniformLocation(program, "u_size");
const a_vertex = gl.getAttribLocation(program, "a_vertex");
gl.useProgram(program);
gl.enableVertexAttribArray(a_vertex);
gl.vertexAttribPointer(a_vertex, 2, gl.FLOAT, false, 0, 0);
gl.uniform1f(u_size, Math.max(viewof gl.width, viewof gl.height));
// while (true)
function render() {
gl.texImage2D(
gl.TEXTURE_2D,
0,
gl.RGBA,
gl.RGBA,
gl.UNSIGNED_BYTE,
rawImage
);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
// yield;
}
render();
}
vertexShader = {
const shader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(
shader,
`
attribute vec2 a_vertex;
void main(void) {
gl_Position = vec4(a_vertex, 0.0, 1.0);
}
`
);
gl.compileShader(shader);
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;
throw new Error(gl.getShaderInfoLog(shader));
}
fragmentShaderSNN = {
const shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(
shader,
`
precision mediump float;
// our texture
uniform sampler2D u_image;
uniform float u_size;
#define KERNEL_SIZE ${KERNEL_SIZE}
#define HALF_SIZE (KERNEL_SIZE / 2)
#define DIRECT ${SelectSNNDirect}
void main() {
float u_pixelsCountRev = 1.0 / float(HALF_SIZE * KERNEL_SIZE);
vec2 textCoord = vec2(gl_FragCoord.x / u_size, 1.0 - gl_FragCoord.y / u_size);
vec2 onePixel = vec2(1.0, 1.0) / u_size;
vec4 meanColor = vec4(0);
vec4 v = texture2D(u_image, textCoord);
int count = 0;
for (int y = 0; y <= HALF_SIZE; y++) {
for (int x = -HALF_SIZE; x <= HALF_SIZE; x++) {
vec4 v1 = texture2D(u_image, textCoord + vec2(x, y) * onePixel);
vec4 v2 = texture2D(u_image, textCoord + vec2(-x, -y) * onePixel);
vec4 d1 = abs(v - v1);
vec4 d2 = abs(v - v2);
float dd1 = dot(d1, d1);
float dd2 = dot(d2, d2);
vec4 rv = (dd1 DIRECT dd2) ? v1 : v2;
meanColor += rv;
}
}
gl_FragColor = meanColor * u_pixelsCountRev;
}
`
);
gl.compileShader(shader);
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;
throw new Error(gl.getShaderInfoLog(shader));
}
fragmentShaderOutline = {
const shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(
shader,
`
precision highp float;
uniform sampler2D u_image;
uniform float u_size;
void main() {
float x = gl_FragCoord.x / u_size;
float y = 1.0 - gl_FragCoord.y / u_size;
float px = 1.0 / u_size;
vec3 a0 = texture2D(u_image, vec2(x - px, y + px)).xyz;
vec3 a1 = texture2D(u_image, vec2(x, y + px)).xyz;
vec3 a2 = texture2D(u_image, vec2(x + px, y + px)).xyz;
vec3 a3 = texture2D(u_image, vec2(x - px, y)).xyz;
vec3 a5 = texture2D(u_image, vec2(x + px, y)).xyz;
vec3 a6 = texture2D(u_image, vec2(x - px, y - px)).xyz;
vec3 a7 = texture2D(u_image, vec2(x, y - px)).xyz;
vec3 a8 = texture2D(u_image, vec2(x + px, y - px)).xyz;
vec3 gx = -a0 + a2 - 2.0 * a3 + 2.0 * a5 - a6 + a8;
vec3 gy = -a0 - 2.0 * a1 - a2 + a6 + 2.0 * a7 + a8;
gl_FragColor = vec4(sqrt(gx * gx + gy * gy), 1.0);
}
`
);
gl.compileShader(shader);
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;
throw new Error(gl.getShaderInfoLog(shader));
}
{
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
return texture;
}
{
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
Float32Array.of(-1, -1, +1, -1, +1, +1, -1, +1),
gl.STATIC_DRAW
);
return buffer;
}
// video = {
// const video = document
// .createElement("div")
// .appendChild(html`<video autoplay playsinline>`);
// const stream = await navigator.mediaDevices.getUserMedia({
// video: {
// width: { ideal: width },
// height: { ideal: height },
// frame: { ideal: 5 }
// },
// audio: false
// });
// yield video;
// video.srcObject = stream;
// video.play();
// invalidation.then(() => stream.getTracks().forEach((t) => t.stop()));
// }
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
