Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Flat Surface Shader

wagerfield.github.io

Post reply on HN
Print view View original

11–20 of 39 posts

Re: Flat Surface Shader

#11

Post by nxn »

skrebbel wrote: post #5
kh_hk wrote: post #3

Earlier quoted context omitted.

> 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.

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…

> 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

I'm not sure I follow you when you say "keep parts of HTML". Are you suggesting that we should have a canvas element that spans the entire region of the page, store the actual markup of the page hidden somewhere on the page, and then parse and render that markup to the canvas element using JS+WebGl+? Or are you saying that the browser should simply give up on rendering HTML markup, and give it over to your JS App which will render it itself using WebGL?

> 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.

If the rendering is done in user/app space, I find it hard to believe there would be any uniformity at all. Everyone would end up having their own unique dialect of HTML that behaved and displayed differently in their own customized WebGL based rendering engine.

EDIT: Disregard that last bit, I misread what you were saying to imply that it would be more uniform than what we have now.

Re: Flat Surface Shader

#12

Post by aktau »

lifeformed wrote: post #8
pdknsk wrote: post #7

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.

Here's the lighting style of our current project: http://hitboxteam.tumblr.com/image/42563981451

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?

Re: Flat Surface Shader

#13

Post by derefr »

skrebbel wrote: post #5
kh_hk wrote: post #3

Earlier quoted context omitted.

> 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.

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…

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...

Re: Flat Surface Shader

#14

Post by mbell »

kh_hk wrote: post #3
skrebbel wrote: post #2

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.

> 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.

Ya'll seem to be arguing apples and oranges. To get to the point, when webGL is commonplace what stops you from creating a 'structured and well declared' markup / styling language that renderers to webGL without all the HTML / CSS baggage?

Re: Flat Surface Shader

#15

Post by wahnfrieden »

skrebbel wrote: post #5
kh_hk wrote: post #3

Earlier quoted context omitted.

> 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.

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…

Re: the example of centering a rectangle, and related problems, there is a CSS solution for this already, it's just not adopted widely enough yet: http://www.w3.org/TR/css3-flexbox/

You don't have to throw out the whole shebang to fix that class of issues :)

Re: Flat Surface Shader

#16

Post by 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).

Re: Flat Surface Shader

#17

Post by nxn »

sciencerobot wrote: post #16

> 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).

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

Re: Flat Surface Shader

#18

Post by lifeformed »

aktau wrote: post #12
lifeformed wrote: post #8

Earlier quoted context omitted.

Here's the lighting style of our current project: http://hitboxteam.tumblr.com/image/42563981451

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?

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). 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.

Re: Flat Surface Shader

#19

Post by troels »

sheng wrote: post #4

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

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

Re: Flat Surface Shader

#20

Post by 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.
Post reply on HN