yancy__

关于图形的动画内容，之前已经分享完成了两篇，分别是webgl变换：深入图形平移和webgl变换：深入图形旋转。 在以往的学习中，大家都会发现一个问题，没有基础的知识，即使能学会，也会忘的很快。所以在之前的文章中，不仅跟大家介绍了如何通过矩阵实现图形的平移和旋转，也详细的分析了如…

1. 前言 图形的动画是由平移、旋转、和缩放三种基础的变换方式组成。 之前的文章里，分享了下如何进行图形的平移。《webgl变换：深入图形平移》 ，文章中使用了两种方法来实现一个图形的平移操作， 通过矩阵的方式实现。 通过对比我们也可以看出，通过矩阵实现的变换操作，扩展性和可操…

在以前的文章里，不管是绘制图形，绘制点亦或者是改变色值，所有的内容都是静态的。 在 webgl 里，图形的运动分为 平移、旋转、缩放 三种类型。 接下来，我们会从零基础开始，一点一点来深入了解图形如何进行运动。 1. 图形平移 首先我们来看如何实现图形的平移操作。 平移的操作就…

继前期分享了 初入webgl 的一些内容之后，相信大家已经对webgl有了一个初步的认识，今天再来分享一些基础内容，已加深大家对于它的认知。 众所周知，3d 的内容是比较多的，也很容易让人看的很迷惑。所以，此系列文章的分享理念就一个 -- 说透彻，说清楚，说明白。 好了，话不多…

hi~ everybody. 又到了愉快的分享时刻了。 在前面两节内容中给大家分享了如何通过 webgl 来绘制一个点，并且介绍了着色器的一些基础知识。 当然了，仅仅只有文字的描述是不能勾起大家学习 webgl 的欲望的，还需要自己动手实现下。观察自己写的代码是如何运作的。 好…

上节文章中，跟大家分享了一下如何入门 webgl 并在画布上绘制一个点。 诚然，我们看到的流程是十分繁琐的。 这里想说明的一点是，webgl 基础很类似于 JavaScript 基础。 在学习 JavaScript 的时候如果直接上手 jquery、vue、react、angu…

终于要进入到webgl的世界了。还真是有点小激动。在之前的文章里，跟大家详细分享了下 canvas 的相关内容。下面会有这几篇文章的链接，有兴趣的小伙伴可以自行查阅。 准备好了吗？接下来让我们开启奇幻旅程，进入 3D 的世界。 1. 认识3D 首先我们要介绍的是几个概念，这是我…

插播一篇关于 canvas 动画及性能优化的文章，为我们可以更好的进入到 webgl 的世界奠定基础。 本篇文章的内容可能会稍难理解，还希望大家有问题及时提出。闲话我们就不多说了，开始今天的正题吧。 1. 动画实战 首先介绍一下我们要实现的动画内容： 夜空中的流星源码。 今天就…

上节文章中，给大家分享了canvas最基础的用法，包括绘制线条、控制渲染方式、绘制图形、作用域、添加阴影、清理、剪切等功能，本节将继续为大家分享canvas的基础用法，同时也是最后一节基础知识分享，之后的内容，我们将会进入到对webgl的分享中。 1. 文本绘制 首先我们要提到…