- 博客(27)
- 收藏
- 关注
原创 ts类型声明文件、内置声明文件
ts为js运行时可用的所有标准化内置API都提供了声明文件,这些文件既不需要编译生成,也不需要第三方提供。为后缀的文件就是类型声明文件,主要作用是为js模块提供类型信息支持,从而获得类型提示。1.2 有些包不是用ts编写的,在npm中 安装@types/包名,专门增加声明类型。1.1 第三方包用ts编写的,会自动生成一个 .d.ts文件,进行类型声明。
2024-06-07 15:06:00 216
原创 defineProps定义类型
Props中的可选参数通常除了指定类型之外还需要提供默认值,可以使用。原因:确保给组件传递的props是类型安全的。
2024-06-07 10:13:09 559
原创 可选链操作符和非空断言
** 是指我们开发者明确的知道当前的值一定不是null或者undefined,让ts通过类型校验。在使用非空断言要格外小心,它没有实际的js判断逻辑,只是通过了ts的类型校验,容易直接把空值出现在实际的执行环境里。当对象的属性可能是null或者undefined时,称之为“空值”,尝试访问空值身上的属性或方法会发生类型错误。是一种访问嵌套对象属性的安全的方式,可选链前面的值为undefined或者为null时,就会停止运算。非空断言:作用是用来设置某个属性(可能为空,但是绝对不是空)的值。
2024-06-07 09:55:55 177
原创 ts语法知识
作用:泛型的特点就是灵活不确定,有些时候泛型函数的内部需要访问一些特定类型的数据才有的属性,此时会有类型错误,需要通过泛型约束解决。在定义接口/函数等类型的时候 ,不预先指定具体的类型,而在使用的时候在指定类型的一种特性,使用泛型可以复用类型并且让类型更加灵活。在接函数名称后面使用即可声明一个泛型参数,整个函数中(参数、返回值、函数体)的变量都可以使用该参数的类型。在接口类型的名称后面使用即可声明一个泛型参数,接口里的其他成员都能使用该参数的类型。
2024-06-06 14:41:45 242
原创 算法原理篇——Cohen-Sutherland
Cohen-Sutherland 算法基本原理简述:直线剪取算法,该算法通过初始测试来减少要计算的交点数目从而加快线段剪取算法的速度。做法:每条线段的端点都赋以四位二进制代码,称为区域码(region code),用于剪取端点相对于剪取矩形边界的位置。将矩形屏幕向外延伸,划分为9个区域,对9个区域进行编码;如下图所示:区域编码讲解:编码规则:上下右左,对应四位编码。示例:1001,第一位:1,因为该区域在上方所以第一位为1;第二位, 0,因为该区域不在下方第二位所以为0;第三位,
2022-03-11 00:49:48 1746
原创 图形学-剪取
剪取一、点的剪取二、直线的裁取一、点的剪取如下图所示:在一个矩形当中,确定最大坐标(Xmax,Ymax)与最小点坐标(Xmin,Ymin);此时判断点P(x,y)是否在区域内,需满足如下两个条件:Xmin ≤ x ≤ Xmax 且 Ymin ≤ y ≤ Ymax ;则p在视区内,否则在窗口外二、直线的裁取直线与窗口的关系(凸多边型的条件下,异形屏除外):1.整个线段全在窗口内;2.整个线段全在窗口外;3.线段部分在窗口内,部分在窗口外;前提条件:凸多边型的条件下,异形屏除外任何一
2022-03-10 22:50:31 241
原创 图元——绘画方式
作者:桑榆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 487
原创 图形硬件介绍—图形绘制流程
作者:桑榆QQ:934440653图形绘制流程当图形数据通过整WebGL流水线后,GPU把结果写入到WebGL绘制缓存(drawing buffer)的内存中。也可以把绘制缓存看成WebGL的帧缓存。它与帧缓存一样,也具有一个颜色缓存、Z-缓存和模版缓存。绘制缓存中的内容在传送到物理帧缓存之前,需要与HTML页面中的其他内容进行结合;物理缓存中的实际结果直接显示在屏幕上。1. 顶点着色器写入顶点着色器的varing变量的值是对片段进行线性插值得到的。2. 图元装配把已经着色的顶点装配成三
2021-08-26 16:31:01 347
原创 图形硬件介绍——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 2153
原创 各缓冲区简介
深度测试1.当开启深度测试后,在深度缓冲区内,每个片元会比较其中已存在的片元深度,如果深度大于已存在的则剔除(舍弃),如果小于已存在的则显示;当通过深度测试的片元,则对该片元进行深度写入,如果开启深度写入,则该片元更新写入到缓存区内,否则不写入,深度测试过程结束。...
2021-08-25 13:55:02 441
原创 二维图形——窗口与视区
作者:桑榆QQ:934440653在三维空间中,范围是正无穷到负无穷。我们不会把所有的东西都显示出来,我们只需要将我们需要显示的展示出来就可以,因此诞生了窗口和视区。窗口与视区的形状必须相似,否则窗口中的内容无法完整显示出来,具有相同的长宽比例。1.窗口在世界坐标系中无限的区域当中,我们开一个窗口,这个窗口是有一定的区域的,窗口的形状可以是矩形、圆型、椭圆等任意形状。窗口内的内容最后都要在显示器中显示。2.视区定义在设备坐标系当中,窗口的内容最终都是通过视区显示给用户。...
2021-02-22 18:07:13 2111
原创 webpack代码混淆
作者:桑榆QQ:934440653有问题,评论留言,或qq联系安装npm install --save-dev webpack-obfuscator属性{ compact: true,//压缩,无换行 controlFlowFlattening: false,//是否启用控制流扁平化(降低1.5倍的运行速度) controlFlowFlatteningThre...
2019-12-17 17:51:08 4155 1
原创 GLSL 内建函数
OpenGL ES着色语言为标量和向量操作定义了一套内建便利函数。有些内建函数可以用在多个类型的着色器中,有些是针对固定硬件的,所以这部分只能用在某个特定的着色器上。 内建函数基本上可以分为一下三类:(1)它们使用一些简便的方式提供必要的硬件功能,如材质贴图。这些函数单独通过着色器是无法模拟出来的。(2)它们展示了一些可以常简单的写入的繁琐操作(clamp, mix等),但是这些操作非...
2019-11-08 16:56:47 328
原创 模型的旋转、缩放、平移
作者:桑榆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 4524
原创 粒子系统
案例效果主要代码讲解(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 3412
原创 鼠标拾取(光线拾取)
1、BufferGeometry与Geometry的区别BufferGeometry和Geometry可以实现同样的功能,在功能上并没有很大的区别;主要的区别在对象的数据结构不同。BufferGeometry高效的秘诀:奖数据放在一个连续的内存空间中,和geometry一样,它存储了顶点,面索引,法线,颜色,纹理坐标和自定义的一些数据。连续的存储空间能够节省传递数据到CPU的时间。通过以下代...
2019-10-18 14:24:20 5653
原创 四边形的顶点着色
作者:桑榆QQ:934440653有问题,评论留言,或qq联系案例效果四边形的只给顶点着色,渐变效果是计算机自己的插值运算产生的效果。vertices,数组中的四个顶点,数组下标索引与案例效果图的标注一致。四边形由两个三角面组成,分别为索引0,1,2和索引2,3,4。下图为四边形其中一个面,face[0]的a,b,c索引对应着vertices的下标。vertexColors,...
2019-10-15 23:47:21 6748
原创 ThreeJs基础常识
作者:桑榆QQ:934440653有问题,评论留言,或qq联系前两章的尚未整理,后续整理完成,会补上。第一章 场景待更新…第二章 相机待更新…第三章 光源选择“license server” 输入:http://idea.imsxm.com/一、光源的种类** 名称 **** 描述 ...
2019-10-13 14:28:24 8248
原创 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 5721
原创 WebGL坐标系介绍
@TOC初识webGL欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设计...
2019-10-13 00:49:06 8877
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人