0.6.2 • Published 2 months ago
@ko-yelie/kgl v0.6.2
KGL
Minimal WebGL library
Pros and Cons
Pros
- Lightweight
- Can write with less code.
- Automates calculations to fit WebGL and DOM sizes.
- Support TypeScript.
Cons
- Fragment shaders must always be written by you.
- Cannot use complex 3D models.
- Cannot use lighting.
- Not support WebGL2 yet.
Documentation
Usage
Installation
ES Modules
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'
CDN
<script src="https://unpkg.com/@ko-yelie/kgl"></script>
// Kgl
Kgl.default
// KglAuto
const { KglAuto } = Kgl
Kgl
HTML
<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>
JS
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)
KglAuto
JS
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()
},
})
Examples
0.6.2
2 months ago
0.6.1
2 years ago
0.6.0
2 years ago
0.5.4
2 years ago
0.5.3
2 years ago
0.5.0
2 years ago
0.5.2
2 years ago
0.5.1
2 years ago
0.4.9
3 years ago
0.4.10
2 years ago
0.4.11
2 years ago
0.4.12
2 years ago
0.4.8
3 years ago
0.4.5
3 years ago
0.4.6
3 years ago
0.4.4
3 years ago
0.4.3
3 years ago
0.4.2
3 years ago
0.4.1
3 years ago
0.4.0
3 years ago
0.3.5
4 years ago
0.3.4
4 years ago
0.3.3
4 years ago
0.3.2
4 years ago
0.3.1
4 years ago
0.3.0
4 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago