All examples By author By category About

mpmckenna8

Full window Github gist

Lesson 2 webGL Some basic color

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

precision mediump float;

varying vec4 vColor;

void main(void){
      gl_FragColor = vColor;

}
  </script>

uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

varying vec4 vColor;

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

vColor = aVertexColor;
    }

</script>

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

var shaderProgram;

}

function getShader(gl, id){
      var shaderScript = document.getElementById(id);

if(!shaderScript){
        return null;
      }

var str = "";

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>

<br/>

<!--

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

-->

</body>

</html>

Updated missing url http://bl.ocks.org/mpmckenna8/raw/5991cabbde44869c41aa/b8552346660d39acbddee5e29591dc4d77c9abe6/glMatrix-0.9.5.min.js to /mpmckenna8/5991cabbde44869c41aa/b8552346660d39acbddee5e29591dc4d77c9abe6/glmatrix-0.9.5.min.js

https://bl.ocks.org/mpmckenna8/raw/5991cabbde44869c41aa/b8552346660d39acbddee5e29591dc4d77c9abe6/glMatrix-0.9.5.min.js