桔子桑 - 博客园

2019年4月9日

摘要：注意： ①首先顶点着色器接收三个外来数据，position、size、color（我们最终画一个三角形，所以这里的size其实是没用上的）； ②我们将三个数据拼在一起作为一条数据，所以每6个数值为一个顶点携带的数据，所以我们每次读取6 * size 个字节； ③对于这6 * size个字节，根据（偏阅读全文

posted @ 2019-04-09 22:09 桔子桑阅读(405) 评论(0) 推荐(0)

WebGL编程指南案例解析之平移和旋转的矩阵实现

摘要：手写各种矩阵：利用webgl编程指南作者提供的矩阵库：在顶点着色器中，我们添加了一个矩阵参数，通过变化矩阵来改变顶点的坐标，替代了之前的复杂的运算，关于矩阵：矩阵运算：平移矩阵：旋转矩阵：注意： ①webGL中矩阵是列主序的，但是我们通常接触的高数中的矩阵都是行主序的，行主序的矩阵看上去阅读全文

posted @ 2019-04-09 21:45 桔子桑阅读(835) 评论(0) 推荐(0)

2019年4月8日

WebGL编程指南案例解析之平移和旋转的math库实现

摘要：这里说的math库实现，指的是，通过一般的加减乘除（角度计算）来更新坐标值。因为涉及到坐标的变化，所以这里都是基于对顶点着色器的修改平移：因为平移只涉及到每个顶点的x、y坐标的变化，所以我们引入一个vec4 变量，在每次绘制的时候为这个变量赋值：上述代码中间一段中，我们对坐标的变化参数u_T 阅读全文

posted @ 2019-04-08 23:59 桔子桑阅读(409) 评论(0) 推荐(0)

WebGL编程指南案例解析之绘制四边形

摘要：红字地方是相较绘制三角形作更改的。另外，4个顶点的顺序，如下所示，有讲究的：所以点坐标顺序为p1、p2、p3、p4. 其他绘制API（你可以根据如下API绘制你想要的图形）：阅读全文

posted @ 2019-04-08 22:16 桔子桑阅读(304) 评论(0) 推荐(0)

WebGL编程指南案例解析之绘制三角形

摘要：其实，绘制三角形和之前的绘制三个点的代码很相似，只是：在顶点着色器里面，我们不能设置点的size了（gl_PointSize）；绘图函数将从gl.drawArrays(gl.POINTS,0,n)变成gl.drawArrays(gl.TRIANGLES,0,n); 效果如下：阅读全文

posted @ 2019-04-08 21:50 桔子桑阅读(185) 评论(0) 推荐(0)

WebGL编程指南案例解析之绘制三个点

摘要：针对上面的案例，有几点需要知悉： GPU差不多是这样的： CPU差不多是这样的：所以，GPU在图形数据计算方面有很大的优势。为了发挥GPU的并行处理数据的优势，我们通常会将顶点数据放在缓冲区对象中，然后一次性丢给着色器程序（运行在GPU中）去运行（计算、绘制）最后，我们来看看案例的效果：阅读全文

posted @ 2019-04-08 21:42 桔子桑阅读(166) 评论(0) 推荐(0)

WebGL编程指南案例解析之绘制一个点

摘要：后续的本系列博客页都将基于这个页面进行开发，只是替换了案例相关代码部分的js文件。首先让我们来看webgl1.js: 注释很详细，如有疑问，请留言，点击之后的效果如下图：阅读全文

posted @ 2019-04-08 21:14 桔子桑阅读(277) 评论(0) 推荐(0)

2019年4月7日

在pixi中使用你的自定义着色器

摘要：通过几天的学习，对openGL、shader有了一个大致的了解。回到学习的初衷吧，在基于pixi.js重构D3项目的时候，因为精灵层级的问题，我得按照一定的先后顺序将不同类别的精灵添加到场景中去。例如：针对人物关系的关系图谱，所有的关系线必须要在所有的任务面板下面，但是移动人物面板的时候，与之阅读全文

posted @ 2019-04-07 16:52 桔子桑阅读(2619) 评论(0) 推荐(0)

2019年4月6日

openGL之着色器程序的使用

摘要：首先，在发该贴的时候，这个程序依旧没有跑起来，因为GLFW、GLEW等库的原因，鉴于GLUT是上个时代的产物，所以学到后面看到的一些案例都是用的GLEW、GLFW、GLAD等库，一时半会儿没有配置成功，但是，这并不能影响我们根据其中的代码来理解着色器程序（shader）。下面，我们主要来看一下其中阅读全文

posted @ 2019-04-06 10:39 桔子桑阅读(1434) 评论(0) 推荐(0)

2019年4月5日

第一个openGL程序

摘要：一、工具的安装因为要写C++程序，为了便捷，这里我安装的Visual Studio；免费使用90天！安装好了之后，我们要为我们的开发安装相应的工具集；因为我是要在windows上跑的，所以选择如下两个包：选择完之后进行安装（3.7个G）二、辅助头文件因为我们要用openGL来画图形，所以阅读全文

posted @ 2019-04-05 21:19 桔子桑阅读(322) 评论(0) 推荐(0)

2019年3月31日

Relation.js——基于pixi.js的拓展模块之人物关系图谱

摘要：出于【重构基于D3的关系图谱项目】的目的，在看完pixi.js之后，并且网上又没有现成的基于webgl的关系图谱js库，于是，本人决定自己写一个。因为平常要工作的原因，进度可能有点慢，但是github会同步更新：https://github.com/ecojust/Relation.js。那么，阅读全文

posted @ 2019-03-31 11:14 桔子桑阅读(1159) 评论(0) 推荐(0)

2019年3月27日

pixi之动画

摘要：一、循环动画应该很好理解吧，delta参数值代表帧的部分的延迟。你可以把它添加到元素的位置，让元素移动的速度和帧率无关，就像上面代码所示一样；是否加进去这个delta的值其实是一种审美的选择。它往往只在你的动画没法跟上60帧的速率时候出现（比如你的游戏运行在很老旧的机器上）。如果你不需要这个参阅读全文

posted @ 2019-03-27 22:41 桔子桑阅读(1274) 评论(0) 推荐(0)

pixi之加载纹理贴图和精灵类的使用

摘要：因为之前看过three.js的缘故，所以pixi学习起来也是很快的，主要就是熟悉pixi的API，所以，在这里记录一下pixi常用API，废话不多说，下面上干货。一、为你的PIXI场景添加图片（精灵类）注：请自行提前下载pixi.min.js,后续案例基于pixi.js - v4.5.5 还有一阅读全文

posted @ 2019-03-27 00:18 桔子桑阅读(3652) 评论(0) 推荐(0)

2019年3月25日

React状态管理之redux

摘要：其实和vue对应的vuex都是差不多的东西，这里稍微提一下（安装Redux略过）：上述是一个标准的store，并且有两个reducer。然后我们希望store在每个组件里都能访问，这个时候你可以： ①将store挂在到入口文件的路由上，但是这样的话要通过props来访问，组件层级高的话，很麻烦；阅读全文

posted @ 2019-03-25 21:37 桔子桑阅读(146) 评论(0) 推荐(0)

React中利用axios来实现数据请求

摘要： axios是基于Promise来封装的，通常我们会用axios在数据请求这块作如下配置：一、拦截器有注释，不难理解，通常请求头参数不是写死的，应该是去浏览器中读的，例如，login之后返回token，此时存到浏览器存储，然后拦截器就可以直接去读了，为后续的每一个请求添加该请求头参数：二、get 阅读全文

posted @ 2019-03-25 01:27 桔子桑阅读(4520) 评论(2) 推荐(0)

公告