Update pygfx and fix examples (#97)

* Update pygfx and fix examples

Author: berendkleinhaneveld

examples/combined-example.py

@@ -29,6 +29,8 @@ def mounted(self):
             {
                 "name": "Landmarks",
             },
+            h("AmbientLight"),
+            h("PointLight"),
             h(
                 PointCloud,
                 # When increasing this number, it will take longer

examples/component-example.py

@@ -90,7 +90,13 @@ def render(self):
         renderer=cg.PygfxRenderer(), event_loop_type=cg.EventLoopType.QT
     )
 
-    element = h(NumberPad, {})
+    element = h(
+        "Group",
+        {},
+        h(NumberPad),
+        h("AmbientLight"),
+        h("PointLight", {"position": [10, 30, 40]}),
+    )
     container = gfx.Scene()
 
     def animate():

examples/pygfx-example.py

@@ -1,29 +1,3 @@
-"""
-Followed the following guide:
-https://pomb.us/build-your-own-react/
-and implemented it in Python.
-
-Example 'React' code:
-
-<Group name="Landmarks">
-  <Point name="Hip" position="[1, 1, 1]" />
-</Group>
-
-This can be transpiled to a tree of 'VNodes'.
-Instead of JSX/Vue template, this could also be just creating
-the tree of VNodes 'manually'.
-VNodes are essentially a description of the to-be-displayed item.
-
-1. Create tree of VNodes
-2. Render the tree (see __init__.py)
-    - Split up the work in smaller chunks (node-by-node)
-    - Build up a 'work-in-progress' tree of 'fibers'
-    - Once it is ready, compare this tree with the 'current' tree (reconciliation)
-    - The renderer that is called during reconciliation creates the actual 'dom' nodes,
-      so a PygfxRenderer for instance would know how to reconcile a tree of pygfx
-      objects.
-
-"""
 from point_cloud import materials, PointCloud, sphere_geom
 import pygfx as gfx
 from wgpu.gui.auto import run, WgpuCanvas
@@ -36,7 +10,7 @@
     canvas = WgpuCanvas(size=(600, 400))
     renderer = gfx.renderers.WgpuRenderer(canvas)
 
-    camera = gfx.PerspectiveCamera(60, 16 / 9)
+    camera = gfx.PerspectiveCamera(70, 16 / 9)
     camera.position.z = 15
 
     controls = gfx.OrbitController(camera.position.clone())
@@ -52,6 +26,8 @@
         {
             "name": "Landmarks",
         },
+        h("AmbientLight"),
+        h("PointLight", {"position": [0, 70, 70], "cast_shadow": True}),
         h(
             PointCloud,
             # When increasing this number, it will take longer

examples/pygfx-slider-example.py

@@ -43,7 +43,7 @@ def __init__(self, *args, **kwargs):
     def mouse_down(self, event):
         if not self._sphere:
             self._sphere = event.current_target
-        self._sphere.set_pointer_capture(event.pointer_id)
+        self._sphere.set_pointer_capture(event.pointer_id, event.root)
         self._captured = True
         self._mouse_pos = event.x, event.y
 
@@ -81,7 +81,18 @@ def render(self):
 class Slider(cg.Component):
     def render(self):
         return h(
-            "Group", self.state, h(Track, {"scale": [0.5, 0.5, 10]}), h(Scrubber, {})
+            "Group",
+            self.state,
+            h(Track, {"scale": [0.5, 0.5, 10]}),
+            h(Scrubber, {}),
+            h("AmbientLight"),
+            h(
+                "PointLight",
+                {
+                    "position": [20, 40, 50],
+                    "cast_shadow": True,
+                },
+            ),
         )
 
 

examples/pyside-example.py

@@ -1,7 +1,6 @@
 """
 Example of how to render to PySide6 UI.
 """
-from observ import reactive
 from PySide6 import QtWidgets
 
 import collagraph as cg
@@ -40,15 +39,11 @@ def TodoList(props):
 class TodoApp(cg.Component):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        self.state = reactive(
-            {
-                "items": [
-                    "Groceries",
-                    "Laundry",
-                ],
-                "text": "",
-            }
-        )
+        self.state["items"] = [
+            "Groceries",
+            "Laundry",
+        ]
+        self.state["text"] = ""
 
     def handle_change(self, event):
         self.state["text"] = event

examples/todo-example.py

@@ -14,7 +14,7 @@ pyside = ["pyside6_essentials"]
 [tool.poetry.dependencies]
 python = ">=3.9"
 observ = ">=0.9.5"
-pygfx = { version = ">=0.1.9", optional = true }
+pygfx = { version = ">=0.1.12", optional = true }
 pyside6_essentials = { version = "~6.4", python = "<3.12", optional = true }
 
 [tool.poetry.group.dev.dependencies]