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

相关推荐
八荒启·交互动画18 小时前
Web特效011—Web特效的定义与边界为什么忽快忽慢:时间、频率与采样的秘密
webgl·网页特效·八荒启-交互动画·八荒启·web特效
八荒启·交互动画20 小时前
Web特效008—一个 `getContext(‘webgl‘)`,浏览器到底交出了什么?
webgl·八荒启-交互动画
玖玥拾2 天前
Unity Shader 基础与图形学(一)
unity·图形渲染·图形学·shader
xhload3d2 天前
图扑智慧工厂 | 继电器产线仿真态势管控平台
物联网·低代码·webgl·数字孪生·可视化·智慧工厂·工业互联网·hightopo
新的瑞拉公主5 天前
Unity游戏发布微信小游戏:从构建到提审
unity·webgl·微信小游戏·开放数据域
慧都小妮子7 天前
实时大屏掉帧排查:WebGL 图表库选型的 5 项可实测检查
webgl·scichart.js·实时大屏掉帧·前端图表选型
❀͜͡傀儡师7 天前
移动端 360° 商品展示方案:从 20MB 雪碧图到 800KB 丝滑视频
ffmpeg·webgl·sprite
平行云7 天前
国产GPU云渲染适配实战:驱动兼容、编码调优与多路并发
unity·ue5·webrtc·webgl·实时云渲染·云桌面·像素流送
平行云10 天前
实时云渲染信创架构解析:从GPU池化到全栈适配的技术演进
linux·unity·docker·ue5·webgl·数字孪生·实时云渲染
yyt36304584112 天前
KLineChartQuant:GLSL 的精度问题及 RTC 解法
前端·vue.js·react.js·交互·图形渲染·webgl·数据可视化