raea/camera

<Camera3d> is Bevy's 3D camera: a transform, a projection and what it renders to. <Canvas3D> is the stage a Bevy-style 2D scene draws in, with Bevy's coordinates (the origin at the centre, +Y up, a unit a pixel). <Matchmove> drives a camera from the solve raea track makes, so 3D stands in filmed footage.

import { Camera3d } from "raea/camera";
import { Transform } from "raea/transform";

const Shot = () => <Camera3d transform={Transform.fromXyz(-2, 2.5, 5).lookingAt([0, 0, 0])} projection={{ Perspective: { fov: Math.PI / 4 } }} />;

import { Camera3d, Canvas3D, checkMatchmove, Hdr } from "raea/camera"

raea/camera exports 5 components, 1 hook, 3 functions, 9 types. Bevy's counterpart: bevy_camera. Source: sdk/raea/src/camera.ts.

#Components

#Camera3d

Bevy's Camera3d with its Transform and Projection: it looks along its -Z, +Y up, as Bevy's cameras do.

Bevy: bevy_camera::components::Camera3d, bevy_camera::camera::Camera, bevy_camera::projection::Projection.

Used in: ui/render_ui_to_texture, ui/widgets/viewport_node, 3d/fog_volumes, 3d/fog, 3d/vertex_colors, 3d/rotate_environment_map, 3d/transparency_3d, 3d/spherical_area_lights, and 60 more.

#Canvas3D

Only for layered: the 3D is drawn in the page's order, at the box of the nearest positioned element around it (the whole frame when there's none; B3 H7), at that box's size and aspect:

Takes Canvas3DProps's props.

#Hdr

Bevy's Hdr: put it inside the to render it to a float target, tone-mapped after, as Bevy's Hdr camera is (a Skybox's or an emissive's light above 1 then rolls off in the tone mapping instead of clipping).

Bevy: bevy_camera::components::Hdr.

Used in: 3d/rotate_environment_map.

#Matchmove

Footage with real 3D standing in it: the clip behind, its camera solved and followed, the subject in front. Fills the frame (its camera's view is the frame's); its children are the 3D in the shot's world, lights included.

Takes MatchmoveProps's props.

#TextureView

the GPU texture's number

Bevy: bevy_render::TextureView.

Also takes the props of ImgHTMLAttributes (height, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, sizes, srcSet, useMap, width); HTMLAttributes (slot, style, title, hidden, color, content, part, className, id, defaultChecked, defaultValue, suppressContentEditableWarning, suppressHydrationWarning, accessKey, autoCapitalize, autoFocus, contentEditable, contextMenu, dir, draggable, enterKeyHint, lang, nonce, spellCheck, tabIndex, translate, radioGroup, role, about, datatype, inlist, prefix, property, rel, resource, rev, typeof, vocab, autoCorrect, autoSave, itemProp, itemScope, itemType, itemID, itemRef, results, security, unselectable, popover, popoverTargetAction, popoverTarget, inert, inputMode, is, exportparts); DOMAttributes (children, dangerouslySetInnerHTML, onCopy, onCopyCapture, onCut, onCutCapture, onPaste, onPasteCapture, onCompositionEnd, onCompositionEndCapture, onCompositionStart, onCompositionStartCapture, onCompositionUpdate, onCompositionUpdateCapture, onFocus, onFocusCapture, onBlur, onBlurCapture, onChange, onChangeCapture, onBeforeInput, onBeforeInputCapture, onInput, onInputCapture, onReset, onResetCapture, onSubmit, onSubmitCapture, onInvalid, onInvalidCapture, onLoad, onLoadCapture, onError, onErrorCapture, onKeyDown, onKeyDownCapture, onKeyPress, onKeyPressCapture, onKeyUp, onKeyUpCapture, onAbort, onAbortCapture, onCanPlay, onCanPlayCapture, onCanPlayThrough, onCanPlayThroughCapture, onDurationChange, onDurationChangeCapture, onEmptied, onEmptiedCapture, onEncrypted, onEncryptedCapture, onEnded, onEndedCapture, onLoadedData, onLoadedDataCapture, onLoadedMetadata, onLoadedMetadataCapture, onLoadStart, onLoadStartCapture, onPause, onPauseCapture, onPlay, onPlayCapture, onPlaying, onPlayingCapture, onProgress, onProgressCapture, onRateChange, onRateChangeCapture, onSeeked, onSeekedCapture, onSeeking, onSeekingCapture, onStalled, onStalledCapture, onSuspend, onSuspendCapture, onTimeUpdate, onTimeUpdateCapture, onVolumeChange, onVolumeChangeCapture, onWaiting, onWaitingCapture, onAuxClick, onAuxClickCapture, onClick, onClickCapture, onContextMenu, onContextMenuCapture, onDoubleClick, onDoubleClickCapture, onDrag, onDragCapture, onDragEnd, onDragEndCapture, onDragEnter, onDragEnterCapture, onDragExit, onDragExitCapture, onDragLeave, onDragLeaveCapture, onDragOver, onDragOverCapture, onDragStart, onDragStartCapture, onDrop, onDropCapture, onMouseDown, onMouseDownCapture, onMouseEnter, onMouseLeave, onMouseMove, onMouseMoveCapture, onMouseOut, onMouseOutCapture, onMouseOver, onMouseOverCapture, onMouseUp, onMouseUpCapture, onSelect, onSelectCapture, onTouchCancel, onTouchCancelCapture, onTouchEnd, onTouchEndCapture, onTouchMove, onTouchMoveCapture, onTouchStart, onTouchStartCapture, onPointerDown, onPointerDownCapture, onPointerMove, onPointerMoveCapture, onPointerUp, onPointerUpCapture, onPointerCancel, onPointerCancelCapture, onPointerEnter, onPointerLeave, onPointerOver, onPointerOverCapture, onPointerOut, onPointerOutCapture, onGotPointerCapture, onGotPointerCaptureCapture, onLostPointerCapture, onLostPointerCaptureCapture, onScroll, onScrollCapture, onScrollEnd, onScrollEndCapture, onWheel, onWheelCapture, onAnimationStart, onAnimationStartCapture, onAnimationEnd, onAnimationEndCapture, onAnimationIteration, onAnimationIterationCapture, onToggle, onBeforeToggle, onTransitionCancel, onTransitionCancelCapture, onTransitionEnd, onTransitionEndCapture, onTransitionRun, onTransitionRunCapture, onTransitionStart, onTransitionStartCapture); AriaAttributes (aria-activedescendant, aria-atomic, aria-autocomplete, aria-braillelabel, aria-brailleroledescription, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colindextext, aria-colspan, aria-controls, aria-current, aria-describedby, aria-description, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowindextext, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext).

#Hooks

#useMatchmove

The solve and this frame's camera, inside a .

function useMatchmove(): MatchmoveState

#Functions

#checkMatchmove

Checks a Matchmove's props; throws a TypeError or RangeError naming the prop.

function checkMatchmove(p: MatchmoveProps): void

#matchmoveIndex

The solve's frame at a time in the clip: the latest at or before it, clamped to the solve.

function matchmoveIndex(solve: MatchmoveSolve, time: number): number

#matchmoveView

The footage's view in a frame of another shape: the whole view's size (the footage scaled to cover the frame, times zoom) and the frame's window in it, in frame pixels.

function matchmoveView(footage: { width: number; height: number; }, frame: { width: number; height: number; }, crop?: number | [number, number], zoom?: number): { width: number; height: number; x: number; y: number; }

#Types

#Camera3dProps

The props of Camera3d, tabled there.

#CameraViewport

Bevy's Viewport on a Camera, its depth range Bevy's default 0..1.

#Canvas3DProps

#ClearColorConfig

Bevy's ClearColorConfig.

Bevy: bevy_camera::clear_color::ClearColorConfig.

type ClearColorConfig = "Default" | "None" | { Custom: Srgba | LinearRgba }

#MatchmoveCamera

#MatchmoveProps

#MatchmoveSolve

What raea track writes and draws from.

#MatchmoveState

Each frame's state under a , for the 3D inside it.

#Projection

Bevy's Projection enum, as it reflects: fov in radians (Bevy's default PI/4).

type Projection = | { Perspective: { fov?: number; near?: number; far?: number } } | { Orthographic: { near?: number; far?: number; scaling_mode?: { FixedVertical: { viewport_height: number } } } }