-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
180 lines (148 loc) · 9.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-dark.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
<title>videodrömm documentation</title>
</head>
<body>
<header>
<div class="container">
<h1>Documentation</h1>
<h2>documentation for the videodrömm project</h2>
<!-- <section id="downloads">
<a href="https://github.com/videodromm/documentation/zipball/master" class="btn">Download as .zip</a>
<a href="https://github.com/videodromm/documentation/tarball/master" class="btn">Download as .tar.gz</a>
<a href="https://github.com/videodromm/documentation" class="btn btn-github"><span class="icon"></span>View on GitHub</a>
</section>-->
</div>
</header>
<div class="container">
<section id="main_content">
<h3>
<img src="images/vdlinux.png" />
<a id="goal" class="anchor" href="#goal" aria-hidden="true"><span class="octicon octicon-link"></span></a>Goal</h3>
<p>Create multiplatform applications (win, mac, lnx, android, ios) to do VJing/installations/VR/web</p>
<p>Network enabled, maximum performance, code reuse, open source</p>
<p>Features Live-Coding, Warping</p>
<p>Written in C++, GLSL, Python, typescript, js, etc.</p>
<img src="images/live-params.jpg" />
<h3>
<a id="roadmap" class="anchor" href="#roadmap" aria-hidden="true"><span class="octicon octicon-link"></span></a>Roadmap</h3>
<p>Integrate <a href="https://github.com/patriciogonzalezvivo/glslEditor">Glsl editor</a> by adding nodejs websocket server to share: live-coded shaders, uniform variables (need to switch from socket.io to ws)
<p>Integrate <a href="http://shawnlawson.github.io/The_Force/">The_Force</a> by adding nodejs websocket server to share: live-coded shaders, uniform variables (OSC already supported but to improve)
<p>The main renderer is <a href="https://github.com/videodromm/videodromm-visualizer-cinder">the visualizer</a> which is controlled remotely a <a href="https://github.com/videodromm/videodromm-browser">a html5 app in a browser</a>. The goal is to achieve maximum performance by remotely controlling the renderer. The html5 controller needs a UI to act on slider/rotary/color elements which send websocket messages on change events.</p>
<p>Support for loading textures (jpg, png, webp, mp4, gif, audio fft) remotely: all files must be received in a <a href="https://github.com/videodromm/assets">assets</a> folder which is common to html and c++ apps. Cinder apps, which are checkout in folders aside the assets folder, take advantage to use a shared assets folder as Cinder searchs up to 5 parent folders for the assets folder.</p>
<p>Support streaming of webp images across the network (ok for js, need to find a way in c++)</p>
<p>Implement Test Driven Development (TDD): mocha for js, googletest(?) for c++</p>
<p>Prefer json to xml</p>
<p>Use fragment shaders compatible with webGL, keep the syntax from <a href="https://shadertoy.com/">Shadertoy</a>(iResolution, iGlobalTime, iMouse, iChannel0</p>
<p>Option: Support for <a href="https://www.openlighting.org/ola/">Open Lighting Architecture</a></p>
<h3>
<a id="engines" class="anchor" href="#engines" aria-hidden="true"><span class="octicon octicon-link"></span></a>Engines</h3>
<p>openFrameworks and Cinder frameworks will be used for the C++ part. For javascript, use typescript, angularjs, nodejs, mongodb, threejs. Other languages can be added to use Unreal Engine, Unity, etc.</p>
<h3>
<a id="network" class="anchor" href="#network" aria-hidden="true"><span class="octicon octicon-link"></span></a>Network</h3>
<img src="images/osc-js.jpg" />
<p>OSC and webSockets will be used. The goal is to have a standalone renderer, which can be controlled remotely with</p>
<ul>
<li><a href="http://hexler.net/software/touchosc">TouchOsc</a> on mobile/tablet: we stick to TouchOSC default messages like "/1/fader1"</li>
<li><a href="http://livecontrol.q3f.org/ableton-liveapi/liveosc/">LiveOSC</a> for Ableton: messages likes "/live/meter"</li>
<li><a href="http://editor.thebookofshaders.com/">Glsl editor</a> </li>
<li><a href="http://shawnlawson.github.io/The_Force/">The_Force</a> </li>
</ul>
<p>About TouchOsc, here are some <a href="touchosc.html">screen captures</a> from the Android version with the default layouts we are using</p>
<img src="images/android-nexus-ui.jpg" />
<h3>
<a id="apps" class="anchor" href="#apps" aria-hidden="true"><span class="octicon octicon-link"></span></a>Applications</h3>
<p>Several applications will be developed:</p>
<ul>
<li>Videodrömm visualizer(C++): standalone renderer for projections/installations</li>
<li>Videodrömm server(nodejs): webSockets server for multiple websocket clients, routes the json messages from OSC, MIDI, etc</li>
<li>Videodrömm controller(C++): controller, webSocket client</li>
<li>Videodrömm (js): controller, webSocket client</li>
<li>Videodrömm livecoding(C++ or js): editor livecoding of glsl shaders, when they compile successfully, they are sent to the server via webSockets</li>
<li>Videodrömm vr(C++): vr renderer, using Spout, glsl shaders. We target Oculus DK2, webVR, etc</li>
</ul>
<h3>
<a id="assets" class="anchor" href="#assets" aria-hidden="true"><span class="octicon octicon-link"></span></a>Assets</h3>
<p>Support a variety of file formats:</p>
<ul>
<li>Images: jpg, png, gif</li>
<li>Videos: mp4, mov, preference for image sequence enabled codecs like hap, dxv</li>
<li>Shaders: fragment shaders (compatible with <a href="https://www.shadertoy.com/">shadertoy</a>), vertex shaders</li>
<li>3D models: obj</li>
<li>Audio: wav, mp3, ogg</li>
</ul>
<h3>
<a id="ui" class="anchor" href="#ui" aria-hidden="true"><span class="octicon octicon-link"></span></a>User interface</h3>
<p>The UI for C++ will be the excellent Immediate Mode GUI: <a href="https://github.com/ocornut/imgui">imgui from Omar Cornut</a></p>
<p>Other UI could be used depending on the programming language.</p>
<h3>
<a id="audio" class="anchor" href="#audio" aria-hidden="true"><span class="octicon octicon-link"></span></a>Audio</h3>
<p>Support audio analysis from linein, wave files, Ableton Live via LiveOsc ("/live/track/meter")</p>
<p>Wave file playback possible</p>
<h3>
<a id="input" class="anchor" href="#input" aria-hidden="true"><span class="octicon octicon-link"></span></a>Hardware input</h3>
<p>The application can be controlled with several hardware devices:</p>
<ul>
<li>Kinect</li>
<li>LeapMotion</li>
<li>MIDI controller</li>
<li>Mobile/Tablet: accelerometer, gyroscope, UI</li>
<li>iot: raspberry pi, arduino</li>
</ul>
<h3>
<a id="output" class="anchor" href="#output" aria-hidden="true"><span class="octicon octicon-link"></span></a>Output</h3>
<p>Standard output is rectangular full screen, by defaut. Using warping techniques, several inputs can be mixed and mapped to non-rectangular areas/objects</p>
<p>The application outputs to:</p>
<ul>
<li>Projector</li>
<li>Screens</li>
<li>VR devices</li>
<li>Mobile/Tablet</li>
</ul>
<h3>
<a id="workflow" class="anchor" href="#workflow" aria-hidden="true"><span class="octicon octicon-link"></span></a>Git workflow</h3>
<p>Get involved! Design, advice, development...</p>
<p>The projet source is hosted on github, in several repositories. To compile the projects without modifications you can just clone the desired projects. If you want to contribute, I suggest the following workflow:</p>
<ul>
<li>Fork the project</li>
<li>Clone your fork</li>
<li>Configure the link to the parent repo: git remote add upstream git://github.com/videodromm/documentation.git</li>
<li>Before coding, get latest modifications from the parent: git fetch upstream and git merge upstream/master master</li>
<li>Do some coding</li>
<li>Commit and push to your repo</li>
<li>Do a pull request for review and integration in the parent repo</li>
<li>Relax/eat/sleep, then when you're back to coding fetch and merge as before...</li>
</ul>
<p>To setup the development environment, <a href="setupdev.html">click here</a></p>
<h3>
<a id="other" class="anchor" href="#other" aria-hidden="true"><span class="octicon octicon-link"></span></a>Other software integration</h3>
<p>Other software can interact with videodrömm, we keep the door open for integrations via Spout/Syphon/OSC/etc:</p>
<ul>
<li>pure data</li>
<li>super collider</li>
<li>videopong</li>
<li>vvvv</li>
<li>max for live/max msp</li>
<li>lpmt</li>
<li>air/flash player apps</li>
<li>touch designer</li>
<li>etc</li>
</ul>
</section>
</div>
</body>
</html>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-27878391-1', 'auto');
ga('send', 'pageview');
</script>