azeem / webvs Goto Github PK
View Code? Open in Web Editor NEWAudio Visualization rendering library for the browser
License: MIT License
Audio Visualization rendering library for the browser
License: MIT License
Set a preset up as (clear every frame), Superscope with n=1; and then x=0;y=0; followed by a Convolution Filter with the kernel as a smiley face.
You'll notice that in AVS the face is upside down, but in WebVS the face is on its side.
Using Webvs 2.0.2
from npm.
TLDR: I think this line is flawed because the handleResize
method is not bound to the class instance.
I setup Webvs like so:
const analyser = new Webvs.WebAudioAnalyser({
context: analyserNode.context
});
analyser.connectToNode(analyserNode);
this._webvsMain = new Webvs.Main({
canvas: this._canvasNode,
analyser: analyser
});
this._webvsMain.loadPreset(preset);
this._webvsMain.start();
Then at some point in the future, I update the canvas size and call:
this._webvsMain.notifyResize();
And I get the following error, because this
is actually the event and not the DynamicMovement
instance.
webvs.node.js:17667 Uncaught TypeError: Cannot read property 'updateDimVars' of undefined
at Main.module.exports.DynamicMovement.handleResize (webvs.node.js:17667)
at Main.emit (webvs.node.js:10809)
at Main.module.exports.Main.notifyResize (webvs.node.js:7185)
[MY CODE BELOW HERE]
at AvsWindow.componentDidUpdate (Webvs.js:31)
at commitLifeCycles (react-dom.development.js:9706)
at commitAllLifeCycles (react-dom.development.js:11349)
at HTMLUnknownElement.callCallback (react-dom.development.js:104)
at Object.invokeGuardedCallbackDev (react-dom.development.js:142)
at invokeGuardedCallback (react-dom.development.js:191)
at commitRoot (react-dom.development.js:11488)
How do we want to handle resources like texer images and the sort? I am asking because there is two simple methods, and a couple of more complex ones:
To get some sort of ideas about this makes sense now, because I am thinking about including texer resources and the like in the AVS Converter. Normally the preset is read and the name of the resource is saved as a filename. It could however make sense to store the actual resource as a base-64 string blob in the .webvs file json and webvs could read that as image/text/whatever...
Thoughts?
Then there are a few more complicated methods that have been discussed as part of Fridge. I think these make only limited sense with a web platform, but I'll just mention them anyway for completeness:
All the examples tries to load this track: https://soundcloud.com/gigamesh/fleetwood-mac-dreams-gigamesh
But it seems to be gone.
I was hoping to see some Llama Tail-whipping Action.
http://forums.winamp.com/showpost.php?p=2972395&postcount=52
http://forums.winamp.com/showpost.php?p=2972622&postcount=53
Since the AVS File Decoder already handles the conversion of effects that Webvs doesn't even support at this time, many of the preset created by the converter will crash Webvs.
Webvs should handle these cases more gracefully, preferably simply ignoring unsupported effects, just like Winamp AVS did. However, it would be nice if third-party software could keep track of unsupported effects and notify users, e.g. through an event of some kind.
I'm not sure if an additional strict mode makes any sense. It would continue to crash when unsupported effects are loaded, just like it's currently the case.
Could you please convert the following preset to javascript preset:
https://www.pastiebin.com/5d81519b5837f
It's Seismogrid by UnConeD
Thank you!
Components are the AVS Effects equivalent in Webvs. The more components we implement, the more presets Webvs can render. This issue tracks status of effects support in Webvs. Percentage values indicate how frequently the effects appear in presets (See @grandchild comments below for what this value means). We should prioritize on building the more popular effects. Any help implementing these Components are welcome. Comment below if you're interested in claiming one. Checkout Mosaic for a good example on how to build components.
A long time ago when TexerII became reality it changed the way presets were made. With this new introducion smoother, more defined shapes were possible with the introducion of a codeable Texer. However, one thing that was left behind was the ability to rotate each image given "n" points. The way it is now, in order to acheive such you'll need to add a DM per image, doing so will make the presets slower. I believe creating a new unique variable which allows to do so not only will add some nice new effects, but it also help some old presets that could benefit from this, I believe it shouldn't be hard to code this new piece?
Any thoughts?
Some blendmodes are still unsupported:
XOR is tricky in WebGL 1.0, which has no bitwise integer operations. There are involved algorithms which emulate xor.
Every other line/pixel is also not straightforward, because we need pixel-coordinate access. This code
mix(color, getSrcColor(), float(uint(dot(v_position, u_resolution-1.0)) & 1u))
(which is only valid in GLSL ES 3 / WebGl 2.0) produces different output across browsers -- and always incorrect (artifacts along the diagonal).
If there's a way we could have not only 0-1
-valued texture coordinates but also correct pixel/texel-coordinates, then we'd be done with these.
WebVS docs used to have live demonstration, but they've been taken down for the documentation revamp (they were broken anyway; see #29 ).
I think that's a valid decision, and I like the new docs. But I still wish to still see live examples come back some day. (Though it's personally not that big of a deal.)
Firefox version: 42.0
OS: Windows 10 pro (64 bit)
Open any of the examples ( e.g. http://azeemarshad.in/webvs/examples/JelloCube.html ) or the editor http://avstudio.azeemarshad.in/editor#
The audio plays but the webvs effects do not react to it.
SuperScope code interpretation is missing the following variables:
linesize
drawmode
skip
w
h
Chrome: Version 46.0.2490.86 m
OS: Windows 10 pro (64 bit)
Open any of the examples ( e.g. http://azeemarshad.in/webvs/examples/JelloCube.html )
The webvs effects are rendered but the audio does not play.
hey there, azeem and others,
i am now starting to adapt the output of the avs file converter to the actual property names used in the code of webvs.
major question: how open are you guys to discussions about changing this or that name for a component's property? there are two sides to consider:
such as property capitalization: is the reading/comparison of any names from the json files case-insensitive? i'd like it to be this way, because case is basically irrelevant and a matter of taste (e.g. i like CamelCase) and the values of enum-like properties are ALLCAPS in the webvs code and examples. i'd like it to just not matter what case the values of json strings have.
thoughts?
I'm getting the following output when I run npm run func-test
:
CHROME_BIN=chromium npm run func-test
> [email protected] func-test /home/jakob/dev/avs/webvs
> karma start
Hash: 6da5611acdaf99197223
Version: webpack 3.11.0
Time: 55ms
webpack: Compiled successfully.
webpack: Compiling...
26 06 2018 01:17:27.577:WARN [karma]: No captured browser, open http://localhost:9876/
26 06 2018 01:17:27.581:INFO [karma]: Front-end scripts not present. Compiling...
Hash: a2b93713f0b8548e6729
Version: webpack 3.11.0
Time: 6000ms
Asset Size Chunks Chunk Names
test/func/testIndex.ts 813 kB 0 [emitted] [big] test/func/testIndex.ts
[145] ./test/func/testIndex.ts 101 bytes {0} [built]
[146] ./test/func \.test$ 555 bytes {0} [built]
[147] ./test/func/Main.test.ts 771 bytes {0} [optional] [built]
[327] ./test/func/render/ClearScreen.test.ts 1.43 kB {0} [optional] [built]
[329] ./test/func/render/SuperScope.test.ts 3 kB {0} [optional] [built]
[330] ./test/func/render/Texer.test.ts 1.59 kB {0} [optional] [built]
[331] ./test/func/trans/ChannelShift.test.ts 1.25 kB {0} [optional] [built]
[332] ./test/func/trans/ColorClip.test.ts 1.37 kB {0} [optional] [built]
[334] ./test/func/trans/Convolution.test.ts 1.67 kB {0} [optional] [built]
[335] ./test/func/trans/DynamicMovement.test.ts 3 kB {0} [optional] [built]
[336] ./test/func/trans/FadeOut.test.ts 1.38 kB {0} [optional] [built]
[337] ./test/func/trans/Invert.test.ts 343 bytes {0} [optional] [built]
[338] ./test/func/trans/Mirror.test.ts 4.63 kB {0} [optional] [built]
[348] ./test/func/trans/Mosaic.test.ts 1.43 kB {0} [optional] [built]
[349] ./test/func/trans/UniqueTone.test.ts 1.74 kB {0} [optional] [built]
+ 335 hidden modules
ERROR in ./node_modules/@visbot/webvsc/node.js
Module not found: Error: Can't resolve 'fs' in '/home/jakob/dev/avs/webvs/node_modules/@visbot/webvsc'
@ ./node_modules/@visbot/webvsc/node.js 43:11-24
@ ./src/Main.ts
@ ./test/func/funcTestUtils.ts
@ ./test/func/Main.test.ts
@ ./test/func \.test$
@ ./test/func/testIndex.ts
ERROR in ./node_modules/@visbot/webvsc/lib/util-node.js
Module not found: Error: Can't resolve 'fs' in '/home/jakob/dev/avs/webvs/node_modules/@visbot/webvsc/lib'
@ ./node_modules/@visbot/webvsc/lib/util-node.js 4:11-24
@ ./node_modules/@visbot/webvsc/node.js
@ ./src/Main.ts
@ ./test/func/funcTestUtils.ts
@ ./test/func/Main.test.ts
@ ./test/func \.test$
@ ./test/func/testIndex.ts
webpack: Failed to compile.
26 06 2018 01:17:28.366:INFO [karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/
26 06 2018 01:17:28.367:INFO [launcher]: Launching browser Chrome with unlimited concurrency
26 06 2018 01:17:28.372:INFO [launcher]: Starting browser Chrome
26 06 2018 01:17:29.126:INFO [Chrome 67.0.3396 (Linux 0.0.0)]: Connected on socket SnS1YWym_ZVLsPsSAAAA with id 1971824
START:
Chrome 67.0.3396 (Linux 0.0.0) ERROR
{
"message": "Uncaught Error: Cannot find module \"fs\"
at test/func/testIndex.ts:13405:145
Error: Cannot find module \"fs\"
at webpackMissingModule (test/func/testIndex.ts:13405:76)
at Object.defineProperty.value (test/func/testIndex.ts:13405:155)
at __webpack_require__ (test/func/testIndex.ts:20:30)
at Object.<anonymous> (test/func/testIndex.ts:12417:12)
at __webpack_require__ (test/func/testIndex.ts:20:30)
at Object.<anonymous> (test/func/testIndex.ts:11870:16)
at __webpack_require__ (test/func/testIndex.ts:20:30)
at Object.<anonymous> (test/func/testIndex.ts:1067:14)
at __webpack_require__ (test/func/testIndex.ts:20:30)
at Object.<anonymous> (test/func/testIndex.ts:8143:23)",
"str": "Uncaught Error: Cannot find module \"fs\"
at test/func/testIndex.ts:13405:145
Error: Cannot find module \"fs\"
at webpackMissingModule (test/func/testIndex.ts:13405:76)
at Object.defineProperty.value (test/func/testIndex.ts:13405:155)
at __webpack_require__ (test/func/testIndex.ts:20:30)
at Object.<anonymous> (test/func/testIndex.ts:12417:12)
at __webpack_require__ (test/func/testIndex.ts:20:30)
at Object.<anonymous> (test/func/testIndex.ts:11870:16)
at __webpack_require__ (test/func/testIndex.ts:20:30)
at Object.<anonymous> (test/func/testIndex.ts:1067:14)
at __webpack_require__ (test/func/testIndex.ts:20:30)
at Object.<anonymous> (test/func/testIndex.ts:8143:23)"
}
Finished in 0.132 secs / 0 secs @ 01:17:29 GMT+0200 (Central European Summer Time)
SUMMARY:
โ 0 tests completed
(Formatted a bit for legibility)
The back face in examples/JelloCube.html is missing. Most likely some mistake with the superscope clone code.
webgl doesnt support arbitrary linewidths. should do something like switching to drawing rectangles when unsupported linewidths are used.
While this project appears to be dead, I keep tinkering with the idea for a visual editor. I've done some research on how one would change the order of effects.
Here are two random quotes from the same Stack Overflow question, but there are plenty more
In principle, it is wrong to look for an index of a key. Keys of a hash map are unordered, you should never expect specific order (http://stackoverflow.com/a/15218544)
What you are after are numerical indexes in the way classic arrays work, however there is no such thing with json object/associative arrays {http://stackoverflow.com/a/15218553)
These quotes and the general lack of libraries that can handle order of JSON keys (or my unability to find them) raises the question, whether the file representation for Webvs has one major flaw.
How would you re-arrange presets in a visual editor without an index key for each individual effect?
Colors inside texer images are not coming up properly. Most likely broken since shader/blend modes rewrite.
Noticed a bug in SuperScope colour rotation. It only uses the first colour once, then loops any additional colours.
I can't get any of the examples to show anything anymore and in the console it shows an error in libs.js. I haven't investigated further, yet, just thought I'd let you know...
Currently to update an effect you have to load the entire preset again, which causes a noticeable pause.
This produces a poor experience when editing a preset using AVS style editor, where you (historically) expect the preset to update on the fly.
There are several ways a preset can change:
An effect being modified, an effect being added or removed and an effect being moved around the tree. (I think that covers all cases)
In the case of an effect being modified, being able to mark the effect as needing a rebuild and calling a function that scans the preset looking for marked effects seems like a good way to handle it.
I'm unsure about the other cases.
Thoughts on this?
In JSON presets, the enumeration property values should be case-insensitive ie. output: "Additive"
and output: "ADDITIVE"
should both work
see #15
Bilinear filter shader code in compat: true mode is based on the avs BLEND4 code. This calculation produces inaccurate but more avs like results. Now the bug is this: In AVS if you use DM (with bFilter) on a white screen, the final filtered pixels will all be rgb(253,253,253). This works for the Webvs shader too, except that for some pixels the value comes to exactly rgb(255,255,255). This is not noticeable for most cases, but if you apply a colormap or a clip etc. these odd pixels start to show up as weird artifacts.
I have written a test case to bring this out https://github.com/azeem/webvs/blob/master/test/DynamicMovement.test.js#L104
Basically, this test clips off values above rgb(253, 253, 253) to show the artifacts. The result looks like this:
I've also figured out that this occurs when product of cornoff.x
and cornoff.y
is divisible by 255, which causes the sum of a1
to a4
to become exactly 255 without any flooring errors (unlike the remaining pixels) causing the output pixel to be exact white. Suprisingly though, the same problem should in principle happen in avs BLEND4 code as well (https://github.com/visbot/vis_avs/blob/master/avs/vis_avs/r_defs.h#L328), but it doesnt.
Will have to step through the AVS code to figure out why this happens. Any one with AVS build setup, please help!.
We have lots of func tests here: https://github.com/azeem/webvs/tree/master/test/func that tests Components end to end inside a browser. This has been very useful when doing large refactoring/porting. However, it'd be nice if we have more unit tests for atleast the core parts:
Component.ts
ComponentRegistry.ts
Container.ts
EffectList.ts
Model.ts
Main.ts
ResourceManager.ts
webl/Buffer.ts
webgl/ShaderProgram.ts
webgl/TextureSetManager.ts
Use https://github.com/azeem/webvs/blob/master/test/unit/trans/DynamicMovement.test.ts as a reference for mocking and setup for unit tests.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.