欢迎来到 WebGL 的魔法世界!
在之前的文章中,我们介绍了WebGL的基础知识,包括如何搭建开发环境和创建简单的3D对象。现在,让我们探索一些更神奇的概念:着色器(即WebGL的"画笔")、坐标系统(即构建3D世界的"地图")和纹理映射(即给物体穿上"衣服"的技术)。
着色器:WebGL 的创造者
什么是着色器?
着色器就像是为WebGL世界里的物体注入生命的巫师。它们是一些小程序,运行在图形处理器上,负责定义物体的外观,比如颜色、光泽和质地。在WebGL中,主要有两种着色器:顶点着色器和片元着色器。
顶点着色器:3D世界的构建者
顶点着色器的角色可以比作是一个精细的雕塑家。它处理每个顶点(构成3D对象的角落)的位置信息。比如,我们可以用它来定义一个立方体的每个角在空间中的具体位置。控制这些顶点,我们就能塑造出任何形状。
顶点着色器可以做的事情包括:
- 顶点位置变换
- 纹理坐标处理
- 光照效果模拟
- 颜色和材质的应用

片元着色器:3D世界的上色大师
片元着色器则更像是一个画家,它负责决定每个像素(即屏幕上的点)的颜色和质感。比如,我们可以用它给一个三角形着色,让它看起来像是由金属或水晶制成。
片元着色器可以做的事情包括:
- 颜色插值
- 纹理应用
- 创建特效,如雾化效果
- 颜色混合

坐标系统:构建你的 3D 世界
WebGL中的坐标
在WebGL中,坐标系统是用来决定每个点在3D空间中的位置。我们使用的是"右手坐标系统",其中:
- X轴:水平方向,向右为正。
- Y轴:垂直方向,向上为正。
- Z轴:深度方向,指向屏幕外为正。
WebGL中的坐标范围
在WebGL中,默认的坐标范围是从-1.0到1.0。这意味着:
- 在X轴上,-1.0是最左边,1.0是最右边。
- 在Y轴上,-1.0是最下边,1.0是最上边。
- 在Z轴上,-1.0通常表示最远,1.0表示最近。
坐标变换
- 模型变换:将对象从它们自己的坐标系转移到世界坐标系。
- 视图变换:类似于确定相机的视角。
- 投影变换:包括透视投影和正交投影,用于将3D坐标转换为2D屏幕坐标。
- 视口变换:将坐标映射到屏幕坐标。
纹理映射:给你的对象增添细节
纹理映射简介
纹理映射就是将图像(如照片或图案)应用到3D对象上,给它们增添细节和现实感。这可以是简单的颜色图案,也可以是复杂的图片。
总结
掌握了着色器、坐标系统和纹理映射,就能在WebGL的世界里创造出令人惊叹的视觉效果。这些概念是构建复杂3D场景的基础。我们将继续深入探讨这些主题,并提供更多示例和技巧,让你的WebGL之旅更加精彩。