Note
Go to the end to download the full example code.
Points with different markers
All available marker shapes are shown.
Shows red, green and blue faces. Then a semi-transparent face, and finally a fully-transparent face.
By default the edge is painted on center of the marker.
However, this can be customized in order to be painted on the
inner or outer edge only by setting the edge_mode
property of
the PointsMarkerMaterial
.
To this end, we repeat the pattern with the inner and outer edge painted.
import numpy as np
from wgpu.gui.auto import WgpuCanvas, run
import pygfx as gfx
canvas = WgpuCanvas(size=(1200, 1000))
renderer = gfx.WgpuRenderer(canvas)
colors = np.array(
[
[1.0, 0.5, 0.5, 1.0],
[0.5, 1.0, 0.5, 1.0],
[0.5, 0.5, 1.0, 1.0],
[0.5, 0.5, 1.0, 0.3],
[0.0, 0.0, 0.0, 0.0],
],
np.float32,
)
npoints = len(colors)
positions = np.zeros((npoints, 3), np.float32)
positions[:, 0] = np.arange(npoints) * 2
geometry = gfx.Geometry(positions=positions, colors=colors)
scene = gfx.Scene()
scene.add(gfx.Background.from_color("#bbb", "#777"))
pygfx_sdf = """
let m_sqrt_3 = 1.7320508075688772;
// coords uses WGSL coordinates.
// we shift it so that the center of the triangle is at the origin.
// for ease of calculations.
var coord_for_sdf = coord / size + vec2<f32>(0.5, -0.5);
// https://math.stackexchange.com/a/4073070
// equilateral triangle has length of size
// sqrt(3) - 1
let triangle_x = m_sqrt_3 - 1.;
let one_minus_triangle_x = 2. - m_sqrt_3;
let triangle_length = SQRT_2 * triangle_x;
let pygfx_width = 0.10;
let v1 = normalize(vec2<f32>(one_minus_triangle_x, 1));
let r1_out = dot(coord_for_sdf, v1);
let r1_in = r1_out + pygfx_width;
let v2 = normalize(vec2<f32>(-1, -one_minus_triangle_x));
let r2_out = dot(coord_for_sdf, v2);
let r2_in = r2_out + pygfx_width;
let v3 = normalize(vec2<f32>(triangle_x, -triangle_x));
let r3_out = dot(coord_for_sdf - vec2(1, -one_minus_triangle_x), v3);
let r3_in = r3_out + pygfx_width;
let inner_offset = 0.5 * (triangle_length - pygfx_width / 2.);
let r1_out_blue = -r1_out - inner_offset;
let r1_in_blue = r1_out_blue + pygfx_width;
let r1_blue = max(
max(r2_out, r3_in),
max(r1_out_blue, -r1_in_blue)
);
let r2_out_blue = -r2_out - inner_offset;
let r2_in_blue = r2_out_blue + pygfx_width;
let r2_blue = max(
max(r3_out, r1_in),
max(r2_out_blue, -r2_in_blue)
);
let r3_out_blue = -r3_out - inner_offset;
let r3_in_blue = r3_out_blue + pygfx_width;
let r3_blue = max(
max(r1_out, r2_in),
max(r3_out_blue, -r3_in_blue)
);
let inner_triangle = min(r1_blue, min(r2_blue, r3_blue));
let outer_triangle = max(
max(r1_out, max(r2_out, r3_out)),
-max(r1_in, max(r2_in, r3_in))
);
return min(inner_triangle, outer_triangle) * size;
"""
y = 0
text = gfx.Text(
gfx.TextGeometry("centered", anchor="middle-middle", font_size=1),
gfx.TextMaterial("#000"),
)
text.local.y = y
text.local.x = npoints
scene.add(text)
text = gfx.Text(
gfx.TextGeometry("inner", anchor="middle-middle", font_size=1),
gfx.TextMaterial("#000"),
)
text.local.y = y
text.local.x = 2 * npoints + npoints
scene.add(text)
text = gfx.Text(
gfx.TextGeometry("outer", anchor="middle-middle", font_size=1),
gfx.TextMaterial("#000"),
)
text.local.y = y
text.local.x = 4 * npoints + npoints
scene.add(text)
all_lines = []
for marker in gfx.MarkerShape:
y += 2
line = gfx.Points(
geometry,
gfx.PointsMarkerMaterial(
size=1,
size_space="world",
color_mode="vertex",
# color_mode='debug',
marker=marker,
edge_color="#000",
edge_width=0.1 if not marker == "custom" else 0.033333,
custom_sdf=pygfx_sdf if marker == "custom" else None,
),
)
line.local.y = -y
line.local.x = 1
scene.add(line)
all_lines.append(line)
line_inner = gfx.Points(
geometry,
gfx.PointsMarkerMaterial(
size=1,
size_space="world",
color_mode="vertex",
marker=marker,
edge_color="#000",
edge_width=0.1 if not marker == "custom" else 0.033333,
edge_mode="inner",
custom_sdf=pygfx_sdf if marker == "custom" else None,
),
)
line_inner.local.y = -y
line_inner.local.x = 1 + 2 * npoints
scene.add(line_inner)
all_lines.append(line_inner)
line_outer = gfx.Points(
geometry,
gfx.PointsMarkerMaterial(
size=1,
size_space="world",
color_mode="vertex",
marker=marker,
edge_color="#000",
edge_width=0.1 if not marker == "custom" else 0.033333,
edge_mode="outer",
custom_sdf=pygfx_sdf if marker == "custom" else None,
),
)
line_outer.local.y = -y
line_outer.local.x = 1 + 4 * npoints
scene.add(line_outer)
all_lines.append(line_outer)
text = gfx.Text(
gfx.TextGeometry(marker, anchor="middle-right", font_size=1),
gfx.TextMaterial("#000"),
)
text.local.y = -y
text.local.x = 0
scene.add(text)
camera = gfx.OrthographicCamera()
camera.show_object(scene, scale=0.7)
controller = gfx.PanZoomController(camera, register_events=renderer)
canvas.request_draw(lambda: renderer.render(scene, camera))
@renderer.add_event_handler("key_down")
def handle_event(event):
if event.key == "d":
color_mode = "debug"
for line in all_lines:
line.material.color_mode = color_mode
print(f"color_mode {line.material.color_mode}")
elif event.key == "v":
color_mode = "vertex"
for line in all_lines:
line.material.color_mode = color_mode
print(f"color_mode {line.material.color_mode}")
elif event.key == "j":
for line in all_lines:
line.material.edge_width /= 1.1
print(f"edge_width {line.material.edge_width}")
elif event.key == "k":
for line in all_lines:
line.material.edge_width *= 1.1
print(f"edge_width {line.material.edge_width}")
canvas.update()
if __name__ == "__main__":
print(__doc__)
run()
Total running time of the script: (0 minutes 16.027 seconds)