美文网首页
webgl 光照

webgl 光照

作者: Viewwei | 来源:发表于2021-09-06 17:07 被阅读0次
  • 前言 现实世界中被光线照射时,会发射一部分光.只有当反射光线进入你的眼睛时,你才能看到物体,并且分辨出它的颜色.
  • 根据光源和光线的方向,物体不同表面的明暗程度变的不一样
  • 根据光源和光线的方向,物体向地面投下影子

光源的类型

光主要分为两大类型:平行光和点光源.平行光类似太阳光.点光源类似人造灯.此外还用环境光来模拟真实世界的非直射光(也就是由光源发出后经过墙壁或者其他物体反射后的光)

  • 平行光: 平行光的光线是相互平行的,平行光具有方向.平行光可以看做是无限远的光源发出的光.平行光比较简单,可以使用一个颜色和一个方向来定义它
  • 点光源: 点光源是从一个点向周围的所有方向发出的光,我们需要指定光源的位置和颜色
  • 环境光: 环境光是指那些经光源发出后,被墙壁等物体多次反射,然后照到物体表面的光.
反射类型

物体向哪个方向反射光,反射光的延时是什么?取决以下两个因素:入射光和物体表面的类型.入射光的信息包括入射光的颜色和方向,而物体表面信息包括表面的固有颜色和反射特性.
物体表面反射光线的方式有两种:漫反射和环境反射

漫反射

漫反射是针对平行光或者点光源而言的.漫反射的反射光在各个方向是均匀的,


image.png

在漫反射中,反射光的颜色取决于入射光的颜色 表面的基底色 入射光与表面形成的入射角.我们将入射角定义为入射光与表面的法向量形成的夹角.
<漫反射光颜色> = <入射光颜色> X<表面基底色> x cosø

环境反射

环境反射是针对环境光而言的.在环境反射中,反射光的方向认为就是入射光的反方向.由于环境关照射物体的方式就是各方向均匀,强度相等,所以反射光也是各个方向均匀
<环境反射光颜色>= <入射光颜色>x<表面基底色>


image.png

当漫反射和环境发射同时存在时,将两者加起来,就会得到最终被观察到的颜色
<表面的反射光颜色> = <蛮反射光颜色>x<环境反射光颜色>

平行光下的漫反射

漫反射的反射光其颜色与光在入射光在入射角ø有关.平行光入射产生的漫反射的颜色比较好计算.漫反射反射关颜色
<漫反射光颜色> = <入射光颜色> x<表面基底色> x cosø
在 3D 建模的时候,我们并不会直接给出入射角是多少,我们必须根据入射光的方向和物体表面的朝向来计算入射角.在 3D 建模的时候,我们可以确定每个表面的朝向,子啊指定光源的时候,在确定光的方向,根据这两个矢量的点积,来计算两个矢量的夹角余弦.点击运算已经内置在 GLSL ES 中了(dot)
cosø = <光线方向>点积<法向量>
因漫反射公式可以写成
<漫反射光颜色> =<入射光颜色> x <表面基底色> x (<光线方向>点积<法向量>)
这里需要注意的:其一 光线方向矢量和表面法向量矢量长度必须为 1,否则反射光的颜色就会过暗或者过亮.将一个矢量长度调整为 1,同时保证方向不变的过程叫做归一化.其二,这里所谓的光方向,实际上是入射方向的反方向.


image.png
法线:表面的朝向

物体表面的朝向,即垂直于表面的方向.又称为法线或者法向量
.平面的法向量是唯一的,与位置无光

运动物体的关照效果

坐标的变换引起法向量的变化

  • 平移不会引起法向量的变化
  • 旋转会改变法向量
  • 缩放变换也会引起法向量的变化
魔法矩阵

对顶点进行变换的矩阵称为模型矩阵.对于如何计算变换之后的法向量?我们只需要将变换之前的法向量乘以模型矩阵的逆转矩阵即可.逆矩阵的含义是,如果矩阵 M 的逆矩阵的 R,那么 RM或者 MR 都是单位矩阵
TREE 封装了两个方法对矩阵进行操作
Matrix4*setInverseof(m) 使自身称为逆矩阵
Matrix4.transpose:对自身进行逆矩阵

相关文章

  • webgl 光照

    前言 现实世界中被光线照射时,会发射一部分光.只有当反射光线进入你的眼睛时,你才能看到物体,并且分辨出它的颜色. ...

  • WebGL光照阴影映射

      原文地址:WebGL光照阴影映射  经过前面的学习,webgl的基本功能都已经掌握了,我们不仅掌握了着色器的编...

  • WebGL多模型光照综合实例

      原文地址:WebGL多模型光照综合实例  WebGL是一个非常的接近硬件底层的光栅化API, 从非常类似C/C...

  • 学习WebGL之基本光照

    本系列所有文章目录 下面是本文例子的运行截图,可以前往我的博客查看代码演示。 本文主要介绍如何使用Shader实现...

  • ThreeJs学习笔记——渲染(render)分析

    一、前言 ThreeJs 封装了 WebGL 进行渲染时所涉及到的相关概念,如光照,材质,纹理以及相机等。除此之外...

  • WebGL漫游之旅(一)

    原文链接:WebGL漫游之旅(一) 一、WebGL基本概念 WebGL (Web Graphics Library...

  • threejs Light

    WebGL and Threejs: Lightig 什么是webgl和threejs? webgl是一个在浏览器...

  • threejs Light

    WebGL and Threejs: Lightig 什么是webgl和threejs? webgl是一个在浏览器...

  • webgl 26.针对每个 fragment 计算光照

    接上一节这节我们来针对每个 fragment 计算光照,只需要改变 shader 把光照的逻辑从 vertex s...

  • WebGL

    WebGL WebGL top Prepare your browser Knowing canvas befor...

网友评论

      本文标题:webgl 光照

      本文链接:https://www.haomeiwen.com/subject/paaewltx.html