1. 绪论

最近研究WebGL，看了《WebGL编程指南》这本书，结合自己的专业知识写的一系列教程。之前在看OpenGL/WebGL的时候总是感觉OpenGL/WebGL看的时候懂，实际用起来却挺难，感觉中间总是隔着很多东西。现在一路边学边写，才明白这中间缺少的其实就是总结，是实践；把这个过程写出来，既是帮助他人，也是帮助自己。

现在这一系列文章也写了不少了，就写个目录汇总一下，方便查阅，以后增添了新的文章也会随之更新。这一系列教程由浅入深，知识也是循序渐进的，前后关联。实例也逐渐复杂，最终完成一个地形渲染的实例：

图1：地形渲染(纹理)

图2：地形渲染(颜色)

2. 目录

1.WebGL简易教程(一)：第一个简单示例
概述了这篇教程的目的，编写了WebGL的第一个示例。

2.WebGL简易教程(二)：向着色器传输数据
改进了绘制一个点的实例，讲述了WebGL中向着色器(shader)传输数据的问题。

3.WebGL简易教程(三)：绘制一个三角形(缓冲区对象)
通过一个绘制三角形的具体实例，详解了WebGL中缓冲区对象(buffer object)的使用。

4.WebGL简易教程(四)：颜色
通过绘制彩色三角形的示例，介绍了varying变量，顶点着色器与片元着色器之间数据传输的过程：顶点装配与光栅化。

5.WebGL简易教程(五)：图形变换(模型、视图、投影变换)
详细讲解了OpenGL\WebGL关于绘制场景的图形变换过程，并推导了其图形变换矩阵。主要包括模型变换、视图变换以及投影变换。

6.WebGL简易教程(六)：第一个三维示例(使用模型视图投影变换)
通过使用模型视图投影变换，完成第一个真正三维场景的示例：显示一组由远及近的三角形。

7.WebGL简易教程(七)：绘制一个矩形体
通过一个绘制矩形包围盒的实例，进一步理解了模型视图投影变换。

8.WebGL简易教程(八)：三维场景交互
基于之前教程的知识，实现了一个三维场景的浏览实例：通过鼠标实现场景的旋转和缩放。

9.WebGL简易教程(九)：综合实例：地形的绘制
综合WebGL的知识，实现了绘制一张地形图的实例。

10.WebGL简易教程(十)：光照
讲述了WebGL光照生成的原理，并作出了实际案例。

11.WebGL简易教程(十一)：纹理
WebGL中使用纹理的实例：给地形贴上一张真实的纹理。

12.WebGL简易教程(十二)：包围球与投影
通过包围球来设置模型视图投影变换，显示合适的渲染位置。

13.WebGL简易教程(十三)：帧缓存对象(离屏渲染)
详细论述了WebGL中帧缓冲区技术的实现。

14.WebGL简易教程(十四)：阴影
详述了WebGL中生成阴影的ShadowMap算法。

15.WebGL简易教程(十五)：加载gltf模型
详述了通过WebGL读取、解析并显示glTF格式数据的过程。

3. 资源

其代码已经上传到GitHub：地址。个人见解难免有所疏漏，欢迎大家来互相交流。

WebGL简易教程(十五)：加载gltf模型
文章目录 1. 概述 2. 实例 2.1. 数据 2.2. 程序 2.2.1. 文件读取 2.2.2. glTF格式解析 2.2.2.1. 场景节点 2.2.2.2. 网格 2.2.2.3. 缓冲,缓 ...
WebGL简易教程(十一)：纹理
文章目录 1. 概述 2. 实例 2.1. 准备纹理 2.2. 配置纹理 2.3. 使用纹理 3. 结果 4. 参考 1. 概述在之前的之前的教程<WebGL简易教程(九):综合实例:地形的绘 ...
WebGL简易教程(十四)：阴影
文章目录 1. 概述 2. 示例 2.1. 着色器部分 2.1.1. 帧缓存着色器 2.1.2. 颜色缓存着色器 2.2. 绘制部分 2.2.1. 整体结构 2.2.2. 具体改动 2.2.2.1. ...
WebGL简易教程(十)：光照
目录 1. 概述 2. 原理 2.1. 光源类型 2.2. 反射类型 2.2.1. 环境反射(enviroment/ambient reflection) 2.2.2. 漫反射(diffuse ref ...
WebGL简易教程(五)：图形变换(模型、视图、投影变换)
文章目录 1. 概述 2. 详论 1) 模型变换 (1) 平移变换 (2) 缩放变换 (3) 旋转变换 (4) 组合变换 2) 视图变换 (1) 原理 (2) 推导 3) 投影变换 (1) 透视投影 ...
WebGL简易教程(一)：第一个简单示例
文章目录 1. 概述 2. 示例:绘制一个点 1) HelloPoint1.html 2) HelloPoint1.js (1) 准备工作 (2) 着色器 (3) 顶点着色器 (4) 片元着色器 (5 ...
Ocelot简易教程（一）之Ocelot是什么
Ocelot简易教程(一)之Ocelot是什么原文:Ocelot简易教程(一)之Ocelot是什么作者:依乐祝原文地址:https://www.cnblogs.com/yilezhu/p/955 ...
eslint不报错 vue_【简易教程】基于Vue-cli使用eslint指南
插件安装首先在vscode插件中搜索eslint和prettier. 啥也不管,这俩必须得装. 插件简介 vscode插件库里的eslint是用来在你写代码的时候就直接给你报错.(vue-cli中的 ...
Android开发简易教程
Android开发简易教程 Android 开发因为涉及到代码编辑.UI 布局.打包等工序,有一款好用的IDE非常重要.Google 最早提供了基于 Eclipse 的 ADT 作为开发工具,后来在2 ...

WebGL简易教程——目录

文章目录

1. 绪论

2. 目录

3. 资源

WebGL简易教程——目录相关推荐

最新文章

热门文章