Bootstrap
博客内容搜索
Kaysama's Blog

WebGL

原生js+WebGL实现3D图片效果

海外党玩F***book的时候可能有接触过这个酷炫的3d图片效果:

只要通过客户端的这个入口——

或者网页版的这个入口——

就能生成。不知道咋玩的请参考官方的帮助手册
。今天就教大家手撸出一个这样的功能,不要担心,所有代码加起来不超过200行并且不使用任何第三方库。虽然canvas2D也能做出这个效果,但是基于这种像素级操作的性能考虑,WebGL显然是更好的方案,我前面的有些教程也用到了WebGL,核心的API我就不做过多介绍,直接详细地注释在最终的代码里面了,代码仍然使用WebGL
1.0版本。

继续阅读

前端实现旗帜飘动效果系列(Ⅳ):webgl实现

继续填坑,本文会稍微提一些webgl的基础,不会做过多介绍,看官们请先准备要一定的基础知识。
webgl要实现前面的例子方式有很多,比如
给一个矩形平面添加多个顶点,然后在顶点着色器中,在xy平面上移动顶点位置;
或者移动顶点的z分量,再左乘视图矩阵;
或者只使用四个顶点来创建矩形,然后在片元着色器中对uv进行偏移等等。
我这次只讲第一种,下面几个方法玩个坑以后在填吧~

继续阅读