Away3D – TypeScript: http://kurst.co.uk/samples/awayts/textorus/

For the past 8 weeks +Gary Paluk  (@plugin_io) and I have been porting the Away3D engine to TypeScript.

At the start of the project (and after some lengthy discussions) we decided the best way to create a seam between AS3 and the TypeScript port would be to convert parts of the flash API to TypeScript (TS) and have those slot in, with hopefully, minimal impact to the code base. 

We started by porting the following parts of the native AS3 API:

Display3D: https://github.com/away3d/away3d-core-ts/tree/master/src/away/display3D
Display: https://github.com/away3d/away3d-core-ts/tree/master/src/away/display
Geom: https://github.com/away3d/away3d-core-ts/tree/master/src/away/geom
Net: https://github.com/away3d/away3d-core-ts/tree/master/src/away/net

It quickly became apparent that we had made a good decision. Within a few weeks we had the Away3D AssetLibrary working, loading and displaying textures using the TypeScript Net classes, BitmapData and Display3D. 

It was particularly useful to adapt the TypeScript API to be as close as possible to the Flash APIs so programming in TypeScript became automatically intuitive and familiar and also means that porting existing code from flash projects is a whole lot easier.

https://github.com/away3d/away3d-core-ts/blob/master/tests/away/net/URLLoaderTests.ts
https://github.com/away3d/away3d-core-ts/blob/master/tests/away/display/BitmapDataTest.ts

Having all this working was our proof of concept, alongside the demos Gary was working on with the Display3D TypeScript classes and GLSL shaders:

https://dl.dropboxusercontent.com/u/94775998/WebGL/Demo9/index.html

The next step was the bulk of the port that consisted of a lot of classes. We are working with a redacted version of Away3D consisting of about 380 classes, not including all the native API classes we created. That was perhaps the most difficult part of the project so far – as Away3D needed to have to have a lot of dependencies in place before anything could work. Materials, Entities, Partitioning, Geometries, Managers … 

As of today we have ported more than two thirds of the redacted API – which, conceptually, was enough to get a visual. Our port of the materials kept the AGAL as it was in AS3, which we were using to compare against those in AS3 to make sure it all matched up. 

At that stage we still did not have a visual – aside from technical demos that tested Display3D functionality. It was very much a chicken and egg situation. 

We also found some JavaScript code that dynamically converted AGAL to GLSL - This was converted to TypeScript and... It worked! Here is a demo: http://kurst.co.uk/samples/awayts/aglsl/, which produces a valid GLSL vertex and fragment shader from AGAL. 

The code for AGLSL is here: https://github.com/away3d/away3d-core-ts/tree/master/src/aglsl

There is another big win to this approach: Flash AS3 ports will be able to use the AGAL from their projects or let Flash developers work with what is familiar whilst also being able to take advantage of using the GLSL system when desired.

The AGLSL system was then integrated back into the Context3D (we created an AGLSLContext3D for this). Theoretically we now had everything we needed to get a visual and start debugging in earnest.  

One of the most frustrating parts of the project so far was having that blank canvas and working towards getting a visual – and not knowing if we were a hundred or one bug away from having it working. 

This culminated in a week worth testing differentials between a scene in AS3 against a similar one in TypeScript ensuring all data correlated and program flow matched up - It did and still no visual! Gary finally found one tiny bit of code that needed a tweak in Context3D and it came to life ! This was our first visual running through the full Away3D library stack:

https://dl.dropboxusercontent.com/u/94775998/WebGL/Demo11/index.html

A day later and we now have textures working, and a little more going on: http://kurst.co.uk/samples/awayts/textorus/

There is still some way to go until we have a fully tested API for Away3D and have a release you can just include in your JavaScript / TypeScript projects - this is a great step forward.

#typescript    #away3d   #javascript #flash   #webgl   #Stage3D  
Photo
Shared publiclyView activity