当前位置: 100md首页 > 电子书籍 > 资料下载2021 >
编号:46951
WebGL入门指南.pdf
http://www.100md.com 2020年11月10日
第1页
第6页
第15页
第29页
第47页

    参见附件(18128KB，51页)。

    WebGL入门指南百度云

    webgl是一项新的web 3d图形标准，也是html5大家庭中的一员。《webgl入门指南》从webgl和3d图形学的基础概念讲起，循序渐进，用多个简单的实例直观地讲解了各个知识点，小编为大家准备了相关的资料供大家

    相关内容部分预览

    内容简介

    webgl是一项新的web 3d图形标准，也是html5大家庭中的一员。《webgl入门指南》从webgl和3d图形学的基础概念讲起，循序渐进，用多个简单的实例直观地讲解了各个知识点，包括从坐标系统到投影矩阵这些数学基础，也包括从纹理贴图到模型动画这些图形效果；随后又理论结合实际，介绍了在现实开发环境中需要注意的各种问题，例如，如何挑选webgl框架以及使用哪种3d内容交换格式；在最后一章，作者把全书所有讲过的知识综合到一起，制作了一个完整的webgl游戏，让读者能够基本了解webgl这一新技术的开发流程，以便读者可以独立开发自己的webgl应用。

    除此之外，在多个实例中作者还应用了一些非常便捷有效的图形开发技巧，这些脱胎于作者多年图形经验的小技巧可以节省很多工作量，也让初入图形学门槛的读者可以眼前一亮，领会到图形开发的美妙和乐趣。

    《webgl入门指南》适合web开发人员阅读，尤其是对3d开发感兴趣的读者。

    WebGL 基本认识

    WebGL(Web Graphics Library)是一个光栅化引擎，它可以根据你的代码绘制出点，线和三角形。它来源于 OpenGL，OpenGL 是使用硬件加速的 GPU 来进行图形处理的计算机图形处理库，而 WebGL 则派生自 OpenGL 的其中一个版本，使其在 Web 中渲染3D图形成为可能。

    传统网页和 WebGL 网页的软件结构

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

    1. 两个实现要点：

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

    (2)着色器：绘制图形的基石。

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

    顶点着色器：用来描述顶点特性(如位置、颜色等)等程序。

    片元着色器：进行逐片元处理过程如光照的程序。可以将片元理解为像素(图像的单元)。

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

    在代码中，着色器程序是以字符串的形式“嵌入”在 JavaScript 文件中的，在程序真正开始运行前它就已经设置好了。

    大部分 WebGL 程序遵循的流程

    WebGL 程序包括运行在浏览器中的 JavaScript 和运行在 WebGL 系统的着色器程序这两个部分。

    2. WebGL 坐标系

    右手坐标系

    坐标系统和 WebGL 在上的坐标系统

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

    目录

    第1章 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 buffer、arraybuffer和类型化数组 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 利用镜头控制制作一个模型浏览器 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屏幕坐标为3d物体添加注释 103

    6.1.3 为3d场景添加背景图片 104

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

    6.3 利用2d canvas创建动态纹理 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

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

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

    7.2.4 压缩3d模型 135

    7.2.5 three.js中的json场景文件格式 136

    7.3 创建3d内容 137

    7.3.1 从blender中导出3d内容 137

    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中开启webgl支持 142

    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

    附录a webgl在线资源 183

    WebGL入门指南百度云截图