Web GL与动画实现| 青训营笔记

104 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第8天.

今天的课程比较复杂难度颇大,同时内容上干货满满,首先让我们来认识一下webgl里的一些基础概念.光栅即Raster,几乎是现在所有的现代图形系统都是base光栅来绘制图形的,结构上它是指构成图像的像素阵列。像素即Pixel,每一个像素对应着图像上的一个点,它一般是用来保存图像上的某个具体position的颜色等信息.帧缓存即Frame Buffer,在整个绘图过程中,像素信息会被按照逻辑存放在帧缓存中,帧缓存本身也是一块内存地址.最后不得不提一下cpu和gpu的区别,我们熟知的CPU即Central Processing Unit,中央处理单元,它负责逻辑计算。而GPU即Graphics Processing Unit,它是图形处理 单元,主要负责图形计算。它是由大量的小运算单元构成的,每个运算单元只负责处理简单的计算,并且每个运算单元彼此独立互不干扰,便于计算并行高效处理.

对于如何创建一个WebGL,首先创建 WebGL上下文,再创WebGL Program,然后依次将数据存入缓冲区之中,再把将缓冲区中的数据读取到GPU中去,GPU随后执行 WebGL 程序,最后输出结果.

关于3D标准模型的四个齐次矩阵(mat4),投影矩阵 Projection Matrix,模型矩阵 Model Matrix,视图矩阵 View Matrix,法向量矩阵 Normal Matrix.

在课前预习中我对于目标数据可视化有了一定了解,并base内容上操作了一些演示工具加深了对与动态数据可视化的认知,比如我们熟知的TimeStoryTeller、Facets、Tableau.

今天需要消化好一点段时间,既有线性代数知识又有信息可视化交互设计知识,准备明天去翻翻The Visual Display of Quantitative Information,还有Visualization Analysis & Design,小节课程见.