npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webgl-raub

v5.0.0

Published

WebGL for Node.js

Downloads

245

Readme

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.