
Show HN: Vertexshaderart.com - greggman
http://www.vertexshaderart.com
======
cageface
On the one hand it's very cool to have this kind of access to the GPU from
javascript, and I'm always impressed to see how creative people can be with
these kinds of tools.

On the other hand it's a little disappointing to see WebGL completely peg the
CPU running stuff that wouldn't cause it to break a sweat running native.

~~~
pjmlp
It is the second coming of VRML and if it continues doing that, it will join
it.

So far I haven't seen anything useful other than a quick way to prototype ES2
shaders or doing cool demos.

~~~
pcwalton
You've complained a lot in the past that the Web lacks in hardware
functionality compared to native. Now that such hardware functionality is
exposed to the Web, you call it useless. Be fair.

The fact is that access to OpenGL is basic functionality that any platform
needs.

~~~
pjmlp
I would be fair if WebGL exposed what my GPUs are capable of.

~~~
pcwalton
WebGL 2 does.

(Also, the state of graphics drivers is extremely bad; even if your GPU claims
to be capable of OpenGL 3+, it may crash the entire OS when you attempt to use
it. Rollout of new GL features in a secure, sandboxed environment is quite
tough and takes time.)

~~~
pjmlp
Which no browser has currently. Yes I know FF has prototype of it.

And on mobile, I am yet to have WebGL working properly without transforming it
into a cook plate, when I don't get a black screen.

Meanwhile they do OpenGL ES 3.x without any issues while keeping a reasonable
temperature.

And when WebGL 2.0 finally gets out across all devices, we will be doing
Metal, Vulkan and DX12 already.

------
blue1
Caution: only open with recent browser on recent OS. On my mac, this crashed
OS X in the most violent way I've ever seen (not just the browser: a full
kernel panic).

~~~
exDM69
I've had some kernel panics from WebGL content too (acko's mathbox2, as well
as normal OpenGL apps) on Linux w/ nouveau open source drivers. I changed to
proprietary drivers which seem to work better. Having the latest version of
browser/os is no guarantee that it works.

~~~
blue1
Isn't a bit scary that some web content is able to crash the whole system?
Feels a bit like the old "Guru Meditation" times to me

~~~
JonnieCache
This is why microsoft objected to webgl. It has security implications too.

[http://blogs.technet.com/b/srd/archive/2011/06/16/webgl-
cons...](http://blogs.technet.com/b/srd/archive/2011/06/16/webgl-considered-
harmful.aspx)

They chose to support it in ie11 though.

~~~
greggman
Not, it's not why they objected, since they had already exposed the same
features in Silverlight.

The ability to hang your machine only requires the ability to ask the GPU to
do lots of work. No shaders required. Even given an API that only allowed you
to submit meshes you'd just build a mesh of layered polygons and zoom in to
fill the screen. There's no way to limit such an API and still have it be
useful.

Fortunately as pointed out then and above there's no incentive to crash your
machine. Baddies get no info, no access, all they get is no one coming back to
their site.

------
minitech
The constant rearranging of the “popular” items is pretty irritating.

~~~
bhouston
Very much so. I'd suggest that things do not rearrange while you are on the
page, only upon refresh.

~~~
coroxout
I agree. Love the site though, these are brilliant. Thanks!

Would it be possible to add a sound icon to the front page thumbnail of the
ones with audio? Then people who are e.g. at work or listening to music can
skip them if they prefer - and people who actively want something with music
can seek them out too.

------
MattBearman
Wow, this didn't just crash the Tab, it didn't just kill my Browser. This
completely crashed OS X to the point that command + option + escape didn't
even work, and I had to do a hard restart.

I really wanna see, but I'm scared to try again...

~~~
runholm
Don't use safari for webGL. It's sadly become the IE6 of webGL always lagging
way behind.

------
Kristine1975
Nice complement to the fragment shader-based
[http://glslsandbox.com](http://glslsandbox.com) and
[https://www.shadertoy.com](https://www.shadertoy.com)

It would be nice if it was possible to select the point shape, e.g. to get a
circle instead of the default square.

------
corysama
Explained in greggman's blog

[http://games.greggman.com/game/vertexshaderart-
com/](http://games.greggman.com/game/vertexshaderart-com/)

------
Cakez0r
Can anyone explain how the effect works in this demo?
[http://www.vertexshaderart.com/art/nL6YpkW8YvGKNEKtj](http://www.vertexshaderart.com/art/nL6YpkW8YvGKNEKtj)

------
mintplant
[http://www.vertexshaderart.com/art/PoyGoZL5Lmmn9N5SF](http://www.vertexshaderart.com/art/PoyGoZL5Lmmn9N5SF)

This is some sort of magic. Just 755 lines! Wow.

~~~
anon4
I made it a bit subjectively better ;)
[http://www.vertexshaderart.com/art/XJecoKnhhsWTTNp4Z](http://www.vertexshaderart.com/art/XJecoKnhhsWTTNp4Z)

------
JonnieCache
You're missing a <title> tag. Otherwise very nice. I've been meaning to get
into this webgl neo-demoscene stuff.

Does anyone know about text/vector rendering in webgl? Would I have to
construct a 2d mesh manually? Ideally I'd like a logo in vector form to make
some kind of "mask layer" inside the thing. What would I search to find out
how to do that?

~~~
exDM69
> Does anyone know about text/vector rendering in webgl?

There's three commonly used methods for this:

1) Tesselate your vector shapes to triangles. This is quite tricky to get
right if you have concave polygons with holes in them. You can try to find the
old GLU tesselator source and port that.

2) Use the stencil-then-cover trick, which is somewhat similar to stencil
shadow volumes but in 2D. This is what the nanovg [0] library does (also
NV_path_rendering).

3) Use signed distance fields, which is the best way to get good looking
text/vector art if you project that into a 3d surface. You either need to pre-
process your vector shapes into 2d distance field textures off-line or build a
custom tesselator w/ a pixel shader that does this.

WebGL is not special in this, the same tricks apply as normal OpenGL (ES).

[0] [https://github.com/memononen/nanovg](https://github.com/memononen/nanovg)

~~~
JonnieCache
What I want is 3d stuff whizzing round, interacting in "impossible" escher-
esque ways with the 2d text. I think the stencil buffer is what I need. I wish
I could describe what I'm talking about better...

~~~
exDM69
The stencil-then-cover trick only works if you're displaying on a flat
surface. If you want to have your vector art in 3d, you need to use some other
method or render vector shapes to texture first.

~~~
JonnieCache
Yeah, thats the idea. The vector art would be 2d, hanging in space and then
the 3d stuff would move "through" it in contradictory ways. I'm pretty sure
buffer trickery is the way to go. Thanks for your advice.

------
shortoncash
This site is awesome. I love it.

(Also, I did open this with Safari on OS X and I did not get the issues others
are talking about. However, my fans were definitely working when I loaded the
tab.)

------
edem
What is the difference compared to Shadertoy?

~~~
Kristine1975
Shadertoy: You write a program that is executed once for every pixel on the
screen and produces the pixel's color.

This: You write a program that is executed once for every vertex (the number
of which you specify) and produces the vertex's position and color. Vertices
are then drawn to the screen using the primitive type you specify: With
points, each vertex results in a point (a small square, really); with
triangles, three vertexes result in a triangle and so on.

------
binarymax
I just installed a new graphics card on my machine this morning, and this was
the perfect way to test it. Thanks!

------
steve_taylor
It's just a black page with nothing on it. (Chrome on MacBook Pro.)

~~~
Kristine1975
It needs WebGL.

------
vosper
Argh, there's autoplay music [0]! Please don't do this, it's so annoying.

Cool site, otherwise.

[0]
[http://www.vertexshaderart.com/art/nL6YpkW8YvGKNEKtj](http://www.vertexshaderart.com/art/nL6YpkW8YvGKNEKtj)

