
Flat Surface Shader - msvan
http://wagerfield.github.io/flat-surface-shader/
======
skrebbel
This is lovely, but it mostly just reminds me of how I can't wait until WebGL
is so commonplace that we can finally ditch all that HTML/CSS nonsense.

~~~
kh_hk

        > HTML/CSS nonsense
    

Structured and well declared markup is no joke. If you actually refer to the
common "hacks" to get demos and eye-candy stuff working, then I do agree. On
the contrary, if you refer to ditching all HTML and CSS in favor of WebGL,
then we're fucked.

~~~
skrebbel
No, I refer to bullshit like the amount of trouble you have to go through (and
subsequently the amount of upvotes you get on HN [1]) if you manage to _center
a rectangle on the screen_. Stuff like that. It's 2013, the web is _the_
application platform of today, and centering a rectangle is nontrivial. What?

It's just one of the many examples of how broken HTML and CSS are. I dare say
that anyone who claims that HTML and CSS aren't completely broken simply has
absolutely no imagination and should consider accountancy.

On WebGL, we can reinvent presentation and styling entirely without
sacrificing performance. Maybe keep parts of HTML, and ditch CSS entirely in
favour of something better, and use a JS lib to render it all on GLES
hardware, the same in every browser. Designers can think about different
devices and screen sizes, and not about ways of telling a browser that a div
is secretly a table cell so that it can be centered. We now have many
competing programming languages, competing frameworks, and so on, with a few
mainstream ones and improvements/replacements all the time. Rendering entire
websites in WebGL enables having the same world-wide innovation in presenting
web sites and web apps to users.

But even if you don't think going all-in on WebGL is a good idea, you have to
agree that HTML/CSS is a gigantic 💩[2].

[1]
[https://news.ycombinator.com/item?id=6191350](https://news.ycombinator.com/item?id=6191350)
[2]
[http://www.fileformat.info/info/unicode/char/1f4a9/browserte...](http://www.fileformat.info/info/unicode/char/1f4a9/browsertest.htm)

~~~
derefr
HTML and CSS are the way they are because they, together, are markup for
_documents_ \--and documents on the web are of indefinite shape. You can
resize your browser window, or change your text-zoom, or insert/remove content
in the DOM, and things have to _reflow_. Most importantly, this means that
boxes containing reflowed text will get _longer_ or _shorter_ , and then push
other boxes on the page up or down.

Because of this, it really makes no sense, in the context of an HTML document,
to center something vertically--it'd just end up at some arbitrary position on
top of some paragraph in the middle of the page's content, found after N/2
screens of scrolling. This is what separates an HTML document from, say, a
PDF: PDF pages _don 't_ reflow, each one has a fixed height, so there _is_
such thing as the "center" of a page on a PDF.

If the web were like PDFs, sure, it'd be easy to render it all using WebGL.
But try imagining, now, writing an interactive text-layout-and-reflow engine
in Javascript, to render web documents onto a WebGL canvas. How would you
specify the constraints for that engine to follow? Some sort of declarative
markup language based on a box model with paddings, borders, and margins,
perhaps?

\---

Now, on the other hand, web _applications_ tend not to care so much about the
shape of any "document"\--what they're interested in is the shape of the
_viewport_. That has completely different semantics, and _can_ be done easily
in WebGL ("viewport" being a jargon term in GL.)

 _But..._ web applications tend to embed, and rely upon, the reflow semantics
of web _documents_ surprisingly often. As soon as you want to include any
controls with user-contributed content, you need that rich-text layout engine,
and you can't just pre-render it all to a canvas to bring it in, since users
will want to copy and paste text from it...

~~~
supercoder
So how come it's simple to horizontally center something.

~~~
Gigablah
If you read his post, basically width is the constant and height is the
variable. That's why horizontal centering is easy, because the width is
deterministic.

------
pdknsk
This is probably a bit OT, but it makes me sad that flat shading as an art
style has been abandoned in games. Ever since pixel shaders and normal maps
gave us shiny plastic-y objects, developers haven't looked back.

~~~
lifeformed
Here's the lighting style of our current project:
[http://hitboxteam.tumblr.com/image/42563981451](http://hitboxteam.tumblr.com/image/42563981451)

~~~
aktau
Very awesome. Do you guys explain something about the development process or
the shaders themselves? I'd love to learn a bit more about it as I'm new to
the graphics party (but loving it). If you can't tell me, what should I search
for to be able to reproduce a shader like that?

~~~
lifeformed
Thanks! I've been planning on writing something about it but just never found
the time. The shader is actually quite simple, although the implementation is
pretty tricky (need a lot of hacks to get it working in Unity).

All it's doing is lighting each tile individually. It's a throwback to the
per-tile lighting of ascii roguelikes
([http://osx.iusethis.com/screenshot/osx/brogue.png](http://osx.iusethis.com/screenshot/osx/brogue.png)).
So each square chunk on the wall gets a single amount of light and color
evenly distributed on it. That's it. Also, there are shadows on top of them.

The props (torch and statue) have a banded light shader on them. It's just
standard diffuse lighting but clamped to a certain set of values.

------
seanmcdirmid
I added a crumpled paper effect to a web browser once, the result was very
cool:

[http://blogs.msdn.com/b/sean_mcdirmid/archive/2009/07/27/a-w...](http://blogs.msdn.com/b/sean_mcdirmid/archive/2009/07/27/a-web-
browser-suitable-for-harry-potter-in-wpf.aspx)

I'm not sure if it was useful though.

------
ch0wn
It blows my mind that I can switch between the three different renderers
without dropping a noticing a single framedrop. I had to open the devtools and
verify that there is actually a change happening to believe it.

~~~
sbarre
On my iMac, switching between renderers definitely caused a "hiccup", and SVG
was _very_ slow on Chrome, but it looked great in all 3.

------
sciencerobot
> I love WebGL, but unfortunately it doesn't work everywhere.

What is meant by that? WebGL does seem to work here as in the appearance and
frame rate are the same compared to SVG but with less CPU usage on my
machine/browser (Chrome).

~~~
nxn
I think the author means that it's not implemented in all the browsers that
have a significant share of the browser market.

------
ssiddharth
Everything renders incredibly smoothly on my setup. And I'm learning all sorts
of nifty tricks via the source. Thanks for making this!

------
sheng
it looks quite nice but unfortunately I guess it's by far too power hungry. My
GTX 560's fan went up.

~~~
troels
Your GPU powered up? I would assume this renders in CPU, so that's a bit
strange.

~~~
belandrew
By default it's using a canvas to render, though you can also choose SVG or
WebGL. Canvas is hardware accelerated in most browsers.

~~~
troels
Didn't realise, though that makes perfectly good sense of course.

------
arcameron
I'm very impressed by this! Awesome work, congratz on the outcome!

I think WebGL has a lot of potential, feel free to check out my hackish
background bump mapping @

[http://anthonycameron.com/lab/background-
bumps](http://anthonycameron.com/lab/background-bumps)

------
Detrus
Can you do this easily with three.js? Can this library work with three.js?

