WebGL－06.动画控制

本系列教程主要讲解利用WebGL开发网页版的三维图形程序。这里主要用到的OpenGL和FlyMath内容。本系列内容较难。要求学生对几何和编程有一定的了解。建议初三以上同学学习。

这节来说下如何做“动画”，在c/c++下我们一般会用计时器来控制动画演示频率。在HTML下我们就用settimeout这个函数，等待若干毫秒后执行某个函数。以上节课为例。三角形由大变小，再由小变大，一共是20帧，这个过程我们要2秒钟内完成。那么一帧的时间就是2000 / 20 = 100毫秒。由于渲染内容较少，渲染时间我们忽略不算。渲染一帧后我们就等待100毫秒。

还是在上节的程序上修改。主要是对click()函数 和 draw_triangle()这两个函数做了小修改。另外把GL上下文gl_context设定为全局参数。方便函数使用。

---

javascript部分源码

 

//定义全局GL上下文
var gl_context;
    
//停止变量
var curTime;
var isStop = 1;
    
//定义颜色数组
var color = [0,0,0];
var v_color = 0.1;
    
//定义缩放因子
var s_scale = 0.1;
var v_scale = 1;
    
//定义缩放矩阵
var scale_matrix = new Array;
    
FlyMath.Matrix.Identity(scale_matrix);
    
//时间函数
function onTime()
{
  color[0]+=v_color;
  if(color[0]>=1 || color[0]<0.1)
  {
     v_color*=-1;
  }
    draw_triangle();
    curTime = setTimeout("onTime()",100);
}
    
//处理点击事件
function click(ev)
{
    if(isStop==1)
        isStop=0;
    else
        isStop=1;
        
    if(isStop==0)
        onTime();
    else
        clearTimeout(curTime);
}
    
//初始化WebGL
function init_webgl()
{
  var canvas = document.getElementById("webGL");
      
  if(!canvas){
    alert("获取<Canvas>标签失败！");
    return;
  }
    
  //获取webGL统计图上下文
  gl_context = canvas.getContext('webgl',
                { antialias:true,
                  stencil:true});
    
  if(!gl_context){
    alert("获取WebGL上下文失败！");
  }
    
  canvas.width = $("#area").width();
  canvas.height = $("#area").width()*3/5;
      
  canvas.onmousedown = function(ev){ click(ev);};
    
  //设置视口大小
  gl_context.viewport(0,0,canvas.width,canvas.height);
    
    draw_triangle();
}
    
//绘制三角形
function draw_triangle()
{
//清空canvas的背景颜色
  gl_context.clearColor(0,0,0.5,1);
    
  //清空webgl颜色缓冲区里的内容
  gl_context.clear(gl_context.COLOR_BUFFER_BIT);
//定义顶点shader和片断shader
  var vs_src = "attribute vec4 a_Position;\n" +
                "uniform mat4 scaleMatrix;\n"+
                "uniform vec3 a_color;\n" +
                "varying vec3 A_color;\n" +
                "void main() {\n" +
                    "gl_Position = a_Position * scaleMatrix;\n"+
                    "A_color = a_color;\n"+
                    "}\n";
    
    var fs_src = "precision highp float;\n" +
            "varying vec3 A_color;\n" +
                    "void main() {\n" +
                    " gl_FragColor = vec4(A_color.xyz,1);\n" +
                    "}\n";
    
    var vs = gl_context.createShader(gl_context.VERTEX_SHADER);
  gl_context.shaderSource(vs,vs_src);
  gl_context.compileShader(vs);
      
  if(!gl_context.getShaderParameter(vs,gl_context.COMPILE_STATUS)){
        alert(gl_context.getShaderInfoLog(vs));
        return;
    }
    
    var fs = gl_context.createShader(gl_context.FRAGMENT_SHADER);
  gl_context.shaderSource(fs,fs_src);
  gl_context.compileShader(fs);
      
  if(!gl_context.getShaderParameter(vs,gl_context.COMPILE_STATUS)){
        alert(gl_context.getShaderInfoLog(fs));
        return;
    }
    
//加载选择的顶点和片断
  var shaderProgram = gl_context.createProgram();
  gl_context.attachShader(shaderProgram, vs);
  gl_context.attachShader(shaderProgram, fs);
  gl_context.linkProgram(shaderProgram);
    
//绑定shader中的参数变量
  var shader_pos = gl_context.getAttribLocation(shaderProgram, "a_Position");
  var ColorUniform = gl_context.getUniformLocation(shaderProgram,"a_color");
  var ScaleMatUniform = gl_context.getUniformLocation(shaderProgram,"scaleMatrix");
    
  var vertices = new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5]);
  var tri_buf = gl_context.createBuffer();
  gl_context.bindBuffer(gl_context.ARRAY_BUFFER, tri_buf);
  gl_context.bufferData(gl_context.ARRAY_BUFFER, new Float32Array(vertices), gl_context.STATIC_DRAW);
        
//使用选择的程序，激活缓冲区，渲染
    gl_context.useProgram(shaderProgram);
    gl_context.enableVertexAttribArray(shader_pos);
    gl_context.vertexAttribPointer(shader_pos, 2, gl_context.FLOAT, false, 0, 0);
    
//绑定顶点顔色
  gl_context.uniform3f(ColorUniform,color[0],color[1],color[2]);
      
//计算并绑定缩放矩阵
    if(v_scale>1)
    {
        s_scale *=-1;
    }
    else if(v_scale<0.2)
    {
        s_scale *=-1;
    }
        
    v_scale +=s_scale;
        
    FlyMath.Matrix.Scaling(scale_matrix,v_scale,v_scale,v_scale);
    gl_context.uniformMatrix4fv(ScaleMatUniform,false,scale_matrix);
        
        
    gl_context.drawArrays(gl_context.TRIANGLES,0,3);
}

---

运行范例