Skip to content

Commit 31223ef

Browse files
nartcnartc
committed
update docs
1 parent af271e2 commit 31223ef

File tree

2 files changed

+133
-0
lines changed

2 files changed

+133
-0
lines changed

‎libs/soba/misc/README.md

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ This secondary entry point includes miscellaneous utilities and components for a
99
- [NgtsFBO](#ngtsfbo)
1010
- [NgtsBakeShadows](#ngtsbakeshadows)
1111
- [injectDepthBuffer](#injectdepthbuffer)
12+
- [NgtsSampler](#ngtssampler)
13+
- [NgtsComputedAttribute](#ngtscomputedattribute)
14+
- [NgtsDecal](#ngtsdecal)
1215

1316
## `injectAnimations`
1417

@@ -102,3 +105,114 @@ export class MyCmp {
102105
}));
103106
}
104107
```
108+
109+
## NgtsSampler
110+
111+
A component that samples points from a mesh and transforms an `InstancedMesh`'s matrix to distribute instances on the points. It takes a `Mesh` and an `InstancedMesh` as children.
112+
113+
### Object Inputs (NgtsSamplerOptions)
114+
115+
| Property | Description | Default value |
116+
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
117+
| `weight` | The name of the attribute to use as the sampling weight. | `undefined` |
118+
| `transform` | A function that transforms each instance given a sample. It receives a dummy `Object3D` with all the sampled data and should mutate `transformPayload.dummy`. | `undefined` |
119+
| `count` | The number of samples to take. | `16` |
120+
121+
#### Passing `InstancedMesh` and `Mesh` as content children
122+
123+
```html
124+
<ngts-sampler [options]="{ weight: 'normal', transform: transformPoint, count: 16 }">
125+
<ngt-mesh>
126+
<ngt-sphere-geometry *args="[2]" />
127+
</ngt-mesh>
128+
129+
<ngt-instanced-mesh *args="[undefined, undefined, 1_000]">
130+
<ngt-sphere-geometry *args="[0.1]" />
131+
</ngt-instanced-mesh>
132+
</ngts-sampler>
133+
```
134+
135+
or use references when you can't compose declaratively:
136+
137+
```ts
138+
@Component({
139+
template: `
140+
<ngts-sampler [instances]="instancedRef()" [mesh]="mesh()" />
141+
142+
<ngt-instanced-mesh #instanced *args="[undefined, undefined, 1_000]">
143+
<!-- content -->
144+
</ngt-instanced-mesh>
145+
`,
146+
})
147+
class MyCmp {
148+
instancedRef = viewChild<ElementRef<InstancedMesh>>('instanced');
149+
150+
gltf = injectGLTF(() => 'my/mesh/url');
151+
mesh = computed(() => this.gltf()?.scene || null);
152+
}
153+
```
154+
155+
## NgtsComputedAttribute
156+
157+
A component that allows you to compute and attach an attribute to a geometry declaratively.
158+
159+
It accepts the following inputs:
160+
161+
- `compute`: A function that computes the attribute. It receives the geometry as an argument and should return a `BufferAttribute`.
162+
- `name`: The name of the attribute to attach to the geometry.
163+
- `options`: pass-through options for `BufferAttribute`
164+
165+
```html
166+
<ngt-sphere-geometry>
167+
<ngts-computed-attribute
168+
name="my-attribute-name"
169+
[compute]="computeAttributeFn"
170+
[options]="{ usage: StaticReadUsage }"
171+
/>
172+
</ngt-sphere-geometry>
173+
```
174+
175+
## NgtsDecal
176+
177+
Abstraction around Three's `DecalGeometry`. It will use the its parent `mesh` as the decal surface by default.
178+
179+
The decal box has to intersect the surface, otherwise it will not be visible. if you do not specify a rotation it will look at the parents center point. You can also pass a single number as the rotation which allows you to spin it.
180+
181+
### Object Inputs (NgtsDecalOptions)
182+
183+
| Property | Description | Default value |
184+
| --------------------- | ----------------------------------------------------- | ------------- |
185+
| `map` | The texture to use for the decal. | `undefined` |
186+
| `debug` | Makes the "bounding box" of the decal visible. | `false` |
187+
| `depthTest` | Whether to enable depth testing. | `false` |
188+
| `polygonOffsetFactor` | The factor by which the polygon offset is multiplied. | `-10` |
189+
190+
It also accepts a `mesh` input that allows you to specify the surface the decal must attach to.
191+
192+
```html
193+
<mesh>
194+
<sphereGeometry />
195+
<meshBasicMaterial />
196+
<ngts-decal [options]="{ position: [0, 0, 0], rotation: [0, 0, 0], scale: 1, debug: true }">
197+
<ngt-mesh-basic-material [map]="texture()" [polygonOffset]="true" [polygonOffsetFactor]="-1" />
198+
</ngts-decal>
199+
</mesh>
200+
```
201+
202+
If you do not specify a material it will create a transparent `ngt-mesh-basic-material` with a `polygonOffsetFactor` of -10.
203+
204+
```html
205+
<ngt-mesh>
206+
<ngt-mesh-sphere-geometry />
207+
<ngt-mesh-basic-material />
208+
<ngts-decal [options]="{ map: texture() }" />
209+
</ngt-mesh>
210+
```
211+
212+
If declarative composition is not possible, use the `mesh` input to define the surface the decal must attach to.
213+
214+
```html
215+
<ngts-decal [mesh]="meshRef()">
216+
<ngt-mesh-basic-material [map]="texture()" [polygonOffset]="true" [polygonOffsetFactor]="-1" />
217+
</ngts-decal>
218+
```

‎libs/soba/staging/README.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ npm install @pmndrs/vanilla @monogrid/gainmap-js
2828
- [NgtsSky](#ngtssky)
2929
- [NgtsSpotLight](#ngtsspotlight)
3030
- [NgtsSpotLightShadow](#ngtsspotlightshadow)
31+
- [NgtsBackdrop](#ngtsbackdrop)
3132

3233
## NgtsAccumulativeShadows
3334

@@ -452,3 +453,21 @@ gl_FragColor = vec4(vec3(0.), 1.); // Transparent
452453
<ngts-spot-light-shadow [shader]="customShader" [options]="shadowOptions" />
453454
</ngts-spot-light>
454455
```
456+
457+
## NgtsBackdrop
458+
459+
A curved plane, like a studio backdrop. This is for presentational purposes, to break up light and shadows more interestingly.
460+
461+
### Object Inputs (NgtsBackdropOptions)
462+
463+
| Property | Description | Default Value |
464+
| --------------- | -------------------------------------------- | ------------- |
465+
| `floor` | Stretches the floor segment. | 0.25 |
466+
| `segments` | Mesh-resolution. | 20 |
467+
| `receiveShadow` | Whether the backdrop should receive shadows. | false |
468+
469+
```html
470+
<ngts-backdrop [options]="{ floor: 0.25, segments: 20 }">
471+
<ngt-mesh-standard-material color="#353540" />
472+
</ngts-backdrop>
473+
```

0 commit comments

Comments
 (0)