Public
Edited
Dec 7, 2022
2 forks
41 stars
Ueda's AttractorJacobi Elliptic Functions in the Complex PlaneSDF Points with reglClifford and de Jong AttractorsDrawing Instanced Lines with reglInstanced Line RenderingLawson's Klein BottleInteractive Multi-scale Turing PatternsAdaptive Contouring in Fragment ShadersBaker's MapFake Transparency for 3D SurfacesGPU BoidsDouble Compound Pendulums3D Reaction-DiffusionMathematical Easter Egg ColoringToiletpaperfullerenes and Charmin NanotubesQuasicrystalsObservable + regl2D (Non-physical) N-body Gravity with Poisson's EquationPeriodic Planar Three-Body OrbitsQuick (miterless) Lines in WebGLSpin WebGLicosphereregl-cameraFinding Roots in the Complex Planeglsl-complexglsl-complex-auto-differentiationDomain Coloring with Adaptive Contouringgl-mat3gl-mat4gl-vec4gl-quatgl-mat2gl-vec3gl-vec2Instanced WebGL Circlesregl-toolsDomain Coloring for Complex FunctionsContour Plots with regl Observable PlotDrawing indexed mesh data as screen-space normals without duplicating dataGPUs, FFTs, and the 1-D Schrödinger Equation
Selecting the Right Opacity for 2D Point Clouds
// Compute the point size, in device pixels
function pointSizeDevicePixels(context, props) {
// In the shader, we perform computations in 2D homogeneous coordinates
// (via a mat3) so that we can obtain the y range from the view matrix,
// but we could obtain it through any means.
const yAxisRange = 2.0 / context.view3[4];
// The height as a fraction of the current y range, then converted to device pixels
const heightFraction = props.pointYAxisSize / yAxisRange;
const deviceSize = heightFraction * context.viewportHeight;
return clamp(
deviceSize,
props.pointScreenSize[0] * context.pixelRatio,
props.pointScreenSize[1] * context.pixelRatio
);
}
function pointOpacity(context, props) {
// We use the above function for the point size. This means we can plug in any function,
// even nonlinear, as long as we compute the opacity correctly.
var p = pointSizeDevicePixels(context, props);
// Compute the plot's x and y range from the view matrix, though these could come from any source
const X = 2.0 / context.view3[0];
const Y = 2.0 / context.view3[4];
const X0 = props.initialAxisDimensions[0];
const Y0 = props.initialAxisDimensions[1];
// Viewport size, in device pixels
const W = context.viewportWidth;
const H = context.viewportHeight;
// Number of points
const N = props.N;
let alpha = ((props.rho * H * H) / (N * p * p)) * (X0 / X) * (Y0 / Y);
// If it's a circle, only (pi r^2) of the unit square is filled so we
// slightly increase the alpha accordingly.
alpha *= props.circularPoints ? 1.0 / (0.25 * Math.PI) : 1.0;
// If the pixels shrink below the minimum permitted size, then we adjust the opacity instead
// and apply clamping of the point size in the vertex shader. Note that we add 0.5 since we
// slightly inrease the size of points during rendering to accommodate SDF-style antialiasing.
const clampedPointDeviceSize =
Math.max(props.minimumPointDeviceSize, p) + 0.5;
// We square this since we're concerned with the ratio of *areas*.
alpha *= Math.pow(p / clampedPointDeviceSize, 2.0);
// And finally, we clamp to the range [0, 1]. We should really clamp this to 1 / precision
// on the low end, depending on the data type of the destination so that we never render *nothing*.
return clamp(alpha, 0.0, 1.0);
}
drawPoints = regl({
vert: `
precision highp float;
attribute vec2 xy;
uniform float pointSize, minimumPointDeviceSize;
uniform mat3 view3;
void main () {
gl_Position = vec4((view3 * vec3(xy, 1)).xy, 0, 1);
// Add 0.5 to the point size so that we can apply a +/-0.5px linear step and simulate antialiasing
gl_PointSize = max(minimumPointDeviceSize, pointSize) + 0.5;
}`,
frag: `
precision highp float;
uniform float opacity, pointSize;
uniform vec3 invertedPointColor;
float linearstep(float edge0, float edge1, float x) {
return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
}
void main () {
float alpha = opacity;
vec2 c = gl_PointCoord * 2.0 - 1.0;
#if ${circularPoints ? '1' : '0'}
// Opacity contributed by Kari Lavikka: https://twitter.com/KariLavikka/status/1335928770423910400
float sdf = length(c);
#else
float sdf = max(abs(c.x), abs(c.y));
#endif
alpha *= linearstep(pointSize + 0.5, pointSize - 0.5, sdf * pointSize);
gl_FragColor = vec4(invertedPointColor, alpha);
}`,
attributes: {
xy: regl.prop('pointsBuffer')
},
blend: {
enable: true,
func: {
srcRGB: 'src alpha',
dstRGB: 1,
srcAlpha: 1,
dstAlpha: 1
},
equation: {
rgb: 'reverse subtract',
alpha: 'add'
}
},
uniforms: {
invertedPointColor: (ctx, props) => [
1 - props.pointColorLinearRGB[0],
1 - props.pointColorLinearRGB[1],
1 - props.pointColorLinearRGB[2]
],
minimumPointDeviceSize: regl.prop('minimumPointDeviceSize'),
opacity: pointOpacity,
pointSize: pointSizeDevicePixels
},
primitive: 'points',
count: regl.prop('N'),
depth: { enable: false }
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.