WebGL

WebGL renderer and related helpers.

cm.webgl()

Returns a WebGL renderer, rendering shapes by WebGL.

const app = cm.app({
  renderer: cm.webgl(),
});

cm.glsl

Defines a attribute with the specified GLSL function through template literals. The name of the function should match the assigned attribute, being passed the current datum(d), returning value with corresponding type.

const r = cm.glsl`float r(float theta) {
  float d = 0.2 + 0.12 * cos(theta * 9.0 - 2.0);
  return d * 300.0;
}`;

app.data(theta).append(cm.circle, { r });

Some numbers can also be interpolated:

const scale = 300;
const width = 640;
const height = 480;
const position = cm.glsl`vec2 position(float theta) {
  vec2 xy = vec2(
    cos(theta), 
    sin(theta)) * (0.6 + 0.2 * cos(theta * 6.0 + cos(theta * 8.0 + ${time}))
  );
  return xy * ${scale} + vec2(${width / 2}, ${height / 2});
}`;

app.data(theta).append(cm.circle, { position });