WebGL光照基础知识:光学现象基本概念
用webgl着色器来实现光照特效,本质上是一个对物理学特性使用计算机进行近似模拟的方法和过程。
所以我们需要理解光线传播的几个基本概念及其区别:反射、衍射、散射以及透射、折射。
散射是由于介质中存在的微小粒子(异质体)或者分子对光的作用,使光束偏离原来的传播方向而向四周传播的现象。
浑浊介质有多种不同的形式。主要是以下几种:
1.气体中混有固体微粒,即大气中有烟,灰尘;
2.气体中混有微小液滴,就象雾;
3.液体中混有固体微粒,称为悬浊液;
4.液体中混有另一种液体的微小液滴,称为乳剂。
当光通过这些介质时都会发生散射。
而从微观角度看,光学的现象都是光子散射的统计结果,以演绎的方法,用量子力学的散射理论,原则上可以推出各种光学定律,所以,广义地讲,反射(漫反射)也是一种散射行为。
此外,更容易使人困惑的是散射与衍射的区别,衍射可以看成由个别的不均匀区域造成的,比如波长大小的小孔,或者单个波长大小的障碍物,都可以称之为衍射;如果波长大小的障碍物很多的话,比如空气中的雾霾,对于每个小颗粒,光都会发生衍射,但是大量颗粒对光的衍射是互相干扰的,而且颗粒的分布一般是不规则而又随机的(规则分布的晶体除外,晶体中光散射常称为衍射),就看不到衍射的特征了,这时就可称之为散射;而对于反射而言,也是大量光子在边界散射的统计效应。
原则上讲,分析光子的行为,量子力学散射理论是基本方程式,而散射,反射,衍射,则是不同的边界条件。
光从一种透明介质斜射入另一种透明介质时,传播方向一般会发生变化,这种现象叫光的折射,也叫透射。光的折射与光的反射一样都是发生在两种介质的交界处,只是反射光返回原介质中,而折射光则进入到另一种介质中,由于光在在两种不同的物质里传播速度不同,故在两种介质的交界处传播方向发生变化,这就是光的折射。
最新评论
- 相关文章
Monaco Editor 编辑器拷贝粘贴功能调用和获取选中文本
有时候需要在monaco editor外部调用编辑器的内置功能比如希望在页面主工具栏实现一些快捷操作。button
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
使用CSS3 box-decoration-break特性实现多行文本样式
当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
按照规范...使用HTML5 FileReader和Canvas压缩用户上传的图片
手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...
Three.js 对象局部坐标转换为世界坐标
在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...
如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...
Three.js入门教程2 - 着色器(上)
S3TC(S3 Texture Compression)纹理压缩格式详解
使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...
Three.js 3D打印数据模型文件(.STL)加载
3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...
使用requestAnimationFrame和Canvas给按钮添加绕边动画
要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...
如何使用CSS3实现书页(书本)卷角效果
我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
更多...