Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

This is a damn impressive demo, but it's not really "in the browser". The browser is the shell, but absolutely all of the heavy lifting is being done on the GPU. No matter what you're using to push shaders over to the GPU, you're really looking at the same performance (so long as that's all that's happening -- it's obviously easy to do horrible things and slow down WebGL or D3D or whatever you happen to be using for a graphics API).


Author here! It's very true that the GPU does the heavy lifting, although I'm not sure exactly where an "in the browser" line could be drawn (conceptually any page uses the browser as an execution engine and library).

It's a bit trickier due to restrictions in WebGL (OpenGL ES based) compared to the desktop (e.g. no bitwise operators makes it a pain to get randomness that doesn't bias the result), but it's basically the same.


Could you please list literature/papers that you found especially useful while making that renderer? I plan to do the same thing for education purposes.


I've done some similar implementations years ago (but with C/OCaml, nothing on the GPU), so I didn't refer to many things for this.

Fresnel reflectance is based off of http://mathinfo.univ-reims.fr/IMG/pdf/Combined_rendering_of_..., although I'm not doing any spectral or polarization-dependent code right now (I wanted to leave that open, and it allows accurate metal simulation).

I tinkered with a blend of some pseudorandomness functions until getting something that worked.

https://www.siggraph.org/education/materials/HyperGraph/rayt... was used for ray-box intersection.

The distance function experiment for the drinking glass is based off of the concept of http://www.iquilezles.org/www/articles/distfunctions/distfun... (like raymarching, includes normal computation).

I consulted http://madebyevan.com/webgl-path-tracing/ to see the best way to do accumulation (and made some realism fixes in https://github.com/jonathanolson/webgl-path-tracing, see https://github.com/evanw/webgl-path-tracing/pull/1 for details).

Many other things can be pulled from online or from books like http://www.amazon.com/Game-Engine-Design-Interactive-Technol....

Please let me know if you have any questions, (see my email at http://jonathan-olson.com/about), and please feel free to use my code however you like (things I wrote are MIT, but I use CC-by and CC-by-non-commercial HDR images).


Thanks!


If you're interested in ray/path tracing or photorealistic rendering at all I would seriously recommend Physically Based Rendering[1]. It's probably one of the most satisfying book purchases I've made. The authors go through every aspect of implementing a quality path tracer: image sampling, surface shading models, statistics and integration methods, intersection testing and acceleration and more. It's an absolute treasure trove of information. (Be prepared to do a lot of math.)

[1] http://www.amazon.com/Physically-Based-Rendering-Second-Impl...


This is very impressive. Well done!


Thanks!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: