mirror of
https://github.com/visgl/luma.gl.git
synced 2025-12-08 17:36:19 +00:00
81 lines
2.5 KiB
Markdown
81 lines
2.5 KiB
Markdown
# ShaderLayout
|
|
|
|
> The luma.gl v9 API is currently in [public review](/docs/public-review).
|
|
|
|
Shader code contains declarations of attributes, uniform blocks, samplers etc in the GLSL or WGSL code,
|
|
that collectively define the layout of data that needs to be bound before the shader can execute on the
|
|
GPU.
|
|
|
|
Since the actual binding of data is performed on the CPU, a certain amount of metadata is needed in JavaScript
|
|
to describe the layout of any specific shaders.
|
|
|
|
luma.gl defines the `ShaderLayout` type to collect a description of a (pair of) shaders. A `ShaderLayout`
|
|
is required when creating a `RenderPipeline` or `ComputePipeline`.
|
|
|
|
Note: `ShaderLayout`s can be created manually (by reading the shader code),
|
|
or be automatically generated by parsing shader source code or using e.g. the WebGL program introspection APIs.
|
|
|
|
```typescript
|
|
type ShaderLayout = {
|
|
attributes: [
|
|
instancePositions: {location: 0, format: 'float32x2', stepMode: 'instance'},
|
|
instanceVelocities: {location: 1, format: 'float32x2', stepMode: 'instance'},
|
|
vertexPositions: {location: 2, format: 'float32x2', stepMode: 'vertex'}
|
|
],
|
|
|
|
bindings: {[bindingName: string]: BindingLayout};
|
|
projectionUniforms: {location: 0, type: 'uniforms'},
|
|
textureSampler: {location: 1, type: 'sampler'},
|
|
texture: {location: 2, type: 'texture'}
|
|
}
|
|
}
|
|
|
|
type AttributeLayout =
|
|
{name: , location: number, format: VertexFormat, stepMode: 'vertex' | 'instance'}
|
|
|
|
type BindingLayout =
|
|
{type: 'uniform', location: number} |
|
|
{type: 'sampler', location: number} |
|
|
{type: 'texture', location: number}
|
|
```
|
|
|
|
## Usage
|
|
|
|
```typescript
|
|
const shaderLayout: ShaderLayout = {
|
|
attributes:
|
|
'instancePositions': {location: 0, format: 'float32x2', stepMode: 'instance'},
|
|
'instanceVelocities': {location: 1, format: 'float32x2', stepMode: 'instance'},
|
|
'vertexPositions': {location: 2, format: 'float32x2', stepMode: 'vertex'}
|
|
},
|
|
|
|
bindings: {
|
|
'uniforms': {location: 0, type: 'uniforms'},
|
|
'sampler': {location: 1, type: 'sampler'},
|
|
'texture': {location: 2, type: 'texture'}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Fields
|
|
|
|
### attributes
|
|
|
|
```typescript
|
|
attributes:
|
|
instancePositions: {location: 0, format: 'float32x2', stepMode: 'instance'},
|
|
instanceVelocities: {location: 1, format: 'float32x2', stepMode: 'instance'},
|
|
vertexPositions: {location: 2, format: 'float32x2', stepMode: 'vertex'}
|
|
}
|
|
```
|
|
|
|
### bindings
|
|
|
|
```typescript
|
|
bindings?: {
|
|
projectionUniforms: {location: 0, type: 'uniforms'},
|
|
textureSampler: {location: 1, type: 'sampler'},
|
|
texture: {location: 2, type: 'texture'}
|
|
}
|
|
```
|