title: WebGL and GLM issue
body: <p>I'm trying to create a 3D webgl render but I don't know why it's not working. I'm using webgl, and glm. </p>
  
  <p>I've a similar code working on c++ but I'm trying to make the same on webGL.</p>
  
  <p>Can anyone guide me on what the issue could be? I'm not having any error but it is not rendering inside the canvas.</p>
  
  <p>This is my .js file and my html only contains the canvas. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var gl; // 
  var canvas;
  var gfx;
  function start() {
    canvas = document.getElementById("glcanvas");
    gl = canvas.getContext('webgl2');
  
  
      gfx = make_gfx();
  
  
  
        gl.clearColor(0.9,0.9,0.8,1);
        gl.clear(gl.COLOR_BUFFER_BIT);
  
  
       // gl.drawArrays(gl.LINES, 0, 6);
       render();
        //draw_text(0,0,0,"asd",0,0,0,0,0,0);
      //gl.drawArrays(gl.TRIANGLES, 0, 3);
      draw_line(10,10,10,100,100,100,0,0,255);
  }
  
  
  function make_gfx() {
      var gfx = new GraphicState();
          gfx.ctx = gl;
          gfx.window = canvas;
          gfx.shader = gl.createProgram();
  
    //  var vtx_shader = make_shader(gl.VERTEX_SHADER, "#version 330 es layout (location = 0) in vec3 pos;layout (location = 1) in vec2 tex_coord;out float _alpha;uniform mat4 model;uniform mat4 view;uniform mat4 projection;uniform int line;uniform float player_y;uniform float obj_y;void main(){if (line &gt; 0) {gl_Position = projection * view * vec4(pos, 1.0f);_alpha = line / 255.0f;} else {gl_Position = projection * view * model * vec4(pos, 1.0f);_alpha = abs(player_y - obj_y) &gt;= 3.0f ? 0.25f : 1.0f;}}");
     // var pixel_shader = make_shader(gl.FRAGMENT_SHADER, "#version 330 es out vec4 FragColor; in float _alpha; uniform vec3 color; void main(){FragColor = vec4(color, _alpha);}");
      var vtx_shader = make_shader(gl.VERTEX_SHADER, " #version 300 es \n" +
          "\n" +
          "            " +
          "in vec3 pos;\n" +
          "in vec2 tex_coord;\n" +
          "\n" +
          "            out float _alpha;\n" +
          "\n" +
          "            uniform mat4 model;\n" +
          "            uniform mat4 view;\n" +
          "            uniform mat4 projection;\n" +
          "            uniform int line;\n" +
          "            uniform float player_y;\n" +
          "            uniform float obj_y;\n" +
          "\n" +
          "            void main()\n" +
          "            {\n" +
          "                if (line &gt; 0)\n" +
          "                {\n" +
          "                    gl_Position = projection * view * vec4(pos, 1.0f);\n" +
          "                    _alpha = float(line) / 255.0f;\n" +
          "                }\n" +
          "                else\n" +
          "                {\n" +
          "                    gl_Position = projection * view * model * vec4(pos, 1.0f);\n" +
          "                    _alpha = abs(player_y - obj_y) &gt;= 3.0f ? 0.25f : 1.0f;\n" +
          "                }\n" +
          "            }"
          );
  
      var pixel_shader = make_shader(gl.FRAGMENT_SHADER,"#version 300 es\n" +
          "\n" +
          "precision highp float;\n            " +
          "out vec4 FragColor;\n" +
          "            in float _alpha;\n" +
          "            uniform vec3 color;\n" +
          "\n" +
          "            void main()\n" +
          "            {\n" +
          "                FragColor = vec4(color, _alpha);\n" +
          "            }"
  
  
  
  
          );
  
      gl.attachShader(gfx.shader, vtx_shader);
      gl.attachShader(gfx.shader, pixel_shader);
      gl.linkProgram(gfx.shader);
      if ( !gl.getProgramParameter( gfx.shader, gl.LINK_STATUS) ) {
          var info = gl.getProgramInfoLog(gfx.shader);
          alert('Could not compile WebGL program. \n\n' + info);
      }
      var vertices = [
          -0.5, -0.5, -0.5,  0.0, 0.0,
          0.5, -0.5, -0.5,  1.0, 0.0,
          0.5,  0.5, -0.5,  1.0, 1.0,
          0.5,  0.5, -0.5,  1.0, 1.0,
          -0.5,  0.5, -0.5,  0.0, 1.0,
          -0.5, -0.5, -0.5,  0.0, 0.0,
  
          -0.5, -0.5,  0.5,  0.0, 0.0,
          0.5, -0.5,  0.5,  1.0, 0.0,
          0.5,  0.5,  0.5,  1.0, 1.0,
          0.5,  0.5,  0.5,  1.0, 1.0,
          -0.5,  0.5,  0.5,  0.0, 1.0,
          -0.5, -0.5,  0.5,  0.0, 0.0,
  
          -0.5,  0.5,  0.5,  1.0, 0.0,
          -0.5,  0.5, -0.5,  1.0, 1.0,
          -0.5, -0.5, -0.5,  0.0, 1.0,
          -0.5, -0.5, -0.5,  0.0, 1.0,
          -0.5, -0.5,  0.5,  0.0, 0.0,
          -0.5,  0.5,  0.5,  1.0, 0.0,
  
          0.5,  0.5,  0.5,  1.0, 0.0,
          0.5,  0.5, -0.5,  1.0, 1.0,
          0.5, -0.5, -0.5,  0.0, 1.0,
          0.5, -0.5, -0.5,  0.0, 1.0,
          0.5, -0.5,  0.5,  0.0, 0.0,
          0.5,  0.5,  0.5,  1.0, 0.0,
  
          -0.5, -0.5, -0.5,  0.0, 1.0,
          0.5, -0.5, -0.5,  1.0, 1.0,
          0.5, -0.5,  0.5,  1.0, 0.0,
          0.5, -0.5,  0.5,  1.0, 0.0,
          -0.5, -0.5,  0.5,  0.0, 0.0,
          -0.5, -0.5, -0.5,  0.0, 1.0,
  
          -0.5,  0.5, -0.5,  0.0, 1.0,
          0.5,  0.5, -0.5,  1.0, 1.0,
          0.5,  0.5,  0.5,  1.0, 0.0,
          0.5,  0.5,  0.5,  1.0, 0.0,
          -0.5,  0.5,  0.5,  0.0, 0.0,
          -0.5,  0.5, -0.5,  0.0, 1.0
  ];
      gfx.vao = gl.createVertexArray();
      gfx.vbo = gl.createBuffer();
      gl.bindVertexArray(gfx.vao);
      gl.bindBuffer(gl.ARRAY_BUFFER, gfx.vbo);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
      gl.vertexAttribPointer(0,3,gl.FLOAT, false,5*4,0);
      gl.vertexAttribPointer(1,2,gl.FLOAT, false,5*4,3*4);
      gl.enableVertexAttribArray(0);
      gl.enableVertexAttribArray(1);
  
      gfx.line_vao = gl.createVertexArray();
      gfx.line_vbo = gl.createBuffer();
      gl.bindVertexArray(gfx.line_vao);
      gl.bindBuffer(gl.ARRAY_BUFFER, gfx.line_vbo);
      gl.vertexAttribPointer(0,3,gl.FLOAT, false,3*4,0);
      gl.enableVertexAttribArray(0);
  
      gl.enable(gl.DEPTH_TEST);
      gl.enable(gl.BLEND);
      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  
      var width = canvas.width;
      var height = canvas.height;
  
      resize_gfx(gfx, width, height);
  
      return gfx;
  
  
  
  }
  
  function make_shader(type, shader) {
    var handle = gl.createShader(type);
    gl.shaderSource(handle, shader);
    gl.compileShader(handle);
  
    var success = gl.getShaderParameter(handle, gl.COMPILE_STATUS);
    if (!success) {
      var info = gl.getShaderInfoLog(handle);
  
      alert(info);
    }
  
  
    return handle;
  }
  
  function resize_gfx(state,width,height) {
      gl.viewport(0,0,width,height);
      state.width = width;
      state.height = height;
  }
  
  function GraphicState() {
  
      var ctx;
      var window;
  
      var shader;
      var vao;
      var vbo;
      var line_vao;
      var line_vbo;
  
      var width;
      var height;
  
  }
  
  /*function draw_text(x, y, z , scale, txt, r, g, b, a, view, proj) {
      var text = glt.createText();
      glt.setText(text, txt);
      glt.beginDraw();
      glt.color(r/255.0,g/255.0,b/255.0,a/255.0);
      glt.drawText3D(text, x, y, z, scale, view, proj);
      glt.endDraw();
      glt.deleteText(text);
  
  
  }*/
  
  function draw_line (x, y, z, to_x, to_y, to_z, r, g, b, a) {
      var vertices = [
          x,y,z,
          to_x,to_y,to_z
      ];
  
      gl.useProgram(gfx.shader);
      gl.uniform1i(gl.getUniformLocation(gfx.shader, "line"), a);
      gl.uniform3f(gl.getUniformLocation(gfx.shader,"color"),r/255.0,g/255.0,b/255.0);
      gl.bindBuffer(gl.ARRAY_BUFFER,gfx.line_vbo);
      gl.bindVertexArray(gfx.line_vao);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STREAM_DRAW);
      gl.drawArrays(gl.LINES, 0, 2);
  
  
  
  
  }
  
  function get_forward_vec(pitch, yaw, pos) {
      var elevation = glm.radians(-pitch);
      var heading = glm.radians(yaw);
      var forward_vec = glm.vec3(Math.cos(elevation) * Math.sin(heading), Math.sin(elevation), Math.cos(elevation) * Math.cos(heading));
      return forward_vec;
  }
  
  function render() {
      var projection = glm.perspective(glm.radians(75.0), gfx.width / gfx.height, 0.1, 2000.0);
      projection = glm.scale(projection, glm.vec3(-1.0, 1.0, 1.0));
      var player_y = 0.0;
      var player_forward_vec;
  
  
      //TODO get Player
      player_y = 0;
      var pitch = 0;
      var yaw = 0;
      var cam_at = glm.vec3(0, 0 + 1.5, 0);
      player_forward_vec = get_forward_vec(pitch, yaw, cam_at);
     //var cam_look = glm.vec3(11, 11 + 1.5, 11) + get_forward_vec(pitch, yaw, cam_at);
      var sumx = cam_at.x + player_forward_vec.x;
      var sumy = cam_at.y + player_forward_vec.y;
      var sumz = cam_at.z + player_forward_vec.z;
      var cam_look = glm.vec3(sumx,sumy,sumz);
  
      var ls = glm.vec3(0.0, 1.0, 0.0);
      var view = glm.lookAt(cam_at, cam_look, ls);
  
  
  
  
      gl.useProgram(gfx.shader);
      gl.uniform1f(gl.getUniformLocation(gfx.shader, "player_y"), player_y);
      gl.uniformMatrix4fv(gl.getUniformLocation(gfx.shader, "projection"),  false,projection.array);
      gl.uniformMatrix4fv(gl.getUniformLocation(gfx.shader, "view"),  false, view.array);
  
      var at = glm.vec3(3, 2, 1);
      var look = at + (get_forward_vec(0, 0, at) * 50.0);
      look.y += 1.5;
      draw_line(at.x, at.y, at.z, look.x, look.y, look.z, 0, 255, 0, 255);
  
  }
  
  function get_alpha_for_y (y1,y2) {
      return Math.abs(y1 - y2) &gt;= 3.0 ? 63 : 255;
  }
  
  start();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="glcanvas"&gt;&lt;/canvas&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/glm-js@0.0.6-c/build/glm-js.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>