Jeff's World

Things that I'm interested in

47
文 章
2
分 类
64
标 签

WebGL学习之法线贴图

实际效果请看demo:纹理贴图

法线贴图

为了增加额外细节,提升真实感,我们使用了漫反射贴图和高光贴图,它们都是向三角形进行附加纹理。但是从光的视角来看是表面法线向量使表面被视为平坦光滑的表面。以光照算法的视角考虑的话,只有一件事决定物体的形状,那就是垂直于它的法线向量。砖块表面只有一个法向量,表面完全根据这个法向量被以一致的方式照亮。如果每个片元都用不同的法线会怎样?这样我们就可以根据表面细微的细节对法线向量进行改变;这样就会获得一种表面看起来要复杂得多的幻觉:
表面法线

more

WebGL学习之纹理贴图

为了使图形能获得接近于真实物体的材质效果,一般会使用贴图,贴图类型主要包括两种:漫反射贴图和镜面高光贴图。其中漫反射贴图可以同时实现漫反射光和环境光的效果。
实际效果请看demo:纹理贴图

more

如何将markdown转换为wxml

话说我要为技术博客写一个小程序版,我的博客解决方案是 hexo + github-page,格式当然是技术控们喜欢的 markdown 了 。但小程序使用的却是独有的模版语言 WXML。我总不能把之前的文章手动转换成小程序的 wxml 格式吧,而网上也没完善的转换库,还是自己写个解析器吧。

解析器最核心的部分就是字符串模式匹配,既然涉及到字符串匹配,那么就离不开正则表达式。幸好,正则表达式是我的优势之一。

more

小试小程序云开发

微信小程序刚出没多久时,曾经上手写过demo,但开发体验比较差,所以一直没怎么关注。不过自从诸多适配方案出炉,以及云端的开通,觉得还是有必要上手体验一番的,于是为我的技术博客也写了个小程序版。

原生开发我是不想再试了,那就选一种适配方案,目前比较知名的有基于vue的 mpvueumi-app,基于react 的 taro,以及TX团队出的全新框架 wepy。个人对 react 的好感 以及 taro 框架的走向成熟,促使我选择了 taro

more

koa+mysql+vue+socket.io全栈开发之前端篇

ReactVue 之间的对比,是前端的一大热门话题。

  • vue 简易上手的脚手架,以及官方提供必备的基础组件,比如 vuexvue-router,对新手真的比较友好;react 则把这些都交给社区去做,虽然这壮大了 react 的生态链,但新手要弄出一套趁手的方案挺麻烦的,不过好在现在有很多类似 dva 的方案了。

  • vue 比较讨喜的一点,就是它的数据双向流动在表单开发时特别方便,而 react 在这方面可就麻烦多了。

  • 但是 vue 复杂的 api ,简直让人头大,光是文档说明都几十页了。太多的语法,太多的魔法符号,对进化速度越来越快的前端届来说,就是入手这个框架的最大阻碍。

  • 而相反 react 的 api 数量简直可以忽略不计了,顶多花几小时就能看完官方文档。你只要理解 JavaScript,就能理解 react 的很多行为。react 的很多用法,它的 api 都是符合直觉的,你对它用法的猜测基本都是八九不离十的,这真是大大降低了心智负担。

  • 除此之外,reactjsx 语法表达能力更强,还有 hochooks 使代码也更容易组织和复用。

虽然我更喜欢 React ,但工作上的需求,还不是要你用什么你就得用什么 😂,所以这个 demo 就当是探索 Vue 的前奏。

more

koa+mysql+vue+socket.io全栈开发之数据访问篇

后端搭起大体的框架后,接着涉及到的就是如何将数据持久化的问题,也就是对数据库进行 CURD 操作。

关于数据库方案, mongodbmysql 都使用过,但我选用的是 mysql,原因:

  1. 目前为止 mysqlmongodb 性能相差不大,尤其是 mysql 8.0 版本,速度非常快,查询数据是 mysql 更快,写数据方面 mongodb 则更胜一筹;
  2. mysql 建立 关联数据要更方便些,比如: 一对多,多对多的关系;
  3. mysql 作为关系型数据库,数据一致性方面更好,尤其是事务用起来更顺手;
  4. 本人对 sql 操作比较得心应手,毕竟大部分项目用得都是 mysql,而 mongodb 在正式些的项目上用的就少了,而且目前关系型数据库也在进化, postgrepmysql 都已经支持 json了。
more

koa+mysql+vue+socket.io全栈开发之web api篇

目标是建立一个 web QQ 的项目,使用的技术栈如下:

  1. 后端是基于 koa2 的 web api 服务层,提供 curd 操作的 http 接口,登录验证使用的是 json web token,跨域方案使用的是 cors

  2. 数据库使用的是 mysql

  3. 为了实时通信,使用的是基于 websocket 协议的 socket.io 框架;

  4. 前端则使用的是 vue + vuex

more

关于socket.io的使用

这段时间学习了socket.io,用它写了小项目,在此总结下它的基本使用方式和一些要点。
socket.io是基于Node.jsWebSocket协议的实时通信开源框架,它包括客户端的JavaScript和服务器端的Node.js。

服务端

这里后端使用的框架是koa2socket.io将自身绑定到koa的进程中去,其中最重要的事件就是 connectiondisconnect。它们是框架本身定义的系统事件,也就意味着它是自然就存在的不需要我们自定义,当然还有其它系统事件,但很少会用得到。

more

基于Webpack 4 和 React hooks 搭建项目

面对日新月异的前端,我表示快学不动了😂。 Webpack 老早就已经更新到了 V4.x,前段时间 React 又推出了 hooks API。刚好春节在家里休假,时间比较空闲,还是赶紧把 React技术栈这块补上。

网上有很多介绍 hooks 知识点的文章,但都比较零碎,基本只能写一些小 Demo。还没有比较系统的,全新的基于 hooks 进行搭建实际项目的讲解。所以这里就从开发实际项目的角度,搭建起单页面 Web App项目的基本脚手架,并基于 hooks API 实现一个 react 项目模版。

Hooks 最吸引人的地方就是用 函数式组件 代替面向对象的 类组件。此前的 react 如果涉及到状态,解决方案通常只能使用 类组件,业务逻辑一复杂就容易导致组件臃肿,模块的解藕也是个问题。而使用基于 hooks函数组件 后,代码不仅更加简洁,写起来更爽,而且模块复用也方便得多,非常看好它的未来。

more

扫一扫,分享到微信

Powered by Hexo Theme simply

Copyright © 2021 Jeff Zhong

给我的早餐加个蛋吧 😊

weixinpay alipay