WebGL will not print triangle to screen

Im totally new to webgl and graphics in general. For the life of me I cannot figure out where I am going wrong and for some reason I cannot find all the much help for webgl online. So I’m hoping some of you guys can show me what I’m doing wrong exactly. Cause I’ve been staring at this for like 4 hours and I’m psyching myself out I guess.


var gl;
var numPoints = 5000;
var points;


window.onload = function init()
{
  var canvas = document.getElementById("canvas");
  gl = WebGLUtils.setupWebGL( canvas );  
  if(!gl)
  {
    alert("WebGL is not available");
  }

var vertices = 
  [
    vec2(-1.0, -1.0), 
    vec2(0.0, 1.0), 
    vec2(1.0, -1.0)
  ];
  
  var u = scale(0.5, add(vertices[0], vertices[1]));
  var v = scale(0.5, add(vertices[0], vertices[2]));
  var p = scale(0.5, add(u, v));

  points = [p];
  
  for(var i = 0; points.length < numPoints; ++i)
  {
      var j = Math.floor(Math.random() * 3);
      p = add(points[i], vertices[j]);
      p = scale(0.5, p);
      points.push(p);
  }
  
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(1.0, 1.0, 1.0, 1.0);

  var program = initShaders(gl, "vertex-shader", "fragment-shader");
  gl.useProgram(program);

  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW);

  var vPosition = gl.getAttribLocation(program, "vPosition");
  gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vPosition);

  render();
};

function render()
{
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS, 0, points.length);
}








function triangle(a, b, c)
{
    points.push(a, b, c);
}

var ab = mix(a, b, 0.5);
var ac = mix(a, c, 0.5);
var bc = mix(b, c, 0.5);

function divideTriangle(a, b, c, count)
{
  if(count == 0)
  {
      triangle(a, b, c);
  }
  else
  {
      var ab = mix(0.5, a, b);
      var ac = mix(0.5, a, c);
      var bc = mix(0.5, b, c);
      --count;
      divideTriangle(a, ab, ac, count);
      divideTriangle(c, ac, bc, count);
      divideTriangle(b, bc, ab, count);
  }
}

<!DOCTYPE html>
<html>

 <!-- SHADERS -->
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;

void 
main()
{
  gl_PointSize = 1.0;
  gl_Position = vPosition;
}
</script>

   
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;

void 
main()
{
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
</script>
<!-- END SHADERS -->

<!-- INCLUDE SCRIPTS --> 
<script type ="javascript" src="C:\Users\kephe\Desktop\CSU Global Classes And Documents\Graphics and Visualization CSC405\utilities\webgl-utils.js"></script>
<script type ="javascript" src="C:\Users\kephe\Desktop\CSU Global Classes And Documents\Graphics and Visualization CSC405\utilities\InitShaders.js"></script>
<script type ="javascript" src="C:\Users\kephe\Desktop\CSU Global Classes And Documents\Graphics and Visualization CSC405\utilities\MV.js"></script>
<script type ="javascript" src="C:\Users\kephe\Desktop\CSU Global Classes And Documents\Graphics and Visualization CSC405\week2\week2Page\gasket1.js"></script>
<!-- END INCLUDE SCRIPTS --> 

<head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <h1>Sierpinksi Gasket</h1>

</head>

<body>
  <canvas id="canvas" width="512" height="512">
  <!-- Browser error if browser does not support canvas element. -->
  Sorry; your web browser does not support HTML5's canvas element.
  
  </canvas>
</body>

</html>

21 thoughts on “WebGL will not print triangle to screen”

Leave a Comment