Use.GPU
 – 0.20.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
·
Events and Picking
·
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/interact
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
AccumulateRender
widgets
Animate
widgets
ArcLabelLayer
widgets
ArrowLayer
widgets
Await
widgets
AxisHelper
widgets
BasicMaterial
widgets
Clock
widgets
ColorCubePass
widgets
ColorPass
widgets
CompositeGeometryData
widgets
Compute
widgets
ComputeBuffer
widgets
ComputePass
widgets
ConeHelper
widgets
CubeCamera
widgets
CursorProvider
widgets
Data
widgets
DataShader
widgets
DebugAtlas
widgets
DebugAtlasShape
widgets
DebugProvider
widgets
DebugRender
widgets
DeferredGPass
widgets
DeferredRenderer
widgets
DeferredResolvePass
widgets
DeferredShadedRender
widgets
DeferredSolidRender
widgets
DeferredUIRender
widgets
DirectionalLight
widgets
Dispatch
widgets
DispatchPass
widgets
DrawCall
widgets
DualContourLayer
widgets
EaseToTarget
widgets
Environment
widgets
EnvPass
widgets
EventProvider
widgets
FaceLayer
widgets
Fetch
widgets
Flat
widgets
FlatCamera
widgets
FontLoader
widgets
FontProvider
widgets
ForwardRenderer
widgets
FresnelMaterialEffect
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
LightMaterialProvider
widgets
LightProvider
widgets
LightRender
widgets
LinearRGB
widgets
LineLayer
widgets
LoadingSpinner
widgets
LookAt
widgets
Loop
widgets
Memo2
widgets
MotionBuffer
widgets
MotionPass
widgets
NormalBuffer
widgets
NormalMaterial
widgets
NormalPass
widgets
NormalRender
widgets
On
widgets
OrbitCamera
widgets
OutlinePass
widgets
OverscanBuffer
widgets
PanoramaMap
widgets
Pass
widgets
PBRMaterial
widgets
PickingBuffer
widgets
PickingPass
widgets
PickingRender
widgets
PickingTarget
widgets
PointHelper
widgets
PointLayer
widgets
PointLight
widgets
PrefilteredEnvMap
widgets
PrintHelper
widgets
PrintLayer
widgets
PrintReadback
widgets
Queue
widgets
RawArrows
widgets
RawData
widgets
RawFaces
widgets
RawFullScreen
widgets
RawLabels
widgets
RawLines
widgets
RawQuads
widgets
RawTexture
widgets
Readback
widgets
ReadbackPass
widgets
RenderCubeTarget
widgets
RenderDispatch
widgets
Renderer
widgets
RenderTarget
widgets
RenderToTexture
widgets
Router
widgets
Routes
widgets
Screenshot
widgets
SDFFontProvider
widgets
SDFRectangles
widgets
ShadedRender
widgets
ShaderFlatMaterial
widgets
ShaderLitMaterial
widgets
ShadowBuffer
widgets
ShadowOmniPass
widgets
ShadowOrthoPass
widgets
ShadowPass
widgets
ShadowRender
widgets
SolidRender
widgets
SpotLight
widgets
SSAOPass
widgets
Stage
widgets
StructData
widgets
SurfaceLayer
widgets
Suspense
widgets
SyncLoop
widgets
TextureBuffer
widgets
TextureShader
widgets
TickLayer
widgets
UIRender
widgets
ValueShader
widgets
VectorHelper
widgets
ViewProvider
widgets
VirtualLayers
phishing
useAggregator
phishing
useAnimationFrame
phishing
useApplyPassBindGroup
phishing
useApplyTransform
phishing
useArcSegmentsSource
phishing
useArrowSegmentsSource
phishing
useBindGroupLayout
phishing
useBufferedSize
phishing
useCanvasEvents
phishing
useCombinedEpsilonTransform
phishing
useCombinedMatrix
phishing
useCombinedMatrixTransform
phishing
useCombinedRenderTarget
phishing
useCombinedScissor
phishing
useCombinedTransform
phishing
useComputeContext
phishing
useComputePipeline
phishing
useComputePipelineAsync
phishing
useCopyDepth
phishing
useCopyDepthSample
phishing
useCopySample
phishing
useCopySelectDepthSample
phishing
useCopySelectDepthSample2
phishing
useCopySelectSample2
phishing
useDataBinding
phishing
useDataLength
phishing
useDataSize
phishing
useDebugContext
phishing
useDerivedSource
phishing
useDerivedState
phishing
useDeviceContext
phishing
useDisplayShader
phishing
useDraw
phishing
useDynamicViewBinding
phishing
useEnvironmentContext
phishing
useEventEffect
phishing
useFaceSegmentsConcaveSource
phishing
useFaceSegmentsSource
phishing
useFacetShader
phishing
useFontContext
phishing
useFontDebug
phishing
useFontFamily
phishing
useFontHeight
phishing
useFontText
phishing
useForceUpdate
phishing
useFrustumCuller
phishing
useInitialDispatch
phishing
useInitialRender
phishing
useInspectable
phishing
useInspectHoverable
phishing
useInspectorSelect
phishing
useInstancedAggregate
phishing
useInstancedSources
phishing
useInstancedVertex
phishing
useKeyboardState
phishing
useLambdaSource
phishing
useLayoutContext
phishing
useLightContext
phishing
useLightDraw
phishing
useLightMaterialContext
phishing
useLineSegmentsSource
phishing
useLinkedShader
phishing
useMakeUseVariants
phishing
useMaterialContext
phishing
useMatrixBounds
phishing
useMatrixContext
phishing
useMatrixTransform
phishing
useMatrixTransformSources
phishing
useMinimalBindGroups
phishing
useMouseState
phishing
useMultiViewShader
phishing
useNativeColor
phishing
useNativeColorTexture
phishing
useNoAnimationFrame
phishing
useNoApplyPassBindGroup
phishing
useNoApplyTransform
phishing
useNoBufferedSize
phishing
useNoCombinedEpsilonTransform
phishing
useNoCombinedMatrix
phishing
useNoCombinedMatrixTransform
phishing
useNoCombinedTransform
phishing
useNoComputeContext
phishing
useNoDerivedSource
phishing
useNoDeviceContext
phishing
useNoDraw
phishing
useNoEnvironmentContext
phishing
useNoFaceSegments
phishing
useNoFaceSegmentsConcave
phishing
useNoFaceSegmentsConcaveSource
phishing
useNoFaceSegmentsSource
phishing
useNoFrustumCuller
phishing
useNoInitialDispatch
phishing
useNoInitialRender
phishing
useNoInspectable
phishing
useNoInspectHoverable
phishing
useNoInstancedVertex
phishing
useNoKeyboardState
phishing
useNoLightContext
phishing
useNoMaterialContext
phishing
useNoMatrixBounds
phishing
useNoMatrixContext
phishing
useNoMatrixTransform
phishing
useNoMatrixTransformSources
phishing
useNoMouseState
phishing
useNoPassContext
phishing
useNoPerFrame
phishing
useNoPerViewFrame
phishing
useNoPickingContext
phishing
useNoPickingId
phishing
useNoPickingIds
phishing
useNoPipelineLayout
phishing
useNoPrintContext
phishing
useNoRawSource
phishing
useNoRawTensorSource
phishing
useNoRenderContext
phishing
useNoRenderPipeline
phishing
useNoRenderPipelineAsync
phishing
useNoScissorContext
phishing
useNoScratchSource
phishing
useNoSDFFontContext
phishing
useNoShader
phishing
useNoShaderRef
phishing
useNoShaderRefs
phishing
useNoSource
phishing
useNoSuspenseContext
phishing
useNoTimeContext
phishing
useNoTransformContext
phishing
useNoVariantContext
phishing
useNoViewContext
phishing
useNoWheelState
phishing
useObjectEvents
phishing
usePassContext
phishing
usePerFrame
phishing
usePerViewFrame
phishing
usePickingContext
phishing
usePickingId
phishing
usePickingIds
phishing
usePickingShader
phishing
usePipelineLayout
phishing
usePipelineOptions
phishing
usePointerCapture
phishing
usePointerLock
phishing
usePrintContext
phishing
useRawSource
phishing
useRawTensorSource
phishing
useReadbackStorage
phishing
useRenderContext
phishing
useRenderCopy
phishing
useRenderPipeline
phishing
useRenderPipelineAsync
phishing
useRenderProp
phishing
useRouterContext
phishing
useScissorContext
phishing
useScissorShader
phishing
useScratchSource
phishing
useSDFFontContext
phishing
useSDFGlyphData
phishing
useShader
phishing
useShaderRef
phishing
useShaderRefs
phishing
useSource
phishing
useStandardBindGroup
phishing
useStandardBindGroups
phishing
useStructAggregate
phishing
useStructSources
phishing
useSuspenseContext
phishing
useTextureAccess
phishing
useTextureUVToXY
phishing
useTimeContext
phishing
useTransformContext
phishing
useUniformBinding
phishing
useUniformSource
phishing
useVariantContext
phishing
useViewBinding
phishing
useViewContext
phishing
useViewUniforms
phishing
useWheelState
east
adjustSize
east
AmbientLight
east
automaticKeyframes
east
chainTransform
east
cloneLerpable
east
combineInstances
east
computeMeshNormals
east
computeVertexNormals
east
copyLerpable
east
DEFAULT_LIGHT_CONTEXT
east
dispatch
east
DomeLight
east
drawCall
east
drawToPass
east
emitGlyphSpans
east
EventStateProvider
east
forMeshTriangles
east
gatherPassResources
east
getAlignmentAnchor
east
getAlignmentSpacing
east
getArcSegments
east
getArrowSegments
east
getBindGroupLayout
east
getCombinedRenderTarget
east
getCPUConcurrency
east
getDerivedSource
east
getDisplayShader
east
getFaceSegments
east
getFaceSegmentsConcave
east
getInstancedAggregate
east
getInstancedSources
east
getLambdaSource
east
getLine
east
getLineSegments
east
getMeshTriangle
east
getMultiViewShader
east
getNativeColor
east
getRenderFunc
east
getRenderPassDescriptor
east
getScratchSource
east
getShader
east
getShaderLabel
east
getSource
east
getStructAggregate
east
getStructSources
east
getTextureAccess
east
getTextureUVToXY
east
getUint16
east
getUint8
east
getUniformSource
east
getWireframe
east
getWireframeIndirect
east
LightDraw
east
makeAABBGeometry
east
makeAggregator
east
makeArrowFlatGeometry
east
makeArrowGeometry
east
makeBasedURL
east
makeBoxGeometry
east
makeBrowserHistory
east
makeGetVariants
east
makeInlineCursor
east
makeLightQueue
east
makeOctahedronGeometry
east
makePlaneGeometry
east
makeRelativeURL
east
makeSphereGeometry
east
makeWorkerDispatch
east
Outlet
east
parseHDR
east
parseOverscanOptions
east
parseRGBM16
east
pathSpecToRegexp
east
Raw
east
transformMesh
east
transformNormals
east
transformPositions
input
ComputeContext
input
DebugContext
input
DeviceContext
input
EnvironmentContext
input
EventContext
input
FontContext
input
KeyboardContext
input
LayoutContext
input
LightContext
input
LightMaterialContext
input
LoopContext
input
MaterialContext
input
MatrixContext
input
MouseContext
input
PassContext
input
PickingContext
input
PrintContext
input
RenderContext
input
RouteContext
input
RouterContext
input
ScissorContext
input
SDFFontContext
input
SuspenseContext
input
TimeContext
input
TransformContext
input
VariantContext
input
ViewContext
input
ViewFrameContext
input
WheelContext
data_object
AMBIENT_LIGHT
data_object
ARC_ANCHORS_SCHEMA
data_object
ARC_GEOMETRY_SCHEMA
data_object
ARC_LABEL_SCHEMA
data_object
ARC_SEGMENTS_SCHEMA
data_object
ARROW_SCHEMA
data_object
ARROW_SEGMENTS_SCHEMA
data_object
CursorState
data_object
DEBUG_DEFAULTS
data_object
DEFAULT_LIGHT_MATERIAL_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
EaseTypes
data_object
EventReconciler
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
HEMI_LIGHT
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
MOTION_DEPTH_FORMAT
data_object
MOTION_RENDER_FORMATS
data_object
NORMAL_DEPTH_FORMAT
data_object
NORMAL_RENDER_FORMAT_FAT
data_object
NORMAL_RENDER_FORMAT_THIN
data_object
PassReconciler
data_object
POINT_CLOUD_SCHEMA
data_object
POINT_LIGHT
data_object
POINT_SCHEMA
data_object
QueueReconciler
data_object
RAW_LABEL_SCHEMA
data_object
SCISSOR_GETTERS
data_object
SHADOW_FORMAT
data_object
SHADOW_PAGE
data_object
SHAPE_SCHEMA
data_object
SPOT_LIGHT
data_object
STENCIL_PIPELINE
data_object
SURFACE_SCHEMA
data_object
TICK_SCHEMA
data_object
UI_SCHEMA
title
AggregatedCalls
title
Alignment
title
AmbientLightProps
title
ArcSegmentsData
title
ArrowAggregate
title
ArrowLayerFlags
title
ArrowSegmentsData
title
AutoKeyframe
title
AutoSpline
title
BaseAggregate
title
BoundLight
title
CanvasEvent
title
CommandToBuffer
title
ComputeContextProps
title
ComputeCounter
title
ComputeToPass
title
Culler
title
DebugContextProps
title
DeferredRendererOptions
title
Dispatcher
title
DomeLightProps
title
DualContourLayerFlags
title
Ease
title
EaseType
title
EaseTypeImpl
title
EnvironmentContextProps
title
EventBinding
title
EventCallback
title
EventContextProps
title
EventHandler
title
EventStateProviderProps
title
ExtendedPassFlags
title
FaceAggregate
title
FaceLayerFlags
title
FaceSegmentsData
title
FacetSource
title
FetchAPIOptions
title
FontSource
title
ForwardRendererFlags
title
Inspector
title
KeyboardEvent
title
KeyboardModifier
title
KeyboardState
title
Keyframe
title
KeyframeTypeOf
title
LayerAggregate
title
LayerAggregates
title
LayerAggregator
title
LayerType
title
Lerp
title
Lerpable
title
LerpableRecord
title
Light
title
LightContextProps
title
LightEnv
title
LightKindProps
title
LightMaterialContextProps
title
LineAggregate
title
LineLayerFlags
title
LineSegmentsData
title
LiveReturner
title
LoopContextProps
title
MakeSpline
title
MaterialContextProps
title
MatrixContextProps
title
MatrixInstances
title
MatrixRefs
title
MatrixState
title
MaybeRenderProps
title
Measure
title
MouseButton
title
MouseState
title
OITOptions
title
OutlineOptions
title
OverlayFlags
title
OverscanOptions
title
PassApplyBindGroup
title
PassBindGroup
title
PassBinding
title
PassContextProps
title
PassEnv
title
PassFlags
title
PassOptions
title
PassResources
title
PassView
title
PickingContextProps
title
PickingProps
title
PickingSource
title
PickRef
title
PipelineOptions
title
PointAggregate
title
PointerCaptureAPI
title
PointerEvent
title
PointerLockAPI
title
PointLayerFlags
title
PrintContextProps
title
QueryParams
title
RawArrowsFlags
title
RawFacesFlags
title
RawLabelsFlags
title
RawLinesFlags
title
RawQuadsFlags
title
Renderable
title
RenderComponents
title
RenderCounter
title
RenderProps
title
RenderShader
title
RenderToPass
title
Route
title
RouterAPI
title
RouterLink
title
RouterState
title
RouteState
title
ScissorContextProps
title
ScissorMode
title
SDFFontContextProps
title
SDFGlyphData
title
SegmentDecorator
title
SegmentsInfo
title
ShaderPrinter
title
ShadowMapLike
title
ShadowMapProps
title
ShapeAggregate
title
SourceLike
title
SphereGeometryProps
title
Spline
title
SSAOOptions
title
SyncLoopRef
title
TimeContextProps
title
Tracks
title
TrackTypes
title
TransformBounds
title
TransformContextProps
title
UseInstance
title
UseLight
title
VariantContextProps
title
ViewContextProps
title
ViewFrameContextProps
title
VirtualDraw
title
WheelEvent
title
WheelState
chevron_right
Libraries
chevron_right
Live/React
chevron_right
Loaders
chevron_right
Development

widgets Component – <SurfaceLayer>

const SurfaceLayer: LiveComponent<SurfaceLayerProps>

Draws 2D surfaces across the X and Y data dimension.

Props

RawFacesFlags

{
  flat?: boolean,
  shaded?: boolean,
  fragDepth?: boolean,
  zBias?: number,
} &
Pick<PickingSource, "id" | "lookup"> &
Pick<FacetSource, "facet"> &
Pick<Partial<PipelineOptions>,
 | "mode" | "alphaToCoverage" | "alphaToDiscard" | "depthTest" | "depthWrite" | "blend" | "shadow" | "side">

Other

position? 
VectorLike
color? 
VectorLike
uv? 
VectorLike
st? 
VectorLike
zBias? 
number
positions? 
ShaderSource
colors? 
ShaderSource
sts? 
ShaderSource
zBiases? 
ShaderSource
loopX? 
boolean
loopY? 
boolean
shaded? 
boolean
flipped? 
boolean

size?

Lazy< | [number, number] | [number, number, number] | [number, number, number, number]>
id? 
number

Source

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

Sections
Props  
RawFacesFlags  
Other  
Source  
menu
format_list_numbered