4 ms·

Exploring bump mapping with WebGL

80 points by swah 9y ago

biocomputation 9y ago
More and more I'm noticing "blogs" and "articles" that feel like repackaged content from other sites. This article seems like a regurgitation of information from learnopengl.com, and as such it doesn't feel noteworthy or even interesting. I'm all for cool OpenGL stuff, but there are much better examples of novel graphics stuff on places like shadertoy.com or https://experiments.withgoogle.com/chrome?tag=WebGL https://experiments.withgoogle.com/chrome?tag=WebGL.
- roywiggins 9y ago
  Unless you've already internalized how this stuff works, ShaderToy code is pretty incomprehensible. Some of it is commented, most of it isn't, and even then, GLSL is not a great literate coding language. Here's an example of a blog post I wrote "repackaging" a technique: http://roy.red/droste-.html#droste http://roy.red/droste-.html#droste Compare to the code I'd found on ShaderToy: https://www.shadertoy.com/view/4tlGRn https://www.shadertoy.com/view/4tlGRn Is it interesting if you've already spent time on this particular thing? Probably not. But it's meant to be a useful introduction, not a novel work.
  - biocomputation 9y ago
    << But it's meant to be a useful introduction, not a novel work. Yes, except it's really a copy/paste job from learnopengl.com and other sources. It's actually not a useful introduction since it just parrots stuff that is already available on other sites.
  - hackcasual 9y ago
    A lot of the shadertoy stuff is iteratively built making it even harder to tease apart. A sophisticated demo may contain a 3d noise function, a ray marcher, a signed distance field approximator etc... and there's nothing like library separations.
- leggomylibro 9y ago
  Well...sure, that's fair, but I'll bet these are mostly people who are interested in the subject and trying to learn more about it. They probably used a smattering of those resources to pull their examples together, and plan on using it as a foundation for more exciting things. But they also probably weren't entirely satisfied with the documentation they found, ran into some stumbling points that took them too long to resolve, and feel like maybe people could learn from their experiences and avoid those pitfalls. That's usually my motivation for writing a technical blog post. Sure, you might not be able to phrase it in a more succinct or comprehensible way than the tutorials that you used, but you can at least collate them in one place for others. And if nothing else, the process of putting together a detailed set of instructions to reproduce your efforts definitely helps reinforce your own understanding of the subject matter. You put "blogs" in quotation marks, but then it kind of sounds like you describe a blog.
- slavik81 9y ago
  I found this to be a very well-written piece with a nice live demo. That's valuable. Having a few explanations of the same thing is good for learning, especially when they are at varying levels of detail. For stuff that's novel, you could always browse through this year's SIGGRAPH papers. http://kesen.realtimerendering.com/sig2017.html http://kesen.realtimerendering.com/sig2017.html
callumprentice 9y ago
Great article full of useful info and live demos - thank you!
cousin_it 9y ago
Wow! Parallax occlusion mapping looks almost exactly like extra 3D detail on the model. Though I guess it wouldn't work if the details were sticking out of the face, or otherwise changing the silhouette? Is that why the demo uses a cube with concave faces?
- slackingoff2017 9y ago
  This kind of mapping hit mainstream a few years ago. Look at the ground in most games, it's not actually 3D but does a damn good appoximation. In some games you'll see real subdivision surfaces which are even more awesome but somewhat expensive. I remember being super excited when these features were making their way from software rendering to GPU years back. I would guesstimate a very large fraction of the perceived increase in game graphics have come from these techniques in recent years.
  - santaclaus 9y ago
    > In some games you'll see real subdivision surfaces Cool! What games are using subds? I thought they were mostly relegated to offline use due to evaluation cost.
    - corysama 9y ago
      I'm not certain this shipped, but there's http://www.graphics.stanford.edu/~niessner/brainerd2016efficient.html http://www.graphics.stanford.edu/~niessner/brainerd2016effic...
    - slackingoff2017 9y ago
      Too lazy to check my games right now but the Unigen Heaven benchmark was the first time I saw "tesselation", which used to be known as displacement mapping in software rendering days. Crank that thing to max and wander around a bit.
  - hughes 9y ago
    > it's not actually 3D but does a damn good appoximation That is the driving force behind almost all real time graphics! Everything from rasterization to texture sampling to transparency, to this occluding parallax example - it's not exactly correct, but close enough that when used appropriately it is convincingly real and fast.

80 points by swah 9y ago

More and more I'm noticing "blogs" and "articles" that feel like repackaged content from other sites. This article seems like a regurgitation of information from learnopengl.com, and as such it doesn't feel noteworthy or even interesting. I'm all for cool OpenGL stuff, but there are much better examples of novel graphics stuff on places like shadertoy.com or https://experiments.withgoogle.com/chrome?tag=WebGL https://experiments.withgoogle.com/chrome?tag=WebGL.

roywiggins 9y ago
Unless you've already internalized how this stuff works, ShaderToy code is pretty incomprehensible. Some of it is commented, most of it isn't, and even then, GLSL is not a great literate coding language. Here's an example of a blog post I wrote "repackaging" a technique: http://roy.red/droste-.html#droste http://roy.red/droste-.html#droste Compare to the code I'd found on ShaderToy: https://www.shadertoy.com/view/4tlGRn https://www.shadertoy.com/view/4tlGRn Is it interesting if you've already spent time on this particular thing? Probably not. But it's meant to be a useful introduction, not a novel work.
- biocomputation 9y ago
  << But it's meant to be a useful introduction, not a novel work. Yes, except it's really a copy/paste job from learnopengl.com and other sources. It's actually not a useful introduction since it just parrots stuff that is already available on other sites.
- hackcasual 9y ago
  A lot of the shadertoy stuff is iteratively built making it even harder to tease apart. A sophisticated demo may contain a 3d noise function, a ray marcher, a signed distance field approximator etc... and there's nothing like library separations.
leggomylibro 9y ago
Well...sure, that's fair, but I'll bet these are mostly people who are interested in the subject and trying to learn more about it. They probably used a smattering of those resources to pull their examples together, and plan on using it as a foundation for more exciting things. But they also probably weren't entirely satisfied with the documentation they found, ran into some stumbling points that took them too long to resolve, and feel like maybe people could learn from their experiences and avoid those pitfalls. That's usually my motivation for writing a technical blog post. Sure, you might not be able to phrase it in a more succinct or comprehensible way than the tutorials that you used, but you can at least collate them in one place for others. And if nothing else, the process of putting together a detailed set of instructions to reproduce your efforts definitely helps reinforce your own understanding of the subject matter. You put "blogs" in quotation marks, but then it kind of sounds like you describe a blog.
slavik81 9y ago
I found this to be a very well-written piece with a nice live demo. That's valuable. Having a few explanations of the same thing is good for learning, especially when they are at varying levels of detail. For stuff that's novel, you could always browse through this year's SIGGRAPH papers. http://kesen.realtimerendering.com/sig2017.html http://kesen.realtimerendering.com/sig2017.html

callumprentice 9y ago

Great article full of useful info and live demos - thank you!

cousin_it 9y ago

Wow! Parallax occlusion mapping looks almost exactly like extra 3D detail on the model. Though I guess it wouldn't work if the details were sticking out of the face, or otherwise changing the silhouette? Is that why the demo uses a cube with concave faces?

slackingoff2017 9y ago
This kind of mapping hit mainstream a few years ago. Look at the ground in most games, it's not actually 3D but does a damn good appoximation. In some games you'll see real subdivision surfaces which are even more awesome but somewhat expensive. I remember being super excited when these features were making their way from software rendering to GPU years back. I would guesstimate a very large fraction of the perceived increase in game graphics have come from these techniques in recent years.
- santaclaus 9y ago
  > In some games you'll see real subdivision surfaces Cool! What games are using subds? I thought they were mostly relegated to offline use due to evaluation cost.
  - corysama 9y ago
    I'm not certain this shipped, but there's http://www.graphics.stanford.edu/~niessner/brainerd2016efficient.html http://www.graphics.stanford.edu/~niessner/brainerd2016effic...
  - slackingoff2017 9y ago
    Too lazy to check my games right now but the Unigen Heaven benchmark was the first time I saw "tesselation", which used to be known as displacement mapping in software rendering days. Crank that thing to max and wander around a bit.
- hughes 9y ago
  > it's not actually 3D but does a damn good appoximation That is the driving force behind almost all real time graphics! Everything from rasterization to texture sampling to transparency, to this occluding parallax example - it's not exactly correct, but close enough that when used appropriately it is convincingly real and fast.