随笔分类 - 前端
摘要：边缘检测 是图像处理 过程中经常会涉及到的一个环节。而在计算机视觉 和 机器学习领域，边缘检测 用于 特征提取 和 特征检测 效果也是特别明显。而 openCV 中进行边缘检测的 算法 真是五花八门，下面我就选几个最常用算法的函数api进行介绍。 本文涉及到的效果请看：边缘检测 内容大纲 转换灰度图
阅读全文
摘要：前段时间一直在钻研深度学习中的卷积神经网络，其中的预处理环节可以说非常关键，主要就是对图片和视频进行处理。而图像处理就涉及到图形学和底层技术细节，这是一个比较精深和专业的领域，假设我们要从头开始做起，那简直太麻烦和低效了。为解决这个问题，openCV就此应运而生，它屏蔽了很多底层技术细节，抽象出方便
阅读全文
摘要：关于html5调用音视频等多媒体硬件的API已经很成熟，不过一直找不到机会把这些硬件转化为实际的应用场景，不过近年来随着iot和AI的浪潮，我觉得软硬结合的时机已经成熟。那我们就提前熟悉下怎么操作这些多媒体硬件吧，首先图像识别是其中最热门的应用场景，首先实现调用摄像头以及截图。 demo的效果请看：
阅读全文
摘要：通过Three.js也许可以很方便的展示出3D模型，但是你知道它是怎么一步一步从构建网格到贴图到最终渲染出3D模型的吗？现在我们直接使用底层的webgl加上一点点的数学知识就可以实现它。 本节实现的效果: WebGL三维地球 内容大纲 构建网格 编写着色器 实现3D地球 构建网格 首先我们要建立球体
阅读全文
摘要：什么是延迟着色(Deferred Shading)？它是相对于正常使用的**正向着色(Forward Shading)**而言的，正向着色的工作模式：遍历光源，获取光照条件，接着遍历物体，获取物体的几何数据，最后根据光照和物体几何数据进行计算。 但是**正向着色(Forward Shading)**
阅读全文
摘要：canvas 和 webGL 这两项图形技术结合 css3 可以说能完成绝大部分的动画和需求。但 canvas 和 webGL 毕竟是偏向底层的绘制引擎，某些场景使用起来还是过于繁琐的，不分场合一律使用锤子解决的行为不值得提倡。svg 在解决排版，图标，相关动画还是非常高效的，而且 svg 还是矢量
阅读全文
摘要：原文地址：WebGL学习之HDR与Bloom 什么是HDR HDR (High Dynamic Range，高动态范围)，在摄影领域，指的是可以提供更多的动态范围和图像细节的一种技术手段。简单讲就是将不同曝光拍摄出的最佳细节的LDR (低动态范围) 图像合成后，就叫HDR，它能同时反映出场景最暗和最
阅读全文
摘要：原文地址：WebGL学习之纹理盒 我们之前已经学习过二维纹理 gl.TEXTURE_2D，而且还使用它实现了各种效果。但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP，它包含了6个纹理代表立方体的6个面。不像常规的纹理坐标有2个纬度，立方体纹理使用法向量，换句话说三维方向。本节实现的de
阅读全文
摘要：WebGL 中当透明和半透明物体共存时，相关设置不正确的话，物体表面会出现破碎杂乱的断面，非常影响效果，我们接着就来解决这个问题。 完成的展示Demo请看: 半透明物体和透明物体共存 α 混合 让物体实现半透明效果需要用到颜色的α分量。该功能被称为a混合(alpha blending) 或 混合 b
阅读全文
摘要：原文地址：WebGL学习之法线贴图 实际效果请看demo：纹理贴图 为了增加额外细节，提升真实感，我们使用了漫反射贴图和高光贴图，它们都是向三角形进行附加纹理。但是从光的视角来看是表面法线向量使表面被视为平坦光滑的表面。以光照算法的视角考虑的话，只有一件事决定物体的形状，那就是垂直于它的法线向量。砖
阅读全文
摘要：原文地址：WebGL学习之纹理贴图 为了使图形能获得接近于真实物体的材质效果，一般会使用贴图，贴图类型主要包括两种：漫反射贴图和镜面高光贴图。其中漫反射贴图可以同时实现漫反射光和环境光的效果。 实际效果请看demo：纹理贴图 2D纹理 实现贴图就需要用到纹理，常用的纹理格式有：2D纹理，立方体纹理，
阅读全文
摘要：原文地址：如何将markdown转换为wxml 话说我要为技术博客写一个小程序版，我的博客解决方案是 hexo + github-page，格式当然是技术控们喜欢的 markdown 了 。但小程序使用的却是独有的模版语言 WXML。我总不能把之前的文章手动转换成小程序的 wxml 格式吧，而网上也
阅读全文
摘要：原文地址：小试小程序云开发 微信小程序刚出没多久时，曾经上手写过demo，但开发体验比较差，所以一直没怎么关注。不过自从诸多适配方案出炉，以及云端的开通，觉得还是有必要上手体验一番的，于是为我的技术博客也写了个小程序版。 原生开发我是不想再试了，那就选一种适配方案，目前比较知名的有基于vue的 mp
阅读全文
摘要：原文地址：koa+mysql+vue+socket.io全栈开发之前端篇 React 与 Vue 之间的对比，是前端的一大热门话题。 vue 简易上手的脚手架，以及官方提供必备的基础组件，比如 vuex，vue-router，对新手真的比较友好；react 则把这些都交给社区去做，虽然这壮大了 re
阅读全文
摘要：原文地址：koa+mysql+vue+socket.io全栈开发之数据访问篇 后端搭起大体的框架后，接着涉及到的就是如何将数据持久化的问题，也就是对数据库进行 CURD 操作。 关于数据库方案, mongodb 和 mysql 都使用过，但我选用的是 mysql，原因： 目前为止 mysql 与 m
阅读全文
摘要：原文地址：koa+mysql+vue+socket.io全栈开发之web api篇 目标是建立一个 web QQ的项目，使用的技术栈如下： 后端是基于koa2 的 web api 服务层，提供curd操作的http接口，登录验证使用的是 json web token，跨域方案使用的是 cors； 数
阅读全文
摘要：原文地址：关于socket.io的使用 这段时间学习了socket.io，用它写了小项目，在此总结下它的基本使用方式和一些要点。 socket.io是基于Node.js和WebSocket协议的实时通信开源框架，它包括客户端的JavaScript和服务器端的Node.js。 服务端 这里后端使用的框
阅读全文
摘要：面对日新月异的前端，我表示快学不动了😂。 Webpack 老早就已经更新到了 V4.x，前段时间 React 又推出了 hooks API。刚好春节在家里休假，时间比较空闲，还是赶紧把 React 技术栈这块补上。 网上有很多介绍 hooks 知识点的文章，但都比较零碎，基本只能写一些小 Demo
阅读全文
摘要：制作动画效果离不开动画运动函数，而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理，Tween.js划分出了不同的动画类型，每种动画类型里面都包含以下的缓动类型： ease in 先慢后快 ease out 先块后慢 ease in out 先慢后快再慢 关于缓动函数，我们在 css3
阅读全文
摘要：原文地址：canvas实现俄罗斯方块 好久没使用canvas了，于是通过写小游戏“俄罗斯方块”再次熟悉下canvas，如果有一定的canvas基础，要实现还是不难的。实际完成的Demo请看：canvas俄罗斯方块。 原理详解 看游戏最终界面，可知需要实现以下关键功能： 游戏面板，也就是12 * 20
阅读全文
浙公网安备 33010602011771号