Draft: Deckgl Fiber Renderer #35

brandonjpierce · 2024-02-29T18:02:49Z

Original PR on the deck.gl repo visgl/deck.gl#8560

ℹ️ Opening PR early to get initial feedback while we polish up
⚠️ Example dir currently not working, seems to be an issue with luma.gl

Remaining TODOs

Implement HTML interleaving (we had some prior art here but removed for the sake of the first pass)
Add in a bunch of tests
Fix any remaining TS errors
Provide more complex examples
Detail any known caveats or gotchas
Provide example for React driven tooltips

Example

cd examples/website/react-fiber
yarn
yarn start-local

Background

Initial discussion in Slack: https://deckgl.slack.com/archives/C34AC5MSQ/p1689366597250129

My company has a very large and complex React application that also uses Deck.gl. Over time as the complexity and scope of the project grew we were running into issues with the existing @deck.gl/react package due to some of its limitations with children ordering and a few others.

A very popular technique adopted in the three community was to provide a React renderer for ThreeJS so that developers would not need to swap between the two paradigms in their brain. This is the goal of this effort as well. Allow developers to always "think in React".

This deck.gl fiber renderer has been used in a production app for almost half a year now and has unlocked some really incredible techniques for our team.

Some high level concepts:

// all deck.gl layers are supported out of the box, e.g.

<scatterplotLayer />
<tileLayer />
<goeJsonLayer />

// etc..

// Support for custom layers
class MyCompositeLayer extends CompositeLayer {
  ...
}

// inject into renderer
extend({ MyCompositeLayer });

// use in react
<myCompositeLayer />

// can nest layers in multiple views
<DeckGL>
  <mapView id="main>
    <MainApplicationLayers />
  </MapView>
  <Some>
    <Nested>
      <mapView id="minimap>
        <MinimapLayers />
      </MapView>
    </Nested>
  </Some>
</DeckGL>

// Order for layers is based on React tree ordering
// e.g. [bitmapLayer, scatterplotLayer, lineLayer, myCustomLayer]
<MainApplication>
  <bitmapLayer />
  <scatterplotLayer />
  <lineLayer />
  <Some>
    <Nested>
      <Component>
        <myCustomLayer />
      </Component>
    </Nested>
  </Some>
  ...
</MainApplication>

// colocation becomes incredibly easy and allows you to self contain components more
function MyLayer() {
  const [hovered, setHovered] = useState();
  const [clicked, setClicked] = useState();

  const onHover = useCallback((pickInfo) => {
    // additional logic
    setHovered(...)
  });

  const onClick = useCallback((pickInfo) => {
    // additional logic
    setClicked(...)
  });

  // Make a stable dataset for picked object
  const activeData = useMemo(() => [clicked], [clicked]);


  return (
    <>
      <scatterplotLayer
        id="base"
        onClick={onClick}
        onHover={onHover}
        pickable
        ...
      />
      
      <scatterplotLayer
        id="fancy-active"
        data={activeData}
        visible={Boolean(clicked)}
        ...
      />
    </>
  )
}

Change List

Adds in a new package called @deck.gl/react-fiber
Adds in a new website example called react-fiber

brandonjpierce · 2024-02-29T18:04:34Z

modules/react-fiber/src/deckgl.tsx

+          canvas,
+          layers: [],
+          onWebGLInitialized: state.setWebgl
+          // TODO: investigate if we need


Would love insight into any tips and tricks this can potentially unlock

brandonjpierce · 2024-02-29T18:05:03Z

modules/react-fiber/src/deckgl.tsx

+        root.current = createRoot<HTMLCanvasElement>(canvas);
+      }
+
+      // @ts-expect-error FIXME


brandonjpierce · 2024-02-29T18:05:33Z

modules/react-fiber/src/extend.ts

+} from '@deck.gl/layers';
+import type {Instance} from './types';
+
+// IDEA: we can technically move this purely to userland so that a user is defining precisely


Articulating this more, as a developer I could in theory only extend explicitly what I am using in my app e.g. say I am only using a MapView and ScatterplotLayer:

extend({ MapView, ScatterplotLayer });

This would allow the bundle size to shrink (in theory) for the package consumer.

brandonjpierce · 2024-02-29T18:05:53Z

modules/react-fiber/src/reconciler.ts

+  // NOTE: may need to attach handlers here
+  commitMount: noop,
+
+  // NOTE: this fires per instance, since deckgl cannot update individual layers


More context: https://deckgl.slack.com/archives/C34AC5MSQ/p1689713468356669?thread_ts=1689366597.250129&cid=C34AC5MSQ

brandonjpierce · 2024-02-29T18:06:06Z

modules/react-fiber/src/reconciler.ts

@@ -0,0 +1,304 @@
+import {log} from '@deck.gl/core';


Logging temporary

brandonjpierce · 2024-02-29T18:06:50Z

modules/react-fiber/src/reconciler.ts

+     */
+
+    state.deckgl.setProps({
+      // TODO: investigate why we need to spread the array here for deckgl to pick up layer changes


My hunch here is that Deck does some internal shallow compare against the layer list array? e.g. doing:

state.deckgl.setProps({ layers: layerCache, });

Does not work since we are mutating layerCache directly in some of the other functions

Related?

https://github.com/visgl/deck.gl/blob/e3533e059464e35e0004d38b92f3af7af0ca6027/modules/core/src/lib/layer-manager.ts#L72-L81

The comment is about 8 years old, so much has changed (and I'd guess this is no longer only applicable to react). Here's the first commit that mentioned it https://github.com/visgl/deck.gl/pull/700/files

@ibgreen it looks like you wrote this original comment.. I don't suppose you'd know if this is why we need to spread the layer array?

There's a shallow check here.. that'd be my guess.

I wonder if it'd be more performant to always spread like this, or to make immutable updates to layerCache instead of mutations? I imagine it depends on the update frequency and how often mutations happen prior to "commit". I suppose there could be a dirty flag to skip the spread if no mutations occurred?

brandonjpierce · 2024-02-29T18:07:06Z

modules/react-fiber/src/reconciler.ts

+    const state = container.getState();
+
+    /**
+     * TODO: implicit view/layer filter logic


More context: https://deckgl.slack.com/archives/C34AC5MSQ/p1689766152706589?thread_ts=1689366597.250129&cid=C34AC5MSQ

ibgreen · 2024-03-07T15:10:02Z

@brandonjpierce Sorry for slow response here. I sent you an invite to this repository so that you can merge things yourself.

ibgreen

I will give this a rubberstamp approval for merging, as long as it doesn't break the repo.

brandonjpierce · 2024-03-07T16:55:40Z

@ibgreen thank you! I am working with my team to button up a number of the TODOs we have remaining on this (we have some folks out sick/on PTO right now). Will keep y'all updated with regards to polish and maturity of the PR.

ibgreen · 2024-03-07T17:08:17Z

@ibgreen thank you! I am working with my team to button up a number of the TODOs we have remaining on this (we have some folks out sick/on PTO right now). Will keep y'all updated with regards to polish and maturity of the PR.

Sounds good. A reasonable approach is also to merge this baseline and do incremental improvements from there. Let me know if your team needs additional write permissions to the repo.

ibgreen · 2024-04-11T19:27:12Z

Please reopen if this picks up again.

kahole · 2024-06-17T07:11:59Z

This looks very interesting! We have been struggling with some of the same concerns consolidating the React and deck.gl mindsets in our project. Especially when leaning heavily on libraries as React Query and Zustand for managing data and state.
Layer ordering is one concern we share as well in our workaround efforts using Zustand to isolate and store layer updates

am2222 · 2025-01-08T04:26:17Z

Is there any reason why this effort is stoped?

Fiber renderer module

e0b574f

brandonjpierce mentioned this pull request Feb 29, 2024

Draft: Deckgl React Fiber Renderer visgl/deck.gl#8560

Closed

6 tasks

brandonjpierce commented Feb 29, 2024

View reviewed changes

modules/react-fiber/src/deckgl.tsx

root.current = createRoot<HTMLCanvasElement>(canvas);

}

// @ts-expect-error FIXME

Copy link

Author

brandonjpierce Feb 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO

brandonjpierce commented Feb 29, 2024

View reviewed changes

modules/react-fiber/src/reconciler.ts

@@ -0,0 +1,304 @@

import {log} from '@deck.gl/core';

Copy link

Author

brandonjpierce Feb 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Logging temporary

brandonjpierce commented Feb 29, 2024

View reviewed changes

ibgreen approved these changes Mar 7, 2024

View reviewed changes

ibgreen closed this Apr 11, 2024

chrisgervang mentioned this pull request May 13, 2024

add(examples): react widgets get started visgl/deck.gl#8889

Closed

brandonjpierce mentioned this pull request May 29, 2024

TODO: stub deckgl fiber renderer package gohypergiant/standard-toolkit#8

Closed

chrisgervang mentioned this pull request Jan 8, 2025

docs(react) React widgets and useWidget hook documentation visgl/deck.gl#9309

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Draft: Deckgl Fiber Renderer #35

Draft: Deckgl Fiber Renderer #35

brandonjpierce commented Feb 29, 2024 •

edited

Loading

brandonjpierce Feb 29, 2024

brandonjpierce Feb 29, 2024

brandonjpierce Feb 29, 2024

brandonjpierce Feb 29, 2024

brandonjpierce Feb 29, 2024

brandonjpierce Feb 29, 2024

chrisgervang Jan 8, 2025 •

edited

Loading

chrisgervang Jan 8, 2025

chrisgervang Jan 8, 2025

brandonjpierce Feb 29, 2024

ibgreen commented Mar 7, 2024

ibgreen left a comment

brandonjpierce commented Mar 7, 2024

ibgreen commented Mar 7, 2024

ibgreen commented Apr 11, 2024

kahole commented Jun 17, 2024

am2222 commented Jan 8, 2025

Draft: Deckgl Fiber Renderer #35

Draft: Deckgl Fiber Renderer #35

Conversation

brandonjpierce commented Feb 29, 2024 • edited Loading

Remaining TODOs

Example

Background

Change List

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chrisgervang Jan 8, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ibgreen commented Mar 7, 2024

ibgreen left a comment

Choose a reason for hiding this comment

brandonjpierce commented Mar 7, 2024

ibgreen commented Mar 7, 2024

ibgreen commented Apr 11, 2024

kahole commented Jun 17, 2024

am2222 commented Jan 8, 2025

brandonjpierce commented Feb 29, 2024 •

edited

Loading

chrisgervang Jan 8, 2025 •

edited

Loading