Examples per feature #15

munrocket · 2021-11-12T03:52:21Z

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.

munrocket · 2022-01-28T08:18:46Z

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"
}

munrocket mentioned this issue Jan 28, 2022

"Hello, World!" #7

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Examples per feature #15

Examples per feature #15

munrocket commented Nov 12, 2021 •

edited

munrocket commented Jan 28, 2022

Examples per feature #15

Examples per feature #15

Comments

munrocket commented Nov 12, 2021 • edited

munrocket commented Jan 28, 2022

munrocket commented Nov 12, 2021 •

edited