摘要: 之前总是写一些技术文章,每年的总结我实在是觉得自己写不出什么,大多时候没有目标,虚度的光阴,索性就不去写,得过且过。17年之前基本都是待在一家外企,过着朝九晚五的生活,17年来到一家一线互联网公司。这一年的工作量等于我上家公司两年半的工作量,对于我来说是一个转折点,有必要记录下来。 加班 这一年工作阅读全文
posted @ 2017-12-24 21:19 木的树 阅读(4269) 评论(55) 编辑
摘要: 什么是ServiceWorker 在介绍ServiceWorker之前,我们先来谈谈PWA。PWA (Progressive Web Apps) 是一种 Web App 新模型,并不是具体指某一种前沿的技术或者某一个单一的知识点,,这是一个渐进式的 Web App,是通过一系列新的 Web 特性,配阅读全文
posted @ 2017-12-21 14:03 木的树 阅读(1078) 评论(4) 编辑
摘要: 现在的JavaScript代码要进行性能优化,通常使用一些常规手段,如:延迟执行、预处理、setTimeout等异步方式避免处理主线程,高大上一点的会使用WebWorker。即使对于WebWorker也仅仅是解决了阻塞主线程的问题,但是对于JavaScript计算性能慢的问题并没有解决。这里对一些需阅读全文
posted @ 2017-12-19 09:12 木的树 阅读(1625) 评论(3) 编辑
摘要: THREE.js开发的应用运行在iphone5下发现有些时候会崩溃,跟了几天发现是因为Sprite太多频繁更新纹理占用显存导致的。通常解决纹理频繁更新问题就要用到one draw all方法,放到纹理上就是把所有纹理图片生成一张大图片的方式。 一、阻止纹理重复上传 我们需要一张大纹理,先将所有的内容阅读全文
posted @ 2017-08-22 09:12 木的树 阅读(906) 评论(4) 编辑
摘要: 一、齐次坐标 在3D世界中表示一个点的方式是:(x, y, z);然而在3D世界中表示一个向量的方式也是:(x, y, z);如果我们只给一个三元组(x, y, z)鬼知道这是向量还是点,毕竟点与向量还是有很大区别的,点只表示位置,向量没有位置只有大小和方向。为了区分点和向量我们给它加上一维,用(x阅读全文
posted @ 2017-07-23 00:07 木的树 阅读(655) 评论(14) 编辑
摘要: 前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目。也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享。 1、法向量问题 法线是垂直于我们想要照亮的物体表面的向量。法线代表表面的方向因此他们为光源和物体的交互建模中具有决定性作用。每一个顶点都有一个关联的法向量。 如果一个阅读全文
posted @ 2017-07-09 21:40 木的树 阅读(1866) 评论(10) 编辑
摘要: 什么是跨域JSONPproxy代理corsxdr 由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表(来源) JSONP 这种方式主要是通过动态插入一个script标签。浏览器对script的资源引用没有同源限制,同时资源加载...阅读全文
posted @ 2015-02-01 16:08 木的树 阅读(106503) 评论(55) 编辑
摘要: 之前总是写一些技术文章,每年的总结我实在是觉得自己写不出什么,大多时候没有目标,虚度的光阴,索性就不去写,得过且过。17年之前基本都是待在一家外企,过着朝九晚五的生活,17年来到一家一线互联网公司。这一年的工作量等于我上家公司两年半的工作量,对于我来说是一个转折点,有必要记录下来。 加班 这一年工作阅读全文
posted @ 2017-12-24 21:19 木的树 阅读(4269) 评论(55) 编辑
摘要: 什么是ServiceWorker 在介绍ServiceWorker之前,我们先来谈谈PWA。PWA (Progressive Web Apps) 是一种 Web App 新模型,并不是具体指某一种前沿的技术或者某一个单一的知识点,,这是一个渐进式的 Web App,是通过一系列新的 Web 特性,配阅读全文
posted @ 2017-12-21 14:03 木的树 阅读(1078) 评论(4) 编辑
摘要: 现在的JavaScript代码要进行性能优化,通常使用一些常规手段,如:延迟执行、预处理、setTimeout等异步方式避免处理主线程,高大上一点的会使用WebWorker。即使对于WebWorker也仅仅是解决了阻塞主线程的问题,但是对于JavaScript计算性能慢的问题并没有解决。这里对一些需阅读全文
posted @ 2017-12-19 09:12 木的树 阅读(1625) 评论(3) 编辑
摘要: 虚拟DOM简介 Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树,其主要是通过vnode,实现一个无状态的组件,当组件状态发生更新时,然后触发Virtual Dom数据的变化,然后通过Virtual Dom和真实DOM的比对,再对真实DOM更新。虚拟DOM其实就是一种模拟阅读全文
posted @ 2017-12-16 22:20 木的树 阅读(409) 评论(0) 编辑
摘要: 总体来说webworker解决了阻塞主线程问题,但是还没解决高性能计算的问题 WebWorker整体介绍 "https://developer.mozilla.org/zh CN/docs/Web/API/Web\_Workers\_API/Using\_web\_workers" 这里的主要问题都阅读全文
posted @ 2017-11-27 09:47 木的树 阅读(502) 评论(4) 编辑
摘要: 1。找到想要更改的着色器代码 2.添加着色器代码片段 3.在相应着色器中添加更改 4.ShaderChunk.js中引入步骤2添加的片段 5.Shaderlib中为将增加的uniforms变量添加到Uniforms集合中 6.WebGLProgram中根据条件添加片段开关 7.WebGLProgra阅读全文
posted @ 2017-10-09 18:52 木的树 阅读(171) 评论(0) 编辑
摘要: THREE.js开发的应用运行在iphone5下发现有些时候会崩溃,跟了几天发现是因为Sprite太多频繁更新纹理占用显存导致的。通常解决纹理频繁更新问题就要用到one draw all方法,放到纹理上就是把所有纹理图片生成一张大图片的方式。 一、阻止纹理重复上传 我们需要一张大纹理,先将所有的内容阅读全文
posted @ 2017-08-22 09:12 木的树 阅读(906) 评论(4) 编辑
摘要: 这章主要探讨矩阵,这些矩阵代表了应用在我们场景上的变换,允许我们移动物体。然而在webGL api中并没有一个专门的camera对象,只有矩阵。好消息是使用矩阵来取代相机对象能让webgl在很多复杂动画中拥有更高的灵活性。 第四章中主要内容: 1、了解场景从3d世界到二维屏幕所经历的变换 2、学习仿阅读全文
posted @ 2017-08-20 22:22 木的树 阅读(316) 评论(0) 编辑
摘要: 一、齐次坐标 在3D世界中表示一个点的方式是:(x, y, z);然而在3D世界中表示一个向量的方式也是:(x, y, z);如果我们只给一个三元组(x, y, z)鬼知道这是向量还是点,毕竟点与向量还是有很大区别的,点只表示位置,向量没有位置只有大小和方向。为了区分点和向量我们给它加上一维,用(x阅读全文
posted @ 2017-07-23 00:07 木的树 阅读(655) 评论(14) 编辑
摘要: 在Webgl中我们使用顶点着色器和片元着色器来为我们的场景创建光照模型。着色器允许我们使用数学模型来控制如何照亮我们的场景。 最好有线性代数的相关知识。 本章中: 1. 光源、法线、材料 2. 光照和着色的区别 3. Goraud Phong着色方法和Lambertian Phong光照模型 4. 阅读全文
posted @ 2017-07-16 12:30 木的树 阅读(309) 评论(0) 编辑