WebGL光照基础知识:光学现象基本概念
用webgl着色器来实现光照特效,本质上是一个对物理学特性使用计算机进行近似模拟的方法和过程。
所以我们需要理解光线传播的几个基本概念及其区别:反射、衍射、散射以及透射、折射。
散射是由于介质中存在的微小粒子(异质体)或者分子对光的作用,使光束偏离原来的传播方向而向四周传播的现象。
浑浊介质有多种不同的形式。主要是以下几种:
1.气体中混有固体微粒,即大气中有烟,灰尘;
2.气体中混有微小液滴,就象雾;
3.液体中混有固体微粒,称为悬浊液;
4.液体中混有另一种液体的微小液滴,称为乳剂。
当光通过这些介质时都会发生散射。
而从微观角度看,光学的现象都是光子散射的统计结果,以演绎的方法,用量子力学的散射理论,原则上可以推出各种光学定律,所以,广义地讲,反射(漫反射)也是一种散射行为。
此外,更容易使人困惑的是散射与衍射的区别,衍射可以看成由个别的不均匀区域造成的,比如波长大小的小孔,或者单个波长大小的障碍物,都可以称之为衍射;如果波长大小的障碍物很多的话,比如空气中的雾霾,对于每个小颗粒,光都会发生衍射,但是大量颗粒对光的衍射是互相干扰的,而且颗粒的分布一般是不规则而又随机的(规则分布的晶体除外,晶体中光散射常称为衍射),就看不到衍射的特征了,这时就可称之为散射;而对于反射而言,也是大量光子在边界散射的统计效应。
原则上讲,分析光子的行为,量子力学散射理论是基本方程式,而散射,反射,衍射,则是不同的边界条件。
光从一种透明介质斜射入另一种透明介质时,传播方向一般会发生变化,这种现象叫光的折射,也叫透射。光的折射与光的反射一样都是发生在两种介质的交界处,只是反射光返回原介质中,而折射光则进入到另一种介质中,由于光在在两种不同的物质里传播速度不同,故在两种介质的交界处传播方向发生变化,这就是光的折射。
最新评论
- 相关文章
如何使用BabylonJS加载OBJ或STL模型
BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
本文说明和演示如何使用babylon.js来加载一个标准3d模型文...ES6小知识:动态对象键(Dynamic Object Keys)语法简介
在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const
使用CSS3 box-decoration-break特性实现多行文本样式
当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
按照规范...深入理解Three.js(WebGL)贴图(纹理映射)和UV映射
本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
深度贴图(depth map)概念简介和生成流程
Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...
Three.js入门教程2 - 着色器(下)
这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程。
如何使用WebGL创建一个逼真的下雨动画
之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...
浏览器控制台报JS脚本执行错误:Module is not defined
现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...使用Canvas绘制完美的不完美圆形
真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...
HTML网页布局:静态、自适应、流式、响应式
静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
更多...