Minimal WebGL library
npm i @ko-yelie/kgl
// Kgl
import Kgl from '@ko-yelie/kgl'
// KglAuto
import { KglAuto } from '@ko-yelie/kgl'
// Import only KGL (ignore KglAuto and effects)
import Kgl from '@ko-yelie/kgl/dist/kgl.es.js'
<script src="https://unpkg.com/@ko-yelie/kgl"></script>
// Kgl
Kgl.default
// KglAuto
const { KglAuto } = Kgl
<script type="x-shader/x-fragment" id="fs">
precision highp float;
uniform vec2 uResolution; // window size (auto added)
uniform float uTime;
void main() {
float alpha = 1. - length(gl_FragCoord.xy / uResolution) * (sin(uTime) * 0.5 + 0.5);
gl_FragColor = vec4(vec3(0.), alpha);
}
</script>
import Kgl from '@ko-yelie/kgl'
const kgl = new Kgl()
/**
* program
*/
const program = kgl.createProgram({
fragmentShaderId: 'fs',
uniforms: {
uTime: 0,
},
isAutoAdd: true,
})
/**
* resize
*/
function resize() {
kgl.resize()
}
resize()
window.addEventListener('resize', resize)
/**
* tick
*/
function tick(time) {
program.uniforms.uTime = time * 0.001
kgl.draw()
requestAnimationFrame(tick)
}
requestAnimationFrame(tick)
import { KglAuto } from '@ko-yelie/kgl'
new KglAuto({
programs: {
main: {
fragmentShaderId: 'fs',
uniforms: {
uTime: 0,
},
},
},
tick: (kgl, time) => {
kgl.programs.main.uniforms.uTime = time
kgl.draw()
},
})