一文带你了解Material, Texture Mapping, Shading, Shader

作者:caven chen

在计算机图形学和三维开发过程中,有几个容易混淆的概念。今天我们来一举拿下。

又可以学习新的知识啦。冲鸭。。。。。。

基础概念

首先我们来介绍一些基础概念:

英文

中文

本质

释义

Material

材质

数据集

表现物体对光的交互,供渲染器读取的数据集,包括贴图纹理、光照算法等

Texture mapping

纹理贴图

图像映射规则

把存储在内存里的位图,通过 UV 坐标映射到渲染物体的表面

Shading

底纹、阴影

光影效果

根据表面法线、光照、视角等计算得出的光照结果

Shader

着色器

程序

编写显卡渲染画面的算法来即时演算生成贴图的程序

GLSL

程序语言

OpenGL 着色语言

他们之间的关系:

通过上图可以看出:shading是一个最终结果,主要通过Material进行描述,而Material的生成又可以通过两种方法:一种是图片映射、一种是shaders程序。

这么多概念无非是为了完成一个共同目标:用计算机表现真实可信的 Shading。

Shading 是真实世界中的光影效果,它是由物体表面材质、灯光、观察者的视角等多种因素共同决定的。要实现计算机的模拟生成,是一个非常复杂的过程。不过它的原理大概可以简化为一个函数:

Intensity = Material (Light, Eye)

也就是说,光影的强度,是由 a.照在材质上的光 b.视线 共同决定的。

那么我们如何制造 Shading 效果?

方法一:贴上皮肤

贴图可以说是最简单的材质方法:

  • 选定物体表面的某些区域;
  • 更改这个区域的一些属性(如颜色、反光度、透明度等);

我们通过 UV Mapping 。给三维体每一个顶点增加两个值 U 和 V,它们记录了三维表面和二维表面的坐标对应关系:

有了映射关系,我们就可以分门别类地把影响光照的不同参数,都通过图片映射到三维几何体上。这些参数包括:

  • Diffuse Map 漫反射:模拟一个发光物对物体的方向性影响(Directional Impact),它是光照模型中最显著的组成部分;
  • Specular/Reflection Map 镜面:模拟有光泽物体上面出现的亮点,它的颜色更接近光而不是物体的颜色;
  • Normal/Bump Map 法线:决定物体形状的垂直于它的法线向量,提供有关物体表面深度的细节,每一种颜色代表了不同的轴向;

看起来类似这样:

地图瓦片纹理材质贴图

方法二:长出皮肤

贴上皮肤的方法虽好,但是局限也很明显。如果没有合适的图像,或者要创建真实世界中罕见的材质,皮肤就不好找了。这个时候需要让程序帮忙「生长」出新的皮肤。

我们把这种程序叫做 Shaders。

shader 代码片段

它实际上是一个程序片段、一系列的指令,可以将三维 Mesh(网格)以指定方式与颜色、贴图等组合,完成复杂的计算输出(渲染器可读取的点和颜色的对应关系),会对屏幕上的每个像素同时下达命令。也就是说,代码必须根据像素在屏幕上的不同位置执行不同的操作。就像活字印刷,你的程序就像一个 function(函数),输入位置信息,输出颜色信息,当它编译完之后会以相当快的速度运行。

总结

通过本文相信你已了解了这些基础概念以及如何制造一个shading效果,上面介绍的两种方式在实际开发过程中可以进行有机组合,这样可以创造意想不到的效果。

关注Mapmost,持续更新GIS、三维美术、计算机技术干货

Mapmost是一套以三维地图和时空计算为特色的数字孪生底座平台,包含了空间数据管理工具(Studio)、应用开发工具(SDK)、应用创作工具(Alpha)。平台能力已覆盖城市时空数据的集成、多源数据资源的发布管理,以及数字孪生应用开发工具链,满足企业开发者用户快速搭建数字孪生场景的切实需求,助力实现行业领先。

欢迎进入官网体验使用:Mapmost------让人与机器联合创作成为新常态

相关推荐
康康的幸福生活14 小时前
webgl2 方法解析: shaderSource()
webgl
魂断蓝桥6661 天前
如何基于three.js(webgl)引擎架构,实现3D医院、3D园区导航,3D科室路径导航
webgl·数字孪生·threejs·3d定位、三维室内定位、3d建筑·three.js路径规划、三维a*算法、javascript三维导航,·3d医院·3d导航·园区导航
康康的幸福生活11 天前
webgl2 方法解析: SCISSOR_TEST
javascript·webgl
魂断蓝桥66612 天前
如何基于three.js(webgl)引擎架构,实现3D机房园区,数据中心消防系统
webgl·数字孪生·three.js·物联网3d·3d机房·、3d工厂、3d工业园区、智慧制造、智慧工业、智慧工厂·bim管理系·3d消防·消防演习模拟
康康的幸福生活14 天前
webgl2 方法解析: colorMask()
webgl
Mapmost14 天前
全新升级!3DTiles加载速度Mapmost完胜Cesium
性能优化·webgl·cesium
康康的幸福生活15 天前
webgl2 方法解析: texImage2D()
webgl
点量云实时渲染-小芹16 天前
UE/Unity/Webgl云渲染推流网址,如何与外部网页嵌套和交互?
unity·webgl·webgl云渲染网页交互·点量云流
小old弟18 天前
🚀🚀🚀WebGL 加载 glTF 模型
前端·webgl
放逐者-保持本心,方可放逐21 天前
webgl(three.js 与 cesium 等实例应用)之浏览器渲染应用及内存释放的关联与应用
开发语言·javascript·webgl·顶点着色器·three.js 释放·cesium 释放·片元着色器