DISCLAIMER: This is a tool created for internal use by Ninjadev, and is open sourced to share ideas with and get feedback from the community. You are free to use it, according to the License, but we will not necessarily provide support and may at any time add, change or remove features as we require for our productions.
nin is ninjatool
nin is Ninjadev's internal demo tool. It is a tool for easing development of browser-based WebGL demos. Core features include:
- Node-based demotool, effortlessly reuse your effects, scenes, and create crazy transitions.
- Livereloading of shaders and scenes in the browser. No more manual recompilation!
- Tight THREE.js integration for all your WebGL needs.
- Compile and pack your WebGL demo to a .png.html file for easy compo delivery
The backend component is written in node.js, and keeps track of and recompiles changed files. The frontend is created using React, and communicates with the backend over websockets.
To install nin simply run the command
npm install -g ninjadev-nin.
This projects requires node version
7.9.0 or newer.
You can install node from packaging here or download zipped source from this page and verify signatures with the guide here;
You will also need
git installed for project generation to work.
New project created with nin get a default .eslintrc suitable for WebGL demos with THREE.js.
nin new <dirname> will create the specified directory and initialize a new nin project inside.
nin run inside the newly created project will make it accessible on http://localhost:8000.
nin creates a manifest file called
You should fill out this file with the title of your demo, the authors, a description, song metadata, and even a google analytics tracking code to collect statistics.
The metadata is then used to generate html meta-tags in the head of the demo,
as well as in the metadata segment of the
The png metadata can be viewed with a command such as
pngcheck -c -t -7 bin/demo.png.html on linux.
My First Node
Create a new node by clicking
Generate -> THREE NODE in the frontend menu.
The node will be placed in
src/nodeName.js and added to the graph in
You must connect the node yourself to the output node.
This is done by setting
nodeName.render as in the example below,
nodeName is the id of the node you want to connect to the display.
Create a shader by clicking
Generate -> Shader Node in the frontend menu.
It will be placed in the folder
To get livereload on shader change, you shader must be specified in the options object of your node in
the shader generator will do this for you.
If needed, you can access the shader through the global
SHADERS object, by writing
nin compile command will create a single file
bin/demo.png.html that contains all the code and resources of your demo.
Base64 and PNG compression magic is used to achieve this.
It will at the same time output a file without PNG compression,
bin/demo.html, which will be slightly larger, but compatible with a wider range of devices (especially smartphones).
For faster compiles, pass the flag
--no-closure-compiler. This will only concatenate js files, without any minifying.
Many of nin's settings can be overriden by placing a .ninrc file in your home directory. Currently, keyboard shortcuts is the only behavior which can be changed in the .ninrc. The list of canonical names for keybindings can be found in nin/frontend/app/scripts/directives/menubar.js.
An example .ninrc looks like the following:
[keybinds] startRendering=left stopRendering=right
Rendering to video
- Open nin in your browser, navigate to the frame you want to render from, and press R. This will start dumping single frames as numbered .PNGs in
bin/render/in your project folder.
- Refresh etc every time WebGL crashes.
- When you have rendered all the frames:
nin render. You need
ffmpeg(ffmpeg.org) installed for this.
- The demo is now available at
Each frame will take up to around 4MB on disk, and the finished .mp4 will be on the order of 1GB when rendered, so make sure you have enough disk space. Expect to render maybe a frame or two per second.
You will need to have node and yarn installed. Yarn installation guide is available here.
make in the nin folder will build and compile the entire project.
npm link will add nin to your node binaries path, making it available globally.
nin run inside your project.
If you wish to develop on the frontend, running
make run inside
nin/frontend/ makes webpack rebuild the frontend on file change.
You only need to rerun
nin run if you change files in either
The frontend part of this project uses ESLint for linting.
.eslintrc.js file in the frontend part of this project.
The demo itself and our own
dasBoot uses the Google Closure Linter, please see this link for installation information.
Testimonials / Reviews
nice! - mrdoob
Oh man, I didn't know you guys released your tools. I'm a big fan of your stuff -- awesome to see such polished prods on the web. Happy to have helped enable some amazing work! - daeken
To publish nin type the command
To be able to publish you need access to the
ninjadev user on npm whose password will be given through secure channels.