点燃火柴的博客

使用点光源照明1. demo效果2. 点光源介绍1. demo效果上图效果为原点处有点光源照射的效果2. 点光源介绍现实生活中最常见的光照，就是灯泡照明，灯泡发出的光从灯泡开始向四面八方散射出去，实际上，灯泡发出的光衰减醒来。距离越远，到达的光就越少。本次实现的点光源的处理中没有考虑到这种光衰减 我们已经知道，在WebGL中，在使用平行光的时候需要知道平行光的方向，但是点光源只有一个位置属性，本身没有方向属性，但是我们可以用点光源的坐标减去顶点的坐标就得到 点光源的方向点光源方向计算<点

WebGL三维模型实现Phong着色1. demo效果2. Phong着色与Gouraud 着色2.1Gouraud 着色2.2 Phong 着色3. 实现要点4. demo代码1. demo效果2. Phong着色与Gouraud 着色通过前面几篇文章，大致知道典型的照明技术有三种：漫反射光（diffuse light）、环境光（ambient light）和反射光（specular light）。通过与它们组合使用可以实现更加逼真的照明效果。2.1Gouraud 着色前几篇文章的光照实现都

三维模型反射光照射实现1. demo效果2. 反射光介绍3. 实现要点3.1 反射光计算3.2 向着色器传值4. demo代码1. demo效果2. 反射光介绍反射光分为漫反射和镜面反射，平行光属于慢反射。通常反射光指的是镜面反射光又称高光反射，指由光源直接经物体表面反射入眼睛的光线。镜面反射使物体看上去更有光泽下图是反射光模型，光源发出的光照射到物体上并被反射，当反射光和视线正对时，在一定的范围内光大多数的光会反射到眼睛里，这时从物体表面反射的光在这个范围内，就会产生高光现象但是如果上述

三维模型环境光照射实现1. demo效果2. 环境光介绍3. 实现要点3.1 顶点着色器调整3.2 向着色器中传值环境光颜色4. demo代码1. demo效果上图是平行光照射下效果上图是平行光+环境光照射下效果2. 环境光介绍上一篇文章我们学习了如何使用平行光，在现实世界中除了有平行光（太阳光）,还会存在环境光(平行光在屋子墙面上来回反射，可以从四面八方射向物体)，平行光有一个缺点，就是没有完全暴露在光线下的部分就是一片漆黑。如果正好是黑色背景，有可能会与黑色背景融为一体，看不到模型的真实的

三维模型平行光照射实现1. demo效果2. 知识要点2.1 平行光照射2.2 物体变换时表面法线处理3. 实现要点3.1 顶点着色器3.2 相关矩阵计算4. demo代码1. demo效果上图是平行光照射下效果上图是无光照时的效果2. 知识要点2.1 平行光照射平行光的光线相互平行，没有位置信息，只有方向，可以看做是无限远处的光源发出的光，例如太阳照射在地球上的光。平行光照射在物体上会反射，不同方向的面反射光的方向也不同，平行光如何反射，取决于物体的表面法向量，如下图光线从左上方入射进来

使用VBO、IBO创建彩色甜圈圈1. demo效果2. 实现要点2.1 初始化顶点信息2.2 向着色器传值2.3 注册鼠标拖拽事件3. demo代码1. demo效果2. 实现要点2.1 初始化顶点信息如上图绘制甜圈圈的思路是，先绘制一个圆当做管道截面，然后让这个截面圆绕一个中心点沿沿这个截面圆平面垂直方向旋转一周，即可生成甜圈圈状的三维模型以下代码是生成绘制甜圈圈所需信息的函数，它接收四个参数，分别是：第一个参数表示管道截面圆分段数，第二个参数表示管道圆的分段数，第三个参数管道截面圆的半径。