D3OG

All examples By author By category About

mpmckenna8

Full window Github gist

WebGL triangle and Square

Trying to make the example from lesson 1 http://learningwebgl.com/blog/?p=28.

Pretty much the same with a few changes of some trivial values like colors and translating the square.

precision mediump float;

void main(void){
      gl_FragColor = vec4(1.0, 0.2, 1.0, 1.0);

}
  </script>

uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

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

</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 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;

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;;

}

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);

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);
        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.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(1.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>