- 博客(31)
- 收藏
- 关注
RSS订阅原创 WebGL 中的灯光设置
在 3D 空间中模拟现实世界的灯光的具体原理和细节绝非本篇文章能够描述清楚的，但是对灯光模型有一定的了解对我们的学习还是很有帮助的。以我们的需要来看，我们会简化光照模型，只考虑简单的方向光和环境光，不会考虑任何镜面反射和点光源。这种光的特点可以理解为好像是从一个很遥远的地方照射过来的，然后光线中的每一个光子与其它光子都是平行运动的。接着，我们会更新顶点着色器，考虑到环境光，再考虑到方向光（方向光的作用会因为光线方向与面的夹角关系而不同），计算每一个顶点的颜色。这种光在我们的现实生活中是最常被用到的。
2022-11-14 21:15:00
569
原创 在 WebGL 中使用纹理贴图 (texture)
由美术工作人员生成的纹理最终在用来渲染前都应该使用放大或缩小的方式把它生成为 2 的幂纹理，其实事实上来说，在创作纹理之初就应该直接使用大小是 2 的幂的宽和高。纹理的每一边都应该是像 1，2，4，8，16，32，64，128，256，512，1024 或 2048 这样的值。这样虽然已经可以使用非 2 的幂纹理了，但是你将无法使用多级渐进纹理，纹理坐标包装，纹理坐标重复，而且无法控制设备如何处理你的纹理。现在我们只使用一张单一的纹理贴到立方体的 6 个面上，但是同样的方法可以用来加载任意数量的纹理贴图。
2022-11-14 20:00:00
1252
原创 cnpm的版本锁定问题的解决方案
在这种情况下，你再次install时安装的包的版本可能与前次不一样，具体的，你可以到package-lock.json中查看实际的包版本。后来B克隆了A的项目，在安装依赖时packageA的最新版本是2.2.0，那么根据语义npm会去安装2.2.0的版本，但2.2.0版本的API可能发生了改动，导致代码出现bug。首先要说的是，很多同学可能习惯使用cnpm，因为安装速度确实比npm快不少，但在版本依赖锁定方案中，最基础的一条就是：不要使用cnpm，因为cnpm，是不支持依赖版本锁定的。
2022-11-14 19:15:00
2287
原创 依赖版本锁定方案
但如果需要更新当前某个依赖的版本号并锁定到package-lock.josn中，需要手动修改package.json中对应的版本或者指定依赖的版本号安装：npm i xxx@x.x.x。这是最直接的，可以在package.json中写入固定版本号，也就是去掉版本号前面的~或者^，或者安装的时候加上–save-exact参数。npm ci必须存在package-lock.json且依赖版本和package.json匹配时才会安装依赖，否则报错，如此可强制开发者在持续集成前先在本地解决依赖版本的一致性问题。
2022-11-14 14:58:22
2678
原创 node报错./node_modules/_history@4.10.1@history/esm/history.js Module not found: Can‘t resolve ‘@babel/
新拉取的项目在npm run的时候遇到了以下node报错报错的意思是没有找到4.10.1版本的history包没有找到babel依赖，所以无法运行。于是我们可以运行一下下方这个指令，来确认一下当前项目下history的版本：运行结果history包的版本确实是4.10.1那么为什么会出现找不到babel依赖的问题呢？我去GitHub上翻看了一下4.10.0的history包依赖版本，发现他们的babel依赖已经升级成7了，而我们项目使用的babel依赖还是6。最后查了一下，4.7.2的hist
2022-07-05 01:42:35
591
原创 git仓库代码提交暂存区后precommit失败导致代码丢失的找回办法
暂存区代码 find .git/objects -type f | xargs ls -lt | sed 50q-r--r--r-- 1 11535 197121 145717 Apr 18 14:28 .git/objects/pack/pack-310de8abea7cf77e922f476d08af276976e90141.pack-r--r--r-- 1 11535 197121 199 Apr 18 10:44 .git/objects/27/932d820ca56ea3a18db7bb
2022-07-05 00:53:39
1892
2
原创 WebGL 中绘制文本
“在 WebGL 中如何绘制文本”是一个我们常见的问题。那么第一件事就是我们要问自己绘制文本的目的何在。现在有一个浏览器，浏览器用来显示文本。所以你的第一个答案应该是如何使用 HTML 来显示文本。让我们从最简单的例子开始：你只是想在你的 WebGL 上绘制一些文本。我们可以称之为一个文本覆盖。基本上这是停留在同一个位置的文本。简单的方法是构造一些 HTML 元素，使用 CSS 使它们重叠。例如：先构造一个容器，把画布和一些 HTML 元素重叠放置在容器内部。<div class="conta
2022-03-07 21:34:25
650
原创 WebGL的摄像机
在过去的章节里我们将 F 移动到截锥的前面，因为 makePerspective 函数从原点（0，0，0）度量它，并且截锥的对象从 -zNear 到 -zFar 都在它前面。视点前面移动的物体似乎没有正确的方式去做吗？在现实世界中，我们可以通过移动摄像机来进行拍照。但在我们最后一篇文章中，我们提出了一个投影，这就需要物体在 Z 轴的原点前面。为了实现它，我们想做的是把摄像机移动到原点，然后把所有的其它物体都移动恰当的距离，所以它相对于摄像机仍然是在同一个地方。我们需要有效地将现实中的物体移动到摄
2022-03-07 21:30:44
642
原创 WebGL 3D的正交和透视
WebGL 3D的正交和透视正交透视正交在WebGL的二维中，一般有二维点（x，y），我们乘以一个 3x3 的矩阵。因此，三维需要三维点（x，y，z）和一个 4x4 矩阵。我们可以通过二维转变为三维，需要做的第一步就是改变顶点着色来处理三维，这里是旧的着色。<script id="2d-vertex-shader" type="x-shader/x-vertex">attribute vec2 a_position;uniform mat3 u_matrix;void main
2022-01-04 00:39:18
463
原创 WebGL实现三维图形
WebGL实现三维图形的步骤有四，这里我们以生成立方体为例定义立方体顶点位置定义顶点颜色定义元素（三角形）数组渲染立方体定义立方体顶点位置首先，更新 initBuffers() 函数代码创建顶点位置数据缓存。var vertices = [ // Front face -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, // Back face -1.0, -1.0
2021-11-08 22:45:00
1228
原创 WebGL 图像处理技术
为了在 WebGL 中绘制图像，我们需要使用纹理。类似于当渲染代替像素时，WebGL 会需要操作投影矩阵的坐标，WebGL 读取纹理时需要获取纹理坐标。纹理坐标范围是从 0.0 到 1.0。因为我们仅需要绘制由两个三角形组成的矩形，我们需要告诉 WebGL 在矩阵中纹理对应的那个点。我们可以使用特殊的被称为多变变量，会将这些信息从顶点着色器传递到片段着色器。WebGL 将会插入这些值，这些值会在顶点着色器中，当对每个像素绘制时均会调用片段着色器。我们需要在纹理坐标传递过程中添加更多的信息，然后将他们传递
2021-10-18 23:00:00
409
原创 2021-08-31 清除img标签中，src为空时浏览器自带的图片边框
清除img标签中，src为空时浏览器自带的图片边框当img标签为空或为null时，图片四周将会出现浏览器自带的边框，可以通过css清除相应的边框：img[src=''],img:not([src]) { opacity: 0;}其中img[ src=’ ’ ]是css选择器，选择了当图片src为’ '的情况；img:not([src])为css的not选择器，指选择了除含有src以外的所有img标签；当遇上以上两种情况时，img标签设为透明，从而达到消除边框的目的注：当src中含有内
2021-08-31 18:25:19
2068
原创 2021-08-01 WebGL GLSL
WebGL入门GLSL什么是GLSLGLSL的使用什么是GLSLGLSL是图像库着色器语言的简称，语言着色器就是被写在这里。它具有一些 JavaScript 中不存在的独特的特性，用于实现一些逻辑来渲染图像。GLSL的使用它可以创建类似于 vec2，vec3 和 vec4 分别表示2、3、4个值。类似的，mat2，mat3 和 mat4 来表示 2x2,3x3,4x4 的矩阵。可以实现 vec 来乘以一个标量。vec4 a = vec4(1, 2, 3, 4);vec4 b = a * 2.0;
2021-08-02 14:17:25
282
原创 css 单行多行文本超出宽度显示省略号 多行文本的省略号显示失效
css 单行多行文本超出宽度显示省略号 多行文本的省略号显示失效文本在超出宽度时显示省略号的css属性设置单行文本.text { width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}多行文本.text { width: 100px; height: 60px; line-height: 20px; /*设置行高和总体文本高度防止文字在显示时被截取了
2021-06-30 15:41:05
466
原创 WebGL 着色器
WebGL着色器在上一篇内容中，我们主要讲述了WebGL最基本的一些概念和实现路径。而上一篇中我们也提到了WebGL中非常重要的一个概念，WebGL着色器。正如前文讲到的，在WebGL中的每次绘制，我们都会需要两个着色器，分别是顶点着色器和片段着色器。每个着色器都是一个函数。顶点着色器和片段着色器都是链接在程序中的。一个典型的 WebGL 程序都会包含很多这样的着色器程序。顶点着色器顶点着色器的任务就是产生投影矩阵的坐标。其形式如下：void main() { gl_Position = d
2021-05-19 17:03:06
370
原创 WebGL基本原理
WebGL基本原理WebGL 的出现使得在浏览器上面实现显示 3D 图像成为可能，WebGL 本质上是基于光栅化的 API ,而不是基于 3D 的 API。也就是说，WebGL 只关注两个方面，即投影矩阵的坐标和投影矩阵的颜色。使用 WebGL 程序的任务就是实现具有投影矩阵坐标和颜色的 WebGL 对象即可。其中，顶点着色器可以提供投影矩阵的坐标，片段着色器可以提供投影矩阵的颜色。无论要实现的图形尺寸有多大，其投影矩阵的坐标的范围始终是从 -1 到 1 。// Get A WebGL conte
2021-05-19 16:57:24
773
原创 AntDesign中ProTable的运用
AntDesign中ProTable的运用ProTable的基础运用可见：Ant Design Pro Component官方文档在此基础上，Ant Design中的Table属性有一部分在ProTable中也是可以复用的例如column下的一系列api可以直接进行复用形如：const columns = [ { title: '序号', dataIndex: 'index', valueType: 'index', align: 'cen
2021-05-19 15:27:39
1992
原创 在Taro3.x中引用vant组件
在taro中，直接在usingComponents引入组件会报错，因为taro在打包复制的时候会忽略vant组件中wxs结尾的文件在/src/components下新建文件夹vant在vant的git官网上下载vant的代码包，或者直接运行下列命令行git clone https://github.com/youzan/vant-weapp.git在使用组件的页面config中加入usingComponents属性homepage.config = { usingComponents: {
2021-01-19 14:17:36
2535
原创 react和原生js如何禁用a标签的href阻止链接跳转
在a标签的href有链接地址不为空的情况下，如何阻止a标签的跳转？原生js的情况reactjs的情况首先，a标签属性的执行顺序是先执行onClick属性，然后再执行href，所以我们可以在onClick中对跳转进行处理原生js的情况<a href="http://xxxx.xx" onclick="return false;">reactjs的情况在react中，return false就不适用了，但我们可以通过preventDefault来实现阻止跳转<a href="ht
2021-01-19 13:09:50
3996
原创 reactjs前端实现文件新窗口下载
前端实现文件新窗口下载，防止文件被浏览器打开前情方法一：使用HTML的a标签前情如果直接使用HTML的a标签，并且将下载链接放在a标签的href中，会导致原浏览器窗口直接被下载链接覆盖方法一：使用HTML的a标签在href放入下载链接，在<a hre>...
2021-01-19 11:54:14
1929
原创 Taro微信小程序字体引入
Taro微信小程序要引入新的字体可以全局引入，在app.jsx的componentDidMount中使用Taro.loadFontFace注意：source的下载地址只能使用经过备份的域名运行时微信小程序会报错，提示 Faild to load font可以忽略，好像属于还没有修复的bugTaro.loadFontFace({ global: true, family: 'Alibaba Puhui', //Css中引用使用的字体名 source: 'url(
2021-01-18 16:27:56
1988
1
原创 Taro微信小程序踩坑实录-多行文本自动换行、自定义导航栏引入
Taro -webkit-box-orient 需要写在style中，css中会被忽略<View className=‘articleTitle’ style={{"-webkit-box-orient": “vertical”}}>{item.title}{item.title}
2021-01-18 15:47:50
2641
2
原创 常用Hooks应用
ReactuseState: 返回state，更新state（函数式更新）const [state, setState] = useState(initialState);useEffect: 默认情况下，useEffect将在每轮的渲染结束之后运行。useReducer: 接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。当state逻辑比较复杂且包含多个子值，或者下一个state依
2020-09-22 11:36:24
625
原创 携带的token访问数据获取
由于页面跳转需要取携带的token访问数据。写一个公共方法export function getUrlToken(name, str) { const reg = new RegExp(`(^|&)${ name}=([^&]*)(&|$)`); const r = str.substr(1).match(reg); if (r != null) return decodeURIComponent(r[2]); return null;
2020-07-28 14:16:44
1799
原创 AZ900 - Azure基础知识学习笔记 - Azure体系结构和服务保证
Azure体系结构和服务保证Azure数据中心和区域区域 / Region地域 / Geographies可用性区域 / Availability Zones区域对 / Region PairsAzure服务保证Azure服务级别协议(SLA)性能目标 / Performance Targets运行时间和连接性保证 / Uptime and Connectivity Guarantees服务信用额度 / Service Credits跨服务组合SLA / Compose SLAs Across Servic
2020-07-20 13:37:17
3095
原创 net::ERR_FILE_NOT_FOUND 报错
net::ERR_FILE_NOT_FOUND错误原因：引入jquery的时候使用了相对路径 “/”<script src="/node_modules/jquery/dist/jquery.js"></script>修改为绝对路径<script src="./node_modules/jquery/dist/jquery.js"></script>...
2020-07-17 17:14:46
7344
原创 AZ900 - Azure基础知识学习笔记 - 核心云服务
核心云服务Azure服务概览计算 / Compute网络 / Networking存储 / Storage移动 / Mobile数据库 / DatabasesWeb物联网 / Internet of Things大数据 / Big Data人工智能 / Artificial IntelligenceDevOpsAzure服务概览计算 / Compute网络 / Networking存储 / Storage移动 / MobileAzure 使开发人员能够快速、轻松地为 iOS、And
2020-07-16 10:44:59
1245
原创 AZ900 - Azure基础知识学习笔记 - 创建Azure账户
创建Azure账户Azure 计费Azure订阅额外的Azure订阅账单结构概述Azure支持选项Azure免费支持资源Azure支持计划Azure社区支持Azure 计费Azure订阅注册时将默认创建Azure订阅，Azure订阅是用于Azure中预置资源的逻辑容器。额外的Azure订阅环境：在管理资源时，可以选择创建多个订阅，以便为开发和测试设置单独的环境、实现安全性或为合规性而隔离数据。组织结构：可以创建多个订阅以反映不同的组织结构。计费：还可能由于计费管理目的而需要创建额外的订阅。
2020-07-15 11:45:29
958
原创 AZ900 - Azure基础知识学习笔记 - 云概念
云概念 - 云计算的原则 云计算核心概念Cloud computing services / 云计算服务VM / 虚拟机Containers / 容器Serverless computing / 无服务器计算符合性条款和要求合规性产品资本支出（CapEx）和运营支出（OpEx）CapEx (Capital Expenditure)OpEx (Operational Expenditure)云部署模型 / Cloud deployment models公有云 / Pbulic cloud私有云 / Priva
2020-07-15 11:21:54
3417
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人