WebGL Lession 01筆記

function initBuffers() {
    triangleVertexPositionBuffer = gl.createBuffer();


建立一個buffer存放三角形點的位置

gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

指定triangleVertexPostitionBuffer為特定函式執行的物件

 var vertices = [
         0.0,  1.0,  0.0,
        -1.0, -1.0,  0.0,
         1.0, -1.0,  0.0
    ];
點 (0,1) (-1,-1) (1,-1)三個點形成一個等腰三角形,質心在(0,0,0)位置
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
建立Float32Array 物件在javascript list上
gl.STATIC_DRAW靜態圖形
triangleVertexPositionBuffer.itemSize = 3; //size=3
triangleVertexPositionBuffer.numItems = 3;  //總數＝3
啟動javascript list對 webgl的物件filter
建立正方形(1,1)(-1,1)(1,-1)(-1,-1)在質心(0,0,0)上
    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;
  }


建立這個buffer畫出我們看到
  function drawScene() {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
清除buffer上的物件
 mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
視角45度(垂直) 長寬比 near=0.1 far=100.0 

 mat4.identity(mvMatrix);
我們的perspective的建立
move移動至3D scene的中心
對中心軸旋轉定角度
 draw at a “current” position with a “current” rotation
mat4.identity function 被呼叫顯示準備好乘上平移和旋轉矩陣
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);
平移x=1.5單位 z=7.0單位
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
設定vertex attribute的值
setMatrixUniforms();
告知webgl 考慮 current model-view matrix(projection matrix)
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);


畫三角形從第0個陣列開始

  var gl;
  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, sorry :-(");
    }
  }
shader program的建立
var shaderProgram;
  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);


each program can hold one fragment and one vertex shader




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

從uPMatrix得到pMatrixUniform 
   shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
從uMVMatrix得到mvMatrixUniform 
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 {function setMatrixUniforms() {
    gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
  }
          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 setMatrixUniforms() {
    gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
  }