Skip to content

v0.14.0 - New Home

Choose a tag to compare

@kvvasuu kvvasuu released this 16 Oct 16:05
· 13 commits to main since this release

klipp is now published as @pmndrs/klipp

This release adds OrbitFollow, a Body the user orbits and zooms around a target, with wheel and pinch input to drive it. Cameras off screen now update in turns, so many cameras cost about as much as two.

✨ New Features

  • OrbitFollow - puts the camera on a sphere around the target, or on a surface through three rings with orbitStyle: 'threeRing'. Its horizontal, vertical and radial axes take the mouse, touch, the wheel and pinches, or values from your code. setFromPosition and setFromRotation ease the camera to a spot, and the debug prop draws the orbit. OrbitFollowBody on the core, OrbitFollowBodyThree and OrbitFollowHelperThree in three.js, <Body.OrbitFollow> in React.
  • Wheel and pinch input - wheel and pinch in an input controller each drive one axis. A pinch feels the same with two fingers and on a trackpad.
  • standbyUpdate - how a camera updates while another one is on screen: 'roundRobin', 'always' or 'never'. A camera that skipped frames catches up with the time it missed, so switching to it stays smooth.
  • rotationDamping on Follow - seconds to turn with the target, for every bindingMode but worldSpace.
  • Damped Aims follow the Body's own turns - an Aim with damping, like RotationComposer, follows the turns of an orbit right away, so the target stays in place on screen while the user drags. A custom Body reports its turn in rotationDampingBypass on the CameraState.
  • axis.setValue(value) jumps an axis straight to a value, for a teleport or a reset. Recentering carries on.
  • <InputController> finds axes on the whole camera - placed directly in a <VirtualCamera>, it drives axes by name from any of the camera's pieces. On the core, camera.inputAxes lists them.
  • InputController from @pmndrs/klipp maps input onto axes without a DOM, for example to replay a recording. InputControllerDom from @pmndrs/klipp/dom builds on it.
  • Input configs list only the sources they use - leave out the rest instead of setting them to null.

⚠️ Breaking Changes

  • The package is now @pmndrs/klipp. Install it in place of @kvvasuu/klipp and change the imports. The entry points stay the same: @pmndrs/klipp/three, /react, /dom and the camera-controls ones. @kvvasuu/klipp is deprecated and gets no more releases.
  • Core functions are grouped into namespaces with short names: createFollowParams is now follow.createParams, updateFollow is follow.update, createTargetPose is targetPose.create, createCameraState is cameraState.create, lerpCameraState is cameraState.lerp, tickKlipp is klippState.tick and composerDebugZones is debugZones.composer. Classes, types, BlendCurves, BlendHints and DEFAULT_BLEND keep their names. Building on the core lists every namespace.
  • InputAxisController is now InputControllerDom, and its lastInput is now input. InputAxisControllerConfig is now InputControllerConfig, and feedInputAxes is inputMapping.feedAxes. The ref of an <InputController> is an InputControllerDom.
  • Sequencer, MixingCamera, StateDrivenCamera and ClearShot are left out of the exports, along with their functions, until they are finished and tested.
  • BlendHints.screenSpaceAimWhenTargetsDiffer and BlendHints.inheritPosition are removed. They were never implemented.
  • Raw pinch input is one field - touchPinchDelta, gestureZoomDelta and wheelZoomDelta in ConsumedInput are replaced by pinchDelta, the change in ln(scale).
  • follow.prime(state, position) no longer takes params.
  • CameraState has a rotationDampingBypass field. A state built with cameraState.create() already has it, but one written out by hand needs it added.

🔄 Behavior Changes

  • Cameras off screen update in turns by default (standbyUpdate: 'roundRobin'). An off screen camera's state is only as fresh as its last update, and its frustum helper moves in steps. Use standbyUpdate: 'always' for a camera whose state you read every frame.
  • Follow's damping delays only the target's position. The camera turns with the target right away, so a damped Follow behind a turning target moves differently than before. Set rotationDamping to delay the turn too.
  • The page keeps scrolling and pinch zooming over the canvas until wheel or pinch is mapped.
  • Wheels that scroll by lines or pages report pixels, so input.wheelDeltaY reads the same in every browser.

🐛 Bug Fixes

  • Looking straight up or down with HardLookAt or RotationComposer keeps a valid, steady rotation.
  • lockToTargetOnAssign captures the target's rotation again when the camera goes live or the mode is chosen, as well as when target is set.
  • On-demand rendering wakes up for every input an input controller reads and on a <Klipp mode> change. It also keeps rendering while an axis eases or recenters.
  • Switching mode back to 'enabled' writes the shot again and takes the camera back, even when the shot didn't change.
  • A throwing event listener no longer drops the events after it.
  • GroupFraming with a single point member frames it when padding is set.
  • Disconnecting input puts back the element's own touch-action and user-select, also with several controllers on one element.

📖 Documentation

  • Docs and examples are at pmndrs.github.io/klipp.
  • New pages: OrbitFollow, and Input from data for steering a camera from your code, the network or a recording.
  • standbyUpdate on the VirtualCamera page, and orbits on the Debugging page.
  • New examples: OrbitFollow with recentering, three rings, a binding mode, a damped Aim and GroupFraming, wheel and pinch, raw input, touch and areas, input from data, and standbyUpdate.

🔧 Internal Changes

  • Built with Vite, one file per source file, so dist and the package exports stay the same.
  • Inactive cameras and those skipped by standbyUpdate skip their per-frame preparation. RotationComposer, Perlin noise and PositionComposer skip the work they don't use.
  • Mouse, touch, wheel and Safari gesture input are separate sources behind InputSystem.
  • Benchmarks are their own package, including whole KlippThree frames with up to 50 cameras.
  • Golden trajectory tests for Follow and OrbitFollow.

What's Changed

Full Changelog: v0.13.0...v0.14.0