自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(27)
  • 收藏
  • 关注

原创 交叉类型 &

交叉类似表示需要满足多个型的条件。交叉类型使用 & 符号。

2024-06-07 15:11:49 105

原创 ts类型声明文件、内置声明文件

ts为js运行时可用的所有标准化内置API都提供了声明文件,这些文件既不需要编译生成,也不需要第三方提供。为后缀的文件就是类型声明文件,主要作用是为js模块提供类型信息支持,从而获得类型提示。1.2 有些包不是用ts编写的,在npm中 安装@types/包名,专门增加声明类型。1.1 第三方包用ts编写的,会自动生成一个 .d.ts文件,进行类型声明。

2024-06-07 15:06:00 205

原创 defineEmits定义类型

可以约束事件名称并给出自动提示,确保不会拼写错误,同时约束传参类型,不会发生参数类型错误。

2024-06-07 11:52:41 399

原创 defineProps定义类型

Props中的可选参数通常除了指定类型之外还需要提供默认值,可以使用。原因:确保给组件传递的props是类型安全的。

2024-06-07 10:13:09 463

原创 可选链操作符和非空断言

** 是指我们开发者明确的知道当前的值一定不是null或者undefined,让ts通过类型校验。在使用非空断言要格外小心,它没有实际的js判断逻辑,只是通过了ts的类型校验,容易直接把空值出现在实际的执行环境里。当对象的属性可能是null或者undefined时,称之为“空值”,尝试访问空值身上的属性或方法会发生类型错误。是一种访问嵌套对象属性的安全的方式,可选链前面的值为undefined或者为null时,就会停止运算。非空断言:作用是用来设置某个属性(可能为空,但是绝对不是空)的值。

2024-06-07 09:55:55 176

原创 组件引用定义类型注解

子组件通过defineExpose将外部需要调用的属性或方法暴露出去。

2024-06-07 09:15:24 147

原创 ts语法知识

作用:泛型的特点就是灵活不确定,有些时候泛型函数的内部需要访问一些特定类型的数据才有的属性,此时会有类型错误,需要通过泛型约束解决。在定义接口/函数等类型的时候 ,不预先指定具体的类型,而在使用的时候在指定类型的一种特性,使用泛型可以复用类型并且让类型更加灵活。在接函数名称后面使用即可声明一个泛型参数,整个函数中(参数、返回值、函数体)的变量都可以使用该参数的类型。在接口类型的名称后面使用即可声明一个泛型参数,接口里的其他成员都能使用该参数的类型。

2024-06-06 14:41:45 238

原创 TypeScript基础类型

【代码】TypeScript基础类型。

2024-05-27 14:16:50 151

原创 算法原理篇——Cohen-Sutherland

Cohen-Sutherland 算法基本原理简述:直线剪取算法,该算法通过初始测试来减少要计算的交点数目从而加快线段剪取算法的速度。做法:每条线段的端点都赋以四位二进制代码,称为区域码(region code),用于剪取端点相对于剪取矩形边界的位置。将矩形屏幕向外延伸,划分为9个区域,对9个区域进行编码;如下图所示:区域编码讲解:编码规则:上下右左,对应四位编码。示例:1001,第一位:1,因为该区域在上方所以第一位为1;第二位, 0,因为该区域不在下方第二位所以为0;第三位,

2022-03-11 00:49:48 1731

原创 图形学-剪取

剪取一、点的剪取二、直线的裁取一、点的剪取如下图所示:在一个矩形当中,确定最大坐标(Xmax,Ymax)与最小点坐标(Xmin,Ymin);此时判断点P(x,y)是否在区域内,需满足如下两个条件:Xmin ≤ x ≤ Xmax 且 Ymin ≤ y ≤ Ymax ;则p在视区内,否则在窗口外二、直线的裁取直线与窗口的关系(凸多边型的条件下,异形屏除外):1.整个线段全在窗口内;2.整个线段全在窗口外;3.线段部分在窗口内,部分在窗口外;前提条件:凸多边型的条件下,异形屏除外任何一

2022-03-10 22:50:31 239

原创 图元——绘画方式

作者:桑榆QQ:934440653绘画方式(1)三角形 gl.TRIANGLES独立三角形必须为每个三角形定义三个顶点,一个三角形的顶点不会被另一个三角形重用。gl.TRIANGLES三角形数量 = count / 3;(2)三角形带 gl.TRIANGLE_STRIP三角形带三角形带的第一个三角形,由顶点(v0,v1,v2);它的下一个顶点为v3,则下一个三角形则由该点与它前面的两个顶点组成第二个三角形,即为; (v2 ,v1,v3)。gl.TRIANGLE_STR

2021-08-27 17:57:26 480

原创 图形硬件介绍—图形绘制流程

作者:桑榆QQ:934440653图形绘制流程当图形数据通过整WebGL流水线后,GPU把结果写入到WebGL绘制缓存(drawing buffer)的内存中。也可以把绘制缓存看成WebGL的帧缓存。它与帧缓存一样,也具有一个颜色缓存、Z-缓存和模版缓存。绘制缓存中的内容在传送到物理帧缓存之前,需要与HTML页面中的其他内容进行结合;物理缓存中的实际结果直接显示在屏幕上。1. 顶点着色器写入顶点着色器的varing变量的值是对片段进行线性插值得到的。2. 图元装配把已经着色的顶点装配成三

2021-08-26 16:31:01 340

原创 图形硬件介绍——GPU/帧缓存

图形硬件介绍一、GPU二、GPU2.1 帧缓存2.1.1 颜色缓存 (color buffer)2.1.2 Z-缓存(Z-buffer)2.1.3 模版缓存 (stencil buffer)一、GPU应用程序(无论是web端的webgl程序,或者是其他应用程序)运行在cpu上,使用主存我们称为RAM;为了处理3D图形,应用程序不断的调用底层程序,通过总线把图形数据发送到GPU进行处理。二、GPU2.1 帧缓存作为一个储存器,保存了最终显示在屏幕上图像的全部信息。帧缓存中的alpha通道不常用,

2021-08-26 11:58:14 2117

原创 各缓冲区简介

深度测试1.当开启深度测试后,在深度缓冲区内,每个片元会比较其中已存在的片元深度,如果深度大于已存在的则剔除(舍弃),如果小于已存在的则显示;当通过深度测试的片元,则对该片元进行深度写入,如果开启深度写入,则该片元更新写入到缓存区内,否则不写入,深度测试过程结束。...

2021-08-25 13:55:02 439

原创 二维图形——窗口与视区

作者:桑榆QQ:934440653在三维空间中,范围是正无穷到负无穷。我们不会把所有的东西都显示出来,我们只需要将我们需要显示的展示出来就可以,因此诞生了窗口和视区。窗口与视区的形状必须相似,否则窗口中的内容无法完整显示出来,具有相同的长宽比例。1.窗口在世界坐标系中无限的区域当中,我们开一个窗口,这个窗口是有一定的区域的,窗口的形状可以是矩形、圆型、椭圆等任意形状。窗口内的内容最后都要在显示器中显示。2.视区定义在设备坐标系当中,窗口的内容最终都是通过视区显示给用户。...

2021-02-22 18:07:13 2093

原创 二维图形——坐标体系

坐标体系测试

2021-02-22 17:32:46 407

原创 webpack代码混淆

作者:桑榆QQ:934440653有问题,评论留言,或qq联系安装npm install --save-dev webpack-obfuscator属性{ compact: true,//压缩,无换行 controlFlowFlattening: false,//是否启用控制流扁平化(降低1.5倍的运行速度) controlFlowFlatteningThre...

2019-12-17 17:51:08 4144 1

原创 GLSL 内建函数

OpenGL ES着色语言为标量和向量操作定义了一套内建便利函数。有些内建函数可以用在多个类型的着色器中,有些是针对固定硬件的,所以这部分只能用在某个特定的着色器上。 内建函数基本上可以分为一下三类:(1)它们使用一些简便的方式提供必要的硬件功能,如材质贴图。这些函数单独通过着色器是无法模拟出来的。(2)它们展示了一些可以常简单的写入的繁琐操作(clamp, mix等),但是这些操作非...

2019-11-08 16:56:47 326

原创 向量计算

webGL法向量的计算,使用数学中的向量积计算;

2019-10-28 16:23:48 551

原创 模型的旋转、缩放、平移

作者:桑榆QQ:934440653有问题,评论留言,或qq联系旋转1.模型绕本地坐标x轴旋转π/2,每次执行都是相对上一次的角度进行旋转变化(累加);注:本地坐标介绍本地坐标介绍mesh.rotateX(Math.PI/2);//绕x轴旋转π/2模型绕(0,0,1)向量表示的轴旋转π/4var axis = new THREE.Vector3(0,0,1);//向量axis...

2019-10-25 10:56:34 4520

原创 粒子系统

案例效果主要代码讲解(1)看看源码中:new THREE.Points(geometry,material);new THREE.PointsMaterial({color:0x00FF00,size:3})的使用(2)这里要注意的只要一点,就是将模型的顶点数据与粒子系统的材质融合即可。var fbxLoader = new THREE.FBXLoader(); ...

2019-10-24 16:43:57 3409

原创 鼠标拾取(光线拾取)

1、BufferGeometry与Geometry的区别BufferGeometry和Geometry可以实现同样的功能,在功能上并没有很大的区别;主要的区别在对象的数据结构不同。BufferGeometry高效的秘诀:奖数据放在一个连续的内存空间中,和geometry一样,它存储了顶点,面索引,法线,颜色,纹理坐标和自定义的一些数据。连续的存储空间能够节省传递数据到CPU的时间。通过以下代...

2019-10-18 14:24:20 5651

原创 四边形的顶点着色

作者:桑榆QQ:934440653有问题,评论留言,或qq联系案例效果四边形的只给顶点着色,渐变效果是计算机自己的插值运算产生的效果。vertices,数组中的四个顶点,数组下标索引与案例效果图的标注一致。四边形由两个三角面组成,分别为索引0,1,2和索引2,3,4。下图为四边形其中一个面,face[0]的a,b,c索引对应着vertices的下标。vertexColors,...

2019-10-15 23:47:21 6746

原创 简述BufferGeometry

#三维世界的构成

2019-10-13 18:28:12 4942 9

原创 ThreeJs基础常识

作者:桑榆QQ:934440653有问题,评论留言,或qq联系前两章的尚未整理,后续整理完成,会补上。第一章 场景待更新…第二章 相机待更新…第三章 光源选择“license server” 输入:http://idea.imsxm.com/一、光源的种类** 名称 **** 描述 ...

2019-10-13 14:28:24 8235

原创 Webpack自动化构建工具

Webpack第一步 .安装node.js1.安装淘宝镜像(可选)npm install -g cnpm --registry=https://registry.npm.taobao.org2.检查node-v安装教程:https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html3.检查npm-v第二步 搭建webp...

2019-10-13 14:03:04 5719

原创 WebGL坐标系介绍

@TOC初识webGL欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设计...

2019-10-13 00:49:06 8854

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除