Apply WebGL shaders on DOM elements easily. Demo1 Demo2 Demo3
npm install prysmimport Prysm from 'prysm';
var target = document.getElementById('test');
var options = {
fragment:"water",
params:{
fragment:{
speed:0.02,
amplitude:10.1,
refraction:0.8,
width:0.12
}
}
};
new Prysm(target, options);| Name | Type | Description | Default value | Possible value |
|---|---|---|---|---|
| fragment | string |
Fragment shader's name | 'default' | 'default', 'shockwave', 'water' |
| vertex | string |
Vertex shader's name | 'default' | 'default', 'water' |
| params | Object |
Define the shader's parameters | {} | fragment:{params}, vertex:{params} |
| Name | type | Default value |
|---|---|---|
| speed | float | 0.02 |
| amplitude | float | 10.1 |
| refraction | float | 0.8 |
| width | float | 0.1 |
| Name | type | Default value |
|---|---|---|
| amplitude | float | 0.05 |
| frequency | float | 1.0 |