GLFW for Node.js
This is a part of Node3D project.
Synopsis
Node.js addon with GLFW3 bindings.
- Exposes low-level GLFW interface.
- Multiple windows for a single Node.js process - easy.
- Goes fullscreen and back fluently.
- Has
Document
class, capable of tricking other libs, as if we are in a browser.
Note: for
npm i
to succeed, compilation tools must be in place on your system. For Windows, use ADMIN PRIVELEGED command line:npm i -g windows-build-tools
. Also Windows needs vcredist 2013 to be installed.
Usage
This is a rather low level interface, where most of the stuff is directly reflecting GLFW interfaces. Do not expect much. See GLFW Docs for useful info on what it does and doesn't.
As per this lib, 3 entities are exported: GLFW itself, and Window and Document classes.
const glfw = require('glfw-raub');
const { Window, Document } = glfw;
Here glfw
is a low level interface container, where all glfw*
functions are accessible as
glfw.*
. E.g. glfwSetWindowTitle
-> glfw.setWindowTitle
.
glfw.createWindow(w, h, emitter, title, display)
- this function differs from GLFW Docs
signature due to JS specifics. Here emitter
is any object having BOUND emit()
method.
It will be used to transmit GLFW events.
GLFW window events:
'click'
- mouse button clicked'drop'
- drag-dropped some files on the window'focused'
- focus gained/lost'framebuffer_resize'
- render-surface resized'iconified'
- window was iconified'keydown'
- keyboard key down'keyup'
- keyboard key up'mousedown'
- mouse button down'mouseenter'
- mouse entered/left the window'mousemove'
- mouse moved'mouseup'
- mouse button up'mousewheel'
- mouse wheel rotation'quit'
- window closed'refresh'
- window sure needs to be redrawn'resize'
- window frame resized'window_pos'
- window moved
Note:
keypress
event is not supported.
class Window
Window
is higher level js-wrapper around the above functions, which helps in managing window
instances. It basically has all the functionality where in GLFW Docs window
parameter
is mentioned. E.g. glfwSetWindowTitle(window, title)
-> window.title = title
.
There are few simple rules for the above transformation to become intuitive:
- API is available if it has
window
parameter. - All props start lowercase.
- Word "Window" is omitted.
- Whatever could have a
get/set
interface is made so.
Constructor:
Window({ title, width, height, display, vsync, mode, autoIconify, msaa })
string title $PWD
- window title, takes current directory as default.number width 800
- window initial width.number height 600
- window initial height.number display undefined
- display id to open window on a specific display.boolean vsync false
- if vsync should be used.string mode 'windowed'
- one of'windowed', 'borderless', 'fullscreen'
.boolean autoIconify true
- if fullscreen windows should iconify automatically on focus loss.number msaa 2
- multisample antialiasing level.boolean decorated true
- if window has borders (usefalse
for borderless fullscreen).
Properties:
-
get number handle
- window pointer. -
get string version
- OpenGL vendor info. -
get number platformWindow
- window HWND pointer. -
get number platformContext
- OpenGL context handle. -
get {width, height} framebufferSize
- the size of allocated framebuffer. -
get number currentContext
- what GLFW window is now current. -
get number samples
- number of msaa samples passed to the constructor. -
get/set string mode
- one of'windowed', 'borderless', 'fullscreen'
. Here'borderless'
emulates fullscreen by a frameless, screen-sized window. This when this property is changed, a new window is created and the old is hidden. -
get/set number width|w
- window width. -
get/set number height|h
- window height. -
get/set [width, height] wh
- window width and height. -
get/set {width, height} size
- window width and height. -
get/set string title
- window title. -
get/set {width, height, Buffer data} icon
- window icon in RGBA format. Consider using this Image implementation. -
get/set boolean shouldClose
- if window is going to be closed. -
get/set number x
- window position X-coordinate on the screen. -
get/set number y
- window position Y-coordinate on the screen. -
get/set {x, y} pos
- where window is on the screen. -
get/set {x, y} cursorPos
- where mouse is relative to the window.
Methods:
getKey(number key)
-glfw.getKey(window, key)
.getMouseButton(number button)
-glfw.getMouseButton(window, button)
.getWindowAttrib(number attrib)
-glfw.getWindowAttrib(window, attrib)
.setInputMode(number mode)
-glfw.setInputMode(window, mode)
.swapBuffers()
-glfw.swapBuffers(window)
.makeCurrent()
-glfw.makeContextCurrent(window)
.destroy()
-glfw.destroyWindow(window)
.iconify()
-glfw.iconifyWindow(window)
.restore()
-glfw.restoreWindow(window)
.hide()
-glfw.hideWindow(window)
.show()
-glfw.showWindow(window)
.on(string type, function cb)
- listen for window (GLFW) events.
class Document
Document
extends Window
to provide an additional web-style compatibility layer.
As name suggests, objects of such class will mimic the behavior and properties of
your typical browser window.document
. But also it is a Window
, at the same time.
And it is incomplete at this point: you still have to provide an Image
class of
your choice and WebGL context (implementation). Two static methods are designated
for this:
-
static setImage(Image) - for example, this Image implementation is designed to fit perfectly. Also sets
global.HTMLImageElement
. -
static setWebgl(webgl) - for example, this WebGL implementation is designed to fit perfectly.
Constructor:
Document({ ...<Window opts>, ignoreQuit, autoFullscreen })
boolean ignoreQuit false
- if the window should ignore the default quit signals, e.g. ESC key.boolean autoFullscreen false
- if window has default key handlers for fullscreen:- CTRL+F - borderless fullscreen window.
- CTRL+ALT+F - real, exclusive fullscreen mode.
- CTRL+SHIFT+F - back to windowed.
Properties:
get body
- returnsthis
.get ratio/devicePixelRatio
- device pixel ratio, most likely to be 1.get/set innerWidth/clientWidth
- window width.get/set innerHeight/clientHeight
- window height.get/set onkeydown
- browser-style event listening.get/set onkeyup
- browser-style event listening.get style
- mimic web-elementstyle
property.get context
- returnsDocument.webgl
, set throughDocument.setWebgl
.
Methods:
getContext()
- returnsDocument.webgl
, set throughDocument.setWebgl
.getElementById(id)
- returnsthis
.getElementsByTagName(tag)
- if contains 'canvas', returnsthis
, otherwisenull
.createElementNS(_0, name)
- returns the result ofcreateElement(name)
.createElement(name)
- for'canvas'
returnsthis
for the first call, then returns new instances of canvas-like object capable of using 2d or 3d context. This is done for some web APIs like three.js, which create additional canvases. For'image'
returnsnew Document.Image
, set throughDocument.setImage
.dispatchEvent(event)
- invokesemit(event.type, event)
.addEventListener(name, callback)
- adds event listener.removeEventListener(name, callback)
- removes event listener.requestAnimationFrame(cb)
- BOUNDrequestAnimationFrame
method.