Hacker Newsnew | comments | show | ask | jobs | submit | muyyatin's comments login

I've been tracking a number of differences between how browsers render Canvas content: http://jonathan-olson.com/notes/canvas-browser-specific-quir..., and take advantage of it to use the same code to generate a different picture in every browser (http://jonathan-olson.com/experiments/browser-specific-conte...)

I'll probably need to add this one to the list!

-----


It's somewhat similar to a Flash-only website, since it has less support and most notably lacks many of the features HTML makes easy (search engine indexing, browser search-and-find, ease of development, layout, and separation of content from style).

-----


Sorry about that! I had someone else report that it fails across all browsers with the HD4400.

-----


It works well on OSX 10.10 with an HD4000 in Firefox, Chrome and even in Safari. The "framebuffer not complete" warning looks like you're using an extension which isn't supported everywhere, probably OES_texture_float or WEBGL_depth_texture?

-----


Sorry about that! Do you mind if I ask what browser and/or graphics card caused this?

-----


Firefox 30.0, Radeon HD4870

-----


I just checked http://www.browserleaks.com/webgl on Win 7, and Firefox 30's ANGLE uses Direct3D 9, whereas Chrome's Canary (v38, best performance) uses Angle with Direct3D 11.

Firefox might upgrade this sometime, but Aurora (Firefox 32) still uses Direct3D 9.

-----


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!

-----


Seems like it might make people more likely to run into camouflaged obstacles (particularly those vision-impaired). Imagine running through a park at night with camouflaged electrical boxes.

I heavily agree with painting artwork on them. A few blocks away, there is a painted electrical box that I have become quite attached to.

-----


Taking test-driven development too literally?

-----


I haven't seen it mentioned, but working for a university project funded by public and/or private grants (in my case for free educational software) is working quite well.

-----


Very nice! I'm also working on a similar scene graph (Canvas/SVG, WebGL soon), which also has bounds, DAG-support, and implicitly inserts the needed layers for performance (http://phetsims.github.io/scenery/).

I look forward to seeing what other performance optimizations I may be missing!

-----

More

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | DMCA | Apply to YC | Contact

Search: