code for life

原创 10.WebGL Shader 噪声

noise不管是1D、2D、3D，可以比喻成在茫茫大地上存储的矿石，无穷无尽。通过noise函数输入的索引，可以获取任意位置的金矿，索引坐标可以是1D、2D、3D。可以把其中一个维度理解为时间。（1）Noise 使用方法: 用开采出来的数值控制各种属性。（2）如果你想将noise生成的值赋值给不同的属性，一定要错开不同的 Noise 取值区间，来避免变化趋势相同，一般我们是在noise输入参数上乘上某值，让输入的参数范围相距更远。具体我们来看一下下面这个案例。

原创 10.WebGL Shader 分形

复数，是数的概念扩展。我们把形如z=a+bi（a、b均为实数）的数称为复数。其中，a称为实部，b称为虚部，i称为虚数单位。当z的虚部b＝0时，则z为实数；当z的虚部b≠0时，实部a＝0时，常称z为纯虚数。为了更加直观地表示复数，我们将复数按照向量在直角坐标系中的表示方法一样，将它在直角坐标系中表示。值得大家注意的是，此时表示复数的直角坐标系的y轴与之前相比，发生了一些变化。之前的直角坐标系，x、y轴表示的都是实数，而此时的直角坐标系，x轴表示的还是实数，y轴表示的却是虚数。

原创 9.WebGL Shader 随机数

我们前面所讲的函数均为遵守秩序的函数，但我们这节课将给大家讲解随机数。在glsl中并没有提供生成随机数函数公式，如果需要实现随机数函数利用glsl现有公式模拟出随机数值。随机数在glsl中有很多应用像是噪点图就是利用随机数来实现。因此在实现噪点图之前先了解如何生成随机数函数。

原创 8.WebGL Shader光照

Phong模型是一种用于计算3D物体表面的光照效果的经典算法，它得名于其发明者Bui Tuong Phong（https://en.wikipedia.org/wiki/Bui_Tuong_Phong）。它主要由三个成分构成：环境光、漫反射和镜面反射。1.环境光：表示整个场景中的均匀光照，不会受到物体表面属性的影响。2.漫反射：表示入射光线与物体表面之间的散射，使物体表面上的每个点都能接收到来自光源的光线。其中平行光与点光源和漫反射有直接关系。3.镜面反射：表示入射光线经过反射后集中在一个方向，形成高

原创 7.WebGL+Shader纹理应用

纹理映射能为图像添加上皮肤，将一张图片或者图像映射到几何图形上，其作用是根据纹理图像，为之前光栅化的每个片元涂上颜色 (组成纹理图像的像素又被称为纹素)

原创 5.WebGL+Shader常用函数

abs()在实际对称图形中应用广泛，通过将uv x，y进行对称化，可以复制出相应的图形。在日后的练习中我们会经常用到，敬请期待哈。

原创 4.WebGL+Shader课程基础

变量名只能包含英文字符、数字和下划线即(a-z、A-Z、0-9、_)变量名的首字母不能是数字不能以 gl_ 、webgl_ 或 webgl 开头，这些前缀已经被OpenGL ES 保留了不能是GLSL ES内置的关键字和保留的关键字变量类型说明具有2、3、4个浮点数元素的矢量具有2、3、4个整形元素的矢量具有2、3、4个布尔值元素的矢量。

原创 3.WebGL+Shader项目处初始化

（全称：Visual Studio Code）是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。在 2019 年的 Stack Overflow 组织的开发者调查中，Visual Studio Code 被认为是最受开发者欢迎的开发环境。

原创 2.着色器基础

/ 窗口分辨率，单位像素// 程序运行的时间，单位秒// 渲染时间，单位秒// 帧率// 鼠标位置// 日期（年，月，日，时）

原创 WebGL前言——WebGL相关介绍

先热身一下吧，看个问题：如果你找男女朋友，你会选择？A. 帅气（漂亮）、潇洒（性感）、多金B. 踏实、稳重、负责任、有上进心、潜力股选A的同学，你真的忍心坐在宝马车上哭吗？选B的同学，你能忍受柴米油盐、粗茶淡饭的日子吗？所以我们要看看“找男女朋友”的目的究竟是啥？目的不同，你所追求的结果就不一样，你出发点也就不一样。以此类比，计算机也是一样的逻辑，根据你完成工作的内容不同，因此选择使用的工具也不同。因此计算机设计了两种部件，来尽量满足实际需求，即CPU和GPU。...

原创 webgl高级课程 前言

随着WebGPU的兴起以及openGL设计的壁垒势必会对WebGL的地位以及发展方向造成一定的威胁，相信一部分同学已经接触到WebGPU了，对其优点应该也耳熟能详，相比WebGL从设计理念来说先进很多，但我不知道大家是否了解，正因为WebGPU的高效性，能够更加直接、便捷、高效的调取计算机硬件，也会带来相应的缺陷，这就是安全问题。简单介绍下我们的主角WebGL，我想能看到我高级课程的朋友一定是“有备而来”，对于WebGL的诞生以及目前的发展态势也有一定了解，接下里说点不一样的看法，你可能在网上看不到内容。.

原创 基于vue cli3.0插件创建于发布

引言本文主要为后续开发常用的npm包做铺垫。包含以下内容：1.vue3.0cli界面初始化。2.npm包编写。3.npm发布、更新、删除。4.注意事项。5.npm地址。vue3.0cli界面初始化全局安装vue-cli：npm install -g @vue/cli创建一个vue项目：vue create <项目名称>npm包编写1、首先把src的文件名称改成example。【此文件夹目的用于测试展示未打包之前的效果】2、新建packages。【此文件夹用于存储开

原创 Webgl入门笔记——点、线、面

webgl1.0文档中对点、线、面进行了陈列，主要包含以下几种方式。点点的绘制好像只能拿点精灵绘制，下期再讲解线LINES：两点画线LINE_LOOP：给定三个点，将三个点全部圈到一起，最后弄成闭合的形状。LINE_STRIP:给定三个点，将三个点连接到一起。面TRIANGLES：绘制三角形，三个点构成一个完整的三角形面片。TRIANGLES_STRIP:绘制三角形方法如下图所示：TRIANGLES_FAN：指的是扇形画图关键代码：gl.vertexAttribPointer(s

原创 Webgl入门笔记——投影变换

webgl有专门的gl-matrix库方便对三维中矩阵进行变换。下载地址：gl-matrix效果如下：三维效果shader与变量var projectionMatrix; var modelViewMatrix; var vertexShaderSource = "precision lowp float;\n" + "attribute vec3 vertexPos;\n" + "attribu

原创 Webgl入门笔记——shader1

本人是三维可视化方向的研究生，最近因为时间比较多，想深入学习下webgl。案例效果varying 同时在顶点着色器和片元着色器中定义，用于在两者之间传递数据。shader编写var vertexShaderSource = "precision lowp float;\n" + "attribute vec3 vertexPos;\n" + "attribute vec4 inColor;\n" + 定义变量inColor

原创 Webgl入门笔记-画矩形

本人是三维可视化方向的研究生，最近因为时间比较多，想深入学习下webgl，这边推荐下b站的webgl入门教程。webgl入门视频代码分为三个部分：一、shader编写分为fs和vs<script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 v3Position; void main (void){ gl_Position=vec4(v3Position,1.0); }</

原创 sketchup如何给模型配置地理坐标

问题背景：因为sketchup建模完成后，需要通过三维引擎加载到地图上。但是模型加载上去的位置出现很大的偏移。解决方案：

原创 js import ... from “...“和 import {...} from “...“和import * as from “.....“ 的区别

ES6新语法常见有三种形式import … from “…”// A.jsexport default 20// B.jsimport A from './A'上面的代码生效的前提是，只有在A.js中有默认导出的export default语法时才会生效。这种不使用｛｝来引用模块的情况下，import模块的命名是随意的，即如下三种引用命名都是正确的：//B.jsimport A from './A'import B from './A'import Something from './

原创 Axios与fetch和Ajax使用区别

Axios用法引入方法先 cnpm install axios --saveimport axios from “axios”之后在main.js文件中挂在到Vue.prototype.$axios = axios单个用法let params = {A:1,B:2}this.$axios.get(url,params).then((res)=>{}).catch((error)=>{})多个用法function a(){let params = {A:1,B:

原创 ThreeJS获取三维世界坐标（坐标返回数组为null）

three获取世界坐标的方法是通过将二维坐标转换为三维坐标，具体代码如下所示。实现代码 onMouseClick(event) { event.preventDefault(); var vector = new THREE.Vector3(); //三维坐标对象 vector.set( (event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.inner

原创 2020最新前端后端教程（20200421）

如果你觉得有用，就请点个关注哈！下面附上我个人微信公众号以及bilibili站台号，有兴趣的朋友可以加入我的们技术交流群，不定期分享免费的、高质量的编程课程，还有内部机会哦！期待你的加入！bilibili UP主：程序军火库&&程序狙击手...

原创 2020年最新前端视频 （20200425）

如果你觉得有用，就请点个关注哈！下面附上我个人微信公众号以及bilibili站台号，有兴趣的朋友可以加入我的们技术交流群，不定期分享免费的、高质量的编程课程，还有内部机会哦！期待你的加入！bilibili UP主：程序军火库&&程序狙击手...

原创 node如何批量上向数据库中多个表同时插入多条数据

背景简单分析下问题：1、同时向多个表。2、同时插入多条。解决方法1、多个 insert 中间以分号隔开 insert into culturesource_tab (sourceid) values （“1”）; insert into culturesource_tab (sourceid) values （“1”）2、同时并列插入多个values值 insert into culturesource_tab (sourceid) values （'1'）,('2'),('3

原创 node-gdal基本用法

背景利用gdal读取shp数据中每个feature的各个字段，然后存到一个json文件下解决办法 let filePathPhoto = path.resolve('./photo'); let filePathShp = path.resolve('./shp'); let dataset = gdal.open(shppath); let sheets = xlsx.parse(excelpath); let layer = dataset.layers.g

原创 Node.js pos传递参数提示Error: too many parameters at queryparse

背景利用nodejs写的服务，前端向后端传递一个很长的字符串。后端抛出如下错误：Node.js "Error: too many parameters at queryparse"解决办法关键： parameterLimit: 10000,这是由于urlencode默认默认为1000个参数。如果您使用的是大型表单或异常大的JSON提交，则需要通过执行以下操作来增加此限制，具体代码如下所示：var bodyParser = require('body-parser');app.use(body

原创 作息时间表

7:00：起床。英国威斯敏斯特大学的研究人员发现，那些在早上5:22―7:21 分起床的人，其血液中有一种能引起心脏病的物质含量较高，因此，在7:21之后起床对身体健康更加有益。打开台灯。“一醒来，就将灯打开，这样将会重新调整体内的生物钟，调整睡眠和醒来模式。”拉夫堡大学睡眠研究中心教授吉姆·霍恩说。喝一杯水。水是身体内成千上万化学反应得以进行的必需物质。早上喝一杯清水，可以补充晚上的缺水状态。7:30―8:00：在早饭之前刷牙。“在早饭之前刷牙可以防止牙齿的腐蚀，因为刷牙之后，可以在牙齿外面涂上一层含氟

原创 Git保姆级别教程之Git安装

在使用Git前我们需要先安装 Git。Git 目前支持 Linux/Unix、Solaris、Mac和 Windows 平台上运行。Git 各平台安装包下载地址为：http://git-scm.com/downloads在Linux/Unix安装Git 的工作需要调用 curl，zlib，openssl，expat，libiconv 等库的代码，所以需要先安装这些依赖工具。在有 yum 的系统上（比如 Fedora）或者有 apt-get 的系统上（比如 Debian 体系），可以用下面的命令安装：

原创 Git保姆级别教程之Git简介

Git诞生背景林纳斯·本纳第克特·托瓦兹=>>Linux之父“我是一个长相丑陋的孩子，凡是见过我小时候照片的人，都会觉得我的相貌酷似河狸。再想象一下我不修边幅的衣着，以及一个托瓦兹家族祖祖辈辈遗传下来的大鼻子，这样，在你脑海中我的模样就形成了。”虽然创建了Linux，但Linux的壮大是靠全世界热心的志愿者参与的，这么多人在世界各地为Linux编写代码，开始是通过diff文件创建，但后来随着参与者人数越来越多，代码版本管理越来越困难。linux社区尝试使用一些代码管理工具管理，比如常

原创 window版本下postgreSQL备份数据库提示pg_dump版本问题

问题背景阿里云服务器上安装了pg12然后突然有一天数据不能备份了，报错提示如下所示：pg_dump: �������汾: 12.2; pg_dump �汾: 9.6.14pg_dump: ��Ϊ�������汾��ƥ�����ֹ解析：上面错误大多数是乱码，但是恰恰一个关键点提醒了我。其一是pg-dump与两个版本号12.2和9.6.14然后我猜测可能是我服务上同时安装了两个版本的pg造成数据库备份时候选择pg-dump出错了。其实开始也饶了很大一个远路，就是去升级pg-dump，但是网上没有

原创 Windows系统下Node-gdal安装与应用详解

简介：gdal用于读写矢量和栅格数据集，gdal常常使用c，c++做开发，也有部分其他语言扩展如py，node。但由于其他语言的官方例子不多，且存在很多问题，所以入门非常难。简单来说gdal属于一个工具库，用来提供对矢量数据查看、编辑等功能，目前支持多种语言，本文主要讲的是node-gdal在window下面的安装问题，以及简单的gdal用法。安装本人尝试了两种方法，我这边都给大家列出，作为一个参考。（我是第二种方法见效了）方法一首先安装nodejs，然后需要安装node的windows构建工具

原创 ES6复习盲点学习笔记

1、在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。2、考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。3、const的本质const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于...

原创 postgreesql中实现联表删除

cpostgereeSQL错误提示：DELETE FROM table_x WHERE id = 1;ERROR: update or delete on table “table_x” violates foreign key constraint “constraint_name” on table “table_y”DETAIL: Key (id)=(1) is still referenced from table “table_y”.这句话的意思就是你删除一个表中对应的数据后，另外的表

原创 git push失败

Writing objects: 100% (6/6), 1.41 KiB | 1.42 MiB/s, done.Total 6 (delta 5), reused 0 (delta 0)remote: error: unable to create temporary file: No space left on deviceremote: fatal: failed to write objecterror: remote unpack failed: unpack-objects abnorm

原创 postgersql设置默认uuid方法

首先pg要设置uuid的话需要先查看是否具有相关的uuid配置函数，pg中uuid默认函数有如下两个：select uuid_generate_v1();select uuid_generate_v4();接下来就是在创建表的时候设置uuid默认函数，CREATE TABLE customers ( id uuid PRIMARY KEY DEFAULT uuid_generate_v4(),)上段代码的意思就是创建表名为“customers”的数据表，设置默认uuid字段“id”。

原创 PostgreeSQL数据库安装问题

问题：could not connect to server: Connection refused (0x0000274D/10061) Is the server running on host “localhost” (::1) and accepting TCP/IP connections on port 5433? could not connect to server: Connection refused (0x0000274D/10061) Is the server running o

原创 自己做个记录，一张图懂透JS原型链

原创 记前端面试总结

记录下自己为期一个月的面试心得。众所周知，大环境下因为疫情影响，找工作难度比其他年头难一些。尤其随着前端程序员饱和，找到一份理想的工作确实比较难。先介绍下我这段时间面试的一些单位吧。总体来说分为两大块：其一 互联网公司阿里：简历投递大概3天左右，我收到了来自杭州的“手淘斜杠”团队前端技术总监的邀请。“Z是吧，你投递了我们公司前端岗位，什么时候有时间，面试一下”。我：“哎，您好。是的，...

原创 基于axiox的json-serve用法

基于axiox的json-serve用法查数据let path = http://localhost:3000/school;this.$axios.get(path).then((res) => {console.log(res); this.storedata = res.data; this.data = utils.getAllTree(this....

原创 vue前端如何调用百度地图获取地点坐标

这个问题再次记录下，其实难度不是很大，我主要把时间浪费在找相应的接口，试了几个都不好用，其实都是官方之前的接口，现在不支持了。这里我先给大家直接把接口亮出来：百度地图接口具体步骤如下：一、首先是申请keyhttps://blog.csdn.net/rrrrroy_Ha/article/details/89374211大家可以参考这篇文章，内容比较简单，不再过多的赘述。当然直接看官方文档最...

原创 ES6 await学习索引

https://www.cnblogs.com/jeodeng/p/10663869.html（基础用法）https://www.jianshu.com/p/31d53d701171(继发和并发)