/webgl-raub

OpenGL/WebGL for Node.js

Primary LanguageC++MIT LicenseMIT

WebGL for Node.js

This is a part of Node3D project.

NPM ESLint Test Cpplint

npm i -s webgl-raub

Example

WebGL/OpenGL bindings. The addon does not provide a window control system, and it can not set up an OpenGL context on its own. This API simply maps the native OpenGL function calls to their JS counterparts.

TL;DR: For a quick start, use 3d-core-raub or try the Examples (and note package.json).

Note: this addon uses N-API, and therefore is ABI-compatible across different Node.js versions. Addon binaries are precompiled and there is no compilation step during the npm i command.

Details

const webgl = require('webgl-raub');

Here webgl contains the WebGL API, like a WebGLRenderingContext instance would. See WebGLRenderingContext docs for reference, and TypeScript definitions for the full list of exports.

To use browser WebGL libs, like three.js, several additional interfaces must also be provided to mimic the browser.

  • Package glfw-raub provides window/context handling and additional browser-like interfaces.
  • Package image-raub loads and serves the image data as web Image would.

Those two are bundled into the 3d-core-raub in a following manner:

const image = require('image-raub');
const webgl = require('webgl-raub');
const { Document } = require('glfw-raub');

Document.setImage(image); // plug this Image impl into the Document
Document.setWebgl(webgl); // plug this WebGL impl into the Document

const doc = new Document();
global.document = global.window = doc;

const canvas = document.createElement('canvas'); // === doc
const gl = canvas.getContext('webgl'); // === webgl

You can optionally call webgl.init() after the GL context becomes available - this translates into a glewInit() call. See GLEW docs for what it does and if you need it (probably "yes"?).

OSX Note: some features may depend on OpenGL profile being used. Core profile is necessary for VAO and other OpenGL 3.2+ features. Depending on your windowing backend, set the OpenGL profile of your preference. In case glfw-raub is used, the profile can be set through the Window/Document constructor or with glfw.windowHint calls.

WebGL Libs

  • three.js - known to work well on Node.js with this implementation of WebGL.
  • PixiJS - seems to work with some minor hacks, as proven by this example.

Using node-3d-core, you can skip setting up most environment features for those libs.