9 ms·

Faster 3D rendering with WebGL 2.0

177 points by DanielRibeiro 10y ago

willvarfar 10y ago
I liked the After the Flood https://playcanv.as/e/p/44MRmJRU/ https://playcanv.as/e/p/44MRmJRU/ linked to in the post, but was disappointed by the lack of shadows cast by the leaves and that blowing leaves intersected and passed through each other. Its still very distinctly computer generated.
- sillysaurus3 10y ago
  That's true of literally every computer-generated video. Side-by-side camcoder footage shows no contest in terms of realism. I devoted several years to this, and there are a bunch of reasons why that ends up being the case. The main issue is, think of how many atoms there are. Now realize the actual number of atoms is for all intents and purposes infinitely larger than whatever you thought of. Ok, so we try to approximate. Right away you run into problems. What we call "light" is just a set of photons entering our eyes. Each photon has a wavelength. Our eyes do a compression algorithm in our retina -- our brains do not receive a "count" of the number of photons entering our eye. Instead, our retina cells themselves are responsible for coming up with an average of all the photons hitting it, and sending a signal to our brain: that's color. Anyone who has any graphics experience whatsoever will know that it's an extremely common operation to calculate lighting by multiplying a light's color with an RGB texture. (The leaf's texture, say.) Now, tell me: What does it mean to "multiply" two colors together? Nothing! It's fake! It has no basis in reality whatsoever. It literally is an astonishing approximation that happens to work reasonably well. But our brains know the difference, inchoately, when you look at a real video vs a computer-generated video. You can tell that there's something almost indescribably "off" about the CG video. And I suspect it's because the final product consists of a series of approximations that work well in isolation but are not quite perfect when it comes to simulating reality. Combine that with a lack of detail in CG video due to the fact that there are a gazillion atoms in real life and only a few million triangles in CG life, and you will always end up with experiences that are very distinctly computer generated. Defeatist! Call me names! Say we can do better! Say that the latest advances in graphics and raw computing horsepower will solve these concerns. Maybe they will. But most importantly, I dare you to get so frustrated with our lack of ability to generate truly realistic computer video that you take on the problem yourself, and dive into the field with your whole heart. Surpass me. Surpass what everyone thinks is possible. Question the fundamental assumptions that the entire field is based on: that `N dot L x diffuse` is even slightly reasonable. Create your own "diffuse" textures that stores counts of photons bucketed by wavelength, measured from a real-life data source, instead of RGB colors. Try fifty things that everyone dismisses as unpromising, because whatever the final solution looks like, it's going to be unlike anything we're doing right now. Cracking the problem of realistic video isn't going to happen with incremental improvements of our current techniques. Remember this rule of thumb: A video that's indistinguishable from real life will appear equally real to both humans and animals. A cat, for example, would think your video is real, if it's viewing your video on a monitor calibrated to cat eyes instead of human eyes. It's more productive not to take the field too seriously, and to fall in love with the endless puzzles and challenges that graphics programming affords. Once you accept that the game is to generate something that looks cool, not that looks real, everything falls into place.
  - JoshTriplett 10y ago
    I've seen images rendered using "path tracing" (https://en.wikipedia.org/wiki/Path_tracing https://en.wikipedia.org/wiki/Path_tracing) which look literally photorealistic (indistinguishable from a photograph).
    - gmac 10y ago
      Right, it's photorealistic, but the scene content in that example has been carefully chosen to make the task feasible. It's clean and shiny and abstract.
      - willvarfar 10y ago
        The image on wikipedia doesn't do it justice. There are many path tracing examples from siggraph, on youtube and showing up on images.google.com searches for path tracing.
        tudorw 10y ago
        These gems look nice, http://www.rigidgems.sakura.ne.jp/gallery_en.html#movie http://www.rigidgems.sakura.ne.jp/gallery_en.html#movie and found this but my Russian is worse than my Japanese, https://www.youtube.com/watch?v=xfTvJi774-s https://www.youtube.com/watch?v=xfTvJi774-s
        sillysaurus3 10y ago
        For context, I think the only thing computer-generated in that youtube video is the monkey head and its shadow. The rest is real life footage.
        tudorw 10y ago
        thanks I thought the detritus in the scene was very real, dirt and dust are still hard to get right!
      - 10y ago
roschdal 10y ago
Developers are welcome to help update Freeciv WebGL 3D to WebGL 2.0. https://play.freeciv.org https://play.freeciv.org
mixedbit 10y ago
According to webglstats.com WebGL is supported on 96% of browsers/devices. I wonder what is a maximum possible coverage to be achieved by WebGL2 with current hardware (If I understand correctly some WebGL capable devices will never be able to support WebGL2 due to hardware limitations).
- pjmlp 10y ago
  WebGL 2.0 requires OpenGL ES 3.0 capable hardware, plus that browser vendors don't black list drivers/GPUs. I have a few OpenGL ES 3.x devices that Chrome doesn't like, but native games don't have any problem taking full advantage of the GPU. EDIT: forgot the version
- aedron 10y ago
  I would love to start using it, but most WebGL content I try to view fails (some error message that it is not supported). This is true on the last three (different) computers I have used (all some recent Windows/Chrome combination). Sometimes it can be enabled via some flag, but that is useless for real world solutions.
- overgard 10y ago
  On PC it's probably no difference. WebGL 1 is a really low baseline -- its based on an ES spec from 2007. ES3/webGL2 isn't super cutting edge. In terms of mobile I dont think webgl is that useful anyway (too much overhead), but pretty much every high end device newer than 2013 should support it.
  - iainmerrick 10y ago
    Too much overhead? Can you go into more detail? Part of the point of OpenGL is to offload as much computation as possible to the GPU. There's a lot of very cool stuff you can do with barely any CPU usage at all, so even if you're using JavaScript it shouldn't make much difference. (High-end games still need a lot of CPU power too, of course)
    - overgard 10y ago
andrew3726 10y ago
Relevant Talk from GDC17: "Reach the Largest Gaming Platform of All: The Web. WebGL, WebVR and glTF" [0] [0] https://www.youtube.com/watch?v=jLNtjujPhzY https://www.youtube.com/watch?v=jLNtjujPhzY
- jabl 10y ago
  Another GDC17 talk with the other side of the coin: https://deplinenoise.files.wordpress.com/2017/03/webtoolspostmortem.pdf https://deplinenoise.files.wordpress.com/2017/03/webtoolspos... (Not specifically anything to do with webgl, more about using web tools vs. native for a non-trivial application)
uegwqhugehoq 10y ago
does WebGL 2 have geometry shaders ?
- jsheard 10y ago
  Nope, and it doesn't have compute or tessellation shaders either. Web 3D has a way to go before it catches up with native APIs.
  - pjmlp 10y ago
    Every time I see something done with it, versus what native code can do on the exact same hardware, I reach the conclusion it is only useful for DX 9 class graphics or just plain prototyping.
    - goldfire 10y ago
      DX 9 class graphics are great for a lot of applications. Not every project has to be at the cutting edge of rendering technique to achieve its goals.
      - pjmlp 10y ago
        Which is a waste of resources already on a DX 10 level card, which were released alongside Windos 7, almost 10 years ago. When will we get a 3D Web API that can do DX11 class graphics? And I am already leaving out DX12, Vulkan level cards.
- sp332 10y ago
  Just curious, what's a practical application of geometry shaders?
  - rudi-c 10y ago
    Geometry Shaders allows you to generate a variable number of vertices based on an input vertex. This is necessary in some cases where you generate models procedurally (e.g. particle animations, terrain generation). It's possible in theory to allocate a lot of vertices up front (up to the maximum that could be generated). If, for example, an input vertex can generate up to 15 vertices (as is the case of the marching cubes algorithm), you could just create those 15 vertices upfront and set the values of the one you don't need to something that will make it not render (e.g. degenerate triangle). But then your actual vertices become a lot more sparse and performance drops because of all the wasted work done on the throwaway vertices.
ionwake 10y ago
Sorry for the ignorance but : 1- will devices remain backwards compatible with webgl 1 ? 2- will three.js be able to easily update to this version ?
- roschdal 10y ago
  > 1- will devices remain backwards compatible with webgl 1 Yes. > 2- will three.js be able to easily update to this version ? https://github.com/mrdoob/three.js/issues/9965 https://github.com/mrdoob/three.js/issues/9965
  - ehsankia 10y ago
    I'm still not fully clear with #1. If your device only supports WebGL1, but the site uses getContext('webgl2'), you'd get an error right? So if your application can work with WebGL1, you should use that if you want to reach maximal audience? Also, is it all or nothing? Could certain parts of WebGL2 work and others not be supported? Could you get away with using webgl2 if you don't use certain advanced features?
    - deleted 10y ago
      [deleted]
    - sillysaurus3 10y ago
      Welcome to graphics programming! Enjoy your stay! (Yes. To everything. Except "Could certain parts of WebGL2 work and others not be supported?" -- The point of having a spec is that if your graphics driver advertises support for WebGL XX, then you can be sure the host is capable of running all the features of XX, short of bugs in the driver.)
supernumerary 10y ago
A good place to start: https://webgl2fundamentals.org/webgl/lessons/webgl-fundamentals.html https://webgl2fundamentals.org/webgl/lessons/webgl-fundament...
NickBusey 10y ago
The fact that the Chromium blog requires JS to display some text and one image is kind of ridiculous.
- uwu 10y ago
  i disabled scripts and the article is visible in a noscript element for me it's like in this meme: https://i.imgur.com/TUEABrP.jpg https://i.imgur.com/TUEABrP.jpg the majority of users don't go out of their way to disable scripts so i can totally understand it when site owners refuse to waste time (= money) catering to the needs of the small fraction of users that do
cr0sh 10y ago
First off - this is a great thing to hear; I'm glad that WebGL is advancing. That said, there are a few voices hear bemoaning the fact that this update still isn't up-to-par with the latest native API abilities or whatnot. These kind of comments remind me of comments complaining about artificial intelligence not being useful because it can't do x/y/z (ie - something that a human can do), and so it is worthless. Never mind the fact that when x/y/z tasks are demonstrated, the goal posts are moved to a/b/c... I see the same thing here with WebGL. Personally, I feel this is unfair. Instead of complaining about what it can't do, instead one should work with it and push it to do what it can do. I dare-say that in the hands of talent, the current WebGL could easily do things that would be almost considered "impossible". By talent, I mean those who really push the capabilities of hardware and software, pulling tricks and such to maximize the apparent capability (demoscene). Even with that taken off the table, though - WebGL (even 1.0) can still do things and represent ideas and worlds in enough detail to be fun for a game or other use. I feel that those who complain will always complain. Instead, those who can - use it! So what if it isn't perfect; I dare say that a Infocom's Zork is a better game than many of today's triple-A FPS shooters or whatnot! Graphics aren't everything; if you know what you are doing, you can make a compelling and fun game today without them - there are plenty of recent IF titles to attest to that. I sometimes wonder if the complaints aren't excuses or something; that developers are complaining about WebGL because they don't want to move the the platform of the web browser (for some reason)? So any excuse not to develop on the platform is a valid excuse? Perhaps. For me, what I see in WebGL is extreme promise; in fact, it holds it right now, with WebGL 1.0 - if more people would just develop for it. Maybe I'm just biased, having grown up with computers from a time when the idea of 3D graphics was either simple wire-frames or other slow software rendering - or you dropped many thousands to tens-of-thousands of dollars on hardware to get output that wouldn't even be worthy of the old-school Quake engine. For me, what I see with WebGL blows me away, despite it not being "realistic". It's realistic enough for me to see compelling action and stories developed with it. ...and with native API access? Well - what little I have seen (because I run *nix and you don't see much there) - it's amazing. One day it will be on the browser too. But what we have already available, in the right hands, should be more than enough. So quit complaining, and get to creating. /personally wish I had the talent to work in this field...
- 10y ago
blockoperation 10y ago
I'm still waiting for Chromium to add a per-site switch for WebGL (just like for JS, cookies, Flash, etc). Enabling WebGL globally seems like a disaster waiting to happen, even with sanitisation and sandboxing.

177 points by DanielRibeiro 10y ago

I liked the After the Flood https://playcanv.as/e/p/44MRmJRU/ https://playcanv.as/e/p/44MRmJRU/ linked to in the post, but was disappointed by the lack of shadows cast by the leaves and that blowing leaves intersected and passed through each other. Its still very distinctly computer generated.

sillysaurus3 10y ago
That's true of literally every computer-generated video. Side-by-side camcoder footage shows no contest in terms of realism. I devoted several years to this, and there are a bunch of reasons why that ends up being the case. The main issue is, think of how many atoms there are. Now realize the actual number of atoms is for all intents and purposes infinitely larger than whatever you thought of. Ok, so we try to approximate. Right away you run into problems. What we call "light" is just a set of photons entering our eyes. Each photon has a wavelength. Our eyes do a compression algorithm in our retina -- our brains do not receive a "count" of the number of photons entering our eye. Instead, our retina cells themselves are responsible for coming up with an average of all the photons hitting it, and sending a signal to our brain: that's color. Anyone who has any graphics experience whatsoever will know that it's an extremely common operation to calculate lighting by multiplying a light's color with an RGB texture. (The leaf's texture, say.) Now, tell me: What does it mean to "multiply" two colors together? Nothing! It's fake! It has no basis in reality whatsoever. It literally is an astonishing approximation that happens to work reasonably well. But our brains know the difference, inchoately, when you look at a real video vs a computer-generated video. You can tell that there's something almost indescribably "off" about the CG video. And I suspect it's because the final product consists of a series of approximations that work well in isolation but are not quite perfect when it comes to simulating reality. Combine that with a lack of detail in CG video due to the fact that there are a gazillion atoms in real life and only a few million triangles in CG life, and you will always end up with experiences that are very distinctly computer generated. Defeatist! Call me names! Say we can do better! Say that the latest advances in graphics and raw computing horsepower will solve these concerns. Maybe they will. But most importantly, I dare you to get so frustrated with our lack of ability to generate truly realistic computer video that you take on the problem yourself, and dive into the field with your whole heart. Surpass me. Surpass what everyone thinks is possible. Question the fundamental assumptions that the entire field is based on: that `N dot L x diffuse` is even slightly reasonable. Create your own "diffuse" textures that stores counts of photons bucketed by wavelength, measured from a real-life data source, instead of RGB colors. Try fifty things that everyone dismisses as unpromising, because whatever the final solution looks like, it's going to be unlike anything we're doing right now. Cracking the problem of realistic video isn't going to happen with incremental improvements of our current techniques. Remember this rule of thumb: A video that's indistinguishable from real life will appear equally real to both humans and animals. A cat, for example, would think your video is real, if it's viewing your video on a monitor calibrated to cat eyes instead of human eyes. It's more productive not to take the field too seriously, and to fall in love with the endless puzzles and challenges that graphics programming affords. Once you accept that the game is to generate something that looks cool, not that looks real, everything falls into place.
- JoshTriplett 10y ago
  I've seen images rendered using "path tracing" (https://en.wikipedia.org/wiki/Path_tracing https://en.wikipedia.org/wiki/Path_tracing) which look literally photorealistic (indistinguishable from a photograph).
  - gmac 10y ago
    Right, it's photorealistic, but the scene content in that example has been carefully chosen to make the task feasible. It's clean and shiny and abstract.
    - willvarfar 10y ago
      The image on wikipedia doesn't do it justice. There are many path tracing examples from siggraph, on youtube and showing up on images.google.com searches for path tracing.
      - tudorw 10y ago
        These gems look nice, http://www.rigidgems.sakura.ne.jp/gallery_en.html#movie http://www.rigidgems.sakura.ne.jp/gallery_en.html#movie and found this but my Russian is worse than my Japanese, https://www.youtube.com/watch?v=xfTvJi774-s https://www.youtube.com/watch?v=xfTvJi774-s
        sillysaurus3 10y ago
        For context, I think the only thing computer-generated in that youtube video is the monkey head and its shadow. The rest is real life footage.
        tudorw 10y ago
        thanks I thought the detritus in the scene was very real, dirt and dust are still hard to get right!
    - 10y ago

roschdal 10y ago

Developers are welcome to help update Freeciv WebGL 3D to WebGL 2.0. https://play.freeciv.org https://play.freeciv.org

mixedbit 10y ago

According to webglstats.com WebGL is supported on 96% of browsers/devices. I wonder what is a maximum possible coverage to be achieved by WebGL2 with current hardware (If I understand correctly some WebGL capable devices will never be able to support WebGL2 due to hardware limitations).

pjmlp 10y ago
WebGL 2.0 requires OpenGL ES 3.0 capable hardware, plus that browser vendors don't black list drivers/GPUs. I have a few OpenGL ES 3.x devices that Chrome doesn't like, but native games don't have any problem taking full advantage of the GPU. EDIT: forgot the version
aedron 10y ago
I would love to start using it, but most WebGL content I try to view fails (some error message that it is not supported). This is true on the last three (different) computers I have used (all some recent Windows/Chrome combination). Sometimes it can be enabled via some flag, but that is useless for real world solutions.
overgard 10y ago
On PC it's probably no difference. WebGL 1 is a really low baseline -- its based on an ES spec from 2007. ES3/webGL2 isn't super cutting edge. In terms of mobile I dont think webgl is that useful anyway (too much overhead), but pretty much every high end device newer than 2013 should support it.
- iainmerrick 10y ago
  Too much overhead? Can you go into more detail? Part of the point of OpenGL is to offload as much computation as possible to the GPU. There's a lot of very cool stuff you can do with barely any CPU usage at all, so even if you're using JavaScript it shouldn't make much difference. (High-end games still need a lot of CPU power too, of course)
  - overgard 10y ago

andrew3726 10y ago

Relevant Talk from GDC17: "Reach the Largest Gaming Platform of All: The Web. WebGL, WebVR and glTF" [0] [0] https://www.youtube.com/watch?v=jLNtjujPhzY https://www.youtube.com/watch?v=jLNtjujPhzY

jabl 10y ago
Another GDC17 talk with the other side of the coin: https://deplinenoise.files.wordpress.com/2017/03/webtoolspostmortem.pdf https://deplinenoise.files.wordpress.com/2017/03/webtoolspos... (Not specifically anything to do with webgl, more about using web tools vs. native for a non-trivial application)

uegwqhugehoq 10y ago

does WebGL 2 have geometry shaders ?

jsheard 10y ago
Nope, and it doesn't have compute or tessellation shaders either. Web 3D has a way to go before it catches up with native APIs.
- pjmlp 10y ago
  Every time I see something done with it, versus what native code can do on the exact same hardware, I reach the conclusion it is only useful for DX 9 class graphics or just plain prototyping.
  - goldfire 10y ago
    DX 9 class graphics are great for a lot of applications. Not every project has to be at the cutting edge of rendering technique to achieve its goals.
    - pjmlp 10y ago
      Which is a waste of resources already on a DX 10 level card, which were released alongside Windos 7, almost 10 years ago. When will we get a 3D Web API that can do DX11 class graphics? And I am already leaving out DX12, Vulkan level cards.
sp332 10y ago
Just curious, what's a practical application of geometry shaders?
- rudi-c 10y ago
  Geometry Shaders allows you to generate a variable number of vertices based on an input vertex. This is necessary in some cases where you generate models procedurally (e.g. particle animations, terrain generation). It's possible in theory to allocate a lot of vertices up front (up to the maximum that could be generated). If, for example, an input vertex can generate up to 15 vertices (as is the case of the marching cubes algorithm), you could just create those 15 vertices upfront and set the values of the one you don't need to something that will make it not render (e.g. degenerate triangle). But then your actual vertices become a lot more sparse and performance drops because of all the wasted work done on the throwaway vertices.

ionwake 10y ago

Sorry for the ignorance but : 1- will devices remain backwards compatible with webgl 1 ? 2- will three.js be able to easily update to this version ?

roschdal 10y ago
> 1- will devices remain backwards compatible with webgl 1 Yes. > 2- will three.js be able to easily update to this version ? https://github.com/mrdoob/three.js/issues/9965 https://github.com/mrdoob/three.js/issues/9965
- ehsankia 10y ago
  I'm still not fully clear with #1. If your device only supports WebGL1, but the site uses getContext('webgl2'), you'd get an error right? So if your application can work with WebGL1, you should use that if you want to reach maximal audience? Also, is it all or nothing? Could certain parts of WebGL2 work and others not be supported? Could you get away with using webgl2 if you don't use certain advanced features?
  - deleted 10y ago
    [deleted]
  - sillysaurus3 10y ago
    Welcome to graphics programming! Enjoy your stay! (Yes. To everything. Except "Could certain parts of WebGL2 work and others not be supported?" -- The point of having a spec is that if your graphics driver advertises support for WebGL XX, then you can be sure the host is capable of running all the features of XX, short of bugs in the driver.)

supernumerary 10y ago

A good place to start: https://webgl2fundamentals.org/webgl/lessons/webgl-fundamentals.html https://webgl2fundamentals.org/webgl/lessons/webgl-fundament...

NickBusey 10y ago

The fact that the Chromium blog requires JS to display some text and one image is kind of ridiculous.

uwu 10y ago
i disabled scripts and the article is visible in a noscript element for me it's like in this meme: https://i.imgur.com/TUEABrP.jpg https://i.imgur.com/TUEABrP.jpg the majority of users don't go out of their way to disable scripts so i can totally understand it when site owners refuse to waste time (= money) catering to the needs of the small fraction of users that do

cr0sh 10y ago

First off - this is a great thing to hear; I'm glad that WebGL is advancing. That said, there are a few voices hear bemoaning the fact that this update still isn't up-to-par with the latest native API abilities or whatnot. These kind of comments remind me of comments complaining about artificial intelligence not being useful because it can't do x/y/z (ie - something that a human can do), and so it is worthless. Never mind the fact that when x/y/z tasks are demonstrated, the goal posts are moved to a/b/c... I see the same thing here with WebGL. Personally, I feel this is unfair. Instead of complaining about what it can't do, instead one should work with it and push it to do what it can do. I dare-say that in the hands of talent, the current WebGL could easily do things that would be almost considered "impossible". By talent, I mean those who really push the capabilities of hardware and software, pulling tricks and such to maximize the apparent capability (demoscene). Even with that taken off the table, though - WebGL (even 1.0) can still do things and represent ideas and worlds in enough detail to be fun for a game or other use. I feel that those who complain will always complain. Instead, those who can - use it! So what if it isn't perfect; I dare say that a Infocom's Zork is a better game than many of today's triple-A FPS shooters or whatnot! Graphics aren't everything; if you know what you are doing, you can make a compelling and fun game today without them - there are plenty of recent IF titles to attest to that. I sometimes wonder if the complaints aren't excuses or something; that developers are complaining about WebGL because they don't want to move the the platform of the web browser (for some reason)? So any excuse not to develop on the platform is a valid excuse? Perhaps. For me, what I see in WebGL is extreme promise; in fact, it holds it right now, with WebGL 1.0 - if more people would just develop for it. Maybe I'm just biased, having grown up with computers from a time when the idea of 3D graphics was either simple wire-frames or other slow software rendering - or you dropped many thousands to tens-of-thousands of dollars on hardware to get output that wouldn't even be worthy of the old-school Quake engine. For me, what I see with WebGL blows me away, despite it not being "realistic". It's realistic enough for me to see compelling action and stories developed with it. ...and with native API access? Well - what little I have seen (because I run *nix and you don't see much there) - it's amazing. One day it will be on the browser too. But what we have already available, in the right hands, should be more than enough. So quit complaining, and get to creating. /personally wish I had the talent to work in this field...

10y ago

blockoperation 10y ago

I'm still waiting for Chromium to add a per-site switch for WebGL (just like for JS, cookies, Flash, etc). Enabling WebGL globally seems like a disaster waiting to happen, even with sanitisation and sandboxing.