Skip to content

Instantly share code, notes, and snippets.

@josnidhin

josnidhin/README.md

Last active October 13, 2015 12:08
Show Gist options
  • Save josnidhin/4193687 to your computer and use it in GitHub Desktop.
Save josnidhin/4193687 to your computer and use it in GitHub Desktop.
Download ZIP
WebGL Pipe wireframe
Raw
README.md

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

Raw
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>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment