A collection of utilities, shaders, and functions for use in WebGL projects.
- Ensure your NPM configuration has the correct keys to access @lcdigital scoped private packages.
npm i @lcdigital/webgllib
Usage
Shaders can be applied as ShaderPasses, and can be layered for multiple effects.
import {barrelBlur} from '@lcdigital/webgllib';
import * as THREE from 'three';
const renderFBO = new THREE.WebGLRenderTarget(w, h, { format: THREE.RGBFormat });
const blurShader = new THREE.RawShaderMaterial(barrelBlur);
blurPass = new ShaderPass(renderer, blurShader, width, height, THREE.RGBFormat);
blurPass.shader.uniforms.tDiffuse.value = renderFBO.texture;
blurPass.shader.uniforms.amount.value = 0.2;
Description
Applies a barrel distorion effect with chromatic aberration.
Uniforms
| Uniform | Type | Default | Description |
|---|---|---|---|
| tDiffuse | Texture | null | The texture to render from |
| amount | Float | 0.5 | The intensity of the effect |
| invert | Boolean | false | Whether to invert the effect, creating a fisheye look |
| time | Float | 0.0 | The current clock time |
| resolution | Vector2 | [800.0, 600] | The resolution of the teture |
Description Applies basic contrast, staturation and brightness adjustments
Uniforms
| Uniform | Type | Default | Description |
|---|---|---|---|
| tDiffuse | Texture | null | The texture to render from |
| brightness | Float | 0.0 | Brightness adjustment |
| contrast | Float | 0.0 | Contrast adjustment |
| saturation | Float | 0.0 | Saturation adjustment |
Description
Adds a black grain effect
Uniforms
| Uniform | Type | Default | Description |
|---|---|---|---|
| tDiffuse | Texture | null | The texture to render from |
| amount | Float | 0.15 | The amount of grain |
| time | Float | 0.0 | The current clock time |
Description
Adds a high quality film grain effect using 3D noise. Computationally expensive.
Uniforms
| Uniform | Type | Default | Description |
|---|---|---|---|
| tDiffuse | Texture | null | The texture to render from |
| amount | Float | 0.15 | The amount of grain |
| scale | Float | 0.15 | The size of grain |
| threshold | Float | 0.5 | The minimum brightness to show grain |
| speed | Float | 0.5 | The speed of grain movement |
| time | Float | 0.0 | The current clock time |
Description
Adds a slow changing film grain effect with blending.
Uniforms
| Uniform | Type | Default | Description |
|---|---|---|---|
| tDiffuse | Texture | null | The texture to render from |
| amount | Float | 0.15 | The amount of grain |
| threshold | Float | 0.5 | The minimum brightness to show grain |
| speed | Float | 0.5 | The speed of grain movement |
| time | Float | 0.0 | The current clock time |
Description
Applies a tilt shift effect.
Uniforms
| Uniform | Type | Default | Description |
|---|---|---|---|
| tDiffuse | Texture | null | The texture to render from |
| brightness | Float | 0.0 | Brightness adjustment |
| contrast | Float | 0.0 | Contrast adjustment |
| saturation | Float | 0.0 | Saturation adjustment |
Description
Adds a vinette effect.
Uniforms
| Uniform | Type | Default | Description |
|---|---|---|---|
| tDiffuse | Texture | null | The texture to render from |
| offset | Float | 1.0 | Center offset of the vinette |
| darkness | Float | 1.0 | How dark to make the vinette effect |
Description
Adds a vinette effect
Uniforms
| Uniform | Type | Default | Description |
|---|---|---|---|
| tDiffuse | Texture | null | The texture to render from |
| feather | Float | 0.5 | Ammount of feather on the vinette edge |
| roundness | Float | 0.5 | How round to make the vinett |
| inset | Float | 0.5 | Inset of the vinette |
| brightness | Float | 0.0 | How bright to make the vinette effect |