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 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].
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.
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.
> 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.
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...
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.
The point is that all this bullshit can live in USERLAND. Whether the browser comes with some prepackaged defaults is irrelevant. The browser as it stands is a horrible mishmash of application and platform. It should be law that web developers are forced to take a course in operating systems design before posting about platform design on sites like HN.
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 :)
On WebGL, we can reinvent presentation and styling entirely without sacrificing performance.
Doing layout and capturing input events on elements in Javascript instead of native code, without performance loss? Nah. Maybe you can do it in shaders, but that still sounds like the bad old days of flash, of binary blob websites without accessibility. I'd be glad to be proved wrong, but it just sounds horrible.
Oh, but WebGL games need good UI toolkits either way, so at worst, any such stuff would still be useful for that, even if not for general websites.
I'm not sure why you're saying that accountancy is for people with "no imagination" and, more worryingly, implying that it's some sort of "lesser" profession.
Maybe he speaks from his own experience? I'm not sure how limited mine is in this regard, but having worked in/with many companies and having met quite a bit accountants/accountancy related people, I can honestly say I have not met more boring, unimaginative people. People who enter numbers from invoices/receipts into software which does the actual lifting and, when done, sign it. The latter for liability because they have a certificate, being their only advantage. For them that is; why else pay them so much? I met 1 creative accountant/party animal in Spain who is now in jail for fraud. This is my own experience which is limited to only about 80 accountancy related people (I worked for a big French insurance company where actuaries created spreadsheets we implemented in code), so i'm not generalizing, just saying he might have the same experience.
When centering an element on a screen, ask yourself whether not it's necessary.
I would personally like to get rid of the presentation layer, not because I hate art(I do lots of web design and development) but because it's an enormous waste of time for the users, creators, and traffickers of those data.
I would prefer to read all blogs the same way I read IRC, email, XMPP, source code, logs... And I mostly achieve this, but addiction to the presentation layer on the web prevents me from having this typographic and stylistic consistency for blogs, news articles, and the whole shebang.
Before trying to convert the concept of modal dialogues and print ads to the web, ask yourself if this is what you really wanted.
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?
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.
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.
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.
> 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).
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.
38 comments
[ 4.5 ms ] story [ 96.0 ms ] threadIt'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 [2] http://www.fileformat.info/info/unicode/char/1f4a9/browserte...
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.
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.
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...
You don't have to throw out the whole shebang to fix that class of issues :)
Doing layout and capturing input events on elements in Javascript instead of native code, without performance loss? Nah. Maybe you can do it in shaders, but that still sounds like the bad old days of flash, of binary blob websites without accessibility. I'd be glad to be proved wrong, but it just sounds horrible.
Oh, but WebGL games need good UI toolkits either way, so at worst, any such stuff would still be useful for that, even if not for general websites.
I would personally like to get rid of the presentation layer, not because I hate art(I do lots of web design and development) but because it's an enormous waste of time for the users, creators, and traffickers of those data.
I would prefer to read all blogs the same way I read IRC, email, XMPP, source code, logs... And I mostly achieve this, but addiction to the presentation layer on the web prevents me from having this typographic and stylistic consistency for blogs, news articles, and the whole shebang.
Before trying to convert the concept of modal dialogues and print ads to the web, ask yourself if this is what you really wanted.
Webapp developers can just ship the browser (or, well, the renderer) with the application.
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.
I loved Dustforce too. Keep up the good work.
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).
http://blogs.msdn.com/b/sean_mcdirmid/archive/2009/07/27/a-w...
I'm not sure if it was useful though.
I think WebGL has a lot of potential, feel free to check out my hackish background bump mapping @
http://anthonycameron.com/lab/background-bumps