VEDA v1.0 — VJ app for Atom #VEDAJS
I recently released VEDA v1.0, it was formerly named glsl-livecoder.
glsl-livecoder was create as a simple GLSL preview app, but as it supports more features it became more powerful like a VJ app.
After developing server mode — will be described later — I decided to rename it to VEDA and realease v1.0.
In this article I’m gonna introduce the features of VEDA and updates since the previous article:
What is VEDA?
VEDA is an Atom package for VJ / Live coding performance in GLSL.
It executes the GLSL file and shows the result on the background of Atom.
GLSL is a shading language for OpenGL / WebGL.
However, it is now used for generative art, or visual effects on VJ apps, especially in Demoscene or Live Coding culture.
As it runs on GPU, GLSL has massive computation power.
Here is a capture of my VJ performance using VEDA.
I played through 2 hours but it was really exciting…!!
Recent updates
When I wrote the last article VEDA had these features:
- Loading images / videos
- Audio inputs
- MIDI inputs
Now I’m gonna introduce the features added in recent updates.
WebCam inputs
Implemented in v0.5.0.
You can use WebCam inputs as a texture in GLSL.
It can be also used as a hand-sensor like Theremin 🙌
Gamepad inputs
Implemented in v0.6.0.
You can get gamepad inputs connected to the PC and use it as a texture..
I used a gamepad for Nintendo Switch in the movie above.
Recent gamepads supports Bluetooth. great.
Key inputs
Implemented in v0.7.0.
You can get key inputs and use it as a texture in GLSL.
Vertex shaders
Implemented in v0.8.0.
VEDA now supports not only fragment shaders, but also vertex shaders!
In the world of shader art, people uses fragment shader generally.
Vertex shader is more difficult, but it will be a powerful weapon to draw particles and lines.
Supports settings in file comments
You can write VEDA’s settings in JSON format on the top of the file.
This allows switching settings per file and optimize performance by enabling features only when it’s required.
This idea is inspired by Interactive Shader Format, which is used by VJ apps such as VDMX.
glslify
Implemented in v0.10.0.
Now you can use glslify to bundle GLSL files.
glslify is a bundler for GLSL, like browserify for JavaScript.
By using glslify you can develop GLSL code much more efficiently!
Also, there are many GLSL libraries published in npm.
By using these libraries with glslify you can write shaders more sophisticated way.
packages with keyword ‘glsl’ | npm
Multipass rendering
Implemented in v0.11.0.
Generally shaders are executed once per frame.
However, in some cases it needs to run multiple times in a frame, for example when you want to add visual effects to the result of rendering.
This is called “mutipass rendering”.
VEDA allows multipass rendering by writing settings that describes shaders or target textures for each rendering passes.
Though it requires more computation power, you can add more effects to the result of rendering.
Combine vertex shaders & fragment shaders
Implemented in v0.12.0.
Now you can specify the file to execute with current file.
If you’re editing fragment shaders specify vertex shader, and vice versa.
In the movie above I created particles by vertex shader and added some effects by fragment shaders.
Server Mode
Implemented in v0.13.0.
VEDA launches a web server if server option is enabled.
When you open localhost it shows the result of rendering fullscreen.
Of course, when you edit the shader VEDA updates the browser runtime immediately.
This is useful for VJ performance in non-techie events.
Future
As a next feature I’m thinking about supporting OSC protocol.
I will play TouchDesigner, VDMX, etc to find what kind of features are required next.
I also released VEDA’s GLSL runtime as vedajs to npm.
I will write about it in a few days.
If you have feature requests or questions, feel free to tell me on Twittter or GitHub!
Hope you enjoy it 🤘🤘🤘
