webgl入门指南pdf电子书免费版|百度网盘下载

编者点评：WebGL初学者指南pdf百度云

webgl 是一种新的 web 3d 图形标准，是 html5 家族的成员。 《Webgl初学者指南》从webgl和3d图形的基本概念入手，循序渐进，通过多个简单的例子直观的讲解每个知识点。小编准备了相关资料供大家下载

相关内容部分预览

简介

webgl 是一种新的 web 3d 图形标准，是 html5 家族的成员。 《Webgl初学者指南》从webgl和3d图形的基本概念入手，循序渐进，通过多个简单的例子直观的讲解每个知识点，

包括从坐标系到投影矩阵的数学基础，以及从纹理映射到模型动画的图形效果；然后理论联系实际，介绍了在实际开发环境中需要注意的各种问题，例如，

p>

如何选择 webgl 框架以及使用哪种 3D 内容交换格式；在最后一章，作者结合书中的所有知识，制作了一个完整的webgl游戏，让读者基本了解新的webgl技术开发流程，从而让读者能够独立开发自己的webgl应用程序。

除此之外，作者还在很多实例中应用了一些非常方便有效的图形开发技巧。这些源于作者多年图形经验的小技巧，可以省去很多工作量，也让初学者进入图形门槛。读者可以大放异彩，领略图形开发的美妙和乐趣。

《Webgl 入门指南》适合网页开发者，尤其是对 3D 开发感兴趣的读者。

WebGL的基本理解

WebGL（Web 图形库）是一个光栅化引擎，可以根据您的代码绘制点、线和三角形。它源自 OpenGL，一个使用硬件加速 GPU 进行图形处理的计算机图形处理库，而 WebGL 源自 OpenGL 的一个版本，使得在 Web 上渲染 3D 图形成为可能。

< /p>

传统和 WebGL 页面的软件架构

GLSL ES：OpenGL ES着色器语言（shading language），是一种类似C或C++的强类型语言，运行在GPU上。 WebGL 语言是用三种语言开发的：HTML、JavaScript 和 GLSL ES。

1、两个实现点：

(1) Canvas：定义网页上的绘图区域。

(2)Shader：绘制图形的基石。

要使用 WebGL 进行绘图，您必须使用着色器。 WebGL需要两个shader来实现图形的各种渲染效果：

Vertex Shader：用于描述顶点特征（如位置、颜色等）的程序。

片段着色器：执行逐片段处理的程序，例如光照。片段可以理解为像素（图像的单位）。

< /p>

从执行JavaScript程序到在浏览器中显示结果的过程

在代码中，着色器程序作为字符串“嵌入”在 JavaScript 文件中，该字符串是在程序实际开始运行之前设置的。

< /p>

大多数 WebGL 程序遵循的过程

WebGL 程序由在浏览器中运行的 JavaScript 和在 WebGL 系统上运行的着色器程序组成。

2、 WebGL 坐标系

< /p>

右手坐标系

< /p>

<画布> 坐标系和WebGL坐标系 <画布>

注意：WebGL坐标系与canvas绘图区坐标系不同，前者需要映射到后者

目录

第一章 webgl 1 简介

1.1 webgl - 一个技术定义 2

1.2 3D 图形 - 简介 4

1.2.1 3d坐标系4

1.2.2 网格、多边形和顶点 5

1.2.3 材质、纹理和光照 5

1.2.4 变换和矩阵 6

1.2.5 相机、透视、视口和投影 6

1.2.6 着色器 7

1.3 webgl 原生 api 8

1.3.1 Webgl应用结构分析9

1.3.2 画布元素和绘图上下文 9

1.3.3 视口 10

1.3.4 缓冲区、数组缓冲区和类型化数组 10

1.3.5 矩阵 11

1.3.6 着色器 12

1.3.7 绘制图元 13

1.4 章节总结 14

第 2 章你的第一个 webgl 程序 15

.2.1 three.js - 一个 javascript 3d 引擎 15

2.2 建立three.js运行环境17

2.3 一个简单的three.js网页17

2.4 一个真实的 3d 示例 20

2.4.1 为场景着色 23

2.4.2 添加纹理映射 24

2.4.3 旋转对象 25

2.4.4 循环重绘和requestanimationframe() 25

2.4.5 让页面贴近生活26

2.5 章节总结 27

第 3 章图形 28

3.1 sim.js——一个轻量级的webgl模拟框架29

3.2 创建网格 30

3.3 使用材质、纹理和光照 34

3.3.1 光源类型 35

3.3.2 使用多个纹理创建更逼真的场景 37

3.3.3 纹理和透明度 42

3.4 构建转换层次结构 42

3.5 创建自定义几何图形 46

3.6 点和线的渲染 49

3.6.1 使用粒子系统绘制点 50

3.6.2 画线52

3.7 编写着色器 53

3.7.1 Webgl 着色器基础53

3.7.2 three.js 55 中的着色器

3.8 章节总结 60

第4章动画61

4.1 动画基础61

4.1.1 帧动画 61

4.1.2 时间动画 62

4.1.3 插值和补间动画 62

4.1.4 关键帧 63

4.1.5 关节动画 64

4.1.6 蒙皮动画 64

4.1.7 目标变形动画 64

4.2 使用 tween.js 库创建补间动画 65

4.2.1 创建基本补间动画 66

4.2.2 带有缓动效果的补间动画 68

4.3 关节模型的关键帧动画 71

4.3.1 加载模型 71

4.3.2 为模型 73 设置动画

4.4 材质和光照动画 76

4.5 纹理动画 78

4.6 蒙皮和变形动画 80

4.7 章节总结 80

第5章互动81

5.1 点击检测、拾取和投影 81

three.js 82中的点击检测

5.2 处理鼠标移动和点击 85

5.3 处理拖拽 88

在拖动 91 时使用补间动画

5.4 使用点击点和法线信息 91

5.5 基于相机的交互 92

5.5.1 使用 Camera Control 制作模型浏览器 93

5.5.2 场景漫游 95

5.6 章节总结 96

第 6 章 2d 和 3d 的集成 98

6.1 集成动态html和webgl 99

6.1.1 为 div 元素创建弹出层 99

6.1.2 使用 2d 屏幕坐标 103 注释 3d 对象

6.1.3 将背景图像添加到 3d 场景 104

6.2 在 2d 页面上插入 3d 叠加层 105

6.3 使用 2d 画布 107 创建动态纹理

6.4 使用视频作为纹理 115

6.5 渲染动态 3d 文本 119

6.6 webgl 121 中的终极集成

6.7 章节总结 123

第7章实用webgl 124

7.1 如何选择运行时和框架124

7.2 加载 3d 内容 126

7.2.1 collada：数字资产交换格式 126

3.js 130中的7.2.2 json模型文件格式

7.2.3 three.js二进制模型文件格式134

7.2.4 压缩 3D 模型 135

3.js 136中的7.2.5 JSON场景文件格式

7.3 创建 3D 内容 137

7.3.1 从 blender 137 导出 3D 内容

7.3.2 将obj文件转换为three.js json文件 139

7.3.3 将obj文件转换为three.js二进制文件139

7.3.4 其他软件或格式的转换 139

7.4 浏览器支持 140

7.4.1 检测浏览器 webgl 支持 141

7.4.2 在 safari 142 中启用 webgl 支持

7.5 处理丢失的上下文事件 143

7.6 Webgl 安全 146

7.7 章节总结 149

第 8 章你的第一个 webgl 游戏 150

8.1 构建游戏的部分 151

8.1.1 相机、角色和控件 152

8.1.2 艺术设计 159

8.1.3 模型预览器 161

8.1.4 创建粒子系统 163

8.1.5 添加声音 166

8.2 万物合一 167

8.3 章节总结 180

后记 181

附录一个webgl在线资源183