mpmckenna8/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Adding some basic color from the last bl.ock to demonstrate the basics of color w/ webgl. Though the author of the tutorial calls it colour. http://learningwebgl.com/blog/?p=134

  
## index.html
<html>
<head>


  <script type="text/javascript" src="http://bl.ocks.org/mpmckenna8/raw/5991cabbde44869c41aa/b8552346660d39acbddee5e29591dc4d77c9abe6/glMatrix-0.9.5.min.js"></script>

  <script id="shader-fs" type="x-shader/x-fragment">

    precision mediump float;

    varying vec4 vColor;

    void main(void){
      gl_FragColor = vColor;

    }
  </script>


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

    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    varying vec4 vColor;

    void main(void){
      gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);


      vColor = aVertexColor;
    }

  </script>


  <script type="text/javascript">
    var gl;

    var mvMatrix = mat4.create();
    var pMatrix = mat4.create();

    var shaderProgram;

    function initGL(canvas){
      try {
        gl = canvas.getContext("experimental-webgl");
        gl.viewportWidth = canvas.width;
        gl.viewportHeight = canvas.height;
      }
      catch(e){
          console.log('cught', e);
      }
      if(!gl){
        alert("couldnt get webgl initialized")
      }

    }

    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('getting shader went wrong', gl.getShaderInfoLog(shader));
        return null;
      }

      return shader;

    }

    function setMatrixUniforms(){

      gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);

      gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
    }


      var triangleVertexPositionBuffer;
      var triangleVertexColorBuffer;
      var squareVertexPositionBuffer;

      function initBuffers(){
        triangleVertexPositionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);


        var vertices = [
          0.0,  1.0,  0.0,
          -1.0, -1.0,  0.0,
          1.0,  -1.0,  0.0
        ];
        console.log(vertices)


console.log(vertices)

        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        triangleVertexPositionBuffer.itemSize = 3;

        triangleVertexPositionBuffer.numItems = 3;

        triangleVertexColorBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);

        var colors = [
          1.0, 0.0, 0.0, 1.0,
          0.0, 1.0, 0.0, 1.0,
          0.0, 0.0, 1.0, 1.0
        ];

        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
        triangleVertexColorBuffer.itemSize = 4;
        triangleVertexColorBuffer.numItems = 3;


        squareVertexPositionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
        vertices = [
             1.0,  1.0,  0.0,
            -1.0,  1.0,  0.0,
             1.0, -1.0,  0.0,
            -1.0, -1.0,  0.0
        ];
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
      squareVertexPositionBuffer.itemSize = 3;
      squareVertexPositionBuffer.numItems = 4;;

      squareVertexColorBuffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
 colors = [];
 for (var i=0; i < 4; i++) {
    // colors = colors.concat([0.8, 0.5, 1.0, 1.0]);
    if(i == 0 || i ==2){
      colors = colors.concat([0.2, .8, 0.1, 1.0])
    }
    else{


    colors = colors.concat([1.0,0.0,0.0,1.0])
    }
 }
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
 squareVertexColorBuffer.itemSize = 4;
 squareVertexColorBuffer.numItems = 4;

      }

      function drawScene(){
        gl.viewport(0.0, 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, [-1.5, 0.0, -7.0]);

        gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
        gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

        gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer)
        gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0.0, 0.0)

        setMatrixUniforms();

        gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);

        mat4.translate(mvMatrix,[2.0, -1.0, 1.0]);

        gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
        gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

        gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
        gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

        setMatrixUniforms();

        gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);


      }


      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('colulnt initialize shaders in initShaders')
        }

        gl.useProgram(shaderProgram);

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

        gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

        shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
        gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute)

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


      }

      function webGLStart(){

      var canvas = document.getElementById("lesson01-canvas");


      initGL(canvas);

      initShaders();
      initBuffers();

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

      gl.enable(gl.DEPTH_TEST);

     drawScene();

    }

  </script>
</head>

<body onload="webGLStart();">

  <canvas id="lesson01-canvas" style="border: black;" width="500" height="500">
  </canvas>

  <br/>


  <!--

  The lesson for this thing is at the below link
  <a href="http://learningwebgl.com/blog/?p=28">&lt;&lt; Back to Lesson 1</a><br />


-->


</body>


</html>
	<html>
	<head>



	<script type="text/javascript" src="http://bl.ocks.org/mpmckenna8/raw/5991cabbde44869c41aa/b8552346660d39acbddee5e29591dc4d77c9abe6/glMatrix-0.9.5.min.js"></script>

	<script id="shader-fs" type="x-shader/x-fragment">

	precision mediump float;

	varying vec4 vColor;

	void main(void){
	gl_FragColor = vColor;

	}
	</script>


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

	uniform mat4 uMVMatrix;
	uniform mat4 uPMatrix;

	varying vec4 vColor;

	void main(void){
	gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);


	vColor = aVertexColor;
	}

	</script>


	<script type="text/javascript">
	var gl;

	var mvMatrix = mat4.create();
	var pMatrix = mat4.create();

	var shaderProgram;

	function initGL(canvas){
	try {
	gl = canvas.getContext("experimental-webgl");
	gl.viewportWidth = canvas.width;
	gl.viewportHeight = canvas.height;
	}
	catch(e){
	console.log('cught', e);
	}
	if(!gl){
	alert("couldnt get webgl initialized")
	}

	}

	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('getting shader went wrong', gl.getShaderInfoLog(shader));
	return null;
	}

	return shader;

	}

	function setMatrixUniforms(){

	gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);

	gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
	}



	var triangleVertexPositionBuffer;
	var triangleVertexColorBuffer;
	var squareVertexPositionBuffer;

	function initBuffers(){
	triangleVertexPositionBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);



	var vertices = [
	0.0, 1.0, 0.0,
	-1.0, -1.0, 0.0,
	1.0, -1.0, 0.0
	];
	console.log(vertices)


	console.log(vertices)

	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

	triangleVertexPositionBuffer.itemSize = 3;

	triangleVertexPositionBuffer.numItems = 3;

	triangleVertexColorBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);

	var colors = [
	1.0, 0.0, 0.0, 1.0,
	0.0, 1.0, 0.0, 1.0,
	0.0, 0.0, 1.0, 1.0
	];

	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
	triangleVertexColorBuffer.itemSize = 4;
	triangleVertexColorBuffer.numItems = 3;



	squareVertexPositionBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
	vertices = [
	1.0, 1.0, 0.0,
	-1.0, 1.0, 0.0,
	1.0, -1.0, 0.0,
	-1.0, -1.0, 0.0
	];
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
	squareVertexPositionBuffer.itemSize = 3;
	squareVertexPositionBuffer.numItems = 4;;

	squareVertexColorBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
	colors = [];
	for (var i=0; i < 4; i++) {
	// colors = colors.concat([0.8, 0.5, 1.0, 1.0]);
	if(i == 0 \|\| i ==2){
	colors = colors.concat([0.2, .8, 0.1, 1.0])
	}
	else{


	colors = colors.concat([1.0,0.0,0.0,1.0])
	}
	}
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
	squareVertexColorBuffer.itemSize = 4;
	squareVertexColorBuffer.numItems = 4;

	}

	function drawScene(){
	gl.viewport(0.0, 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, [-1.5, 0.0, -7.0]);

	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer)
	gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0.0, 0.0)

	setMatrixUniforms();

	gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);

	mat4.translate(mvMatrix,[2.0, -1.0, 1.0]);

	gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

	gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

	setMatrixUniforms();

	gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);


	}




	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('colulnt initialize shaders in initShaders')
	}

	gl.useProgram(shaderProgram);

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

	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

	shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
	gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute)

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


	}

	function webGLStart(){

	var canvas = document.getElementById("lesson01-canvas");


	initGL(canvas);

	initShaders();
	initBuffers();

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

	gl.enable(gl.DEPTH_TEST);

	drawScene();

	}

	</script>
	</head>

	<body onload="webGLStart();">

	<canvas id="lesson01-canvas" style="border: black;" width="500" height="500">
	</canvas>

	<br/>


	<!--

	The lesson for this thing is at the below link
	<a href="http://learningwebgl.com/blog/?p=28"><< Back to Lesson 1</a><br />



	-->



	</body>


	</html>