Use.GPU
 – 0.12.0
Docs Source
Git Repo
search
/
·
Intro
expand_more
Guides
·
Getting started
·
WebGPU canvas
·
Drawing and animation
·
Scene geometry
·
2D and 3D plot
·
Data-driven geometry
·
Live vs React
·
Memoization
·
WGSL Shaders
·
Renderers and Passes
·
Layout and UI
·
Background
·
Roadmap
·
Contributing
Reference
expand_more
Components
chevron_right
@use-gpu/gltf
chevron_right
@use-gpu/inspect
chevron_right
@use-gpu/inspect-gpu
chevron_right
@use-gpu/layout
chevron_right
@use-gpu/map
chevron_right
@use-gpu/plot
chevron_right
@use-gpu/present
chevron_right
@use-gpu/react
chevron_right
@use-gpu/scene
chevron_right
@use-gpu/voxel
chevron_right
@use-gpu/webgpu
expand_more
@use-gpu/workbench
widgets
AABBHelper
widgets
Animate
widgets
ArrowLayer
widgets
Await
widgets
AxisHelper
widgets
BasicMaterial
widgets
ColorPass
widgets
CompositeGeometryData
widgets
Compute
widgets
ComputeBuffer
widgets
ComputeLoop
widgets
ComputePass
widgets
Cursor
widgets
CursorProvider
widgets
Data
widgets
DataShader
widgets
DebugAtlas
widgets
DebugAtlasShape
widgets
DebugLineHelper
widgets
DebugProvider
widgets
DebugRender
widgets
DeferredPass
widgets
DeferredRenderer
widgets
DeferredShadedRender
widgets
DeferredSolidRender
widgets
DeferredUIRender
widgets
DirectionalLight
widgets
DispatchPass
widgets
DualContourLayer
widgets
Environment
widgets
EventProvider
widgets
FaceLayer
widgets
Fetch
widgets
Flat
widgets
FlatCamera
widgets
FontLoader
widgets
FontProvider
widgets
ForwardRenderer
widgets
FPSControls
widgets
FullScreen
widgets
GBuffer
widgets
GeometryData
widgets
GlyphSource
widgets
ImageCubeTexture
widgets
ImageTexture
widgets
IndexedTransform
widgets
InstanceData
widgets
InterleavedData
widgets
Iterate
widgets
Kernel
widgets
LabelLayer
widgets
LightData
widgets
LightMaterial
widgets
LightRender
widgets
LinearRGB
widgets
LineLayer
widgets
Loop
widgets
Memo2
widgets
OrbitCamera
widgets
OrbitControls
widgets
PanControls
widgets
PanoramaMap
widgets
Pass
widgets
PBRMaterial
widgets
Pick
widgets
PickingBuffer
widgets
PickingPass
widgets
PickingRender
widgets
PickingTarget
widgets
PointHelper
widgets
PointLayer
widgets
PointLight
widgets
PrefilteredEnvMap
widgets
Queue
widgets
RawArrows
widgets
RawData
widgets
RawFaces
widgets
RawFullScreen
widgets
RawLabels
widgets
RawLines
widgets
RawQuads
widgets
RawTexture
widgets
Readback
widgets
ReadbackPass
widgets
RenderTarget
widgets
RenderToTexture
widgets
Router
widgets
Routes
widgets
SDFFontProvider
widgets
SDFRectangles
widgets
ShadedRender
widgets
ShaderFlatMaterial
widgets
ShaderLitMaterial
widgets
ShadowBuffer
widgets
ShadowPass
widgets
ShadowRender
widgets
SolidRender
widgets
Stage
widgets
StructData
widgets
SurfaceLayer
widgets
Suspense
widgets
TextureBuffer
widgets
TextureShader
widgets
TickLayer
widgets
UIRender
widgets
VectorHelper
widgets
ViewProvider
widgets
VirtualLayers
phishing
useAggregator
phishing
useAnimationFrame
phishing
useApplyTransform
phishing
useArrowSegmentsSource
phishing
useBufferedSize
phishing
useCombinedEpsilonTransform
phishing
useCombinedMatrix
phishing
useCombinedMatrixTransform
phishing
useCombinedTransform
phishing
useComputeContext
phishing
useComputePipeline
phishing
useComputePipelineAsync
phishing
useDataBinding
phishing
useDataLength
phishing
useDataSize
phishing
useDebugContext
phishing
useDerivedSource
phishing
useDerivedState
phishing
useDeviceContext
phishing
useDraw
phishing
useEnvironmentContext
phishing
useFaceSegmentsConcaveSource
phishing
useFaceSegmentsSource
phishing
useFeedbackContext
phishing
useFontContext
phishing
useFontDebug
phishing
useFontFamily
phishing
useFontHeight
phishing
useFontText
phishing
useForceUpdate
phishing
useFrustumCuller
phishing
useInspectable
phishing
useInspectHoverable
phishing
useInspectorSelect
phishing
useInstancedAggregate
phishing
useInstancedSources
phishing
useInstancedVertex
phishing
useKeyboard
phishing
useLambdaSource
phishing
useLayoutContext
phishing
useLightContext
phishing
useLightDraw
phishing
useLineSegmentsSource
phishing
useLinkedShader
phishing
useMaskContext
phishing
useMaterialContext
phishing
useMatrixBounds
phishing
useMatrixContext
phishing
useMatrixTransform
phishing
useMatrixTransformSources
phishing
useMouse
phishing
useMouseLock
phishing
useNativeColor
phishing
useNativeColorTexture
phishing
useNoAnimationFrame
phishing
useNoApplyTransform
phishing
useNoBufferedSize
phishing
useNoCombinedEpsilonTransform
phishing
useNoCombinedMatrix
phishing
useNoCombinedMatrixTransform
phishing
useNoCombinedTransform
phishing
useNoComputeContext
phishing
useNoDerivedSource
phishing
useNoDeviceContext
phishing
useNoDraw
phishing
useNoFaceSegments
phishing
useNoFaceSegmentsConcave
phishing
useNoFaceSegmentsConcaveSource
phishing
useNoFaceSegmentsSource
phishing
useNoFeedbackContext
phishing
useNoFrustumCuller
phishing
useNoInspectable
phishing
useNoInspectHoverable
phishing
useNoInstancedVertex
phishing
useNoMatrixBounds
phishing
useNoMatrixContext
phishing
useNoMatrixTransform
phishing
useNoMatrixTransformSources
phishing
useNoPassContext
phishing
useNoPerFrame
phishing
useNoPickingContext
phishing
useNoPipelineLayout
phishing
useNoRawSource
phishing
useNoRawTensorSource
phishing
useNoRenderContext
phishing
useNoRenderPipeline
phishing
useNoRenderPipelineAsync
phishing
useNoScissorContext
phishing
useNoSDFFontContext
phishing
useNoShader
phishing
useNoShaderRef
phishing
useNoShaderRefs
phishing
useNoSource
phishing
useNoSuspenseContext
phishing
useNoTimeContext
phishing
useNoTransformContext
phishing
useNoVariantContext
phishing
useNoViewContext
phishing
usePassContext
phishing
usePerFrame
phishing
usePickingContext
phishing
usePickingShader
phishing
usePipelineLayout
phishing
usePipelineOptions
phishing
useRawSource
phishing
useRawTensorSource
phishing
useRenderContext
phishing
useRenderPipeline
phishing
useRenderPipelineAsync
phishing
useRenderProp
phishing
useRouterContext
phishing
useScissorContext
phishing
useScratchSource
phishing
useSDFFontContext
phishing
useSDFGlyphData
phishing
useShader
phishing
useShaderRef
phishing
useShaderRefs
phishing
useSource
phishing
useStructAggregate
phishing
useStructSources
phishing
useSuspenseContext
phishing
useTimeContext
phishing
useTransformContext
phishing
useVariantContext
phishing
useViewContext
phishing
useWheel
east
adjustSize
east
AmbientLight
east
chainTransform
east
combineInstances
east
dispatch
east
Dispatch
east
DomeLight
east
drawCall
east
DrawCall
east
drawToPass
east
emitGlyphSpans
east
forMeshTriangles
east
getAlignmentAnchor
east
getAlignmentSpacing
east
getArrowSegments
east
getDerivedSource
east
getDrawOrder
east
getFaceSegments
east
getFaceSegmentsConcave
east
getInstancedAggregate
east
getInstancedSources
east
getLambdaSource
east
getLine
east
getLineSegments
east
getNativeColor
east
getRenderFunc
east
getRenderPassDescriptor
east
getShader
east
getShaderLog
east
getSource
east
getStructAggregate
east
getStructSources
east
getUint16
east
getUint8
east
getWireframe
east
getWireframeIndirect
east
LightDraw
east
makeAABBGeometry
east
makeAggregator
east
makeArrowFlatGeometry
east
makeArrowGeometry
east
makeBasedURL
east
makeBoxGeometry
east
makeBrowserHistory
east
makeInlineCursor
east
makePlaneGeometry
east
makeRelativeURL
east
makeSphereGeometry
east
Outlet
east
parseHDR
east
parseRGBM16
east
pathSpecToRegexp
east
Raw
east
reverseZ
east
setShaderLog
east
transformNormals
east
transformPositions
input
ComputeContext
input
DebugContext
input
DeviceContext
input
EnvironmentContext
input
EventContext
input
FeedbackContext
input
FontContext
input
FrameContext
input
KeyboardContext
input
LayoutContext
input
LightContext
input
LoopContext
input
MaskContext
input
MaterialContext
input
MatrixContext
input
MouseContext
input
PassContext
input
PickingContext
input
RenderContext
input
RouteContext
input
RouterContext
input
ScissorContext
input
SDFFontContext
input
SuspenseContext
input
TimeContext
input
TransformContext
input
VariantContext
input
ViewContext
input
WheelContext
data_object
AMBIENT_LIGHT
data_object
ARROW_SCHEMA
data_object
ARROW_SEGMENTS_SCHEMA
data_object
CursorState
data_object
DEBUG_DEFAULTS
data_object
DEFAULT_LIGHT_CONTEXT
data_object
DEFAULT_MATERIAL_CONTEXT
data_object
DEFAULT_TRANSFORM
data_object
DIRECTIONAL_LIGHT
data_object
DOME_LIGHT
data_object
DUAL_CONTOUR_SCHEMA
data_object
FACE_SCHEMA
data_object
FACE_SEGMENTS_SCHEMA
data_object
FULLSCREEN_DEFS
data_object
FULLSCREEN_PIPELINE
data_object
FULLSCREEN_STENCIL_PIPELINE
data_object
GEOMETRY_DEFS
data_object
GEOMETRY_PIPELINE
data_object
GEOMETRY_STENCIL_PIPELINE
data_object
INSTANCE_SCHEMA
data_object
LABEL_SCHEMA
data_object
LayerReconciler
data_object
LightCapture
data_object
LINE_SCHEMA
data_object
LINE_SEGMENTS_SCHEMA
data_object
MATRIX_SCHEMA
data_object
PassReconciler
data_object
POINT_LIGHT
data_object
POINT_SCHEMA
data_object
QueueReconciler
data_object
SHADOW_FORMAT
data_object
SHADOW_PAGE
data_object
SHAPE_SCHEMA
data_object
STENCIL_PIPELINE
data_object
SURFACE_SCHEMA
data_object
TICK_SCHEMA
data_object
UI_SCHEMA
title
AggregatedCalls
title
Alignment
title
AmbientLightProps
title
ArrowAggregate
title
ArrowLayerFlags
title
ArrowSegmentsData
title
BaseAggregate
title
BoundLight
title
CommandToBuffer
title
ComputeContextProps
title
ComputeCounter
title
ComputeToPass
title
Culler
title
DebugContextProps
title
DebugHelper
title
DispatchProps
title
DomeLightProps
title
DrawCallProps
title
DualContourLayerFlags
title
Ease
title
EnvironmentContextProps
title
EventContextProps
title
FaceAggregate
title
FaceLayerFlags
title
FaceSegmentsData
title
FetchAPIOptions
title
FontSource
title
FrameContextProps
title
Inspector
title
KeyboardContextProps
title
KeyboardEventState
title
KeyboardState
title
Keyframe
title
LayerAggregate
title
LayerAggregates
title
LayerAggregator
title
LayerType
title
Light
title
LightContextProps
title
LightEnv
title
LightKindProps
title
LineAggregate
title
LineLayerFlags
title
LineSegmentsData
title
LiveReturner
title
LoopRef
title
MaskContextProps
title
MaterialContextProps
title
MatrixContextProps
title
MatrixInstances
title
MatrixRefs
title
MatrixState
title
MaybeRenderProps
title
MouseContextProps
title
MouseEventState
title
MouseState
title
PassContextProps
title
PickingContextProps
title
PickingProps
title
PickingSource
title
PickState
title
PipelineOptions
title
PointAggregate
title
PointerLockAPI
title
PointLayerFlags
title
QueryParams
title
RawArrowsFlags
title
RawFacesFlags
title
RawLabelsFlags
title
RawLinesFlags
title
Renderable
title
RenderComponents
title
RenderCounter
title
RenderProps
title
RenderToPass
title
Route
title
RouterAPI
title
RouterLink
title
RouterState
title
RouteState
title
ScissorContextProps
title
SDFFontContextProps
title
SDFGlyphData
title
SegmentDecorator
title
SegmentsInfo
title
ShadowMapLike
title
ShadowMapProps
title
ShapeAggregate
title
SourceLike
title
SphereGeometryProps
title
Stoppable
title
TimeContextProps
title
Tracks
title
TransformBounds
title
TransformContextProps
title
UseInstance
title
UseLight
title
VariantContextProps
title
ViewContextProps
title
VirtualDraw
title
WheelContextProps
title
WheelEventState
title
WheelState
chevron_right
Libraries
chevron_right
Live/React
chevron_right
Loaders
chevron_right
Development

widgets Component – <ArrowLayer>

const ArrowLayer: LiveComponent<ArrowLayerProps>

Draws line segments with optional start/end arrow heads.

Props

RawArrowsProps

PickingSource

id? 
number
lookup? 
number
ids? 
ShaderSource
lookups? 
ShaderSource
uvPicking? 
boolean

RawArrowsFlags

{
  flat?: boolean,
  detail?: number,
} &
Pick<Partial<PipelineOptions>,
"mode" | "alphaToCoverage" | "depthTest" | "depthWrite" | "blend">

Other

anchor? 
VectorLike
position? 
VectorLike
uv? 
VectorLike
st? 
VectorLike
color? 
VectorLike
size? 
number
width? 
number
depth? 
number
zBias? 
number
anchors? 
ShaderSource
positions? 
ShaderSource
uvs? 
ShaderSource
sts? 
ShaderSource
colors? 
ShaderSource
sizes? 
ShaderSource
widths? 
ShaderSource
depths? 
ShaderSource
zBiases? 
ShaderSource
instance? 
number
instances? 
ShaderSource
transform? 
TransformContextProps | ShaderModule
count? 
number

RawLinesProps

PickingSource

id? 
number
lookup? 
number
ids? 
ShaderSource
lookups? 
ShaderSource
uvPicking? 
boolean

RawLinesFlags

{
  join?: "miter" | "round" | "bevel",
} &
Pick<Partial<PipelineOptions>,
"mode" | "alphaToCoverage" | "depthTest" | "depthWrite" | "blend">

Other

position? 
VectorLike
segment? 
number
uv? 
VectorLike
st? 
VectorLike
color? 
VectorLike
width? 
number
depth? 
number
zBias? 
number
trim? 
VectorLike
size? 
number
positions? 
ShaderSource
segments? 
ShaderSource
uvs? 
ShaderSource
sts? 
ShaderSource
colors? 
ShaderSource
widths? 
ShaderSource
depths? 
ShaderSource
zBiases? 
ShaderSource
trims? 
ShaderSource
sizes? 
ShaderSource
instance? 
number
instances? 
ShaderSource
transform? 
TransformContextProps | ShaderModule
count? 
Lazy<number>

Source

packages / workbench / src / layers / arrow-layer.ts

Sections
Props  
RawArrowsProps  
PickingSource  
RawArrowsFlags  
Other  
RawLinesProps  
PickingSource  
RawLinesFlags  
Other  
Source  
menu
format_list_numbered