`
flyfox1982
  • 浏览: 77802 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论
文章列表
<div class="iteye-blog-content-contain" style="font-size: 14px"></div> 0x00 楔子 最近做的一个项目,是一个油田三维可视化监控的场景编辑和监控的系统,和三维组态有些类似,不过主要用于油田上。 效果如下图所示 ...
转换任意颜色为RGBA格式     前端编程过程中,经常会遇到要把各种颜色格式(比如 “red”、“#F00”、“#FF0000”等)转换成RGBA格式,搜索网络也可以发现一堆的解决方案: image 此处介绍一种方法: 通过canvas的像素获取方法,来获取任意颜色的RGBA数值。大致步骤如下: 首先创建一个尺寸为1*1的canvas,并获取canvas的绘制上下文ctx 设置ctx.fillStyle为指定的颜色 通过ctx.fillRect填充canvas 通过ctx.getImaegeData获取Imagedata对象,并获取其中的像素值,获取的像素值正好是R ...
<div class="iteye-blog-content-contain" style="font-size: 14px"></div>  
我们知道,清空canvas画布内容有以下两个方法。 第一种方法是cearRect函数: context.cearRect(0,0,canvas.width,canvas.height) 第二种方法就是用原值重新设置一下canvas的宽(或者高) canvas.width = canvas.width // or
这是一个项目中遇到的实际需求。 场景是一个智能仓库管理系统,场景里面有直线和曲线构成的环穿轨道。环穿轨道上面会有小车运动,后台推动小车的两个点位A和B,其中A和B都会在轨道上面,前端需要根据这两个推送点,自动播放小车从A点沿轨道到B点的动画。下面是项目截图: 项目中使用的是二次贝塞尔曲线,所以本文也主要以二次贝塞尔曲线为讲解重点。 要实现上述动画,需要首先确定A点和B点在曲线上面的比例值ta和tb 最终的需求变成:“根据贝塞尔曲线上的点反算t值”。 大概有以下几种方法。现假设贝塞尔曲线上的点为点P(后续会用到该点)。 分片迭代 分片迭代是一种近似的方法。我们知道,二次贝塞尔曲线的公 ...
前言 在WebGL1中,纹理的图片和采样信息都是写在纹理对象之中. 采样信息告诉GPU如何去读取贴图上图片的信息。 如果我们希望从同一个图片多次读取像素信息,但是每次读取的时候使用的过滤方式不一样, 此时我们需要创建两个不同的纹理对象。 "你说这样是不是很烦啊" WebGL: “。。。” 采样器对象 在WebGL2中,引入了采样器对象,使用采样器对象,可以把纹理的过滤方式封装到采样器对象上面,而原本的纹理对象可以不用在指定过滤方式,因此一张图片可以只用创建一个纹理
在很久很久以前,盘古开辟了天地,他的头顶着天,脚踩着地,最后他挂了。他的毛发变成了森林,他的血液变成了河流,他的肌肉变成了大地。。。。。。卡! 哦,不对,在很久很久以前,你属于我,我拥有你。你还有没有程序员的自我修养啦。不好意思,串戏了,下面进入。。。主题本文适合对webgl、计算机图形学、前端可视化感兴趣的读者。 在很久很久以前,使用WebGL1的时候,只能在默认的绘制的缓冲区上面使用MSAA,而不能在帧缓冲区上面实现,更加形象的说就是:MSAA不能用于离屏渲染。如果需要在帧缓冲区(离屏渲染)上面实现去锯齿效果,需要在贴图内容上使用自己实现的post -process的AA,比如: ...
本文适合适合对canvas绘制、图形学、前端可视化感兴趣的读者阅读。 楔子 所有的事情都会有一个起因。最近产品上需要做一个这样的功能:给一些图形进行染色处理。想想这还不是顺手拈来的事情,早就研究过图形染色的 ...
本文适合对webgl、计算机图形学、前端可视化感兴趣的读者。 偏导数函数(HLSL中的ddx和ddy,GLSL中的dFdx和dFdy)是片元着色器中的一个用于计算任何变量基于屏幕空间坐标的变化率的指令(函数)。在WebGL中,使用的是dFdx和dFdy,还有另外一个函数fwidth = dFdx + dFdy。 偏导数计算 在三角形栅格化期间,GPU会同时跑片元着色器的多个实例,但并不是一个pixel一个pixel去执行的,而是将其组织在2x2的一组pixels块中并行执行。偏导数就是通过像素块中的变量的差值(变化率)而计算出来的。dFdx表示的是像素块中右边像素的值减去素块中左 ...
本文适合JavaScript初学者。 一元正号介绍 一元正号运算符(+)位于其操作数前面,计算其操作数的数值,如果操作数不是一个数值,会尝试将其转换成一个数值。 尽管一元负号也能转换非数值类型,但是一元正号是转换其他对象到数值的最快方法,也是最推荐的做法,因为它不会对数值执行任何多余操作。 转换字符串 一元正号可以用于转换数值字符串为数字,比如如下代码: + "123" 
<div class="iteye-blog-content-contain" style="font-size: 14px"></div>  本文介绍JavaScript的展开操作符(Spread operator)...。本文适合ES6初学者。 你可以通过展开操作符(Spread operator)...扩展一个数组对象和字符串。展开运算符(spread)是三个点(…),可以将可迭代对象转为用逗号分隔的参数序列。如同rest参数的逆运算。 用于数组 以数组为例,首先创建一个数组,
记得几年前,我的一个同事J需要做一个动画功能,大概的需求是实现球面上一个点到另外一个点的动画。当时他遇到了难度,在研究了一个上午无果的情况下,咨询了我。我就告诉他说,你先尝试一个简化的版本,就是实现圆环上一个点到另外一个点的动画。如下图所示,要实现点A插值渐变到B的动画过程。     image.png 同事J的解决方案是,先计算出来A点和圆心O的连线和水平方向(与X轴平行)的夹角1,再计算出B点和圆心O的连线和水平水平方向的夹角2。 计算出夹角以后,开始实现动画效果,由于已经有了两个角度,所以只需要实现一个角度不断插值变化的效果即可,如下图所示:   ...
  最近是一个找工作的高峰期,所谓金三银四。相信很多人都在找工作的路上,当然肯定是要面试的。由于这些年,我做技术管理工作,也面试了很多人。感觉有一点经验,希望和找工作的朋友们分享。 自我介绍 一般来说, ...
春节回老家过年,所见所思。随笔记录下一些看法和感悟。 home 首先,开车的人越来越多。说明最近几年很多在外打工的人赚了钱 。另外一个层面,车也变得越来越便宜。农村的公路基本到了每家每户。所以很多人都可以直 ...
<div class="iteye-blog-content-contain" style="font-size: 14px"></div> 今年回农村老家过年,得知一个消息,农村也开始禁鞭了。听到这个消息,我是挺高兴的。实在困扰于这些年回老家过年,鞭炮带来的噪声污染和空气污染。本来想回家呼吸点新鲜空气,结果那几天空气比城里还差。 和大家聊起这个事情,聊起了那些买烟花的商户。这些买烟花的商户,以前每逢年关,都能大赚一笔,就年关一小段时间,就能赚十几二十来万,这对于农村来说,已经是一笔很不错的收入了。可以说,这些年,买烟花是一笔 ...
Global site tag (gtag.js) - Google Analytics