How to use gl - 10 common examples

describe('Basic', () => {

	var gl = headlessGL(100, 100, { preserveDrawingBuffer: true })

	var out = new OutputTensor(gl, [5, 5, 4]);

	describe('Input Validation', function(){
		it('should throw for non-string shader', function() {
			assert.throws(e => Run(null, out))
			assert.throws(e => Compile(null, out))
		});

		it('should throw for non-output tensor', function() {
			var input = new Tensor(gl, [5, 5])
			assert.throws(e => Run(ECHO_LOCATION4, input))
			assert.throws(e => Compile(ECHO_LOCATION4, input))
		});

		// it('should throw for syntax error', function() {

import browserEnv from "browser-env";
import createWebGl from "gl";

browserEnv();

const CONTEXT = createWebGl(1, 1, { preserveDrawingBuffer: true });
const RESIZE = CONTEXT.getExtension("STACKGL_resize_drawingbuffer");

const createContext = (w, h) => {
  RESIZE.resize(w, h);
  return CONTEXT;
};

const createCanvas = (w, h) => {
  // Create fake canvas element
  const canvas = document.createElement("canvas");

  const getContext = context => {
    if (context === "webgl") {
      return createContext(w, h);
    } else {
      throw new Error("Only webgl is supported");

describe('LSTM', () => {
	var gl = headlessGL(100, 100, { preserveDrawingBuffer: true })

	const LSTM = `
	    // Tensor output: [Ns, 1, 2]
	    uniform Tensor X; // [Ni, 1, 1]
	    uniform Tensor prev; // [Ns, 1, 2]
	    uniform Tensor W; // [Ns, Ns + Ni + 1, 4]
	    const int Ni = #(X.shape).x;
	    const int Ns = #(W.shape).x;

	    float tanh(float x){
	        float e = exp(2.0 * clamp(x, -10.0, 10.0) );
	        return (e-1.0)/(e+1.0);
	    }
	    float sigmoid(float x){ return 1.0/(1.0+exp(-clamp(x, -10.0, 10.0))); }
	    float hard_sigmoid(float x){ return clamp(x * 0.2 + 0.5, 0.0, 1.0); }

async function render() {
  let result
  try {
    result = await runLoaders({
      resource: blendPath,
      loaders: [path.resolve(__dirname, 'loaders/blender-loader')],
    })
  } catch (err) {
    console.error(err)
    process.exit(1)
  }

  const gl = createGLContext(WIDTH_S, HEIGHT_S)
  if (!gl) {
    console.error('Unable to create GL context')
    process.exit(1)
  }

  const blendData = JSON.parse(result.result[0])
  const timePiece = time(blendData, gl)

  const gif = new GifEncoder(WIDTH, HEIGHT, {highWaterMark: 1024 * 1024})
  gif.pipe(fs.createWriteStream(outPath))
  gif.setRepeat(0)
  gif.writeHeader()

  sharp.cache(false)  // Reduce memory usage

  const totalFrames = 2 * FRAMES - 1

dataPos[i] = x;
            dataPos[i + 1] = y;
            dataPos[i + 2] = z;
            dataPos[i + 3] = Math.random();

            pos[count * 3 + 0] = dataPos[i];
            pos[count * 3 + 1] = dataPos[i + 1];
            pos[count * 3 + 2] = dataPos[i + 2];

            uvs[count * 2 + 0] = (count % width) / width;
            uvs[count * 2 + 1] = Math.floor(count / width) / height;

            size[count] = G.utils.random(0.5, 1);
        }
        const prim = G.Primitive.cube(1, 1, 1);
        const geom = new G.Geometry(prim);

        const uvvv = new Float32Array(prim.uvs.length);

        for (let i = 0; i < prim.uvs.length * 2; i += 2)
        {
            uvvv[count * 2 + 0] = (count % width) / width;
            uvvv[count * 2 + 1] = Math.floor(count / width) / height;
            count++;
        }
        console.log(uvvv.length);
        geom.addAttribute('cuvss', uvvv);

        // console.log(this.sphere.geometry.positions._data.length);
        // console.log(144/2);
        // console.log(Math.pow(Math.floor(Math.log2(this.sphere.geometry.positions._data.length)),2));

for(var i = 0; i < this.world.chunks.length; i++) {
            var chunk = this.world.chunks[i];
            if(chunk.nonempty_voxels === 0) continue;
            var mesh = this.buffers[chunk.key];
            if(!mesh){
                var buffer = this.generate_mesh(chunk);
                //console.log(mesh);
                mesh = this.buffers[chunk.key] = {vbo: new glutils.VBO(buffer), version: chunk.version};
            }
            else if(mesh.version < chunk.version && update){
                console.time('free');
                mesh.vbo.free();
                console.timeEnd('free');
                var data = this.generate_mesh(chunk);
                mesh.vbo = new glutils.VBO(data);
                console.log('regenerating buffer');
                mesh.version = chunk.version;
                // update at most one mesh per frame
                update = false;
            }
            var vbo = mesh.vbo;

            graph.uniforms.offset = chunk.position;
            shader.uniforms(graph.uniforms);

            vbo.bind();
            var stride = 10;
            gl.enableVertexAttribArray(position);
            gl.vertexAttribPointer(position, 3, gl.UNSIGNED_BYTE, false, stride, 0);
            gl.enableVertexAttribArray(normal);
            gl.vertexAttribPointer(normal, 3, gl.BYTE, false, stride, 3);

normal = shader.getAttribLocation('normal'),
            color = shader.getAttribLocation('color'),
            //ambient = shader.getAttribLocation('ambient'),
            update = true;

        graph.pushUniforms();
        graph.uniforms.scale = this.world.scale;

        for(var i = 0; i < this.world.chunks.length; i++) {
            var chunk = this.world.chunks[i];
            if(chunk.nonempty_voxels === 0) continue;
            var mesh = this.buffers[chunk.key];
            if(!mesh){
                var buffer = this.generate_mesh(chunk);
                //console.log(mesh);
                mesh = this.buffers[chunk.key] = {vbo: new glutils.VBO(buffer), version: chunk.version};
            }
            else if(mesh.version < chunk.version && update){
                console.time('free');
                mesh.vbo.free();
                console.timeEnd('free');
                var data = this.generate_mesh(chunk);
                mesh.vbo = new glutils.VBO(data);
                console.log('regenerating buffer');
                mesh.version = chunk.version;
                // update at most one mesh per frame
                update = false;
            }
            var vbo = mesh.vbo;

            graph.uniforms.offset = chunk.position;
            shader.uniforms(graph.uniforms);

dataText.format = gl.RGBA;
        dataText.type = gl.FLOAT;
        // dataText.uploadData(dataPos, 2, 3);
        // console.log(this.sphere.geometry.positions._data.length/3);
        console.log(geom);
        dataText.uploadData(new Float32Array(prim.positions), 2, 2);

        this.gpu = new PingPong({
            data: dataText,
            width,
            height,
            timeAdd: 0.001,

            renderer: this.webgl,
            camera: new G.OrthographicCamera(-1, 1, -1, 1, 0.1, 100),
            vs: glslify('./shaders/basic.vert'),
            fs: glslify('./shaders/sim.frag'),
            uniforms: {
                uMouse: [0, 0, 0],
            },
        });

        this.fboHelper.attach(this.gpu.fboOut.colors);

        this.sphere = new G.Mesh(geom, new G.Shader(
            `
             attribute vec3 aPosition;
             attribute vec2 aUv;
             attribute vec2 aCuvs;

dataPos[i] = x;
            dataPos[i + 1] = y;
            dataPos[i + 2] = z;
            dataPos[i + 3] = Math.random();

            pos[count * 3 + 0] = dataPos[i];
            pos[count * 3 + 1] = dataPos[i + 1];
            pos[count * 3 + 2] = dataPos[i + 2];

            uvs[count * 2 + 0] = (count % width) / width;
            uvs[count * 2 + 1] = Math.floor(count / width) / height;

            size[count] = G.utils.random(0.5, 1);
        }
        const prim = G.Primitive.cube(1, 1, 1);
        const geom = new G.Geometry(prim);

        const uvvv = new Float32Array(prim.uvs.length);

        for (let i = 0; i < prim.uvs.length * 2; i += 2)
        {
            uvvv[count * 2 + 0] = (count % width) / width;
            uvvv[count * 2 + 1] = Math.floor(count / width) / height;
            count++;
        }
        console.log(uvvv.length);
        geom.addAttribute('cuvss', uvvv);

        // console.log(this.sphere.geometry.positions._data.length);
        // console.log(144/2);
        // console.log(Math.pow(Math.floor(Math.log2(this.sphere.geometry.positions._data.length)),2));

window.HTMLCanvasElement.prototype.getContext = function (type, attributes) {
        if (type === 'webgl') {
            if (!this._webGLContext) {
                this._webGLContext = gl(this.width, this.height, attributes);
            }
            return this._webGLContext;
        }
        // Fallback to existing HTMLCanvasElement getContext behaviour
        return originalGetContext.call(this, type, attributes);
    };