
glsl.js - abusing WebGL shaders for efficient 2D - gren
http://blog.greweb.fr/2013/02/glsl-js-a-javascript-glsl-library-dry-efficient/
======
cscheid
Cool! I've been building something similar: <https://github.com/cscheid/facet>
(demos: <http://cscheid.github.com/facet/demos/index.html>)

It also has a "javascript fragment shader layer", so that you can evaluate
GLSL code in CPU-land. This is pretty nice to prevent repeating things like
coordinate transformation code, which turns out to happen all the time when
doing mouse-picking in 3D, etc.

Another big win comes from writing your shader abstractions in Javascript
itself. When you need to reuse bits of glsl here and there, you want 1) to
pass around objects that are smarter than strings and 2) to configure the
shader to behave differently when you have uniforms, attributes, textures,
etc. Doing the heavy lifting in javascript and compiling down to GLSL really
pays off here.

------
kevingadd
You shouldn't be using innerHTML to get your shader text, it'll break as soon
as you put a comparison operator into the shader. Use textContent.

You should support using typed arrays instead of raw JS objects ({ x: , y: })
for setting vectors, since that will give people the option of using something
like glMatrix.

~~~
gren
Woo, thanks a lot for your feedback :)

I'll fix that ASAP.

[EDIT] all of the issues are now on github:
<https://github.com/gre/glsl.js/issues>

------
AnthonBerg
I really like that this is DRY.

In programming for OpenGL I don't mind the dancing with the state machine, but
I hate the repetition and desynchronisation. The cognitive / ergonomic
inefficiency wears me out pretty quick.

This is very very nice. Hats off.

~~~
shurcooL
I couldn't agree more. Props for DRY.

------
bsimpson
I know that Adobe's handling of the Flash Platform gets a lot of hate in these
circles, but one thing I really enjoyed during my time there was writing
shaders in PixelBender. Basically, it allowed you to write GPU-accelerated
image filters in a GLSL-based language.

Most of the WebGL tutorials I've seen either require you to grok the entire
OpenGL architecture or rely on something like THREE.js or ProcessingJS. It's
really nice to see something in the middle (like PixelBender was).

Thanks!

(I've been keeping this in my to-read list. Seems to be similar, but in bare
WebGL:

<http://dev.opera.com/articles/view/webgl-post-processing/>

)

------
podperson
I don't think "abuse" is the correct word. "use" is the correct word.

~~~
gren
some precision here:

I said "abuse" because it is still a hack to use only one plain GLSL fragment
for everything (a fragment shader aims to be used with a vertex shader,
whereas mine is just static and take one vertex for the whole canvas). BTW,
the glsl.heroku.com demoscene platform use exactly the same idea and was an
inspiration.

The limit of this hack, is the fact that GLSL fragment uniforms number is
limited (depending on the machine, 1024 variables on my macbook). For
instance, a `Ball ball[1000]` wouldn't compile because it is too much
variables (if Ball has 2 fields). AFAIK, you could still solve this by using a
big Array of float, but it would be less structured then.

------
alexhaefner
If you just want to draw images into a canvas I don't see any benefits to
using WebGL. You just lose cross browser compatibility. Most browsers have
hardware accelerated rendering of 2d canvases. If you want to create unique
shader effects, like blurs or masks or whatever, then there is definitely an
argument to be made about the use of webgl.

~~~
gren
See <http://glsl.heroku.com/> and also my Pong example
<http://greweb.fr/glsl.js/examples/pong/>

We can really do crazy effect with GLSL, easily and efficiently (with
Canvas2D, we could use Canvas' ImageData for these effects but it is
definitely less efficient).

For the compatibility, I would say it's getting better now, only IE is the
browser which support Canvas but not WebGL.

But yes, if Canvas2d is enough for your needs, it's ok. Actually it would be
interesting to inject a Canvas2d into glsl.js to add some cool effects on it
:) I'm working on it!

~~~
alexhaefner
Yeah sorry I was actually replying with a mobile centric view in mind. If you
want to build something that "just works", it's better to strip down the
geometry as much as possible and target canvas2d. The iOS implementation of
canvas is hw accelerated, for example. However, you would not be able to
target iOS for WebGL as of right now. So if you're looking to make something
that is accessible, I would advice against WebGL. Do you disagree?

------
msvan
Cool. But when will browser games be taken seriously? I'd like to see it
happen, but web-based games are still mostly considered something to do when
you've got five minutes to spare.

------
iknownothing
Every time i visit the site it kills my display driver when using Firefox. No
problems with chrome though

------
Skoofoo
I enjoyed the Pong demo, it's pretty inspirational. The Mario sprites demo
appears to be broken, though.

~~~
gren
Thanks.

Yep, about the mario sprites example, there is something I'm missing happening
<https://github.com/gre/glsl.js/issues/2>

It works for me (tested on MacbookPro and on a Linux with recent hardware)

I have to figure it out.

[edit] It is fixed now! sampler2D in a struct{} seems broken on some WebGL
version / graphic card.

