Update on the simplistic 3D renderer for Canvas 2D: TinyDim

Demo

You control the demo mainly by left/right dragging the mouse, but some basic, unoptimized support for keyboard navigation is in there as well (Arrow Key/PgUp/PgDn). If you click on a face it will light up briefly and you can now enter a new color in the fields below the canvas.

A guy named Luke recently posted a comment on a three year old post that I honestly had mostly forgotten about: “Canvas 3D Renderer updated“. It was about one of the first Javascript programs capable of rendering a file exported from a 3D program without a plugin.

There are by now several such engines using Canvas 2D, a good deal of them more advanced, faster and better supported. However: TinyDim, which was the name I used when I compiled that sample into a sort of generic Javascript library has its advantages in being small, simple, easy to understand and therefore easy to hack and extend.

So this is a sort of update what has happened since then: I’ve actually used TinyDim sometimes and it has received some level of basic optimization at the code level (it’s still missing any structural optimizations like caching or viz-areas), but I never got around to post about it. It now has support for one global light and has its own mouse navigation class for when you just want to view a static 3D model. Support for colored faces is still only hacked in with a proprietary format (although that would be easy to change, you just have to write a MAT file parser) and It can return the face you’ve clicked on.

So, if you want to hack in texture support using this technique or anything else, be my guest 🙂

3 thoughts on “Update on the simplistic 3D renderer for Canvas 2D: TinyDim”

  1. I am interested to learn about the techniques being used to render 3d images he best way possible but I am having a hard time getting the basics. Are there any video tutrials you could point me to?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.