You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: libs/soba/misc/README.md
+16Lines changed: 16 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -8,6 +8,7 @@ This secondary entry point includes miscellaneous utilities and components for a
8
8
-[injectFBO](#injectfbo)
9
9
-[NgtsFBO](#ngtsfbo)
10
10
-[NgtsBakeShadows](#ngtsbakeshadows)
11
+
-[injectDepthBuffer](#injectdepthbuffer)
11
12
12
13
## `injectAnimations`
13
14
@@ -86,3 +87,18 @@ A directive that bakes shadows in your scene. It sets `gl.shadowMap.autoUpdate`
86
87
```html
87
88
<ngts-bake-shadows />
88
89
```
90
+
91
+
## injectDepthBuffer
92
+
93
+
Renders the scene into a depth-buffer. Often effects depend on it and this allows you to render a single buffer and share it, which minimizes the performance impact. It returns the buffer's `depthTexture`.
94
+
95
+
Since this is a rather expensive effect you can limit the amount of frames it renders when your objects are static. For instance making it render only once by setting `frames: 1`.
96
+
97
+
```ts
98
+
exportclassMyCmp {
99
+
depthBuffer =injectDepthBuffer(() => ({
100
+
size: 256, // The size of the depth buffer
101
+
frames: Infinity, // The amount of frames to render
`NgtsBounds` component also acts as a service **for its children**. Inject `NgtsBounds` to refresh the bounds, fit the camera, clip near/far planes, go to camera orientations or focus objects. `refresh(object?: THREE.Object3D | THREE.Box3)` will recalculate bounds, since this can be expensive only call it when you know the view has changed. `reset` centers the view. `moveTo` changes the camera position. `lookAt` changes the camera orientation, with the respect to up-vector, if specified. `clip` sets the cameras near/far planes. `fit` centers the view for non-orthographic cameras (same as reset) or zooms the view for orthographic cameras.
A component that creates a "stage" with proper studio lighting, 0/0/0 top-centred, model-shadows, ground-shadows and optional zoom to fit. Make sure to set `makeDefault` on your controls when `adjustCamera` is true!
|`distance`| Distance between the shadow caster and light. | 0.4 |
415
+
|`alphaTest`| Sets the alpha value to be used when running an alpha test. | 0.5 |
416
+
|`scale`| Scale of the shadow caster plane. | 1 |
417
+
|`width`| Width of the shadow map. The higher the more expensive. | 512 |
418
+
|`height`| Height of the shadow map. The higher the more expensive. | 512 |
419
+
|`map`| Texture - Pattern of the shadow. ||
457
420
458
421
```html
459
-
<ngts-stage[options]="{shadows: 'accumulative'}">
460
-
<ngt-mesh />
461
-
</ngts-stage>
422
+
<ngts-spot-light>
423
+
<ngts-spot-light-shadow
424
+
[options]="{
425
+
distance: 0.4,
426
+
alphaTest: 0.5,
427
+
scale: 1,
428
+
width: 512,
429
+
height: 512,
430
+
}"
431
+
/>
432
+
</ngts-spot-light>
462
433
```
463
434
464
-
## NgtsCaustics
465
-
466
-
Caustics are swirls of light that appear when light passes through transmissive surfaces. This component uses a raymarching technique to project caustics onto a catcher plane. It is based on [github/N8python/caustics](https://github.com/N8python/caustics).
|`frames`| How many frames it will render, set it to Infinity for runtime. | 1 |
473
-
|`debug`| Enables visual cues to help you stage your scene. | false |
474
-
|`causticsOnly`| Will display caustics only and skip the models. | false |
475
-
|`backside`| Will include back faces and enable the backsideIOR prop. | false |
476
-
|`ior`| The IOR refraction index. | 1.1 |
477
-
|`backsideIOR`| The IOR refraction index for back faces. | 1.1 |
478
-
|`worldRadius`| The texel size. | 0.3125 |
479
-
|`intensity`| Intensity of the prjected caustics. | 0.05 |
480
-
|`color`| Caustics color. | 'white' |
481
-
|`resolution`| Buffer resolution. | 2048 |
482
-
|`lightSource`| Camera position. |[5, 5, 5]|
483
-
484
-
It will create a transparent plane that blends the caustics of the objects it receives into your scene. It will only render once and not take resources any longer!
435
+
An optional `shader` input lets you run a custom shader to modify/add effects to your shadow texture. The shader provides the following uniforms and varyings.
485
436
486
-
Make sure to use the `debug` flag to help you stage your contents. Like `NgtsContactShadows` and `NgtsAccumulativeShadows` the plane faces Y up.
|`varying vec2`|`vUv`| UVs of the shadow casting plane |
440
+
|`uniform sampler2D`|`uShadowMap`| The texture provided to the `map` prop |
441
+
|`uniform float`|`uTime`| Current time |
487
442
488
-
```html
489
-
<ngts-caustics[options]="{ debug: true }">
490
-
<ngt-mesh />
491
-
</ngts-caustics>
492
-
```
493
-
494
-
Sometimes you want to combine caustics for even better visuals, or if you want to emulate multiple lightsources. Use the `causticsOnly` flag in such cases, and it will use the model inside only for calculations.
443
+
Treat the output of the shader like an alpha map where `1` is opaque and `0` is transparent.
495
444
496
-
```html
497
-
<ngts-caustics[options]="{ causticsOnly: true }">
498
-
<ngt-mesh />
499
-
</ngts-caustics>
445
+
```glsl
446
+
gl_FragColor = vec4(vec3(1.), 1.); // Opaque
447
+
gl_FragColor = vec4(vec3(0.), 1.); // Transparent
500
448
```
501
449
502
-
The light source can either be defined by prop or by reference. Use the latter if you want to control the light source, for instance in order to move or animate it. Runtime caustics with frames set to `Infinity`, a low resolution, and no backside can be feasible.
0 commit comments