Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


0.2.15 • Public • Published

webgl-operate (or gloperate for WebGL) is a TypeScript based WebGL rendering framework.

npm Version Examples Documentation Travis Tokei Tokei

webgl-operate encapsulates WebGL and provides various rendering capabilities such as common rendering controllers for single-frame and multi-frame rendering, raycasting, or progressive path-tracing as well as a multitude of common rendering processes and shaders. In contrast to most other rendering engines, neither a specific rendering approach/pipeline or style is favored nor a specific use-case is assumed. Instead, it features a basis for arbitrary rendering implementations and facilitates common rendering processes in an atomic manner. It can be used for, e.g., complex charting, volume rendering, point-cloud rendering, product visualization, learning webgl, raymarching or pathtracing, rendering implicit or procedural geometry, as well as modern rendering of 3D models and complex scenes.

How to Install

webgl-operate can be used both as npm module (TypeScript or JavaScript) and linked JavaScript bundle:

npm install --save-dev webgl-operate
<script src=""></script>



Cross-browser Compatible, Desktop and Mobile, Object-oriented WebGL2 Facade, Object-oriented WebGL2 Facade, WebGL and WebGL2 Backend, Extension Querying and Masquerade, Professional Customer Support, Professional Integration Service


Progressive Rendering Controller, Programs and Shaders with Includes, GPU Allocation Registry, Dynamic Resolution, Frame Buffers, Vertex Buffers, Vertex Arrays, 2D Textures, Drawables, Observable Rendering Stats, Camera and Camera Controllers, 3D Textures, Default Viewer UI/Overlay, Volume Rendering Basics, Adaptive Resolution, Post-processing Library, LUT Color Grading, Text Rendering, Ray Tracing Utils, Progressive Path Tracing Utils, ...

Getting Started

The canvas can be integrated into HTML5 as follows:

<canvas id="multiframe">
    <!-- fallback -->
    Your browser does <strong>not support</strong> the <code>&lt;canvas&gt;</code> element.

This canvas can then be setup by associating the canvas element with a single-frame or multi-frame controller and attaching a renderer using JavaScript as follows:



webgl-operate has currently no non-dev dependencies. Please note the following fixed (allowing patch only) version dependencies, that should not be updated until further review/evaluation:

  • ES6+ problems (breaks build due to the used UglifyJS only supporting ES5):
    • @types/gl-matrix: ~2.3.0,
    • gl-matrix: ~2.3.2,
    • query-string: ~5.1.1,
  • RXJS 5.x peer dependency issues (e.g., to support angular 4.x):
    • webpack-rxjs-externals: ~1.1.0,
    • rxjs: ~5.5.10,
    • ts-node: ~5.0.1,
  • TypeDoc compiler issues (could be resolved by ignoring compile erros in typedocOptions, but ...):
    • @types/sinon: ~4.3.3,
    • sinon: ~4.5.0,

Source Structure

directory description
source most of webgl-operate's rendering and operational logic
source/data contains, e.g., pre-built sampling patterns or other data
source/shaders on build, shaders are packed into the dist as well (and includes are resolved)
source/debug optional: various tools for run-time debugging
source/viewer optional: generic viewer overlay and controller for webgl-operate based rendering
website website demonstrating webgl-operate features (referencing examples)
test tests of sources located in source

NPM Configuration and Project Setup

package.json specifies the following scripts that can be run by npm run-script <command>.

command description
build build for local development to ./build, creates a bundle with all facilities and a test website
start starts a local start on port 4000 on the ./build directory
start-watch runs build tasks concurrently in watch mode and starts start
build-dist transpile sources and declarations to ./dist for distribution via, e.g., CDN
build-lib transpile sources and declarations to ./lib/ for distribution via npm
cleanup removes all build directories, i.e., ./build, ./dist, and ./lib
lint code quality lint TSLint Rules: tslint.json
doc build html documentation in dist/docs using TypeDoc
test run unit tests using mocha and chai

The above commands can be triggered directly from within a console (e.g., from within the Visual Studio Code terminal) or by using visual studio tasks. When first working on webgl-operate, use npm install to install dependencies. For development use npm run-script build and, e.g., npm run-script start to access the test website locally.

  • For deployment npm update and subsequent npm run-script prepack should be run.
  • For publishing the package to npm login to npm via npm login, then update the package version using npm version {major,minor,patch}, and, finally, run npm publish.

Please note that deployment of documentation and examples is managed by CG Internals manually for now.

Visual Studio Code configuration

"Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications." Please not that the workspace configuration .vscode/settings.json has automatic format on save enabled.


All the above scripts, namely build, build-lib, build-dist, lint, cleanup, start, start-watch, doc, as well as test can be triggered from within Visual Studio Code. The intended workflow is to bind a key (e.g., ctrl+alt+t) to open the task selection and trigger the desired task. The tasks are configured in .vscode/tasks.json.

Related Work


npm i webgl-operate

Downloadsweekly downloads








last publish


  • avatar