1.着色(shading)

在三维图形学术语“着色”的真正含义就是,根据光照条件重建“物体各表面明暗不一的效果”的过程。明白着色过程,需要考虑两件事:
    1.发出光线的光源类型。
    2.物体表面如何反射光线。

2.光源类型
    真实世界中的光主要有两种,平行光(directional light),类似于自然中的太阳光;点光源光(point light),类似于人造灯泡的光。此外,我们还用环境光(ambient light)来模拟真实世界中的非直射光(也就是由光源发出后经过墙壁或其他物体反射后的光)。

3.反射类型
    物体表面反射光线的方式由两种:漫反射(diffuse reflection)和环境反射(enviroment ambient reflection)。

4.漫反射

在漫反射中,反射光的颜色取决于入射光的颜色、表面的基底色、入射光与表面形成的入射角。我们将入射角定义为入射光与表面的法线形成的夹角,并用θ表示,那么慢反射的颜色可根据下式计算得到:

<漫反射光颜色> = <入射光颜色> * <表面基底色> * cos θ

5.环境反射

环境反射光颜色计算根据下式计算得到:

<环境反射光颜色> = <入射光颜色> * <表面基底色>

说明:当漫反射和环境反射同时存在时,将两者加起来,就得到物体最终被观察到的颜色:

<表面的反射光颜色> = <漫反射光颜色> + <环境反射光颜色>

6.根据光线和表面的方向计算入射角

我们无法预先确定光线讲义怎样的角度照射到每个表面上。但是,我们可以确定每个表面的朝向。在指定光源的时候,再确定光的方向,就可以用着两项信息来计算出入射角了。

幸运的是,我们可以通过计算两个矢量的点积,来计算着两个矢量的夹角余弦值cosθ。我们使用点符号(.)来表示点积运算。这样,就可以通过下式计算出来:

cosθ = <光线方向> * <法线方向>

根据漫反射光颜色计算公式,可得到:

<漫反射光颜色> = <入射光颜色> * <表面基底色> * (<光线方向> * <法线方向>)

特别要强调的是,光线方向和法线方向的矢量坐标都必须归一化。即矢量的长度为1。

7.法向量

物体表面的朝向,即垂直于表面的方向,又称为法线或法向量。法向量有三个分量,向量(nx, ny, nz)表示从原点(0, 0, 0)指向(nx, ny, nz)的方向。比如说,向量(1, 0, 0)表示x轴正方向,向量(0, 0, 1)表示z轴正方向。

8.normalize(vec3)归一化矢量参数

normalize是GLSL ES提供的内置函数,对矢量参数归一化。例如:

vec3 normal = normalize(vec3(a_Normal)); // 对法向量归一化

9.dot(vec1, vec2)矢量点积

GLSL ES提供的内置函数dot()计算两个矢量的点积,该函数接收两个矢量作为参数,返回它们的点积。例如:

float dot = max(dot(u_LightDirection, normal), 0.0); // 计算光线方向和法向量点积

点积值小于0,意味着cosθ中的θ大于90度。θ是入射角,也就是入射反方向(光线方向)与表面法线向量的夹角,θ大于90度说明光照在表面的额背面上,这时将点积赋值为0.0。

10.魔法矩阵:逆转置矩阵

我们知道,对顶点进行变换的矩阵称为模型矩阵。如何计算变换之后的法向量呢?只要将变换之前的法向量乘以模型矩阵的逆转置矩阵(inverse transpose matrix)即可。所谓你转置矩阵,就是逆矩阵的转置。

逆矩阵的含义,如果矩阵M的逆矩阵为R,那么R*M或M*R的结果都是单位矩阵。转置的意思是,将矩阵的行列进行调换(看上去就像是沿着左上-右下对角线进行了翻转)。

求逆转置矩阵的两个步骤:

1.求原矩阵的逆矩阵。

2.将上一步求得你矩阵进行转置。

webGL 光照的更多相关文章

  1. WebGL光照阴影映射

      原文地址:WebGL光照阴影映射   经过前面的学习,webgl的基本功能都已经掌握了,我们不仅掌握了着色器的编写,图形的绘制,矩阵的变换,添加光照,还通过对webgl的基础api封装,编写出了便 ...

  2. WebGL简易教程——目录

    目录 1. 绪论 2. 目录 3. 资源 1. 绪论 最近研究WebGL,看了<WebGL编程指南>这本书,结合自己的专业知识写的一系列教程.之前在看OpenGL/WebGL的时候总是感觉 ...

  3. WebGL高级编程:开发Web3D图形 PDF(中文版带书签)

    WebGL高级编程:开发Web3D图形 目录 WebGL简介11.1 WebGL基础11.2 浏览器3D图形吸引人的原因21.3 设计一个图形API31.3.1 即时模式API31.3.2 保留模式A ...

  4. webgl自学笔记——光照

    在Webgl中我们使用顶点着色器和片元着色器来为我们的场景创建光照模型.着色器允许我们使用数学模型来控制如何照亮我们的场景. 最好有线性代数的相关知识. 本章中: 光源.法线.材料 光照和着色的区别 ...

  5. WebGL多模型光照综合实例

      原文地址:WebGL多模型光照综合实例   WebGL是一个非常的接近硬件底层的光栅化API, 从非常类似C/C++风格的API调用方式就可以看出来, 习惯了高级语言的我们会觉得很不友好,觉得特别 ...

  6. [WebGL入门]二十五,点光源的光照

    注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上[lufy:].另外,鄙人webgl研究还不够深入,一些专业词语.假设翻译有误,欢迎大家指 ...

  7. WebGL简易教程(十):光照

    目录 1. 概述 2. 原理 2.1. 光源类型 2.2. 反射类型 2.2.1. 环境反射(enviroment/ambient reflection) 2.2.2. 漫反射(diffuse ref ...

  8. WebGL学习笔记(八):光照

    局部光照与全局光照 局部光照 只考虑光源到模型表面的照射效果,运算量较小: 全局光照 考虑到环境中所有表面和光源相互作用的照射效果,即让没有直接受光照射的位置也会受周围反射光的影响,运算量较大: Ph ...

  9. 突袭HTML5之WebGL 3D概述

    WebGL开启了网页3D渲染的新时代,它允许在canvas中直接渲染3D的内容,而不借助任何插件.WebGL同canvas 2D的API一样,都是通过脚本操纵对象,所以步骤也是基本相似:准备工作上下文 ...

随机推荐

  1. 【WPF】树形结构TreeView的用法(MVVM)

    TreeView控件的用法还是有蛮多坑点的,最好记录一下. 参考项目: https://www.codeproject.com/Articles/26288/Simplifying-the-WPF-T ...

  2. 【Unity】使用Resources类管理资源

    最近参考了各位大神的资源,初步学习了Unity的资源管理模式,包括在编辑器管理(使用AssetDatabase)和在运行时管理(使用Resources和AssetBundle).在此简单总结运行时用R ...

  3. C#中的Partial

    Partial关键词定义的类可以在多个地方被定义,最后编译的时候会被当作一个类来处理. 首先看一段在C#中经常出现的代码,界面和后台分离,但是类名相同. public partial class Fo ...

  4. 【LINUX】——linux如何使用Python创建一个web服务

    问:linux如何使用Python创建一个web服务? 答:一句话,Python! 一句代码: /usr/local/bin/python -m SimpleHTTPServer 8686 > ...

  5. js 实现遮罩某一部分

    借用一下喜马拉雅的效果图,比较一下下面的遮罩层的高度:       我们可以看到它的遮罩层一直都是只遮住的下面.开始想着怎么用CSS实现,几经测试也没弄出来,如果正在看这篇文章的你,知道如何用CSS达 ...

  6. 微信小程序——获取元素的宽高等属性

    微信小程序里面无法像用jquery一样获取到元素的节点.小程序提供了一个wx.createSelectorQuery()来获取元素的相关信息.官方的文档对于它的用法都已经写的很详细了. 我直接上在项目 ...

  7. 动态规划--电路布线(circuit layout)

    <算法设计与分析>  --王晓东 题目描述: 在一块电路板的上.下2端分别有n个接线柱.根据电路设计,要求用导线(i,a(i))将上端接线柱与下端接线柱相连,其中a(i)表示上端点i对应的 ...

  8. svn 怎么直接同步指定服务器的某个文件夹

    背景:首先在svn代码库了,我直接从服务器上拖了一个文件夹下来,但是没有显示svn相关信息(比如:左下角的勾勾).这个时候因为直接拖动下来的时候没有生成对应的.svn文件,所以导致. 解决办法: 选中 ...

  9. struts2 拦截器配置

    CheckLoginInterceptor.java---拦截器具体实现类: package com.sunhoo.hcpms.struts2.action.interceptors; import  ...

  10. [hadoop读书笔记] 第十五章 sqoop1.4.6小实验 - 将mysq数据导入hive

    安装hive 1.下载hive-2.1.1(搭配hadoop版本为2.7.3) 2.解压到文件夹下 /wdcloud/app/hive-2.1.1 3.配置环境变量 4.在mysql上创建元数据库hi ...