@lcdigital/webgllib v1.0.2
WebGL Lib
A collection of utilities, shaders, and functions for use in WebGL projects.
Installation
- Ensure your NPM configuration has the correct keys to access @lcdigital scoped private packages.
npm i @lcdigital/webgllib
Shaders
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;Barrel Blur
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 |
Color Correction
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 |
Copy
Grain
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 |
Grain Exp
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 |
Grain Slow
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 |
RGB Noise
RGB Shift
Tilt Shift
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 |
Vingette
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 |
Vingette 2
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 |