webgl自学笔记——光照
在Webgl中我们使用顶点着色器和片元着色器来为我们的场景创建光照模型。着色器允许我们使用数学模型来控制如何照亮我们的场景。
最好有线性代数的相关知识。
本章中:
- 光源、法线、材料
- 光照和着色的区别
- Goraud Phong着色方法和Lambertian Phong光照模型
- 定义并使用uniforms、attributes、varyings
- 使用ESSL,webgl的着色器语言
- 讨论跟着色有关的webgl api
- 继续关于webgl是一个状态机的分析,描述跟着色器相关的可以从状态机中设置和取回的attributes
现实世界中我们能看到物体是因为他们反射光。所有的物体根据他们的 位置 和与光源的相对距离反射的光是不同的,物体表面的 法线 代表表面的方向决定反射光的方向,表面的 材料 决定多少强度的光会被反射。
光源
光源可以具有位置也可以只具有方向。当光源的位置能够影响场景的照亮时他就是点光源。方向光源指的是无论他的位置在哪都将对场景产生相同的光亮效果,如太阳光,这类光源也叫平行光。
点光源通常用一个场景中的点来建模,而平行光通常用向量来代表他的方向,为了简便计算通常用单位向量。
法线
法线是垂直于我们想要照亮的物体表面的向量。法线代表表面的方向因此他们为光源和物体的交互建模中具有决定性作用。
每一个顶点都有一个关联的法向量。
如果一个顶点被多个三角形共享,共享顶点的法向量等于共享顶点在不同的三角形中的法向量的和。N=N1+N2;
法向量为了计算的方便也会标准化成单位向量。
材料
webgl中的物体的材料需要结合他的颜色、纹理等多个参数来建模。材料颜色通常用rgb来表示,材料的纹理与被匹配在物体表面的图像有关。为表面匹配图像的过程叫做纹理贴图。
结合了光照、法线和材料的渲染管线:
上面这张图中,由于法线是定义在顶点-顶点基础上的,因此法线在webgl中被当做VBO来建模并且通过attribute来匹配到顶点坐标VBO。
光和材料使用uniform来传递。uniform可以在顶点着色器和片元着色器中来使用。这给我们的光照模型带来很多灵活性,因为我们既可以计算出光如何在顶点上被反射也可以计算出光光在片元中如何被反射(顶点法线可以通过varyings传递到片元着色器)
attributes和uniforms的区别
1、当一个绘制api(drawArrays、drawElements)被调用时,GPU会并行的加载顶点着色器的多份拷贝。每一份拷贝都会接收到不同的属性集合。这些属性将匹配到VBO并被绘制出来。
2、顶点着色器的所有拷贝中都会受到相同的uniforms,换句话说uniforms在每次绘制调用中都可以认为是常量
上图展示的是gpu并行加载多份顶点着色器和匹配VBO的过程。
一旦光线、法线、材料被传递到程序中去后,下个步骤需要决定用什么样的着色方法和光照模型。
着色方法和光照反射模型
着色和光照两个术语相互间会引起歧义。他们实际上是两个不同的概念,着色指的是让场景中的每个片元得到最终颜色的插值方式。着色的类型定义了在那里计算出最终的颜色(在顶点着色器还是片元着色器中)。一旦着色模型建立后,光照模型决定了法线、材料和光纤如何结合起来产生最终颜色。光照模型使用的是光的物理反射规律。因此在很多书籍中光照模型也被成为反射模型。
着色(插值)方式:
1、Goraud插值;Goraud插值方法在顶点着色器中计算出最终颜色。顶点法线在这里的计算中使用,然后顶点的最终颜色使用varying变量传递到片元着色器中。由于varying变量的在渲染管道中会被自动进行插值,每一个片元的最终颜色是由包含它的封闭三角形的三个顶点颜色决定的。
2、Phong插值;Phong插值在片元着色器中计算出最终颜色。每一个顶点法线通过varying变量沿着顶点着色器传递到片元着色器中。因为varying类型的插值机制被包含在管线中,所以每一个片元都有自己的法线。然后片元法线在片元着色器中来计算出最终颜色。
着色方法不指定每个片元的最终颜色如何计算,它只指定在哪里计算最终颜色和用什么样的插值方式。
光反射模型:
1、Lambertian反射模型
Lambertian反射常用语计算机图形学中为漫反射建模,漫反射指的是入射光朝多个角度反射而不是只朝着一个角度反射(镜面反射)。该条件下光照模型遵循余弦发射模型。Lambertian反射通常使用表面法线和光照方向的负向量的点乘积。然后得到的结果乘以材料颜色和光源颜色。
2、Phong反射模型
在Phong反射模型的描述中,表面反射光由三部分的和:环境光+漫反射+镜面反射。
ambient:代表周围中散乱的光,它是独立于光源的并且在所有片元中都一样
diffuse:描述的是漫反射,通常使用Lambertian模型
specular:镜面反射;理论上讲当我们的视线角度与反射光角度相同时镜面部分得到最大值。这部分可以使用视线向量和反射光向量的点乘积得到。视线向量的起点是片元终点是视点位置(相机位置),反射光方向由入射光根据表面的法线发射得出(essl中有专门的reflect方法计算)。然后点乘积的结果再与一个代表表面发亮的数字做幂运算。而后的结果在乘以光和材料的镜面部分颜色。
最后将环境部分、漫反射部分、镜面部分相加得到片元的最终颜色。
ESSL——OpenGL ES 着色器语言
上面说到没有光的话整个场景就看不到物体,我理解是着色器最终只认gl_color;当物体拥有材质时,如果这时候没有光可能导致gl_color计算值为0x000000;
当没有任何光源的时候,最终的颜色将是黑色,无论材质是什么颜色。
只有蓝色材质才能反射蓝色光
webgl自学笔记——光照的更多相关文章
- webgl自学笔记——几何图形
3D应用的基础元素: 1.canvas,它是渲染场景的占位符.标准html的canvas元素 2.Objects,这里指的是组成一个场景的所有3d实体.这些实体都由三角形组成.webgl中使用Buff ...
- webgl自学笔记——矩阵变换
这章主要探讨矩阵,这些矩阵代表了应用在我们场景上的变换,允许我们移动物体.然而在webGL api中并没有一个专门的camera对象,只有矩阵.好消息是使用矩阵来取代相机对象能让webgl在很多复杂动 ...
- webgl自学笔记——深度监测与混合
这一章中关于webgl中颜色的使用我们将深入研究.我们将从研究颜色在webgl和essl中如何被组装和获取开始.然后我们讨论在物体.光照和场景中颜色的使用.这之后我们将看到当一个物体在另一个物体前面是 ...
- 《Linux内核设计与实现》课本第四章自学笔记——20135203齐岳
<Linux内核设计与实现>课本第四章自学笔记 进程调度 By20135203齐岳 4.1 多任务 多任务操作系统就是能同时并发的交互执行多个进程的操作系统.多任务操作系统使多个进程处于堵 ...
- 《Linux内核设计与实现》课本第三章自学笔记——20135203齐岳
<Linux内核设计与实现>课本第三章自学笔记 进程管理 By20135203齐岳 进程 进程:处于执行期的程序.包括代码段和打开的文件.挂起的信号.内核内部数据.处理器状态一个或多个具有 ...
- 《Linux内核设计与实现》课本第十八章自学笔记——20135203齐岳
<Linux内核设计与实现>课本第十八章自学笔记 By20135203齐岳 通过打印来调试 printk()是内核提供的格式化打印函数,除了和C库提供的printf()函数功能相同外还有一 ...
- python自学笔记
python自学笔记 python自学笔记 1.输出 2.输入 3.零碎 4.数据结构 4.1 list 类比于java中的数组 4.2 tuple 元祖 5.条件判断和循环 5.1 条件判断 5.2 ...
- ssh自学笔记
Ssh自学笔记 Ssh简介 传统的网络服务程序,如:ftp.pop和telnet在本质上都是不安全的,因为它们在网络上用明文传送口令和数据,别有用心的人非常容易就可以截获这些口令和数据.而且,这些服务 ...
- JavaScript高级程序设计之自学笔记(一)————Array类型
以下为自学笔记. 一.Array类型 创建数组的基本方式有两种: 1.1第一种是使用Array构造函数(可省略new操作符). 1.2第二种是使用数组字面量表示法. 二.数组的访问 2.1访问方法 在 ...
随机推荐
- 一天搞定CSS:边框border--02
每一个标签都是一个盒子,具体见HTML教程 因此,每一个标签有大小,有边框 1.border样式:单一样式 2.border样式:复合样式 border: 粗细 类型 颜色: 3.border方向 4 ...
- HTML/XML/XPATH基础
Html超文本标记语言 网页上单击右键→查看源文件/查看源代码 Html基本结构 <html> 为文档根元素,所有元素都在内部进行 <head> ...
- checkbox全选、全不选实现
<form name=aa1 > <p> <input type=checkbox name="radiot ...
- EJS模板引擎
前面的话 nodejs的模板引擎有很多, EJS是比较简单和容易上手的.本文将详细介绍EJS 概述 EJS是一个简单高效的模板语言,通过数据和模板,可以生成HTML标记文本.可以说EJS是一个Java ...
- hadoop伪分布式集群搭建与安装(ubuntu系统)
1:Vmware虚拟软件里面安装好Ubuntu操作系统之后使用ifconfig命令查看一下ip; 2:使用Xsheel软件远程链接自己的虚拟机,方便操作.输入自己ubuntu操作系统的账号密码之后就链 ...
- WPF MVVM 架构 Step By Step(2)(简单的三层架构示例及粘合代码GLUE code)
我们第一步就是去了解三层架构和问题然后去看MVVM是怎么去解决这些问题的. 现在,感觉和事实是完全不同的两个东西.当你看到三层架构的框图的时候,你会觉得每层的职责被分配的很好.但是当你你真的去写代码的 ...
- mac os 安装 python 环境
1.我们先获取pip安装脚本: 1 wget https://bootstrap.pypa.io/get-pip.py 如果没有安装wget可以去这里将所有内容复制下来,新建get-pip.py文件, ...
- document事件及例子
一.关于鼠标事件:onclick:鼠标单击触发 ondbclick:鼠标双击触发 onmouseover:鼠标移上触发 onmouseout:鼠标离开触发 onmousemove:鼠标移动触发 二.关 ...
- 如何在linux如何安装nginx服务器
1.进入命令窗口: 2.进入nginx.org 网站 下载安装包nginx-1.8.0.tar.gz 3.进入下载的文件夹 4.加压下载的压缩包 tar -zxvf nginx-1.8.0.tar. ...
- python 遍历列表 list
names=['a','b',['aha',[['lucy','lily']]] 遍历这个列表 def print_list(this_list); for name in this_list: if ...