WebGL－08.灯光使用

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

3D渲染要真实，最重要的条件有两个，其中一个就是灯光的运用。在WebGL里灯光渲染都放在片元着色器里完成。这就给了我们很大的“艺术创作”空间。有四点大家要记住的。

1. 在开启灯光照亮模式后，没有被灯光照到的物体（部份）是看不到的。
2. 灯光是照亮物体，自身是不会发亮的，也看不到的。
3. GLSL下灯光处理是要自己写的，没有现成的函数给你。
4. 灯光只负责照亮物体，不会渲染出阴影。

这节我示范的程序是一个简单的点光源照亮三角形。光源在不同的位置，对三角形的照亮部位是不同的。红色的三角形，绿色的灯，照出来的效果会如何呢？在灯光强的地方，会显示绿色，在远的地方是红色。它们之间应该是红+绿的混合色，就是橙黄混合色。

---

javascript部分源码

//定义全局GL上下文
var gl_context;
    
//循环控制参数
var curTime;
var isStop=1;
    
//定义Camera位置
var camera = [0,0,1];
var camera_to = [0,0,0];
var camera_up = [0,1,0];
    
//定义颜色数组
var color = [1,0,0];
    
//定义灯光属性
var light_color = [0,1,0];
var light_pos = [0,0,0];
var light_step = 0.1;
    
//定义camera矩阵和工程矩阵
var matView = new Array;
var matProject = new Array;
    
//时间函数
function onTime()
{
    if(light_pos[0] >=3.0 || light_pos[0]<=-3.0)
        light_step *=-1;
    
    light_pos[0] += light_step;
    
    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,
                                  depth: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);
    
  //清空webgl颜色缓冲区里的内容
  gl_context.clear(gl_context.COLOR_BUFFER_BIT | gl_context.DEPTH_BUFFER_BIT);
//开启深度缓冲区检测
  gl_context.enable(gl_context.DEPTH_TEST);
    
//定义顶点shader和片断shader
    var vs_src = "attribute vec4 a_Position;\n" +
                "uniform mat4 projectionMatrix;\n" +
                "uniform mat4 modelViewMatrix;\n" +
                "uniform vec3 a_color;\n" +
                "uniform vec3 a_lightpos;\n" +
                "uniform vec3 a_lightcolor;\n" +
                "varying vec3 A_Normal;\n" +
                "varying vec3 A_color;\n" +
                "varying vec3 A_lightdir;\n" +
                "varying vec3 A_lightcolor;\n" +
                    
                "void main() {\n" +
                    "gl_Position = projectionMatrix * modelViewMatrix * a_Position;\n"+
                    "A_color = a_color;\n"+
                    "A_Normal = vec3(a_Position.x,a_Position.y,1);\n"+
                    "A_lightdir = normalize(a_lightpos - a_Position.xyz);\n"+
                    "A_lightcolor = a_lightcolor;\n"+
                    "}\n";
    
    var fs_src = "precision highp float;\n" +
                "varying vec3 A_Normal;\n" +
                "varying vec3 A_color;\n" +
                "varying vec3 A_lightdir;\n" +
                "varying vec3 A_lightcolor;\n" +
                "void main() {\n" +
                " float nDot = max(dot(normalize(A_Normal),A_lightdir),0.0);\n"+
                " vec3 curcolor = A_color*(1.0-nDot) + A_lightcolor*nDot ;\n"+
                " gl_FragColor = vec4(curcolor.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);
    
    if (!gl_context.getProgramParameter(shaderProgram, gl_context.LINK_STATUS)) {
      alert("Could not initialise shaders");
    }
    
//绑定shader中的参数变量
    var shader_pos = gl_context.getAttribLocation(shaderProgram, "a_Position");
        
    var LightposUniform = gl_context.getUniformLocation(shaderProgram,"a_lightpos");
    var LightcolorUniform = gl_context.getUniformLocation(shaderProgram,"a_lightcolor");
    var ColorUniform = gl_context.getUniformLocation(shaderProgram,"a_color");
    var shaderModelViewMatrixUniform = gl_context.getUniformLocation(shaderProgram,"modelViewMatrix");
    var shaderProjectionMatrixUniform = gl_context.getUniformLocation(shaderProgram,"projectionMatrix");
    
    var vertices = new Float32Array([0.0,0.5,-3,-0.5,-0.5,-3,0.5,-0.5,-3]);
    var tri_buf = gl_context.createBuffer();
            
//使用选择的程序，激活缓冲区，渲染
    gl_context.useProgram(shaderProgram);
    gl_context.enableVertexAttribArray(shader_pos);
    
    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.vertexAttribPointer(shader_pos, 3, gl_context.FLOAT, false, 0, 0);
    
    
//绑定顶点顔色
    gl_context.uniform3f(ColorUniform,color[0],color[1],color[2]);
    
//绑定灯光属性
    gl_context.uniform3f(LightposUniform,light_pos[0],light_pos[1],light_pos[2]);
    gl_context.uniform3f(LightcolorUniform,light_color[0],light_color[1],light_color[2]);
    
//绑定矩阵
    gl_context.uniformMatrix4fv(shaderModelViewMatrixUniform,false,matView);
    gl_context.uniformMatrix4fv(shaderProjectionMatrixUniform,false,matProject);
        
        
    gl_context.drawArrays(gl_context.TRIANGLES,0,3);
}

 

---

运行范例(点击灯光左右自由移动，再点击停止移动)