实际效果请看demo:纹理贴图 为了增加额外细节,提升真实感,我们使用了漫反射贴图和高光贴图,它们都是向三角形进行附加纹理.但是从光的视角来看是表面法线向量使表面被视为平坦光滑的表面.以光照算法的视角考虑的话,只有一件事决定物体的形状,那就是垂直于它的法线向量.砖块表面只有一个法向量,表面完全根据这个法向量被以一致的方式照亮.如果每个片元都用不同的法线会怎样?这样我们就可以根据表面细微的细节对法线向量进行改变:这样就会获得一种表面看起来要复杂得多的幻觉: 每个片元使用了自己的法线,我们就可以让光…

为了使图形能获得接近于真实物体的材质效果,一般会使用贴图,贴图类型主要包括两种:漫反射贴图和镜面高光贴图.其中漫反射贴图可以同时实现漫反射光和环境光的效果. 实际效果请看demo:纹理贴图 2D纹理 实现贴图就需要用到纹理,常用的纹理格式有:2D纹理,立方体纹理,3D纹理.我们使用最基本的2D纹理就能实现本节需要的效果,我们来看一下使用纹理需要的api. 因为纹理的坐标原点位于左下角,和我们通常的左上角坐标原点刚好相反,下面就是将它按Y轴进行反转,方便我们设置坐标. gl.pixelStorei…

[Unity Shaders]学习笔记——SurfaceShader(七)法线贴图 转载请注明出处:http://www.cnblogs.com/-867259206/p/5627565.html 写作本系列文章时使用的是Unity5.3. 写代码之前: 当然啦,如果Unity都没安装的话肯定不会来学Unity Shaders吧? 阅读本系列文章之前你需要有一些编程的概念. 在VS里面,Unity Shaders是没有语法高亮显示和智能提示的,VS党可以参考一下这篇文章使代码高亮显示,也可以下载…

原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十九章:法线贴图 学习目标 理解为什么需要法线贴图: 学习法线贴图如何保存: 学习法线贴图如何创建: 学习法线贴图中的法向量的坐标系统是如何与物体空间的三角形的坐标系统关联的: 学习如何在顶点和像素着色器中实现法线贴图. 1 使用法线贴图的原因 找到一种方法在光滑的平面上,显示出更多的细节(比如粗糙的砖块). 如果使用曲面细分是可以增加实际的细节的,但是我们还是需要…

1 高度纹理 使用一张纹理改变物体表面法线,为模型提供更多细节. 有两种主要方法: 1.高度映射:使用一张高度纹理(height map)来模拟表面位移(displacement).得到一个修改后的法线值. 2.法线映射:使用一张法线纹理直接存储表面法线. 1.1 高度纹理 高度图中存储的是强度值(intensity).越浅越说明向外凸起,越深越向里凹. 缺点是计算复杂,消耗性能. 高度图也会与法线映射一起使用.给出表面凹凸的额外信息. 1.2 法线纹理 法线纹理中存储的是法线方向.法线方向的范…

原文地址:WebGL学习之纹理盒 我们之前已经学习过二维纹理 gl.TEXTURE_2D,而且还使用它实现了各种效果.但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP,它包含了6个纹理代表立方体的6个面.不像常规的纹理坐标有2个纬度,立方体纹理使用法向量,换句话说三维方向.本节实现的demo请看 天空盒 根据法向量的朝向选取立方体6个面中的一个,这个面的像素用来采样生成颜色.这六个面通过他们相对于立方体中心的方向被引用.它们是分别是 gl.TEXTURE_CUBE_MAP_POSIT…

翻译:非常详细易懂的法线贴图(Normal Mapping) 本文翻译自: Shaders » Lesson 6: Normal Mapping 作者: Matt DesLauriers 译者: FreeBlues 这一系列依赖于最小规模的用于着色器和渲染工具的lwjgl-basics API. 代码已经被移植到 LibGDX. 这些概念是足够通用的, 它们能被应用于Love2D, GLSL Sandbox, iOS, 或者其他支持 GLSL 的平台. 概述 本文聚焦于 3D 光照和法线贴图技术…

转自:http://www.zwqxin.com/archives/shaderglsl/review-normal-map-bump-map.htmlNormal Map法线贴图,想必每个学习计算机图形学的人都不陌生.今天在这里按我的理解总结一下,作为复习,也作为深入学习吧.——ZwqXin.com自从看完那本<数学在计算机图形学上的应用>后,一直想好好地真正实践一次法线贴图/凹凸贴图呢(以前是根据橙书弄了一下罢了).昨天偶尔看到篇涉及BumpMap的文,正好觉得是个机会,便在网上狂找相关资…

最近使用unity,碰到到一个很有趣的例子.场景无光线,却模拟出了光照,效果挺好.其思路与法线贴图原理异曲同工. 原作者提供的效果印象深刻. 模型除了使用原来的diffuse贴图外,还用到了一张模拟记录了"光照"信息的贴图(见机器人头上的贴图).这一点与法线贴图是一致的. 这个方法比较简单,也比较死.思路很巧. 分析一下贴图,有效范围基本是一个圆形.以前在学习法线贴图时,就遇到过法线投射在贴图的情景(http://www.cnblogs.com/flytrace/p/3387748.h…

原文地址:WebGL学习(2) - 3D场景 经过前面WebGL学习(1) - 三角形的学习,我们已经掌握了webGL的基础知识,也已经能够画出最基本的图形,比如点,线,三角形,矩形等.有了2D绘图的基础,现在终于可以进入精彩的3D世界了,来看一下这一节要实现的3D的效果吧. 实际效果:webGL3D场景 webGL渲染流程 重温一下webGL的渲染流程,这一节在第3.4.5.6步骤需要学习新的内容.其中写入数据交叉存放缓冲区,设置隐藏面消除,清空深度缓冲都是比较简单的部分.重点和难点是在3D变…