@ko-yelie/kgl

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

• API

Usage

Installation

ES Modules

npm

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

unpkg

<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

https://ko-yelie.github.io/kgl/