【学习笔记】WebGL教程 MDN

本学习笔记存在意义：阅读学习MDN教程中自己的想法。

Step.1 起点：Getting started with WebGL

Act.1 : 切换语言-> 中文
Act.2 : 已浏览一遍，脑袋记忆不住的地方是webGL 语言中的关键变量

MDN教程的开始，是准备HTML结构和Js脚手架。这个部分对于Js单刀手（没有章法的野生Js选手，如我），是新颖的，有学习价值的。
 HTML关键内容：

<canvas id="glcanvas" width="640" height="480">
    Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
  </canvas>

Js关键内容1:

var gl; // WebGL的全局变量
...
function start() {
...
  // 初始化 WebGL 上下文
  gl = initWebGL(canvas);   
  // 只有在 WebGL 可用的时候才继续
  if (gl) {...

Js关键内容2:

function initWebGL(canvas) {
  // 创建全局变量
  window.gl = null;
  try {
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    ...

可以看到，HTML页面加载JS行为，纯粹。JS部分，初始化等模块分离。能够做到如果起始部分发生错误，可以及时捕捉到。

Step 2. 使用WebGL创建2D内容

Act .1 将OpenGL ES Shading Lauguage 放在HTML中，通过dom读取内容
关键代码：

<script id='vertex' type='x-shadow/vertex'>...</script>
...
function getShader(){...}
...
vertexShader = getShader(gl,"shader-vs");
...
shader=..按照条件使用gl.createShader
...
获得之后，source绑定，然后编译。
最后返回shader

取得shader，绑定shader，链接program（穿件），
当这个步骤不能用1~2行代码完成时，将其变成函数方式，确保init方法足够整洁。
一个gl可以attachShader多个。
Act .2 创建对象
关键代码：

var horizAspect = 480.0/640.0; // 透视？

function initBuffers() {
  squareVerticesBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
  
  var 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);
}

文档段落读起来，感觉是将GLSC语言中的的方式在Js中赋值。
创建缓冲区，然后绑定之
Act .3 绘制场景
关键代码：

function drawScene() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);//清空
  
  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);//透视
  
  loadIdentity();
  mvTranslate([-0.0, 0.0, -6.0]);
  
  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
  setMatrixUniforms();
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}

Act .4 矩阵运算
空间坐标系转换会用到矩阵转换。这儿透视角度参数的计算显然是需要用到矩阵计算的。
然后，使用别人写好的工具。跳过了这么难的一大块内容，专注于想法的实施。

。。。 结束
。多看几遍sample1~7，等能够默写出来旋转的正方体了再写心得。