Away3D in WebGL with TypeScript

Away3D TypeScript Tutorials

Getting Started
Camera Control
Basic Objects
[ezcol_1third] [/ezcol_1third][ezcol_1third] [/ezcol_1third][ezcol_1third_end] [/ezcol_1third_end][ezcol_end_both]
Lights
Shadows
Materials
Others

In October of 2013 the Away3D Team announced the first official release of Away3D TypeScript. This is great news for web programmers that wanted a 3D GPU rendering option, and Adobe’s Flash Player was not an option. Using Google’s WebGL standard, 3D scenes are now available on the HTML5 canvas element. No Flash Player required. Bonus, many newer mobile devices are inherently WebGL enabled. Check out some of Away3D’s official examples.

The Away3D library was ported to TypeScript. TypeScript matures JavaScript into a fuller Object Oriented Programing language. Once coded, the TypeScript file is compiled into native JavaScript that most modern browsers can read no problem.

Still being a relatively new platform, there is a serious lack of tutorials on how to use this powerful 3D library in TypeScript. Hence, I’ve taken it upon myself to produce the above Away3D Typescript tutorials.

Where to start

If you are absolutely new to TypeScript, I highly suggest this short tutorial by the good ol’ boys of the Away3D Foundation. Away3D TypeScript – Getting Started.

If you are absolutely new to Away3D, in the tutorial Away3D TypeScript: Bare Minimum Scene I cover the code line-by-line, explaining all the necessities of a minimal Away3D scene. This is then followed up with another tutorial Away3D TypeScript: in an HTML Document on how to implement the complied TypeScript-to-JavaScript file in an HTML document.

If you are comfortable with Away3D, TypeScript, and programing in general, jump to any tutorial of interest, but take note that most of these tutorials are built off of the Away3D TypeScript: Template tutorial.

Good Luck!

I hope you learn everything you need to know to get you off experimenting and designing on your own. We would love to see any projects that you build from the knowledge you learned here.

Thank you for stopping by. Follow us on Facebook or Twitter to keep informed of upcoming tutorials.

Grok Digital Designs

Leave a Reply

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

*