6 ms·

Flat Surface Shader

120 points by msvan 13y ago

skrebbel 13y ago
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 13y ago
  > 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 13y ago
    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/browsertest.htm http://www.fileformat.info/info/unicode/char/1f4a9/browserte...
    - cliftonk 13y ago
      Not only is WebGL not declarative, but how do you handle rendering text and having the browser know that it's text? While HTML/CSS has serious compatibility and expressive issues, it's moving in the right direction very quickly. WebGL will be fantastic for gaming and visualizations, I think it is very much inferior for web pages & applications.
      - fuckjavascript 13y ago
        Easy: provide an API for specifying text selection. Provide an API for sending things to the clipboard. You know, like every other programming platform does. It's probably about time I stopped getting irritated at how incredibly slow web development types are. There is _no_ reason for the browser to be a document browser mashed together with a distributed computing platform. Other than sheer stupidity, which there is plenty of to go around. The whole purpose of the kind of distributed computing platform that you have with asm.js, webgl etc is to build fucking applications. You know, like DOCUMENT BROWSERS.
    - nxn 13y ago
      > 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+<some CSS alternative>? 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.
  - mbell 13y ago
    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?
    - maaaats 13y ago
      You mean end up reinventing a browser inside WebGL?
      - skrebbel 13y ago
        Yes! That would be excellent. This way, browser innovation is not limited by 3 gigantic companies and a nonprofit or two fighting five-year political wars over how to draw drop shadows on rectangles. Webapp developers can just ship the browser (or, well, the renderer) with the application.
sheng 13y ago
it looks quite nice but unfortunately I guess it's by far too power hungry. My GTX 560's fan went up.
- troels 13y ago
  Your GPU powered up? I would assume this renders in CPU, so that's a bit strange.
  - belandrew 13y ago
    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 13y ago
      Didn't realise, though that makes perfectly good sense of course.
ssiddharth 13y ago
Everything renders incredibly smoothly on my setup. And I'm learning all sorts of nifty tricks via the source. Thanks for making this!
pdknsk 13y ago
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 13y ago
  Here's the lighting style of our current project: http://hitboxteam.tumblr.com/image/42563981451 http://hitboxteam.tumblr.com/image/42563981451
  - aktau 13y ago
    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 13y ago
      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.
  - rossy 13y ago
    I have to say that's beautiful. You've definitely caught my interest with this project (Spire?) I loved Dustforce too. Keep up the good work.
    - 13y ago
Detrus 13y ago
Can you do this easily with three.js? Can this library work with three.js?
sciencerobot 13y ago
> 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 13y ago
  I think the author means that it's not implemented in all the browsers that have a significant share of the browser market.
ch0wn 13y ago
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 13y ago
  On my iMac, switching between renderers definitely caused a "hiccup", and SVG was very slow on Chrome, but it looked great in all 3.
seanmcdirmid 13y ago
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-web-browser-suitable-for-harry-potter-in-wpf.aspx http://blogs.msdn.com/b/sean_mcdirmid/archive/2009/07/27/a-w... I'm not sure if it was useful though.
arcameron 13y ago
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

120 points by msvan 13y ago

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 13y ago
> 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 13y ago
  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/browsertest.htm http://www.fileformat.info/info/unicode/char/1f4a9/browserte...
  - cliftonk 13y ago
    Not only is WebGL not declarative, but how do you handle rendering text and having the browser know that it's text? While HTML/CSS has serious compatibility and expressive issues, it's moving in the right direction very quickly. WebGL will be fantastic for gaming and visualizations, I think it is very much inferior for web pages & applications.
    - fuckjavascript 13y ago
      Easy: provide an API for specifying text selection. Provide an API for sending things to the clipboard. You know, like every other programming platform does. It's probably about time I stopped getting irritated at how incredibly slow web development types are. There is _no_ reason for the browser to be a document browser mashed together with a distributed computing platform. Other than sheer stupidity, which there is plenty of to go around. The whole purpose of the kind of distributed computing platform that you have with asm.js, webgl etc is to build fucking applications. You know, like DOCUMENT BROWSERS.
  - nxn 13y ago
    > 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+<some CSS alternative>? 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.
- mbell 13y ago
  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?
  - maaaats 13y ago
    You mean end up reinventing a browser inside WebGL?
    - skrebbel 13y ago
      Yes! That would be excellent. This way, browser innovation is not limited by 3 gigantic companies and a nonprofit or two fighting five-year political wars over how to draw drop shadows on rectangles. Webapp developers can just ship the browser (or, well, the renderer) with the application.

sheng 13y ago

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

troels 13y ago
Your GPU powered up? I would assume this renders in CPU, so that's a bit strange.
- belandrew 13y ago
  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 13y ago
    Didn't realise, though that makes perfectly good sense of course.

ssiddharth 13y ago

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

pdknsk 13y ago

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 13y ago
Here's the lighting style of our current project: http://hitboxteam.tumblr.com/image/42563981451 http://hitboxteam.tumblr.com/image/42563981451
- aktau 13y ago
  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 13y ago
    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.
- rossy 13y ago
  I have to say that's beautiful. You've definitely caught my interest with this project (Spire?) I loved Dustforce too. Keep up the good work.
  - 13y ago

Detrus 13y ago

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

sciencerobot 13y ago

> 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 13y ago
I think the author means that it's not implemented in all the browsers that have a significant share of the browser market.

ch0wn 13y ago

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 13y ago
On my iMac, switching between renderers definitely caused a "hiccup", and SVG was very slow on Chrome, but it looked great in all 3.

seanmcdirmid 13y ago

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-web-browser-suitable-for-harry-potter-in-wpf.aspx http://blogs.msdn.com/b/sean_mcdirmid/archive/2009/07/27/a-w... I'm not sure if it was useful though.

arcameron 13y ago

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