Use.GPU
 – 0.8.1
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
·
Background
·
Roadmap
·
Contributing
Reference
expand_more
Components
chevron_right
@use-gpu/gltf
chevron_right
@use-gpu/inspect
chevron_right
@use-gpu/layout
chevron_right
@use-gpu/map
chevron_right
@use-gpu/plot
chevron_right
@use-gpu/react
chevron_right
@use-gpu/scene
chevron_right
@use-gpu/webgpu
expand_more
@use-gpu/workbench
widgets
Animate
widgets
ArrayData
widgets
ArrowLayer
widgets
ArrowSegments
widgets
Await
widgets
AxisHelper
widgets
BasicMaterial
widgets
CompositeData
widgets
Compute
widgets
ComputeBuffer
widgets
Cursor
widgets
CursorProvider
widgets
Data
widgets
DataShader
widgets
DebugAtlas
widgets
DebugAtlasView
widgets
DebugProvider
widgets
DebugRender
widgets
DeferredRenderer
widgets
DeferredShadedRender
widgets
DeferredSolidRender
widgets
DeferredUIRender
widgets
DualContourLayer
widgets
EventProvider
widgets
FaceLayer
widgets
FaceSegments
widgets
Fetch
widgets
Flat
widgets
FontLoader
widgets
FontProvider
widgets
ForwardRenderer
widgets
FPSControls
widgets
FullScreen
widgets
GBuffer
widgets
GeometryData
widgets
GlyphSource
widgets
ImageCubeTexture
widgets
ImageTexture
widgets
InstanceData
widgets
InterleavedData
widgets
Iterate
widgets
Kernel
widgets
LabelLayer
widgets
LightData
widgets
LightMaterial
widgets
LightRender
widgets
LinearRGB
widgets
LineLayer
widgets
LineSegments
widgets
Loop
widgets
OrbitCamera
widgets
OrbitControls
widgets
PanControls
widgets
Pass
widgets
PBRMaterial
widgets
Pick
widgets
PickingBuffer
widgets
PickingRender
widgets
PickingTarget
widgets
PointLayer
widgets
PointLight
widgets
Queue
widgets
RawArrows
widgets
RawData
widgets
RawFaces
widgets
RawFullScreen
widgets
RawLabels
widgets
RawLines
widgets
RawQuads
widgets
RawTexture
widgets
Readback
widgets
RenderTarget
widgets
RenderToTexture
widgets
Router
widgets
Routes
widgets
SampledData
widgets
Scissor
widgets
SDFFontProvider
widgets
ShadedRender
widgets
ShaderFlatMaterial
widgets
ShaderLitMaterial
widgets
ShadowBuffer
widgets
ShadowRender
widgets
SolidRender
widgets
Stage
widgets
StructData
widgets
SurfaceLayer
widgets
Suspense
widgets
TextureBuffer
widgets
TextureShader
widgets
TickLayer
widgets
UIRectangles
widgets
UIRender
widgets
ViewProvider
widgets
Virtual
widgets
VirtualLayers
phishing
useAnimationFrame
phishing
useApplyTransform
phishing
useArrowSegments
phishing
useBoundShader
phishing
useBoundSource
phishing
useBufferedSize
phishing
useCombinedTransform
phishing
useComputeContext
phishing
useComputePipeline
phishing
useComputePipelineAsync
phishing
useDataBinding
phishing
useDataLength
phishing
useDataSize
phishing
useDebugContext
phishing
useDerivedSource
phishing
useDerivedState
phishing
useDeviceContext
phishing
useFeedbackContext
phishing
useFontContext
phishing
useFontFamily
phishing
useFontHeight
phishing
useFontText
phishing
useForceUpdate
phishing
useInspectable
phishing
useInspectHoverable
phishing
useInspectorSelect
phishing
useLambdaSource
phishing
useLayoutContext
phishing
useLightContext
phishing
useLightDraw
phishing
useLinkedShader
phishing
useMaterialContext
phishing
useMatrixContext
phishing
useMemoKey
phishing
useNativeColor
phishing
useNativeColorTexture
phishing
useNoAnimationFrame
phishing
useNoApplyTransform
phishing
useNoBoundShader
phishing
useNoBoundSource
phishing
useNoBufferedSize
phishing
useNoComputeContext
phishing
useNoDeviceContext
phishing
useNoFeedbackContext
phishing
useNoMatrixContext
phishing
useNoPassContext
phishing
useNoPerFrame
phishing
useNoPickingContext
phishing
useNoRawSource
phishing
useNoRenderContext
phishing
useNoRenderPipeline
phishing
useNoRenderPipelineAsync
phishing
useNoScissorContext
phishing
useNoShaderRef
phishing
useNoSuspenseContext
phishing
useNoTimeContext
phishing
useNoTransformContext
phishing
useNoViewContext
phishing
usePassContext
phishing
usePerFrame
phishing
usePickingContext
phishing
usePickingShader
phishing
useRawSource
phishing
useRenderContext
phishing
useRenderPipeline
phishing
useRenderPipelineAsync
phishing
useRouterContext
phishing
useScissorContext
phishing
useScratchSource
phishing
useSDFFontContext
phishing
useSDFGlyphData
phishing
useShaderRef
phishing
useShaderRefs
phishing
useSuspenseContext
phishing
useTimeContext
phishing
useTransformContext
phishing
useViewContext
east
adjustSize
east
dispatch
east
Dispatch
east
drawCall
east
DrawCall
east
emitGlyphSpans
east
forMeshTriangles
east
getAlignmentAnchor
east
getAlignmentSpacing
east
getBoundShader
east
getBoundSource
east
getDerivedSource
east
getLambdaSource
east
getNativeColor
east
getShaderLog
east
getWireframe
east
getWireframeIndirect
east
LightDraw
east
makeArrowGeometry
east
makeBoxGeometry
east
makeBrowserHistory
east
makeInlineCursor
east
makePlaneGeometry
east
makeRelativeURL
east
makeSphereGeometry
east
parsePointShape
east
pathSpecToRegexp
east
Raw
east
setShaderLog
input
ComputeContext
input
DebugContext
input
DeviceContext
input
EventContext
input
FeedbackContext
input
FontContext
input
FrameContext
input
KeyboardContext
input
LayoutContext
input
LightContext
input
LoopContext
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
ViewContext
input
WheelContext
data_object
AMBIENT_LIGHT
data_object
AmbientLight
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
DirectionalLight
data_object
DOME_LIGHT
data_object
DomeLight
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
LightCapture
data_object
POINT_LIGHT
data_object
SHADOW_FORMAT
data_object
SHADOW_PAGE
data_object
STENCIL_PIPELINE
title
Alignment
title
AmbientLightProps
title
BoundLight
title
ComputeContextProps
title
DebugContextProps
title
DirectionalLightProps
title
DispatchProps
title
DomeLightProps
title
DrawCallProps
title
Ease
title
EventContextProps
title
FaceAggregate
title
FetchAPIOptions
title
FontSource
title
FrameContextProps
title
Inspector
title
KeyboardContextProps
title
KeyboardEventState
title
KeyboardState
title
Keyframe
title
LayerAggregate
title
LayerAggregator
title
LayerType
title
Light
title
LightContextProps
title
LightKindProps
title
LineAggregate
title
LiveReturner
title
LoopRef
title
MaterialContextProps
title
MatrixContextProps
title
MouseContextProps
title
MouseEventState
title
MouseState
title
PassContextProps
title
PickingContextProps
title
PickingProps
title
PickingSource
title
PickState
title
PointAggregate
title
PointerLockAPI
title
PointShape
title
QueryParams
title
Route
title
RouterAPI
title
RouterLink
title
RouterState
title
RouteState
title
ScissorContextProps
title
SDFFontContextProps
title
SDFGlyphData
title
ShadowMapLike
title
ShadowMapProps
title
SphereGeometryProps
title
TimeContextProps
title
Tracks
title
TransformContextProps
title
UseLight
title
ViewContextProps
title
WheelContextProps
title
WheelEventState
title
WheelState
chevron_right
Libraries
chevron_right
Live
chevron_right
Loaders
chevron_right
Development

widgets Component – <SurfaceLayer>

const SurfaceLayer: LiveComponent<SurfaceLayerProps>

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

Props

position? 
number[] | TypedArray
color? 
number[] | TypedArray
positions? 
ShaderSource
colors? 
ShaderSource
loopX? 
boolean
loopY? 
boolean
shaded? 
boolean

size?

Lazy< | [number, number] | [number, number, number] | [number, number, number, number]>
side? 
"front" | "back" | "both"
mode? 
string
id? 
number

Source

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

Sections
Props  
Source  
menu
format_list_numbered