munrocket
commented
2 years ago 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"
}
Can we create examples per feature instead of examples per whatever? Because I need examples with simd and reference types (in future) but I can’t find it.
Also seems examples repo little bit not popular, can we make a monorepo with AS and examples for AS? It will be a self documentation for a project and also e2e tests or integration test, whatever you call it.