WebGL光照基础知识:光学现象基本概念

techbrood 发表于 2019-05-05 00:11:11

标签: webgl, light, 散射, 透射, 折射, 衍射

- +

用webgl着色器来实现光照特效,本质上是一个对物理学特性使用计算机进行近似模拟的方法和过程。

所以我们需要理解光线传播的几个基本概念及其区别:反射、衍射、散射以及透射、折射

散射是由于介质中存在的微小粒子(异质体)或者分子对光的作用,使光束偏离原来的传播方向而向四周传播的现象。

浑浊介质有多种不同的形式。主要是以下几种:

1.气体中混有固体微粒,即大气中有烟,灰尘;

2.气体中混有微小液滴,就象雾;

3.液体中混有固体微粒,称为悬浊液;

4.液体中混有另一种液体的微小液滴,称为乳剂。

当光通过这些介质时都会发生散射。

从微观角度看,光学的现象都是光子散射的统计结果,以演绎的方法,用量子力学的散射理论,原则上可以推出各种光学定律,所以,广义地讲,反射(漫反射)也是一种散射行为。
此外,更容易使人困惑的是散射与衍射的区别,衍射可以看成由个别的不均匀区域造成的,比如波长大小的小孔,或者单个波长大小的障碍物,都可以称之为衍射;如果波长大小的障碍物很多的话,比如空气中的雾霾,对于每个小颗粒,光都会发生衍射,但是大量颗粒对光的衍射是互相干扰的,而且颗粒的分布一般是不规则而又随机的(规则分布的晶体除外,晶体中光散射常称为衍射),就看不到衍射的特征了,这时就可称之为散射;而对于反射而言,也是大量光子在边界散射的统计效应。
原则上讲,分析光子的行为,量子力学散射理论是基本方程式,而散射,反射,衍射,则是不同的边界条件。


光从一种透明介质斜射入另一种透明介质时,传播方向一般会发生变化,这种现象叫光的折射,也叫透射。光的折射与光的反射一样都是发生在两种介质的交界处,只是反射光返回原介质中,而折射光则进入到另一种介质中,由于光在在两种不同的物质里传播速度不同,故在两种介质的交界处传播方向发生变化,这就是光的折射。

possitive(9) views3933 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 增强现实引擎ARToolKit工作原理简介

    ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;

  • html5跨平台实战-第一周-水平测验-新闻列表页面

    这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图

  • 谷歌ARCore技术特性简介

    谷歌美国时间2017.8.29号刚发布了ARCore预览版,这是一个类似于苹果ARKit的增强现实SDK,在此之前,谷歌虽然已投资AR平台Tango,但由于需要特定的硬件和传感器,...

  • Blender2.7给平面模型添加纹理贴图

    在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...

  • CSS3属性选择器特性使用详解

    CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...

  • CSS3特性查询(Feature Query: @supports)功能简介

    这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...

  • 函数式JavaScript编程基础概念:Curry和Partial Application

    本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...

  • HTML5动画背后的数学 - 粒子群仿生算法简介

    本站收录了多个算法可视化动画,如模拟鸟群运动:http://wow.techbrood.com/fiddle/30529等等。这里面除...

  • HTTP/2背景和新特性简介

    在前面的一篇文章中已经介绍了

  • HTTP1.1协议现状、问题和解决方案

    HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • 使用纯CSS3实现一个3D旋转的书本

    有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • 更多...