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>

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

  1. instead of getting directly to the answer I think it’s best to teach yourself how to solve these problems. Find out all the assumptions you made and test each.
    I would:

    • use Chrome browser for its debugging purposes
    • press F12 to see all warnings and errors
    • create one hardcoded triangle at a fixed position to rule out mistakes in the triangle creation pprocess.

    Do you have an understanding of where the "camera" in a webgl environment is? There is a fair chance that triangles are created above, behind, below, to the side of thecamera, making them invisible.

    load the sources as a relative path. (just put them in the same folder as the HTML and mention only the filename in the script tag.

    If your target is only to display a triangle mesh in a browser and not understanding webgl basics I would recommend the excellent library ThreeJS. The thing you do in your script are possible in threejs too and numerous samples are available.

    Reply

Leave a Comment