Examples per feature #15

Activity

1. munrocket commented on Jan 28, 2022

   

   munrocket

   on Jan 28, 2022

   Author

   More actions

   Reference types example: with console and webgl

   gl.ts

   export type GLenum = u32;
   
   export type Program = externref;
   export type WebGLShader = externref;
   export type WebGLProgram = externref;
   
   export const VERTEX_SHADER: GLenum = 0x8B31;
   export const FRAGMENT_SHADER: GLenum = 0x8B30;
   export const COMPILE_STATUS: GLenum = 0x8B81;
   export const LINK_STATUS: GLenum = 0x8B82;
   
   export declare function createShader(type: GLenum): WebGLShader;
   export declare function shaderSource(s: WebGLShader, t: string): void;
   export declare function compileShader(s: WebGLShader): void;
   export declare function getShaderParameter(s: WebGLShader, t: GLenum): externref;
   export declare function getShaderInfoLog(p: WebGLShader): string;
   
   export declare function createProgram(): Program;
   export declare function attachShader(p: Program, s: WebGLShader): void;
   export declare function linkProgram(p: Program): void;
   export declare function getProgramParameter(s: WebGLProgram, t: GLenum): externref;
   export declare function getProgramInfoLog(p: WebGLProgram): string;

   console.ts

   export declare function log(s: string): void;
   //export declare function log(s: i32): void;
   //export declare function log(s: externref): void;

   main.ts

   import * as console from "./console";
   import * as gl from "./gl";
   
   function createShader(type: gl.GLenum, source: string): gl.WebGLShader {
     var shader = gl.createShader(type);
     gl.shaderSource(shader, source);
     gl.compileShader(shader);
     gl.getShaderParameter(shader, gl.COMPILE_STATUS);
     console.log(gl.getShaderInfoLog(shader));
     return shader;
   }
   
   function createProgram(vertexShader: gl.WebGLShader, fragmentShader: gl.WebGLShader): gl.Program {
     var program = gl.createProgram();
     gl.attachShader(program, vertexShader);
     gl.attachShader(program, fragmentShader);
     gl.linkProgram(program);
     gl.getProgramParameter(program, gl.LINK_STATUS);
     console.log(gl.getProgramInfoLog(program));
     return program;
   }
   
   export function test(): void {
     let v = createShader(gl.VERTEX_SHADER, "precision highp float; attribute vec3 coord; void main(void) { gl_Position = vec4(coord, 1.0); }");
     let f = createShader(gl.FRAGMENT_SHADER, "precision highp float; void main(void) { gl_FragColor = vec4(1, 0.5, 0.0, 1); }");
     let p = createProgram(v, f);
   }

   main.js

   import * as AsBind from "../node_modules/as-bind/dist/as-bind.esm.js";
   
   const canvas = document.getElementById('c');
   const gl = canvas.getContext('webgl');
   
   for (let key in gl){ if (typeof gl[key] == 'function') {
     gl[key] = function() {
       gl[key].bind(gl);
     };
   } }
   
   const imports = {
     console,
     gl
   };
   
   async function init() {
     const instance = await AsBind.instantiate(fetch('../build/b.wasm'), imports);
     const wasm = instance.exports;
     wasm.test();
   };
   init();

   index.html

   <!DOCTYPE html>
   <html>
   <head>
     <link rel="icon" href="data:;base64,iVBORw0KGgo=">
     <title>Test</title>
   </head>
   <body>
     <canvas id="c"></canvas>
     <script type="module" src="main.js"></script>
   </body>
   </html>

   package.json

   "scripts": {
     "serve": "servez",
     "build": "asc --exportRuntime --transform as-bind --enable reference-types test/main.ts -b build/b.wasm -O3"
   }