josnidhin/README.md

## README.md

      
    Raw
  

              README.md
            
          
    I was trying to draw a pipe in webgl and this what I came up with. It can be viewed here

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://cdn.rawgit.com/toji/gl-matrix/v1.3.7/gl-matrix-min.js" type="text/javascript"></script>
  <script src="webgl.js" type="text/javascript"></script>
</head>
<body onload="webGLStart();">
  <canvas id="webgl-canvas" width="500" height="500">
    Your browser is not supported
  </canvas>

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

    void main(void) {
      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
  </script>

  <script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;

    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    void main(void) {
      gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    }
  </script>
</body>
</html>

## webgl.js
var gl;
var shaderProgram;
var cylinderVertexPositionBuffer;
var pMatrix = mat4.create();
var mvMatrix = mat4.create();

function webGLStart() {
  var canvas = document.getElementById( "webgl-canvas" );
  initGL( canvas );
  initShaders();
  initBuffers();

  gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
  gl.enable( gl.DEPTH_TEST );

  drawScene();
}

function initGL( canvas ) {
  try {
    gl = canvas.getContext( "experimental-webgl" );
    gl.viewportWidth = canvas.width;
    gl.viewportHeight = canvas.height;
  } catch( e ) {
  }
  if ( !gl ) {
    alert("Could not initialise WebGL");
  }
}

function initShaders() {
  var fragmentShader = getShader( gl, "shader-fs" );
  var vertexShader = getShader( gl, "shader-vs" );

  shaderProgram = gl.createProgram();
  gl.attachShader( shaderProgram, vertexShader );
  gl.attachShader( shaderProgram, fragmentShader );
  gl.linkProgram( shaderProgram );

  if ( !gl.getProgramParameter( shaderProgram, gl.LINK_STATUS )) {
    alert( "Could not initialise shaders" );
  }

  gl.useProgram( shaderProgram );

  shaderProgram.vertexPositionAttribute = gl.getAttribLocation( shaderProgram, "aVertexPosition" );
  gl.enableVertexAttribArray( shaderProgram.vertexPositionAttribute );

  shaderProgram.pMatrixUniform = gl.getUniformLocation( shaderProgram, "uPMatrix" );
  shaderProgram.mvMatrixUniform = gl.getUniformLocation( shaderProgram, "uMVMatrix" );
}

function getShader( gl, id ) {
  var shaderScript = document.getElementById( id );
  if( !shaderScript ) {
    return null;
  }

  var str = "";
  var k = shaderScript.firstChild;
  while( k ) {
    if( k.nodeType == 3 ) {
    str += k.textContent;
  }
    k = k.nextSibling;
  }

  var shader;
  if( shaderScript.type == "x-shader/x-fragment" ) {
    shader = gl.createShader( gl.FRAGMENT_SHADER );
  } else if ( shaderScript.type == "x-shader/x-vertex" ) {
    shader = gl.createShader( gl.VERTEX_SHADER );
  } else {
    return null;
  }

  gl.shaderSource( shader, str );
  gl.compileShader( shader );

  if( !gl.getShaderParameter( shader, gl.COMPILE_STATUS )) {
    alert( gl.getShaderInfoLog( shader ));
    return null;
  }

  return shader;
}

function initBuffers() {
  cylinderVertexPositionBuffer = gl.createBuffer();
  gl.bindBuffer( gl.ARRAY_BUFFER, cylinderVertexPositionBuffer );
  var vertices = [];
  var PI = Math.PI;
  var nSeg = 32;
  for( var i = 0; i < nSeg; i++ ) {
    var angle = PI * i * 2.0 / nSeg;
    var nextAngle = PI * ( i + 1.0 ) * 2.0 / nSeg;

    var x1 = Math.sin( angle ), y1 = Math.cos( angle );
    var x2 = Math.sin( nextAngle ), y2 = Math.cos( nextAngle );

    console.log([ x1, y1 , 0.0 ]);

    vertices.push( x1, y1 , 0.0 );
    vertices.push( x2, y2 , 1.0 );
    vertices.push( x1, y1 , 1.0 );

    vertices.push( x1, y1, 0.0 );
    vertices.push( x2, y2, 0.0 );
    vertices.push( x2, y2, 1.0 );
  }
  console.log(vertices);
  gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( vertices ), gl.STATIC_DRAW );
  cylinderVertexPositionBuffer.itemSize = 3;
  cylinderVertexPositionBuffer.numItems = vertices.length / cylinderVertexPositionBuffer.itemSize;
}

function drawScene() {
  gl.viewport( 0, 0, gl.viewportWidth, gl.viewportHeight );
  gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );

  mat4.perspective( 45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix );

  mat4.identity( mvMatrix );

  mat4.translate( mvMatrix, [ -2.0, 0.0, -10.0 ] );
  mat4.rotateY( mvMatrix, deg2Rad( 45 ) );
  mat4.scale( mvMatrix, [ 1, 1, 4 ]);
  gl.bindBuffer( gl.ARRAY_BUFFER, cylinderVertexPositionBuffer );
  gl.vertexAttribPointer( shaderProgram.vertexPositionAttribute, cylinderVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0 );
  setMatrixUniforms();
  gl.drawArrays( gl.LINES, 0, cylinderVertexPositionBuffer.numItems );
}

function setMatrixUniforms() {
  gl.uniformMatrix4fv( shaderProgram.pMatrixUniform, false, pMatrix );
  gl.uniformMatrix4fv( shaderProgram.mvMatrixUniform, false, mvMatrix );
}

function deg2Rad( x ) {
  return x * Math.PI / 180;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<script src="https://cdn.rawgit.com/toji/gl-matrix/v1.3.7/gl-matrix-min.js" type="text/javascript"></script>
	<script src="webgl.js" type="text/javascript"></script>
	</head>
	<body onload="webGLStart();">
	<canvas id="webgl-canvas" width="500" height="500">
	Your browser is not supported
	</canvas>

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

	void main(void) {
	gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
	}
	</script>

	<script id="shader-vs" type="x-shader/x-vertex">
	attribute vec3 aVertexPosition;

	uniform mat4 uMVMatrix;
	uniform mat4 uPMatrix;

	void main(void) {
	gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
	}
	</script>
	</body>
	</html>
	var gl;
	var shaderProgram;
	var cylinderVertexPositionBuffer;
	var pMatrix = mat4.create();
	var mvMatrix = mat4.create();

	function webGLStart() {
	var canvas = document.getElementById( "webgl-canvas" );
	initGL( canvas );
	initShaders();
	initBuffers();

	gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
	gl.enable( gl.DEPTH_TEST );

	drawScene();
	}

	function initGL( canvas ) {
	try {
	gl = canvas.getContext( "experimental-webgl" );
	gl.viewportWidth = canvas.width;
	gl.viewportHeight = canvas.height;
	} catch( e ) {
	}
	if ( !gl ) {
	alert("Could not initialise WebGL");
	}
	}

	function initShaders() {
	var fragmentShader = getShader( gl, "shader-fs" );
	var vertexShader = getShader( gl, "shader-vs" );

	shaderProgram = gl.createProgram();
	gl.attachShader( shaderProgram, vertexShader );
	gl.attachShader( shaderProgram, fragmentShader );
	gl.linkProgram( shaderProgram );

	if ( !gl.getProgramParameter( shaderProgram, gl.LINK_STATUS )) {
	alert( "Could not initialise shaders" );
	}

	gl.useProgram( shaderProgram );

	shaderProgram.vertexPositionAttribute = gl.getAttribLocation( shaderProgram, "aVertexPosition" );
	gl.enableVertexAttribArray( shaderProgram.vertexPositionAttribute );

	shaderProgram.pMatrixUniform = gl.getUniformLocation( shaderProgram, "uPMatrix" );
	shaderProgram.mvMatrixUniform = gl.getUniformLocation( shaderProgram, "uMVMatrix" );
	}

	function getShader( gl, id ) {
	var shaderScript = document.getElementById( id );
	if( !shaderScript ) {
	return null;
	}

	var str = "";
	var k = shaderScript.firstChild;
	while( k ) {
	if( k.nodeType == 3 ) {
	str += k.textContent;
	}
	k = k.nextSibling;
	}

	var shader;
	if( shaderScript.type == "x-shader/x-fragment" ) {
	shader = gl.createShader( gl.FRAGMENT_SHADER );
	} else if ( shaderScript.type == "x-shader/x-vertex" ) {
	shader = gl.createShader( gl.VERTEX_SHADER );
	} else {
	return null;
	}

	gl.shaderSource( shader, str );
	gl.compileShader( shader );

	if( !gl.getShaderParameter( shader, gl.COMPILE_STATUS )) {
	alert( gl.getShaderInfoLog( shader ));
	return null;
	}

	return shader;
	}

	function initBuffers() {
	cylinderVertexPositionBuffer = gl.createBuffer();
	gl.bindBuffer( gl.ARRAY_BUFFER, cylinderVertexPositionBuffer );
	var vertices = [];
	var PI = Math.PI;
	var nSeg = 32;
	for( var i = 0; i < nSeg; i++ ) {
	var angle = PI * i * 2.0 / nSeg;
	var nextAngle = PI * ( i + 1.0 ) * 2.0 / nSeg;

	var x1 = Math.sin( angle ), y1 = Math.cos( angle );
	var x2 = Math.sin( nextAngle ), y2 = Math.cos( nextAngle );

	console.log([ x1, y1 , 0.0 ]);

	vertices.push( x1, y1 , 0.0 );
	vertices.push( x2, y2 , 1.0 );
	vertices.push( x1, y1 , 1.0 );

	vertices.push( x1, y1, 0.0 );
	vertices.push( x2, y2, 0.0 );
	vertices.push( x2, y2, 1.0 );
	}
	console.log(vertices);
	gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( vertices ), gl.STATIC_DRAW );
	cylinderVertexPositionBuffer.itemSize = 3;
	cylinderVertexPositionBuffer.numItems = vertices.length / cylinderVertexPositionBuffer.itemSize;
	}

	function drawScene() {
	gl.viewport( 0, 0, gl.viewportWidth, gl.viewportHeight );
	gl.clear( gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT );

	mat4.perspective( 45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix );

	mat4.identity( mvMatrix );

	mat4.translate( mvMatrix, [ -2.0, 0.0, -10.0 ] );
	mat4.rotateY( mvMatrix, deg2Rad( 45 ) );
	mat4.scale( mvMatrix, [ 1, 1, 4 ]);
	gl.bindBuffer( gl.ARRAY_BUFFER, cylinderVertexPositionBuffer );
	gl.vertexAttribPointer( shaderProgram.vertexPositionAttribute, cylinderVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0 );
	setMatrixUniforms();
	gl.drawArrays( gl.LINES, 0, cylinderVertexPositionBuffer.numItems );
	}

	function setMatrixUniforms() {
	gl.uniformMatrix4fv( shaderProgram.pMatrixUniform, false, pMatrix );
	gl.uniformMatrix4fv( shaderProgram.mvMatrixUniform, false, mvMatrix );
	}

	function deg2Rad( x ) {
	return x * Math.PI / 180;
	}