Faster creation of monochrome point clouds

nicegui/elements/scene.js

@@ -263,8 +263,13 @@ export default {
       } else if (type == "point_cloud") {
         const geometry = new THREE.BufferGeometry();
         geometry.setAttribute("position", new THREE.Float32BufferAttribute(args[0].flat(), 3));
-        geometry.setAttribute("color", new THREE.Float32BufferAttribute(args[1].flat(), 3));
-        const material = new THREE.PointsMaterial({ size: args[2], vertexColors: true });
+        const material = new THREE.PointsMaterial({ size: args[2] });
+        if (typeof args[1] == "string") {
+          material.color.set(args[1]);
+        } else {
+          geometry.setAttribute("color", new THREE.Float32BufferAttribute(args[1].flat(), 3));
+          material.vertexColors = true;
+        }
         mesh = new THREE.Points(geometry, material);
       } else if (type == "gltf") {
         const url = args[0];
@@ -392,8 +397,18 @@ export default {
     },
     set_points(object_id, position, color) {
       const geometry = this.objects.get(object_id).geometry;
+      const material = this.objects.get(object_id).material;
       geometry.setAttribute("position", new THREE.Float32BufferAttribute(position.flat(), 3));
-      geometry.setAttribute("color", new THREE.Float32BufferAttribute(color.flat(), 3));
+      if (typeof color == "string") {
+        geometry.deleteAttribute("color");
+        material.color.set(color);
+        material.vertexColors = false;
+      } else {
+        material.color.set("#ffffff");
+        geometry.setAttribute("color", new THREE.Float32BufferAttribute(color.flat(), 3));
+        material.vertexColors = true;
+      }
+      material.needsUpdate = true;
     },
     move_camera(x, y, z, look_at_x, look_at_y, look_at_z, up_x, up_y, up_z, duration) {
       if (this.camera_tween) this.camera_tween.stop();

website/documentation/content/scene_documentation.py

@@ -1,4 +1,5 @@
 from nicegui import ui
+from typing import Optional
 
 from . import doc
 
@@ -147,19 +148,25 @@ def handle_drag(e: events.GenericEventArguments) -> None:
 def point_clouds() -> None:
     import numpy as np
 
-    def generate_data(frequency: float = 1.0):
+    def generate_data(frequency: float = 1.0, override_color: Optional[str] = None):
         x, y = np.meshgrid(np.linspace(-3, 3), np.linspace(-3, 3))
         z = np.sin(x * frequency) * np.cos(y * frequency) + 1
         points = np.dstack([x, y, z]).reshape(-1, 3)
-        colors = points / [6, 6, 2] + [0.5, 0.5, 0]
+        colors = override_color if override_color is not None else points / [6, 6, 2] + [0.5, 0.5, 0]
         return points, colors
 
     with ui.scene().classes('w-full h-64') as scene:
         points, colors = generate_data()
         point_cloud = scene.point_cloud(points, colors, point_size=0.1)
 
-    ui.slider(min=0.1, max=3, step=0.1, value=1) \
-        .on_value_change(lambda e: point_cloud.set_points(*generate_data(e.value)))
+    def update():
+        point_cloud.set_points(*generate_data(frequency.value, picker.value if override_color.value else None))
+
+    frequency = ui.slider(min=0.1, max=3, step=0.1, value=1) \
+        .on_value_change(update)
+    override_color = ui.switch("Override color").on_value_change(update)
+    picker = ui.color_input(label='Color', value='#000000',
+                            on_change=update).bind_enabled_from(override_color, "value")
 
 
 @doc.demo('Wait for Initialization', '''