Gist-powered WebGL transitions(glsl.io)
glsl.io
Gist-powered WebGL transitions
http://glsl.io/gallery
8 comments
exactly!
definitely planned https://github.com/glslio/glsl.io/issues/23 :-)
https://github.com/glslio/glsl.io : the platform itself is open-source.
https://www.youtube.com/watch?v=BYdCNTJaGss : a first presentation video.
https://www.youtube.com/watch?v=BYdCNTJaGss : a first presentation video.
[deleted]
Nice! The editor playground great too: http://glsl.io/transition/new (WebGL preview updates on-the-fly while changing the shader code)
It is unfortunate that webviews in Android < 4.4 and all mobile Safari versions do not support WebGL.
I just learned about a company called Ludei that has a product called CocoonJS that seems to give access to the most HTML 5 features (including WebGL) as a distributable webview https://www.ludei.com/cocoonjs/. I wish they would be more transparent with the pricing of the product.
They are incredibly cool, but they all lack thorough documentation.
WebGL is still voodoo to me.
WebGL is still voodoo to me.
The code is written purely in GL Shading Language, not specifically WebGL. Though you are right, shaders are their own brand of voodoo in a way. I would recommend reading up on vector/matrix math and thoroughly going over every line of the shaders until you understand exactly what every line's purpose is if you really want to learn them. (I'm planning on doing that myself, knowing almost nothing about shaders myself) You'll probably come out with a decent working knowledge of how to make a shader :)
I've started doing WebGL some weeks back, and although it was complete voodoo to me at first, things "clicked" for me by simply reading up a lot about what all the terms means and how they work together.
Although I'm opposed to transitions in general, the editor/platform is really awesome.
Broadway Tower gets everywhere.
When calculating angles, most of the examples divide the point xy by the resolution xy. This creates a nice point in the 0..1 range. When calculating angles from that, things will look good if the image is square, but once you have a rectangle, things look weird since you'll have an ellipse rather than a circle.
I was trying to make one of my transitions properly calculate the angle and rotate the input image, but the only way I could test if it was really working was by saving the shader and visiting /gallery to see the preview (differently from the editing preview, the gallery preview uses a rectangle).