一文带你了解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------让人与机器联合创作成为新常态

相关推荐
xhload3d5 天前
场景切换 × 流畅过渡动画实现方案 | 图扑软件
物联网·3d·智慧城市·html5·动画·webgl·数字孪生·可视化·虚拟现实·工业互联网·工控·工业·2d·轻量化·过渡动画
iloveas20149 天前
three.js+WebGL踩坑经验合集(8.3):合理设置camera.near和camera.far缓解实际场景中的z-fighting叠面问题
webgl
失忆爆表症11 天前
基于 MediaPipe + Three.js 的实时姿态可视化前端
前端·webgl
串串狗xk12 天前
使用 webgl 写的新概念笔记应用《赛博城寨》,在三维开放世界里写笔记
javascript·webgl
刘皇叔code14 天前
Three.js后处理UnrealBloomPass的分析
webgl·three.js
掘金安东尼16 天前
用 WebGL + Solid.js 构建混合材质 Shader
前端·webgl
郝学胜-神的一滴19 天前
Three.js 材质系统深度解析
javascript·3d·游戏引擎·webgl·材质
Tetap19 天前
pixijs实现绿幕抠图和视频
前端·webgl
山西第一大怨种20 天前
我的浏览器下雨了进水了
前端·webgl
sixgod_h23 天前
Threejs源码系列- Object3D
webgl·three.js