Repository navigation
v0.14.0 - New Home
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 withorbitStyle: 'threeRing'. Itshorizontal,verticalandradialaxes take the mouse, touch, the wheel and pinches, or values from your code.setFromPositionandsetFromRotationease the camera to a spot, and thedebugprop draws the orbit.OrbitFollowBodyon the core,OrbitFollowBodyThreeandOrbitFollowHelperThreein three.js,<Body.OrbitFollow>in React.- Wheel and pinch input -
wheelandpinchin 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.rotationDampingonFollow- seconds to turn with the target, for everybindingModebutworldSpace.- 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 inrotationDampingBypasson theCameraState. 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.inputAxeslists them.InputControllerfrom@pmndrs/klippmaps input onto axes without a DOM, for example to replay a recording.InputControllerDomfrom@pmndrs/klipp/dombuilds 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/klippand change the imports. The entry points stay the same:@pmndrs/klipp/three,/react,/domand thecamera-controlsones.@kvvasuu/klippis deprecated and gets no more releases. - Core functions are grouped into namespaces with short names:
createFollowParamsis nowfollow.createParams,updateFollowisfollow.update,createTargetPoseistargetPose.create,createCameraStateiscameraState.create,lerpCameraStateiscameraState.lerp,tickKlippisklippState.tickandcomposerDebugZonesisdebugZones.composer. Classes, types,BlendCurves,BlendHintsandDEFAULT_BLENDkeep their names. Building on the core lists every namespace. InputAxisControlleris nowInputControllerDom, and itslastInputis nowinput.InputAxisControllerConfigis nowInputControllerConfig, andfeedInputAxesisinputMapping.feedAxes. Therefof an<InputController>is anInputControllerDom.Sequencer,MixingCamera,StateDrivenCameraandClearShotare left out of the exports, along with their functions, until they are finished and tested.BlendHints.screenSpaceAimWhenTargetsDifferandBlendHints.inheritPositionare removed. They were never implemented.- Raw pinch input is one field -
touchPinchDelta,gestureZoomDeltaandwheelZoomDeltainConsumedInputare replaced bypinchDelta, the change inln(scale). follow.prime(state, position)no longer takesparams.CameraStatehas arotationDampingBypassfield. A state built withcameraState.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'sstateis only as fresh as its last update, and its frustum helper moves in steps. UsestandbyUpdate: 'always'for a camera whosestateyou read every frame. Follow'sdampingdelays only the target's position. The camera turns with the target right away, so a dampedFollowbehind a turning target moves differently than before. SetrotationDampingto delay the turn too.- The page keeps scrolling and pinch zooming over the canvas until
wheelorpinchis mapped. - Wheels that scroll by lines or pages report pixels, so
input.wheelDeltaYreads the same in every browser.
🐛 Bug Fixes
- Looking straight up or down with
HardLookAtorRotationComposerkeeps a valid, steady rotation. lockToTargetOnAssigncaptures the target's rotation again when the camera goes live or the mode is chosen, as well as whentargetis 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
modeback 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.
GroupFramingwith a single point member frames it whenpaddingis set.- Disconnecting input puts back the element's own
touch-actionanduser-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.
standbyUpdateon 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
distand the package exports stay the same. - Inactive cameras and those skipped by
standbyUpdateskip their per-frame preparation.RotationComposer, Perlin noise andPositionComposerskip 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
KlippThreeframes with up to 50 cameras. - Golden trajectory tests for
FollowandOrbitFollow.
What's Changed
- chore: stop a release whose tag doesn't match package.json by @kvvasuu in #105
- Chore/move to pmndrs by @kvvasuu in #106
- chore: point the docs, examples and repo links at pmndrs by @kvvasuu in #107
- Let cameras off screen update in turns by @kvvasuu in #108
- Prepare only the cameras that update this frame by @kvvasuu in #109
- perf: skip work pieces do not use by @kvvasuu in #110
- refactor: group core functions into namespaces by @kvvasuu in #111
- build: bundle with Vite by @kvvasuu in #112
- Sort imports with prettier by @kvvasuu in #114
- Split benches into their own package by @kvvasuu in #115
- Fix/core edge cases by @kvvasuu in #116
- feat: data-oriented input sources by @kvvasuu in #118
- Feat/orbit follow by @kvvasuu in #119
- chore: rename package to @pmndrs/klipp by @krispya in #120
Full Changelog: v0.13.0...v0.14.0