WebGL－17.雾效果

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

通过对着色器的处理，我们可以产生很多好看的效果。而ＧＰＵ编程的重点也在于着色器的处理。雾效果在着色器里实现是非常容易的。简单的雾化公式如下：

片元颜色＝物体表面颜色　* 雾化因子 + 雾的颜色 * (1-雾化因子）
  
雾化因子＝（雾化终点　－　当前点与视点间的距离）/（雾化终点　－　雾化起点）

下面的例子是这样的。一个前后移动的三角形。观察点位置不变（０，０，１）。雾化起点和终点分别是1.5和5.0。三角形表面颜色是黄色。雾的颜色是绿色。从1.5位置开始，越往后，颜色越绿。

---

javascript部分源码

//定义全局GL上下文
var gl_context;
    
//定义Camera位置
var camera = [0,0,1];
var camera_to = [0,0,0];
var camera_up = [0,1,0];
     
//定义camera矩阵和工程矩阵
var matView = new Array;
var matProject = new Array;
    
//停止变量
var curTime;
var isStop = 1;
     
//定义缩放因子
var s_translate = 0.1;
var v_translate = -0.5;
     
//定义缩放矩阵
var translate_matrix = new Array;
     
FlyMath.Matrix.Identity(translate_matrix);
     
//时间函数
function onTime()
{
  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);
    
  //设置matView和matProject矩阵
  FlyMath.Matrix.LookAtRH(matView,camera,camera_to,camera_up);
  FlyMath.Matrix.PerspectiveRH(matProject,FlyMath_PI/3,1,1,100);
     
  draw_triangle();
}
     
//绘制三角形
function draw_triangle()
{
//清空canvas的背景颜色
  gl_context.clearColor(0,0,0.5,1);
  gl_context.enable(gl_context.DEPTH_TEST);
  //清空webgl颜色缓冲区里的内容
  gl_context.clear(gl_context.COLOR_BUFFER_BIT | gl_context.DEPTH_BUFFER_BIT);
//定义顶点shader和片断shader
  var vs_src = "attribute vec4 a_Position;\n" +
               "uniform mat4 projectionMatrix;\n" +
               "uniform mat4 modelViewMatrix;\n" +
               "uniform mat4 translateMatrix;\n"+
               "varying float v_dist;\n"+
               "void main() {\n" +
               " gl_Position = projectionMatrix * modelViewMatrix * translateMatrix * a_Position ;\n"+
               " vec3 eye = vec3(0,0,1);\n"+
               " //计算顶点与视点间距离\n"+
               " v_dist = distance(vec3(projectionMatrix * translateMatrix * a_Position) , eye);\n"+
               "}\n";
     
  var fs_src = "precision highp float;\n" +
               "varying float v_dist;\n" +
               "void main() {\n" +
               " float fogFactor = clamp( (v_dist-1.5)/(5.0-1.5),0.0,1.0) ;\n"+
               " vec3 color = vec3(1,1,0);\n"+
               " vec3 fcolor = vec3(0,1,0);\n"+
               " vec3 mcolor = mix(color,fcolor,fogFactor);\n" +
               " gl_FragColor = vec4(mcolor,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 shaderModelViewMatrixUniform = gl_context.getUniformLocation(shaderProgram,"modelViewMatrix");
  var shaderProjectionMatrixUniform = gl_context.getUniformLocation(shaderProgram,"projectionMatrix");
  var translateMatUniform = gl_context.getUniformLocation(shaderProgram,"translateMatrix");
     
  var vertices = new Float32Array([0.0,0.5,-0.5,-0.5,-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, 3, gl_context.FLOAT, false, 0, 0);
     
//计算并绑定缩放矩阵
    
  if(v_translate>-0.5)
  {
    s_translate *=-1;
  }
  else if(v_translate<-6.0)
  {
    s_translate *=-1;
  }
         
  v_translate -= s_translate;
    
  FlyMath.Matrix.Translation(translate_matrix,0,0,v_translate);
  gl_context.uniformMatrix4fv(translateMatUniform,false,translate_matrix);   
      
  gl_context.uniformMatrix4fv(shaderModelViewMatrixUniform,false,matView);
  gl_context.uniformMatrix4fv(shaderProjectionMatrixUniform,false,matProject);
         
  gl_context.drawArrays(gl_context.TRIANGLES,0,3);

---

运行范例