IDL to TypeScript converter + TypeScript WebGL bindings

Topics: General
Oct 8, 2012 at 12:07 PM
Edited Oct 8, 2012 at 2:31 PM

Over the weekend I hacked together a IDL parser which exports .idl files to .d.ts files. 

You can see my efforts here: https://github.com/RicoP/idl2typings 

I successfully converted the WebGL IDL file, so WebGL programmers can now be more confident about their code. 

Try this example program: (Edit: replaced with a better version)

///<reference path="webgl.d.ts" />
window.onload = () => { var canvas = <HTMLCanvasElement> document.createElement("canvas"); document.body.appendChild(canvas);
var context : any = canvas.getContext("experimental-webgl"); var gl = <WebGLRenderingContext> context;
gl.clearColor(1,0,0,1); gl.clear(gl.COLOR_BUFFER_BIT); }
Oct 8, 2012 at 12:44 PM

Great. just what I've been waiting for! Thank you!

However, the code you've posted throws an error in Visual Studio. I had the error with the WebGL.d.ts file by spongman:

Cannot convert 'CanvasRenderingContext2D' to 'WebGLRenderingContext': Type 'WebGLRenderingContext' is missing property 'restore' from type 'CanvasRenderingContext2D': Type 'CanvasRenderingContext2D' is missing property 'getContextAttributes' from type 'WebGLRenderingContext'

Oct 8, 2012 at 1:00 PM

Strange... I don't have VS, I use the console command and I don't have issues with the example. Is the webgl.d.ts file in the projectfolder? 

<WebGLRenderingContext> canvas.getContext("experimental-webgl") 

should convert the Context2D object  to a WebGL Object. Maybe you can send me the project folder and I can see more... 

Oct 8, 2012 at 1:14 PM
Edited Oct 8, 2012 at 1:14 PM

You can also try this very minimal App  and see if that works 

 

///<reference path="webgl.d.ts" />
var gl : WebGLRenderingContext; gl.clear(0); 

Oct 8, 2012 at 1:21 PM
Edited Oct 8, 2012 at 1:24 PM

yeah, that works and all the interfaces and properties are there as well.

It's only the cast from CanvasRenderingContext2D to WebGLRenderingContext that is reported as an error.

Oct 8, 2012 at 1:48 PM

does this work? 

 

///<reference path="webgl.d.ts" />
window.onload = () => { var canvas = <HTMLCanvasElement> document.createElement("canvas"); document.body.appendChild(canvas);
var context : any = canvas.getContext("experimental-webgl"); var gl = <WebGLRenderingContext> context;
gl.clearColor(1,0,0,1); gl.clear(gl.COLOR_BUFFER_BIT); }
Oct 8, 2012 at 1:58 PM

Yes.

Oct 8, 2012 at 2:01 PM

Yay :) 

Oct 8, 2012 at 3:01 PM
Edited Oct 8, 2012 at 3:02 PM

It doesn't solve the actual problem though - there seems to be a mismatch between the declaration of the two classes (that's not your fault, of course).

If I understand correctly, I need node.js to run your script?

Oct 8, 2012 at 3:21 PM
Edited Oct 8, 2012 at 3:23 PM

The problem is that HTMLCanvasElement in the lib.d.ts file is declared as the following:

 

interface HTMLCanvasElement extends HTMLElement {
    width: number;
    height: number;
    toDataURL(): string;
    toDataURL(type: string, ...args: any[]): string;
    getContext(contextId: string): CanvasRenderingContext2D;
}

 

You see getContext allways returns a Canvas2D context. The correct return value would be "object" (see http://www.w3.org/wiki/HTML/Elements/canvas). 

I assume that is because Internet Explorer does not support WebGL and so it is assumed that getContext will always return a 2D object. 

 

You could fix this by editing the lib.d.ts file in the typescript installation folder and change the return value to "any".

I guess as long Microsoft does not want to support WebGL this bug will stay as it is. 

 

To execute my IDL exporter you need node. My build script is optimized for unix, I can add windows support later. 

Coordinator
Oct 8, 2012 at 4:52 PM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.
Oct 8, 2012 at 6:33 PM

I found a dirty workaround for that problem, so there not a explicit cast necessary. Checkout https://github.com/RicoP/webgl.d.ts for more info.