Skip to content

v0.13.0 - One Core

Choose a tag to compare

@kvvasuu kvvasuu released this 02 Oct 10:50
· 106 commits to main since this release

klipp is now a complete camera system in the core, with integrations as thin layers on top: three.js and React Three Fiber today, with more to come, like TresJS. Klipp runs the cameras, picks the winner and blends with any renderer. KlippThree from @kvvasuu/klipp/three drives a three.js camera, and <Klipp> is built on it.

✨ New Features

  • Klipp runs everything - virtual cameras, priority, blending and the frame loop. Call klipp.update(dt) and put klipp.shot on your camera, or override write to update it only when the shot changes.
  • Every piece is a core class - FollowBody, HardLookAtAim, PositionComposerBody, GroupFramingExtension and the rest take a TargetPose you keep up to date. To read your engine's objects directly, extend one and override readTarget.
  • three.js classes end in Three - KlippThree drives a PerspectiveCamera, and VirtualCameraThree, FollowBodyThree and the other pieces read Object3D targets. Their options take a Vector3, a tuple or a number wherever a setting is a vector.
  • klipp.whileOnScreen(camera, start) connects input only while its camera is on screen, outside React.
  • CameraFrustumHelperThree draws a virtual camera's frustum in three.js.
  • Settings factories - createFollowParams, createLensParams and the rest give every piece's defaults.
  • Debug zones in the core - composerDebugZones and groupFramingPaddingBox, for drawing zones with DebugOverlay without React.
  • Duplicate camera names now log a warning.

⚠️ Breaking Changes

  • three.js classes end in Three - FollowBody, HardLockToTargetBody, PositionComposerBody, HardLookAtAim, RotateWithFollowTargetAim, RotationComposerAim, PanTiltAim, GroupFramingExtension and CameraControlsBody from @kvvasuu/klipp/three are now FollowBodyThree, HardLockToTargetBodyThree and so on. This also changes the types of React refs: useRef<FollowBody> is now useRef<FollowBodyThree>.
  • KlippCore is now Klipp, and KlippCoreOptions is now KlippOptions.
  • Klipp - registerCamera, updatePriority, updateHints and tick are replaced by addCamera(name, options), the camera's own priority and hints, and update(dt) with shot.
  • VirtualCameraController is now VirtualCamera.
  • useKlipp() returns the KlippThree instead of { core, registerUpdate, initialCameraState, targets }: useKlipp().core.isBlending is now useKlipp().isBlending.
  • useVirtualCamera() returns the camera instead of { controller, state, initialState }. A <VirtualCamera>'s ref is that same VirtualCameraThree.
  • Custom pieces - registerBody(update) and registerAim(update) are replaced by camera.body = { update } and camera.aim = { update }, or setBody and setAim. registerExtension and registerNoise are replaced by addExtension({ update }) and addNoise({ update }). Every method except the setters returns a function that removes the piece.
  • Types removed - KlippContextValue, VirtualCameraContextValue and VirtualCameraSlots.

🔄 Behavior Changes

  • BlendCurves.easeIn and easeOut are swapped, to match cubicIn and cubicOut from math. "In" is now a gentle departure, as in CSS. Your code compiles as before, but these blends move the other way: swap the two names to keep the old motion.
  • createGroupMember() starts with resolved: true, so a new member counts right away. Set it to false to skip one.

🐛 Bug Fixes

  • Reactivating a camera whose target isn't available yet no longer eases in from the old shot once the target appears. HardLockToTarget and GroupFraming reset on activation like Follow, and the composers wait for the target.

📖 Documentation

  • Every page shows the core and each integration in tabs. The tab you pick is remembered across pages.
  • Your first camera is one step-by-step guide per integration.
  • Building on the core covers your own integration and the data and functions underneath.
  • Shorter pages and README, without repeated explanations.

🔧 Internal Changes

  • three.js and React keep only what is theirs: target reads, camera writes, props and hooks.
  • Core tests run without three.js, and tests are typechecked in CI.
  • Leaner test suite, with one test per behavior.

What's Changed

Full Changelog: v0.12.0...v0.13.0