HTML5 与 WebGL 编程 PDF 文档
本书全面讲解了使用 HTML5 和 WebGL 开发 3D 应用的 Web 技术,理论与实践相结合,涵盖桌面和移动两端。全书分两部分:基础知识和应用开发。在详细介绍开发相关理论、工具、框架和库的基础上,作者通过 3D 产品浏览器、游戏和交互培训系统等案例,生动讲解了 3D 应用开发的全过程。
前言
第一部分 基础知识
第 1 章 绪论
1.1 HTML5:新型的视觉媒介
1.1.1 浏览器平台
1.1.2 浏览器支持情况
1.2 3D 图形的基础知识
1.2.1 什么是 3D
1.2.2 3D 坐标系
1.2.3 网格、多边形与顶点
1.2.4 材质、纹理与光源
1.2.5 变换与矩阵
1.2.6 相机、透视、视口与投影
1.2.7 着色器
第 2 章 WebGL:实时 3D 渲染
2.1 WebGL 基础
2.2 WebGL API
2.3 WebGL 应用剖析
2.4 一个简单的 WebGL 示例
2.4.1 Canvas 元素和 WebGL 绘图上下文
2.4.2 视口
2.4.3 缓冲、缓冲数组和类型化数组
2.4.4 矩阵
2.4.5 着色器
2.4.6 绘制图元
2.5 创建 3D 几何体
2.6 添加动画
2.7 使用纹理映射
2.8 小结
第 3 章 Three.js——一款 JavaScript3D 引擎
3.1 使用 Three.js 创建的代表性项目
3.2 Three.js 概览
3.2.1 初始化 Three.js
3.2.2 Three.js 工程结构
3.3 一个简单的 Three.js 程序
3.3.1 创建渲染器
3.3.2 创建场景
3.3.3 运行循环的实现
3.3.4 为场景添加光照
3.4 小结
第 4 章 Three.js 中的图形和渲染
4.1 几何图形和网格
4.1.1 预置的几何形状类型
4.1.2 路径、形状和挤出
4.1.3 几何形状基础类
4.1.4 用于优化网格渲染的 BufferGeometry
4.1.5 从建模软件包中导入网格数据
4.2 场景图和空间变换的层级结构
4.2.1 利用场景图来管理复杂场景
4.2.2 Three.js 中的场景图
4.2.3 平移、旋转和缩放的表示
4.3 材质
4.3.1 标准网格材质
4.3.2 使用多重纹理增添逼真效果
4.4 光源
4.5 阴影
4.6 着色器
4.6.1 ShaderMaterial 类:编写你自己的着色器代码
4.6.2 在 Three.js 中使用 GLSL 着色器代码
4.7 渲染
4.7.1 后处理和多道渲染
4.7.2 延迟渲染
4.8 小结
第 5 章 3D 动画
5.1 使用 requestAnimationFrame()来驱动动画
5.1.1 在你的应用中使用 requestAnimationFrame()
5.1.2 requestAnimationFrame()和性能
5.1.3 基于帧的动画和基于时间的动画
5.2 使用程序更新属性的方式来构建动画
5.3 使用补间来进行动画过渡
5.3.1 插值
5.3.2 Tween.js 库
5.3.3 缓动
5.4 使用关键帧来实现复杂动画
5.4.1 Keyframe.js——一个简单的帧动画通用库
5.4.2 使用关键帧创建关节动画
5.5 使用曲线和路径创建平滑自然的运动
5.6 使用变形目标来创建人物和面部动画
5.7 使用蒙皮来构建角色动画
5.8 使用着色器来进行动画
5.9 小结
第 6 章 CSS3:高级页面效果
6.1 CSS 变换
6.1.1 使用 3D 变换
6.1.2 添加透视
6.1.3 创建变换层级
6.1.4 控制背面渲染
6.1.5 CSS 变换属性汇总
6.2 CSS 过渡
6.3 CSS 动画
6.4 挑战 CSS 的极限
6.4.1 渲染 3D 物体
6.4.2 渲染 3D 环境
6.4.3 使用 CSS 自定义滤镜来实现高级着色器效果
6.4.4 用 Three.js 来渲染 CSS 3D
6.5 小结
第 7 章 Canvas:通用 2D 绘图
7.1 Canvas 基础
7.1.1 Canvas 元素和 2D 绘图上下文
7.1.2 Canvas API 的功能
7.2 使用 Canvas API 来渲染 3D
7.3 基于 Canvas 渲染的 3D 库
7.3.1 K3D
7.3.2 Three.js 的 Canvas 渲染
7.4 小结
第二部分 应用开发技术
第 8 章 3D 内容制作流程
8.1 3D 内容创建过程
8.1.1 建模
8.1.2 纹理映射
8.1.3 动画
8.1.4 技术美工
8.2 3D 建模和动画工具
8.2.1 传统 3D 软件
8.2.2 基于浏览器的集成环境
8.2.3 3D 内容仓库和现成素材
8.3 3D 文件格式
8.3.1 模型格式
8.3.2 动画格式
8.3.3 全功能的场景格式
8.4 加载 3D 内容到 WebGL 应用中
8.4.1 Three.js JSON 格式
8.4.2 Three.js 的二进制格式
8.4.3 使用 Three.js 来加载 COLLADA 场景
8.4.4 使用 Three.js 来加载 gITF 场景
8.5 小结
第 9 章 3D 引擎和框架
9.1 3D 框架概念
9.1.1 什么是框架
9.1.2 WebGL 框架需求
9.2 WebGL 框架概况
9.2.1 游戏引擎
9.2.2 展示框架
9.3 Vizi:一个基于组件的用于可视化 Web 应用的框架
9.3.1 背景和设计理念
9.3.2 Vizi 架构
9.3.3 Vizi 入门
9.3.4 一个 Vizi 应用示例
9.4 小结
第 10 章 开发一个简单的 3D 应用
10.1 设计应用
10.2 创建 3D 内容
10.2.1 导出 Maya 场景到 COLLADA
10.2.2 将 COLLADA 文件转换 glTF 格式
10.3 预览和测试 3D 内容
10.3.1 基于 Vizi 的预览工具
10.3.2 Vizi 查看器类
10.3.3 Vizi 加载类
10.4 将 3D 集成到应用中
10.5 开发 3D 行为和交互
10.5.1 Vizi 场景图 API 方法:findNode()和 map()
10.5.2 使用 Vizi.FadeBehavior 来动画透明度
10.5.3 使用 Vizi.RotateBehavior 来自动旋转内容
10.5.4 使用 Vizi.Picker 来实现鼠标悬停时显示信息
10.5.5 使用用户界面来控制动画
10.5.6 使用颜色选择器来改变颜色
10.6 小结
第 11 章 开发一个 3D 环境
11.1 创建环境素材
11.2 预览和测试环境
11.2.1 以第一人称模式预览场景
11.2.2 检查场景图
11.2.3 检查对象属性
11.2.4 显示边界框
11.2.5 预览多个对象
11.2.6 使用预览工具来查找场景中的其他问题
11.3 使用 skybox 创建一个 3D 背景
11.3.1 3D skybox
11.3.2 Vizi skybox 对象
11.4 集成 3D 内容到应用中
11.4.1 加载和初始化场景
11.4.2 加载和初始化车模型
11.5 实现第一人称导航
11.5.1 相机控制器
11.5.2 第一人称控制器中的数学
11.5.3 鼠标视角
11.5.4 简单碰撞检测
11.6 使用多个相机
11.7 创建定时的动画过渡
11.8 对象行为脚本
11.8.1 基于 Vizi.Script 实现自定义组件
11.8.2 驾驶车的控制器脚本
11.9 给环境添加声音
11.10 渲染动态纹理
11.11 小结
第 12 章 开发移动 3D 应用
12.1 移动 3D 平台
12.2 为移动浏览器开发
12.2.1 增加触摸支持
12.2.2 在桌面版 Chrome 上调试移动功能
12.3 创建 Web 应用
12.3.1 Web 应用开发和测试工具
12.3.2 打包成 Web 应用来发布
12.4 开发原生/HTML5 混合应用
12.4.1 CocoonJS:一种为移动设备构建 HTML 游戏及应用的技术
12.4.2 使用 CocoonJS 组装应用
12.4.3 WebGL 混合开发:问题
12.5 移动 3D 性能
12.6 小结
附录 资源
A.1 WebGL 资源
A.1.1 WebGL 规范
A.1.2 WebGL 邮件列表和论坛
A.1.3 WebGL 博客和演示站点
A.1.4 WebGL 社区站点
A.2 CSS3 资源
A.2.1 CSS3 规范
A.2.2 CSS3 博客和演示站点
A.3 Canvas 资源
A.3.1 Canvas 2D Context 规范
A.3.2 Canvas 2D 教程
A.4 框架、库和工具
A.4.1 3D 开发库
A.4.2 3D 游戏引擎
A.4.3 3D 展示框架
A.4.4 3D 编辑工具
A.4.5 动画框架
A.4.6 调试和分析 WebGL 应用
A.4.7 移动 3D 开发资源
A.5 3D 文件格式规范
A.5.1 模型格式
A.5.2 动画格式
A.5.3 完整场景格式
A.6 相关技术
A.6.1 指针锁定 API
A.6.2 页面可见性 API
A.6.3 WebSockets 和 WebRTC
A.6.4 Web Workers
A.6.5 IndexedDB 和 FileSystem API
下载地址:https://www.wenjiangs.com/wp-content/uploads/2023/06/E0b9Vt7r72Px4g8A.zip
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论