This is a simple WebGL Plugin, made for users to start with WebGL elements on their websites, in the simplest way.
Check out the demo here
To use glfx, you need to add three.js and gsap to your page. You can do this by adding the following CDN links to your HTML file:
<!-- three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- gsap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<!-- glfx -->
<script src="https://cdn.jsdelivr.net/npm/glfxlib@1.0.0/dist/glfx.min.js"></script>
Alternatively, you can use UNPKG by adding the following link to your HTML file:
<script src="https://unpkg.com/browse/glfxlib@1.0.0/dist/glfx.min.js"></script>
You can also install glfx using npm:
npm i --save-dev glfxlib
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Document </title>
</head>
<body>
<main>
<div data-scroll>
.... Your Code Here ....
</div>
</main>
<div id="canvas"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script src="app.js"></script>
</body>
</html>
import glfx, {
vertex,
vertexDistort_1,
vertexDistort_2,
vertexDistort_3,
vertexDistort_4,
vertexDistort_5,
vertexDistort_6,
fragment,
fragmentDistort_1,
fragmentDistort_2,
fragmentDistort_3,
fragmentDistort_4
} from 'glfxlib';
const gl = new glfx({
dom: canvas,
// Scroll Controls
easing: 0.1,
bending: 1,
// WebGL Segment Controls
widthSegments: 40,
heightSegments: 40,
wireFrame: false,
// WebGL Shader Controls
vertexShader: vertex,
fragmentShader: fragment
});
The default value for dom option is set to canvas which fetches the canvas of the whole website and shouldn't be changed.
easing: This is the scroll smoothness value and should be strictly between0.05~0.2for best effect. The value can be adjusted and experimented with, to better understand the synchronization of the effect.bending: This is the adjustment time for the scroll WebGL animation effect.
widthSegments: This controls the number of horizontal segments in the WebGL animation effect. Increasing the value will result in higher GPU usage. The recommended value ranges from5~1000.heightSegments: This controls the number of vertical segments in the WebGL animation effect. Increasing the value will result in higher GPU usage. The recommended value ranges from5~1000.wireFrame: This option is set tofalseby default, but can be set totrueto see the width and height segments. It is recommended to use segments that are optimal for low-end systems as well.
-
vertexShader: This option has 7 different values:vertex: This is the default canvas.vertexDistort_1vertexDistort_2vertexDistort_3vertexDistort_4vertexDistort_5vertexDistort_6
-
fragmentShader: This option has 5 different values:fragment: This is the default canvas.fragmentDistort_1fragmentDistort_2fragmentDistort_3fragmentDistort_4
Note: The default values for vertexShader and fragmentShader are vertex and fragment respectively.
It is recommended to experiment with different options and values to achieve the desired effect while keeping in mind the GPU usage and optimization for low-end systems. Set the wireFrame option to true and play around with widthSegments and heightSegments to better understand the segments.