Welcome to Kenzo's site! (KGL)

Kenzo Graphics Library (KGL) NPM Kenzo Graphics Library (KGL) Github Custom math-based graphics engine built for web environments.

NPM

Kenzo Graphics Library v2 (KGL)

Kenzo Graphics Library (KGL) is a lightweight, math-based 2D and 3D engine for web-based applications and games. Designed for speed, simplicity, and small-scale use, KGL enables fast prototyping and educational graphics applications in HTML environments without external dependencies.

Key Features

2D and 3D rendering via <canvas>
UI elements (buttons, modals, images, etc.)
Texturing, shading, and lighting simulation
Built-in input handling for mouse and keyboard
HTML/HTA integration support via HTSTB system

🌟 Featured Projects using KGL.js

No current featured projects...

If you want to feature your project please fill the form below

Rules

Must use KGL or be inspired

📤 Submit Your Project for Featuring

If you made something awesome with KGL.js, share it here and get it featured on our site!

Getting Started

HTML Setup

<canvas id="myCanvas" width="640" height="480"></canvas>
<script src="kgl.js"></script>
<script>
  const canvas = document.getElementById('myCanvas');
  const kgl = new Kgl(canvas);

  function animate() {
    kgl.clear();
    kgl.updateRotation();
    kgl.drawSolid(vertices, faces);
    requestAnimationFrame(animate);
  }

  animate();
</script>

HTA Usage (Windows Desktop App Style)

<!DOCTYPE html>
<hta:application>
<html>
<body>
<canvas id="c" width="640" height="480"></canvas>
<script src="kgl.js"></script>
<script>
  const canvas = document.getElementById('c');
  const kgl = new Kgl(canvas);
  const ui = new KglUI(kgl);
  const htmlBox = new KglHTSTB(canvas);
  htmlBox.createBox(10, 10, 200, 100, "<b>Hello from HTA</b>");
</script>
</body>
</html>

Scene Example

const scenes = new KGLscenes();
scenes.add('main', () => {
  voxel.drawVisibleChunks({ x: 0, y: 0, z: 0 });
});

function animate() {
  kgl.clear();
  scenes.render('main');
  requestAnimationFrame(animate);
}

animate();

Entity Example

const player = new KGLentity(0, 0, 0, '#3cf');
function gameLoop() {
  player.z += 0.1;
  player.render(kgl);
  requestAnimationFrame(gameLoop);
}

gameLoop();

New Modules

KGLvoxel

Voxel-based chunk system with support for dynamic voxel addition/removal.
Optimized chunk-based rendering.
Supports draw distance filtering.

KGLentity

Simplified way to define nd move basic 3D objects.
Includes update and render methods.
Great for players, enemies, objects.

KGLscenes

Manage separate scenes for menus, gameplay, overlays.
Switch between scene names and call render(name).
Keeps game logic and rendering modular.

📡 KGLhttp – Basic HTTP Requests (Fetch Wrapper)

`KGLhttp` provides a simple interface for making HTTP requests in KGL-based projects. It allows you to perform basic GET and POST requests using JavaScript's native `fetch()` with added error handling.

🌐 KGLnoise – Procedural Noise Generator

KGLnoise allows generation of noise-based values for procedural terrain, visual effects, and animation.

Noise Types

perlin(x, y) – Generates smooth Perlin noise.
normal(x, y) – Standard random-based noise.
kenzo(x, y) – Hybrid custom noise (mix of Perlin + random for sharper terrain edges).

Usage

import { KGLnoise } from './kgl.js';

const noise = new KGLnoise();
let val = noise.perlin(12.3, 45.6);   // Smooth terrain
let grain = noise.normal(32, 11);    // Static noise
let hybrid = noise.kenzo(8.7, 1.2);  // Mixed style

Use Cases

Flat terrain generators
Particle jitter
Animated waves / clouds
Procedural 2D textures

🧪 Example: Using KGLnoise for Terrain Heightmap

const noise = new KGLnoise();
for (let x = 0; x < 100; x++) {
  for (let y = 0; y < 100; y++) {
    let height = noise.kenzo(x / 20, y / 20) * 50;
    kgl2d.drawRect(x * 5, y * 5, 5, 5, true);
  }
}

Best Practices for Lightweight Games

Minimize Faces: Use low-poly models for 3D.
Reuse Buffers: Avoid regenerating geometry or textures each frame.
Limit Draw Calls: Batch rendering where possible.
Turn Off What You Don’t Use: Use KGLconfig.Disable3D or Disable2D when appropriate.
Optimize Loops: Keep animations and calculations efficient.

Debugging Guide

Common Errors

Face Culling in 2D
- Error: KGL error : 500 (Face culling is not for 2D)
- Fix: Set KGLconfig.UseFaceCulling = false before initializing a Kgl2D instance.
Canvas Tainted by Cross-Origin Texture
- Warning: KGL warning: Canvas tainted...
- Fix: Load textures from same origin or ensure CORS is configured correctly.
Disabled Components Not Loading
- If KGLconfig.Disable2D = true, Kgl2D will not initialize.
- Fix: Ensure correct config flags are set before using components.

Tips

Use KGLconfig.IsInDev = true to enable dev-mode behavior.
Call KGLconfig.info() to print current configuration.
Use browser devtools to set breakpoints in animation loops.

Configuration

Set flags before creating components:

KGLconfig.set({
  AppName: "My Mini Game",
  UseFaceCulling: true,
  Disable2D: false,
  DisableHTSTB: false
});

Examples

Voxel sandbox games
Scene-based 3D interfaces
3D Cube with UI
2D Platformer Prototype
HTA Tool with Canvas Buttons and Info Panels

Explore the KglUI, Kgl2D, and KglHTSTB classes for ready-made UI and layout tools.

Final Notes

KGL is ideal for indie experiments, educational demos, and rapid prototyping. While it's not intended for complex or physics-heavy projects, it remains highly extensible for creative and compact visual interfaces.

Happy coding!

CDN/LINKS

JSdelivr
NPM

License

Kenzo Graphics Library v2 is licensed under the GPL 3.0 License.

------------Simple--Kenzo-Graphic-Library-Preview-------------------