A New WebGL Rendering Library for 3D Graphics Geeks
Our concept is ...
[en] 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.
[ja] GLBoostはWebGLライブラリです。 WebGLの面倒くさい部分を肩代わりしつつ、それでいて表現の幅を制約することのない、 3Dグラフィックス開発の玄人向けのライブラリを目指しています。
Currently, r1 released!
If you want to watch examples in local. Go to GLBoost top directory by terminal and start local web server up.
$ cd GLBoost
$ ruby -run -e httpd -- --port 3000 ./
Then, access http://localhost:3000/examples by your web browser.
- ECMAScript 2015 based library (using Babel)
- Shader classes Mixin mechanism (You can customize your shader like LEGO bricks!)
- WebGL2.0 Ready (Currently, Firefox nightly and Chrome Canary)
- User's Custom Shader Support
- Obj and glTF loader
- Google Chrome (even WebGL 2.0 mode)
- Firefox (even WebGL 2.0 mode)
- Safari
- iOS Safari
- Android Chrome
- Microsoft Edge (Xbox One included)
- Internet Explorer 11 (note that browser-polyfill.min.js is required)
1. Include build/glboost.js in your html file.
<script src="./glboost.js"></script>2. Put canvas tag in body element.
<body>
<canvas id="world" width="600" height="600"></canvas>
</body>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.setTexture(texture);
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
scene.addChild(earth);
// 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
scene.addChild( directionalLight );
// setup camera
var camera = glBoostContext.createCamera({
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
scene.addChild(camera);
// 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
expression.prepareToRender();
// rendering loop
var render = function() {
// clear canvas
renderer.clearCanvas();
// render the expression
renderer.draw(expression);
// rotate camera
var rotateMatrixY = GLBoost.Matrix33.rotateY(-1.0);
rotatedVector = rotateMatrixY.multiplyVector(camera.eye);
camera.eye = rotatedVector;
requestAnimationFrame(render);
};
render();for other usage, check examples!
$ npm install
$ npm run build
[en] Some examples needs to be built by Babel because they are written ECMAScript 2015. The following command builds them all.
[ja] いくつかのサンプルはECMAScript 2015で書かれているため、Babelでのビルドを必要とします。 次のコマンドでそれら全てをビルドできます。
$ npm run build-examples
$ npm run esdoc
(Note: The documentation coverage is still very low. We address the resolution of this problem.)
1. launch local web server. for example...
$ ruby -run -e httpd -- --port 3000 ./2. Run Test command.
$ npm run test(Note: The test coverage is still very low. We address the resolution of this problem.)
- Allow access to WebGL Context and Resources
- Physically Based Rendering
- Both Forward Rendering and Deferred Rendering Support
- High-level API for beginners
This library is released under the MIT License, see LICENSE file.