HN Academy

Here is a Udacity course using webgl: https://www.udacity.com/course/interactive-3d-graphics--cs29...

Here is the Class Central page with reviews: https://www.classcentral.com/course/udacity-interactive-3d-g... You can search for other courses on class central, though searching for webgl didn't actually find the Udacity course - had to look at related courses for a no longer available Coursera course listing that searching did find.

Edit: Also, Packt's free ebook of the day is currently Learn Three.js, which is a wrapper around webgl. Only available for the next 9 hours or so. If you don't have a packt subscription, you can only read it in a web browser. https://www.packtpub.com/free-learning

I haven't taken it myself (but will sometime in the future), but I've read great things about this Udacity course taught by Eric Haines: https://www.udacity.com/course/interactive-3d-graphics--cs29...

You can read a couple of reviews here: https://www.coursetalk.com/providers/udacity/courses/interac...

⬐ xwvvvvwx

Working through this now.

Totally blown away by what can be achieved with WebGL...

For people looking for resources to get started, I recently went through: https://www.udacity.com/course/interactive-3d-graphics--cs29....

It is taught using three.js which is a very very easy to use wrapper library around webgl. If you don't have a graphics background you can still make very pretty things with it.

This is a very, very cool performance benchmark for CSS operations but for the love of god, don't ever even think about using it in production if there is a slightest chance a) someone else would need to maintain your code b) modify the content.

If you actually want to implement 3D graphics in production, please learn it first from a proper source.

This free online course get's you up and running on the basics of 3D graphics with WebGL: https://www.udacity.com/course/cs291

There are fairly decent books on WebGL available as well which also run you through the basics.

To get coherent 3D stuff going you need to actually understand what is going on at a fairly deep level, or you will just ruin everyones day who is a stakeholder in your project. Learn to use Blender at least on a rudimentary level. Learn WebGL. Figure out how to get the 3D content from Blender to your renderer. Then reconsider this.

[Note: I have a few years of professional graphics programming under my belt so I think I know what I am talking about.]

⬐ unwind

I think it would help decrease your snarkiness meter reading if you also provided some specific, constructive, criticism.

What major mistakes are the author doing due to not knowing (as you seem to infer) 3D graphics well enough?

I, for one, was impressed (after grudging a bit about the talk about rectangles in the intro, which I think should be triangles to be more specific but I could be wrong, it's been a while).

⬐ fsloth

Sorry about the snarkiness, I was aiming rather for "opinionated".

IMO, there are no "mistakes" in implementing how the graphics behave as they are. I'm not putting down the author, the demo is cool like I said. No, sorry, it's friggin awesome.

But! It's not an advisable production environment prototype.

First of, the content path is a bit more non-obvious than using more established methods. The extension mechanisms to the technique, as the author himself stipulated, are quite tricky.

WebGL was created specifically for rendering 3D graphics on the browser. I'm not an expert on the exact state of the art browser rendering implementations but I would expect the OpenGL context would offer a more consistent rendering on a larger set of end user devices/browsers than depending on the correctness of implementation of CSS transitions, or, on mobile devices, at least more battery friendly.

Now, if someone is looking into implementing a realtime 3D rendering solution to ones non-hobby webpage, it would make sense to research established techniques and understanding what someone is actually doing rather than jump in with this technique since to use it properly, I think you still need to grok all the stuff about linear algebra and shading models that are exposed in a structured manned e.g. in the course I linked.

I began my computer graphics hobby stumbling with vague hacky techniques years ago until I found out there was an entire well established field that teaches and extends this stuff at which point I cursed I had not found the courses and the books earlier. Just trying to save anyone's time who finds this sort of thing fascinating.

I have known a legacy codebase that would be _a_lot_better_ in every aspect had the original authors used well known graphics concepts to structure the system rather than kludges they made up along the way while re-inventing the wheel. The core concepts in 3D graphcis are not among the most complex technical things. However, there are lots of tricks and such you either need to discover on your own or read up. If you just ignore the established literature and best practices you will probably lose a lot of time hitting your head against a wall that would have been better used in drawing pretty pictures :)

Udacity has a nice looking WebGL intro course:

https://www.udacity.com/course/cs291

If you're seriously interested in learning about 3D rendering and have some programming (and some linear algebra) experience, you should look into Udacity's CS291 course.

https://www.udacity.com/course/cs291

⬐ jmgrosen

Awesome, thanks! Programming experience I definitely have, and some linear algebra... although I'll be taking that course soon. Again, thanks!

CS291, interactive rendering (https://www.udacity.com/course/cs291), is WebGL based. The instructor is Eric Haines, one of the authors of Real-Time Rendering, so I'm guessing the course will be a solid intro to real-time graphics that goes beyond a how to use WebGL tutorial.

⬐ akshayaurora

The course should be interesting, it shall be teaching everything through Three.js.

⬐ None

None