WebGL简易教程——目录

摘要:
11.WebGL简易教程(XI):纹理WebGL中使用的纹理示例:在地形上粘贴真实纹理。

目录
1. 绪论

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

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

image
图1:地形渲染(纹理)

image
图2:地形渲染(颜色)
2. 目录

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

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

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

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

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

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简易教程——目录》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇wifi 驱动 进阶11CreateRemoteThread下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

OpenGL学习笔记——C++(待续)

一、环境搭建 1、新建macOS项目; 2、添加OpenGl.framework和GLUT.framework两个系统库; 3、拖入include和libGLTool.a文件,libGLTools.a直接拖到工程的Frameworks文件里面; 4、删除AppDelegate.h,AppDelegate.m,main.m,ViewController.h,...

【OpenGL】学习笔记#1

没事干总要学点东西,这个系列的文章既是我的笔记,又是一篇教程(给我自己的教程),主干内容参考一篇国外教程,教程很粗略,但是代码不错,所以我借着它的脉络,补充网上的资料来扩充内容,每一句话都要理解是什么意思,还有实现的原理。不定期更新,国外教程网址在文末,有兴趣的同学可以去看看。 一、OpenGL简介 OpenGL是一套开放图形库API(的标准),因此可以跨...

[原] OpenGL ES 学习笔记 (一)

1.OpenGL ES 的坐标系在屏幕上的分布 OpenGL ES 的坐标系{x, y, z} 通过图片的三维坐标系可以知道: - 它是一个三维坐标系 {x, y, z} - 三维坐标中心在正方体的几何中心 {0, 0, 0} - 整个坐标系是 [0, 1] 的点,也就是说 OpenGL 中只支持 0 ~ 1 的点 (这里所讲的 0 和 1 ,最好理...

最强大的王爽汇编语言学习环境使用教程

最强大的王爽汇编语言学习环境使用教程 一、前言 这是采用VMwere Workstation 12 pro虚拟机软件,搭建的MS-DOS学习环境,在windowsXP/8/10及linux中均可以使用,在这个环境中,我集成了CCDOS中文系统,pdos中文系统,使用这些系统,可以进行中文输入与显示。还集成了,十分著名的汇编语言调试工具TR,它比debug更...

OpenGL ES on iOS --- 统一变量(Uniform)和统一变量块(UBO)

简介 Uniform是一种从CPU中的应用向GPU中的着色器发送数据的方式,但uniform和顶点属性有些不同。 首先,uniform是全局的(Global)。全局意味着uniform变量必须在每个着色器程序对象中都是独一无二的,而且它可以被着色器程序的任意着色器在任意阶段访问。 第二,无论你把uniform值设置成什么,uniform会一直保存它们的数据...

用OpenGL进行曲线、曲面的绘制

实验目的 理解Bezier曲线、曲面绘制的基本原理;理解OpenGL中一维、二维插值求值器的用法。 掌握OpenGL中曲线、曲面绘图的方法,对比不同参数下的绘图效果差异; 代码1:用四个控制点绘制一条三次Bezier曲线 Github地址 #include "stdafx.h" #include <stdlib.h> #incl...