摘要: 关于WebGL绘制线原理不明白的小伙伴,可以看看我之前的文章WebGL绘制有宽度的线。这一篇我们主要来介绍端头的绘制,先看效果图。 端头一般被称为lineCap,主要有以下三种形式: butt最简单等于没有端头,square一般是多出lineWidth/2的长度,round是一个以lineWidth阅读全文
posted @ 2018-08-11 23:11 木的树 阅读(778) 评论(9) 编辑
摘要: 地图投影 对于接触互联网地图的同学来说,最开始接触的恐怕就是坐标转换的过程了。由于地球是个近似椭球的形状,有各种各样的椭球模型来模拟地球,最著名的也就是GPS系统使用的WGS84椭球了。但是这些椭球体的坐标使用的是经纬度,单位是角度。目前我们的地图大多是二维平面上展示,使用角度为基础来计算多有不便,阅读全文
posted @ 2018-07-02 09:56 木的树 阅读(1942) 评论(8) 编辑
摘要: WebGL中有宽度的线一直都是初学者的一道门槛,因为在windows系统中底层的渲染接口都是D3D提供的,所以无论你的lineWidth设置为多少,最终绘制出来的只有一像素。即使在移动端可以设置有宽度的线,但是在拐弯处原生api没有做任何处理,所以往往达不到项目需求,再者比如对于虚线、导航线的绘制,阅读全文
posted @ 2018-06-25 00:14 木的树 阅读(1314) 评论(0) 编辑
摘要: THREE.js开发的应用运行在iphone5下发现有些时候会崩溃,跟了几天发现是因为Sprite太多频繁更新纹理占用显存导致的。通常解决纹理频繁更新问题就要用到one draw all方法,放到纹理上就是把所有纹理图片生成一张大图片的方式 一、阻止纹理重复上传 我们需要一张大纹理,先将所有的内容绘阅读全文
posted @ 2018-04-17 00:04 木的树 阅读(905) 评论(0) 编辑
摘要: 一、齐次坐标 在3D世界中表示一个点的方式是:(x, y, z);然而在3D世界中表示一个向量的方式也是:(x, y, z);如果我们只给一个三元组(x, y, z)鬼知道这是向量还是点,毕竟点与向量还是有很大区别的,点只表示位置,向量没有位置只有大小和方向。为了区分点和向量我们给它加上一维,用(x阅读全文
posted @ 2017-07-23 00:07 木的树 阅读(1560) 评论(14) 编辑
摘要: 前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目。也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享。 1、法向量问题 法线是垂直于我们想要照亮的物体表面的向量。法线代表表面的方向因此他们为光源和物体的交互建模中具有决定性作用。每一个顶点都有一个关联的法向量。 如果一个阅读全文
posted @ 2017-07-09 21:40 木的树 阅读(6162) 评论(14) 编辑
摘要: 手贱去点了图形学里面的噪声课程,然后一个周末就交代在这上面了,还是有些云里雾里。 噪声就是给定一个输入变量,生成一个值在0~1范围内的伪随机变量的函数。在图形学中一般是输入一个坐标得到一个范围在0~1之间的变量,在利用各种颜色计算得到一些比较酷炫的效果,像火焰、云彩、地形等。下面就是perlin噪声阅读全文
posted @ 2018-10-21 22:10 木的树 阅读(136) 评论(0) 编辑
摘要: 关于WebGL绘制线原理不明白的小伙伴,可以看看我之前的文章WebGL绘制有宽度的线。这一篇我们主要来介绍端头的绘制,先看效果图。 端头一般被称为lineCap,主要有以下三种形式: butt最简单等于没有端头,square一般是多出lineWidth/2的长度,round是一个以lineWidth阅读全文
posted @ 2018-08-11 23:11 木的树 阅读(778) 评论(9) 编辑
摘要: 地图投影 对于接触互联网地图的同学来说,最开始接触的恐怕就是坐标转换的过程了。由于地球是个近似椭球的形状,有各种各样的椭球模型来模拟地球,最著名的也就是GPS系统使用的WGS84椭球了。但是这些椭球体的坐标使用的是经纬度,单位是角度。目前我们的地图大多是二维平面上展示,使用角度为基础来计算多有不便,阅读全文
posted @ 2018-07-02 09:56 木的树 阅读(1942) 评论(8) 编辑
摘要: WebGL中有宽度的线一直都是初学者的一道门槛,因为在windows系统中底层的渲染接口都是D3D提供的,所以无论你的lineWidth设置为多少,最终绘制出来的只有一像素。即使在移动端可以设置有宽度的线,但是在拐弯处原生api没有做任何处理,所以往往达不到项目需求,再者比如对于虚线、导航线的绘制,阅读全文
posted @ 2018-06-25 00:14 木的树 阅读(1314) 评论(0) 编辑
摘要: 很久没有关注算法和数据结构,大部分知识都已经忘记了;是时间好好回炉一下了,说实话干读数据机构这本书还是挺枯燥而且这本书原理性比较多,有一定的难度。这不刚看到逆波兰式废了好大劲才搞懂,老了。。。 逆波兰式 逆波兰式(Reverse Polish notation,RPN,或逆波兰记法),也叫后缀表达式阅读全文
posted @ 2018-05-06 23:01 木的树 阅读(329) 评论(0) 编辑
摘要: THREE.js开发的应用运行在iphone5下发现有些时候会崩溃,跟了几天发现是因为Sprite太多频繁更新纹理占用显存导致的。通常解决纹理频繁更新问题就要用到one draw all方法,放到纹理上就是把所有纹理图片生成一张大图片的方式 一、阻止纹理重复上传 我们需要一张大纹理,先将所有的内容绘阅读全文
posted @ 2018-04-17 00:04 木的树 阅读(905) 评论(0) 编辑
摘要: 之前总是写一些技术文章,每年的总结我实在是觉得自己写不出什么,大多时候没有目标,虚度的光阴,索性就不去写,得过且过。17年之前基本都是待在一家外企,过着朝九晚五的生活,17年来到一家一线互联网公司。这一年的工作量等于我上家公司两年半的工作量,对于我来说是一个转折点,有必要记录下来。 加班 这一年工作阅读全文
posted @ 2017-12-24 21:19 木的树 阅读(5405) 评论(57) 编辑
摘要: 什么是ServiceWorker 在介绍ServiceWorker之前,我们先来谈谈PWA。PWA (Progressive Web Apps) 是一种 Web App 新模型,并不是具体指某一种前沿的技术或者某一个单一的知识点,,这是一个渐进式的 Web App,是通过一系列新的 Web 特性,配阅读全文
posted @ 2017-12-21 14:03 木的树 阅读(8549) 评论(6) 编辑
摘要: 现在的JavaScript代码要进行性能优化,通常使用一些常规手段,如:延迟执行、预处理、setTimeout等异步方式避免处理主线程,高大上一点的会使用WebWorker。即使对于WebWorker也仅仅是解决了阻塞主线程的问题,但是对于JavaScript计算性能慢的问题并没有解决。这里对一些需阅读全文
posted @ 2017-12-19 09:12 木的树 阅读(4384) 评论(6) 编辑
摘要: 虚拟DOM简介 Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树,其主要是通过vnode,实现一个无状态的组件,当组件状态发生更新时,然后触发Virtual Dom数据的变化,然后通过Virtual Dom和真实DOM的比对,再对真实DOM更新。虚拟DOM其实就是一种模拟阅读全文
posted @ 2017-12-16 22:20 木的树 阅读(2865) 评论(0) 编辑