WebGL for Node.js
npm install webgl-raubThis is a part of Node3D project.
``console`
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.
`js`
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.
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:
`js
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.
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 themobj._
contain raw IDs as - 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.:
`cpp`
// 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 translatesglewInit()
into a call. See GLEW docs for what
it does and if you need it (probably "yes"?).
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