This library is designed to render WebGL while adhering to the principles of DRY (Don't Repeat Yourself) and KISS (Keep It Simple, Stupid). The goal is to provide a straightforward interface with a minimal amount of library-specific abstractions. If you're familiar with the WebGL, then this library is primarily about the conventions of how to organize things. That's it.
npm install @webglify/chain
import chain from '@webglify/chain';
const gl = document.querySelector('canvas#fancyCanvas').getContext('webgl2');
// Put shaders together
const { renderFrame } = chain(gl, [
// pass1
{
vertexShader: vertexShader1,
fragmentShader: fragmentShader1
},
// pass2
{
vertexShader: vertexShader2,
fragmentShader: fragmentShader2
}
// ... add more passes as needed
]);
// Render the frame!
renderFrame();
Uniforms are a way to send data from your JavaScript code to your WebGL shaders. Here's how you can use uniforms with this library:
If you've defined a uniform in your shader, like:
uniform float uTime;
void main(){
vec2 pos = vec2(sin(uTime), cos(uTime));
// ...
}
You can communicate with it from your JavaScript code as follows:
const STATE = {
time: 0
}
chain(gl, [
{
vertexShader: vertexShader1,
fragmentShader: fragmentShader2,
uniforms(gl, uniformLocations){
gl.uniform1f(uniformLocations.uTime, STATE.time)
}
},
])
comming soon:
Advanced Usage: Dive deeper into more complex features or configurations.
API Reference: A detailed breakdown of the library's API.
Contributing: Information for developers who want to contribute to the library.
License: Information about the library's licensing.