Hubble example

[97morningstar]

Issue referencing this pull request
Issue #28 (Still it's needed to integrate into kepler)

Changes [To add this functionality to any example]:

1. Add to the props to DeckGl component

        viewState={viewState}
        onViewStateChange={({viewState}) => {
          setViewState(viewState);
        }}

        controller={true}

• 1.1 Add the viewState state

const [viewState, setViewState] = useState(INITIAL_VIEW_STATE);

2. Add the prop to BasicControls component (optional)

updateCamera={updateCamera}

3. Add the optional method to start the camera from the current viewState (optional)

const updateCamera = (prevCamera) => {
    // Set by User
  prevCamera = new CameraKeyframes({
        timings: [0, 5000],
        keyframes: [
          {
            longitude: viewState.longitude,
            latitude: viewState.latitude,
            zoom: viewState.zoom,
            pitch: viewState.pitch,
            bearing: viewState.bearing
          },
          {
            longitude: viewState.longitude,
            latitude: viewState.latitude,
            zoom: viewState.zoom,
            bearing: viewState.bearing + 92,
            pitch: viewState.pitch // up to 45/50
          }
        ],
        easings: [easing.easeInOut]
      });
   
    return prevCamera;
  }

• 3.1. Imports to app

		import {CameraKeyframes} from '@hubble.gl/core';
		import {easing} from 'popmotion';

4. Fix this line when attaching the camera to the timeline

const currentCamera = animationLoop.timeline.attachAnimation(keyframes.camera);

• 4.1. Add as prop to DeckScene

  return new DeckScene({
    animationLoop,
    keyframes,
    lengthMs: 5000,
    width: 1280,
    height: 720,
    currentCamera  // Here
  });

[chrisgervang]

Thanks for the comments to explain everything :) I was wondering if we could split this into two PRs, one for the glTF separate from the hubble-example and viewState changes?

Also, could you rename hubble-example to something more related to the view state feature?

[chrisgervang]

On second look, it looks like the examples added might be accidental duplicates of each other?

[chrisgervang]

Can you check to ensure updateCamera is an optional value in both this component and in adapter.getProps?

Want to make sure this feature is "opt in"

[97morningstar]

I'm passing updateCamera = undefined at the end of the props in BasicControls. Now if you don't pass an updateCamera function in the BasicControls component it will use the default keyframes.
The only change in adapter.getProps was that this.enabled was added at the end of the check:

// Animating the camera is optional, but if a keyframe is defined then viewState is controlled by camera keyframe.
    if (this.scene && this.scene.keyframes.camera && this.enabled) {

      props.controller = false;
      props.viewState = this._getViewState();
    }

What should I change about this?

[RaymondDashWu]

Not sure if you're on this task yet but shouldn't this be modular? So that the user can set resolution themselves

[chrisgervang]

I don't think we've ever scoped or discussed setting resolution differently. At the moment it's designed to be set within scene definition since it's how I preferred to set up scenes.

We could change this to be optional if DeckAdapter is changed to only set it if it's defined. Happy to accept a PR for that.

[RaymondDashWu]

Got it. I imagined those being values being set with state but I must have misremembered.

[RaymondDashWu]

I'm not sure what all of these layers are doing. Looking at the filepath it has something to do with GLTF? Which a quick search says is related to 3d assets? Consider adding a README for all of these examples giving a brief overview of what they're showcasing.

[97morningstar]

I'm deleting the GLTF example as it was from when we were learning.

[RaymondDashWu]

That's fine. The other examples could use a README though

[97morningstar]

What do you think of the README file? I've never written one before so I'm not sure it's correct. The other examples didn't have readme files, should I add to those too?

[chrisgervang]

Looks pretty good! Getting very close. Could you rename the example folder you're keeping to "trips"? (Sorry about the minor requests, I think this consistency will help in the long run)

[chrisgervang]

Looks good! Please "squash and merge" from the web UI to consolidate the commits into one.