WebGL学习心得之一

tzbm123456

WebGL编程步骤：

一、编写基本的HTML代码，在代码中插入<canvas>标记

二、编写JavaScript代码，引用画布，创建WebGLRenderingCotext（WebGL绘制上下文）对象         createGLContext(canvas)

三、编写顶点着色器和片段着色器的源代码        setupShaders()

四、创建着色器对象                   loadShader(type,shaderSource)

五、将源代码载入着色器对象          loadShader(type,shaderSource)

六、编译着色器对象                   loadShader(type,shaderSource)

七、创建程序对象                                 setupShaders()

八、将编译的着色器对象插入程序对象             setupShaders()

九、连接程序对象                                 setupShaders()

十、明确WebGL如何使用程序对象                 setupShaders()

十一、设置缓存对象                               setupBuffers()

十二、将几何对象的顶点数据载入到顶点缓存      setupBuffers()

十三、定义视口           draw()

十四、清除颜色缓冲       draw()

十五、将绑定到gl.ARRAY_BUFFER目标上的缓冲对象赋予程序对象的顶点属性      draw()

十六、开启顶点属性       draw()

十七、绘制顶点缓存       draw()

function startup() {

  canvas =document.getElementById("myGLCanvas");

  gl = createGLContext(canvas);

  setupShaders();

  setupBuffers();

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

  draw();

}

一、编写基本的HTML代码，在代码中插入<canvas>标记

<bodyonLoad="startup();">

  <canvas id="myGLCanvas"width="500" height="500"></canvas>

</body>

二、编写JavaScript代码，引用画布，创建WebGLRenderingCotext（WebGL绘制上下文）对象     createGLContext(canvas)

canvas =document.getElementById("myGLCanvas");

gl = createGLContext(canvas);

functioncreateGLContext(canvas) {

  var names = ["webgl","experimental-webgl"];

  var context = null;

  for (var i=0; i < names.length; i++) {

    try {

      context = canvas.getContext(names);

    } catch(e) {}

    if (context) {

      break;

    }

  }

  if (context) {

    context.viewportWidth = canvas.width;

    context.viewportHeight = canvas.height;

  } else {

    alert("Failed to create WebGLcontext!");

  }

  return context;

}

三、编写顶点着色器和片段着色器的源代码        setupShaders()

var vertexShaderSource =

    "attribute vec3 aVertexPosition;                 \n" +

    "void main() {                                   \n" +

    " gl_Position = vec4(aVertexPosition, 1.0);     \n" +

    "}                                              \n";           

    varfragmentShaderSource =

     "precision mediump float;                    \n"+

     "void main() {                               \n"+

     " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); \n"+

     "}                                          \n";

  var vertexShader = loadShader(gl.VERTEX_SHADER,vertexShaderSource);

  varfragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);

function  loadShader(type, shaderSource) {

  var shader = gl.createShader(type);

  gl.shaderSource(shader, shaderSource);

  gl.compileShader(shader);  

  if (!gl.getShaderParameter(shader,gl.COMPILE_STATUS)) {

alert("Error compiling shader" + l.getShaderInfoLog(shader));

      gl.deleteShader(shader);   

      return null;

  }

  return shader;  

}

四、创建着色器对象       loadShader(type, shaderSource)

var shader = gl.createShader(type);

五、将源代码载入着色器对象      loadShader(type, shaderSource)

gl.shaderSource(shader,shaderSource);

六、编译着色器对象       loadShader(type, shaderSource)

gl.compileShader(shader);

七、创建程序对象         setupShaders()

shaderProgram =gl.createProgram();

八、将编译的着色器对象插入程序对象         setupShaders()

gl.attachShader(shaderProgram,vertexShader);  

九、连接程序对象         setupShaders()

gl.linkProgram(shaderProgram);

十、明确WebGL如何使用程序对象         setupShaders()

gl.useProgram(shaderProgram);  

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

十一、设置和绑定缓存对象            setupBuffers()

vertexBuffer =gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

十二、将几何对象的顶点数据载入到顶点缓存          setupBuffers()

var triangleVertices = [

        0.0,  0.5,  0.0,

        -0.5, -0.5, 0.0,

         0.5,-0.5,  0.0

  ];

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

vertexBuffer.itemSize = 3;

vertexBuffer.numberOfItems = 3;

十三、定义视口           draw()

gl.viewport(0, 0,gl.viewportWidth, gl.viewportHeight);  

十四、清除颜色缓冲           draw()
gl.clear(gl.COLOR_BUFFER_BIT);

十五、将绑定到gl.ARRAY_BUFFER目标上的缓冲对象赋予程序对象的顶点属性          draw()

gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,vertexBuffer.itemSize,gl.FLOAT, false, 0, 0);

十六、开启顶点属性           draw()

gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);  

十七、绘制顶点缓存           draw()

gl.drawArrays(gl.TRIANGLES, 0,vertexBuffer.numberOfItems);