Skip to content

node-3d/webgl-raub

Repository files navigation

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. There are also numerous non-WebGL methods exported in case you want to use advanced OpenGL functions.

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:

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

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.