Skip to content
A Useful WebGL Library for Small Turning
JavaScript Other
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Add pbr image to Sep 26, 2018
build Remove Jun 17, 2019
docs Implementing Logger Nov 12, 2018
flow-typed/npm Add Jest test framework Aug 8, 2018
libs Update phina.js Nov 19, 2016
scripts Add syncing example’s javascript mechanism between Runstant to local Nov 19, 2016
src Remove Jun 17, 2019
.babelrc Fix package.json etc. for Jest Test Oct 21, 2018
.eslintrc.json Fix an error of .eslintrc.json Oct 7, 2018
.flowconfig Fix flow install situation and switch to yarn May 19, 2018
.gitignore Add VSCode settings Oct 7, 2018
.gitmodules Remove gitsubmodule phina.js Jun 8, 2018
.node-version Update .node-version Jun 21, 2018
LICENSE Initial commit Jul 5, 2015 Format Jun 24, 2019
VERSION-FILE Remove Jun 17, 2019
VERSION-GEN Improve versioning Jun 16, 2018
esdoc.json Update documents Oct 7, 2018
jest.config.js Improve build settings (enable test with flowtype) Oct 7, 2018
logo.png Resize logo.png Feb 25, 2016
package-lock.json Update package.json Dec 2, 2018
package.json Update package.json Dec 2, 2018
pre-commit Improve git pre-commit hook Jul 4, 2018
yarn.lock Update yarn.lock Dec 2, 2018



Join the chat at

A New WebGL Rendering Library for 3D Graphics Geeks


GLBoost is a new WebGL library for realtime 3D graphics geeks. It’s a low-level library that takes away the pain of having to deal with routine WebGL API tasks without limiting your expressive power. Use this library to spend your time doing cool stuff instead of fighting WebGL.

Latest released revision

Currently, r4 released!

GLBoost Viewer


This is a demo viewer using GLBoost.

Test Examples

Check our test examples page

If you want to watch examples in local. Go to GLBoost top directory by terminal and start local web server up.

$ cd GLBoost
$ npm install
$ npm start

Key features

  • ECMAScript 2015 based library
  • Shader classes Mixin layered mechanism
  • WebGL2.0 Ready (Currently, Firefox and Chrome)
  • User's Custom Shader Support
  • Obj and glTF 1.0/2.0 loader
  • Phisically Based Rendering Support (Metallic-Roughness) (with/without Image based Lighting)
  • Experienced use in multiple commercial products/services


Supported Browsers

  • Google Chrome (even WebGL 2.0 mode)
  • Firefox (even WebGL 2.0 mode)
  • Safari
  • iOS Safari
  • Android Chrome
  • Microsoft Edge (Xbox One included)

Unsupported Browsers

  • Internet Explorer

How to use

1. Include build/glboost.js in your html file.

<script src="./glboost.js"></script>

2. Put canvas tag in body element.

  <canvas id="world" width="600" height="600"></canvas>

3. Write your codes.

// setup GLBoost renderer
var canvas = document.getElementById("world");
var glBoostContext = new GLBoost.GLBoostMiddleContext(canvas);

var renderer = glBoostContext.createRenderer({
  clearColor: {
    red: 0.0,
    green: 0.0,
    blue: 0.0,
    alpha: 1

// make a scene
var scene = glBoostContext.createScene();

// setup material
var material = glBoostContext.createClassicMaterial();
var texture = glBoostContext.createTexture("resources/texture.png");
material.shaderClass = GLBoost.PhongShader;

// make a Sphere geometry
var geometry = glBoostContext.createSphere(20, 24, 24, null);

// set Sphere geometry and material to make a Mesh.
var earth = glBoostContext.createMesh(geometry, material);
// add the earth mesh to the scene

// make a directonal light
var directionalLight = glBoostContext.createDirectionalLight(
  new GLBoost.Vector3(1, 1, 1),
  new GLBoost.Vector3(-1, -1, -1)
// add the light to the scene

// setup camera
var camera = glBoostContext.createPerspectiveCamera(
    eye: new GLBoost.Vector3(0.0, 0.0, 60.0),
    center: new GLBoost.Vector3(0.0, 0.0, 0.0),
    up: new GLBoost.Vector3(0.0, 1.0, 0.0)
    fovy: 45.0,
    aspect: 1.0,
    zNear: 0.1,
    zFar: 1000.0
// add the camera to the scene

// create an expression (which is composed of several rendering passes)
var expression = glBoostContext.createExpressionAndRenderPasses(1);

// set scene to render pass of expression
expression.renderPasses[0].scene = scene;

// call this method before rendering

// rendering loop
renderer.doConvenientRenderLoop(expression, function() {
  // rotate camera
  var rotateMatrixY = GLBoost.Matrix33.rotateY(-1.0);
  rotatedVector = rotateMatrixY.multiplyVector(camera.eye);
  camera.eye = rotatedVector;

for other usage, check examples!

How to Install npm packages to build library, examples and API document

$ npm install

Build of GLBoost Library

$ npm run build

Build of examples

Some examples needs to be built by Babel because they are written ECMAScript 2015. The following command builds them all.

$ npm run build-examples

Build of API Document

$ npm run esdoc

(Note: The documentation coverage is still very low. We address the resolution of this problem.)


$ npm run test

(Note: The test coverage is still very low. We address the resolution of this problem.)


Coming Soon

  • Improvement of Realtime shadow

Near Future

  • Both Clustered Forward Rendering and Deferred Rendering Support
  • Global Illumination (Light Propergation Volume or etc...)
  • Unity like Entity-Component-System
  • Original Giga DataTexture Architecture
  • High-level API for beginners


This library is released under the MIT License, see LICENSE file.

You can’t perform that action at this time.