Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

WebGL(拾叁) 点光源

  其实如果知道了之前平行光的做法,点光源这东西自己都能类推出来。平行光是只有一个方向向量的,可以直接计算。而点光源就是一个坐标位置,它的计算比平行光多了一个计算光线方向的步骤,其他计算都和平行光一样。点光源一样可以做漫射和反射的效果。
  光线是从点光源的位置射向物体的,我们要计算光线方向只要把物体顶点的坐标减去点光源的坐标就可以得到照射的方向向量了。这只用到了最基础的向量减法,很简单吧?其实点光源这东西没多少可说的,把它作为一章有点小题大做了= =。。直接来看代码吧 //顶点着色器
attribute vec3 po;
attribute vec3 no;
attribute vec2 mp;
uniform mat4 pro;
uniform mat4 tra;
uniform vec3 li_po; //光源位置
uniform vec3 li_co; //光线颜色
varying vec3 dif;
varying vec2 mp_v;
void main(){
  mp_v=mp;
  vec4 po_t=tra*vec4(po,1.0); //计算物体变换后的位置
  vec3 li_di=normalize((po_t-vec4(li_po,1.0)).xyz); //计算光线方向
  gl_Position=pro*po_t;
  vec3 no_t=normalize((tra*vec4(no,0.0)).xyz); //变换向量
  dif=clamp(-dot(li_di,no_t),0.1,1.0)*li_co; //计算影响强度
}
  在这个例子中我只做了漫射效果。我实在没美术细胞,本来是有做反射效果的,但是觉得太难看了,所以又去掉了。实现方式和之前的平行光一样的,再说一次也没意义。这个代码的关键是光线方向的计算。先计算物体变换后的位置,把它放入一个变量中,因为有除了计算光线,本身也需要这个位置数据当作顶点位置。然后就是计算光线方向,直接用把物体顶点位置和光源位置看作向量,要从光源位置走到物体位置显然就是拿目标位置减去出发点位置嘛。最后再标准化一下就可以得到光线方向的单位向量了。
  其它代码我就不贴出来了,不同的只有这一个步骤而已。

  所有光线后面的计算步骤的是相同的,只要计算出光线方向就行。即使光源不是点而是任意曲面上的光源也是一样的计算步骤。这些东西逐个说永远都说不完,学会了例子就需要能举一反三。这篇内容有点少,原谅下啦~
  下面是完整实例,这个例子是在{0,0,-5}的位置放了点光源,球体以2的距离绕着它旋转。
  WebGL点光源
网名:
34.203.245.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^