WebGL for Node.js

This is a part of Node3D project.

npm i -s webgl-raub

This addon is ABI-compatible across Node.js versions. There is no compilation during npm i.

TL;DR: For a quick start, use 3d-core-raub or look at Examples.

import webgl from 'webgl-raub';

Here webgl contains the WebGL/OpenGL API, like a WebGLRenderingContext instance would.

• See WebGLRenderingContext docs for reference.
• There are also non-WebGL methods exported in case you want to use advanced OpenGL functions.
• The addon does not provide a window control system, you can use glfw-raub (or anything else!) to create a window.
• See TS declarations for the full list of exports.

WebGL Libs

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.

See this example using both GLFW and Image. The main idea being as follows:

import Image from 'image-raub';
import webgl from 'webgl-raub';
import glfw from 'glfw-raub';
const { Document } = glfw;

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

const doc = new Document({ width: 1600, height: 900, vsync: true });
...

Similarly, these modules are utilized in 3d-core-raub. Using 3d-core-raub, you can skip setting up most environment features for those 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.

Native OpenGL

This is real native OpenGL, not ANGLE or anything else. You have direct access to GL resource IDs. Due to WebGL convention, resource IDs are wrapped in objects, such as WebGLBuffer. All of them contain raw IDs as obj._ - the _ property. You can also create such objects based on OpenGL IDs that are obtained elsewhere (e.g. from other separate C++ addons).

The JS API mostly maps the native OpenGL function calls. E.g.:

// gl.clear(target)
DBG_EXPORT JS_METHOD(clear) { NAPI_ENV;
	REQ_INT32_ARG(0, target);
	glClear(target);
	RET_WEBGL_VOID;
}

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"?).

MacOS 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.