WebGL光照基础知识:光学现象基本概念
用webgl着色器来实现光照特效,本质上是一个对物理学特性使用计算机进行近似模拟的方法和过程。
所以我们需要理解光线传播的几个基本概念及其区别:反射、衍射、散射以及透射、折射。
散射是由于介质中存在的微小粒子(异质体)或者分子对光的作用,使光束偏离原来的传播方向而向四周传播的现象。
浑浊介质有多种不同的形式。主要是以下几种:
1.气体中混有固体微粒,即大气中有烟,灰尘;
2.气体中混有微小液滴,就象雾;
3.液体中混有固体微粒,称为悬浊液;
4.液体中混有另一种液体的微小液滴,称为乳剂。
当光通过这些介质时都会发生散射。
而从微观角度看,光学的现象都是光子散射的统计结果,以演绎的方法,用量子力学的散射理论,原则上可以推出各种光学定律,所以,广义地讲,反射(漫反射)也是一种散射行为。
此外,更容易使人困惑的是散射与衍射的区别,衍射可以看成由个别的不均匀区域造成的,比如波长大小的小孔,或者单个波长大小的障碍物,都可以称之为衍射;如果波长大小的障碍物很多的话,比如空气中的雾霾,对于每个小颗粒,光都会发生衍射,但是大量颗粒对光的衍射是互相干扰的,而且颗粒的分布一般是不规则而又随机的(规则分布的晶体除外,晶体中光散射常称为衍射),就看不到衍射的特征了,这时就可称之为散射;而对于反射而言,也是大量光子在边界散射的统计效应。
原则上讲,分析光子的行为,量子力学散射理论是基本方程式,而散射,反射,衍射,则是不同的边界条件。
光从一种透明介质斜射入另一种透明介质时,传播方向一般会发生变化,这种现象叫光的折射,也叫透射。光的折射与光的反射一样都是发生在两种介质的交界处,只是反射光返回原介质中,而折射光则进入到另一种介质中,由于光在在两种不同的物质里传播速度不同,故在两种介质的交界处传播方向发生变化,这就是光的折射。
最新评论
- 相关文章
HTML5 And Canvas 2D Specs Are Now Feature Complete, First HTML 5.1 Working Draft Published
We’ve been writing about HTML5 for quite a while, but, until today, the actual HTML5 specs and standards were still moving targets. Now, however, the...
谷歌ARCore技术特性简介
谷歌美国时间2017.8.29号刚发布了ARCore预览版,这是一个类似于苹果ARKit的增强现实SDK,在此之前,谷歌虽然已投资AR平台Tango,但由于需要特定的硬件和传感器,...
如何使用BabylonJS加载OBJ或STL模型
BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
本文说明和演示如何使用babylon.js来加载一个标准3d模型文...WebAssembly工作原理和JavaScript语言性能对比分析
本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...
WebGL Roadmap
Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...
CSS3原生变量(Native Variables)新特性简介
对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...CSS3特性查询(Feature Query: @supports)功能简介
这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...
前端开发框架技术选型:Angular2 VS React VS jQuery
Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controll...
HTML5动画背后的数学 - 粒子群仿生算法简介
本站收录了多个算法可视化动画,如模拟鸟群运动:http://wow.techbrood.com/fiddle/30529等等。这里面除...
HTTP/2背景和新特性简介
Three.js入门教程4 - 创建粒子系统动画
嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。
WebGL入门教程4 - 使用纹理贴图(Texture Map)
3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...
更多...