beckyyy

除了高效渲染2D图形，WebGL更强大的地方在于，它可以绘制各种3D图形，而3D图形能够极大地增强可视化的表现能力。本文用一个简单的正立方体的例子来演示在WebGL中如何绘制3D物体。

在可视化展现中，动画是强化数据表达，吸引用户的重要技术手段，本文将介绍动画的三种实现形式，以及如何具体地在HTML/CSS和Shader中去实现动画。

GPU是并行渲染的，这样的渲染很高效。但是在实际需求中，有时我们计算片元色值时，需要依赖周围像素点或者某个其他位置像素点的颜色信息，这样的话想要一次性完成绘制就无法做到，需要对纹理进行二次加工处理。

什么是噪声呢？在自然界中，离散的随机是比较常见的，比如蝉鸣突然响起又突然停下，但是随机和连续并存是更常见的情况，比如山脉的走向是随机的，但山峰之间的高度又是连续的。把随机和连续结合起来，就形成了噪声。

本文将介绍如何使用极坐标参数方程和上一篇文章提到的距离场SDF来绘制有趣的图案。有些曲线比起直角坐标系来说，更方便使用极坐标来表示，这个时候我们可以选择通过极坐标和直角坐标的相互转换，来实现图形的绘制

本文将介绍如何使用着色器来进行几何造型，说到几何图形大家一定都不陌生，比如说三角形、圆形，在WebGL中除了直接使用顶点绘制，我们还可以使用片元着色器进行造型，以下将介绍三角形的绘制，以及应用场景。

在WebGL中绘制图像需要用到WebGL中的纹理对象，在之前实现网格背景的视频中，我使用了一个叫做纹理坐标的配置，现在也需要用到纹理坐标，并且我们可以通过对纹理坐标处理实现简单的”马赛克“效果。

CSS中的属性Position有时能帮助我们实现一些特殊的布局需求，但是它为什么能达成特殊效果的原因很容易被人忽略，通过对文档深入学习我们可以了解他们实现的逻辑，更好的帮助我们理解布局。

在Canvas2D中实现圆形的绘制比较简单，只要需要调用`arc`指令，类似的，在SVG中我们也只需要一个`<circle>`标签就能在页面上绘制一个圆形。那么在WebGL中我们要怎么去绘制呢？